从不看回复 發表於 2021-11-7 16:52:00

JavaScript 是什么

<p><strong><span style="font-size: 18pt">JavaScript</span></strong></p>
<p><span style="font-size: 14pt"><span style="font-family: 宋体, &quot;Songti SC&quot;">1.JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)。</span></span></p>
<p><span style="font-size: 14pt; font-family: 宋体, &quot;Songti SC&quot;">2.脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行。</span></p>
<p><span style="font-size: 14pt; font-family: 宋体, &quot;Songti SC&quot;">3.现在也可以基于 Node.js 技术进行服务器端编程。</span></p>
<p>&nbsp;</p>
<p><strong><span style="font-size: 18pt">JavaScript的作用</span></strong></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">表单动态校验(密码强度检测) ( JS 产生最初的目的 )</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页特效</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">服务端开发(Node.js)</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">桌面程序(Electron)</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">App(Cordova) </span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">控制硬件-物联网(Ruff)</span></p>
</li>
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">游戏开发(cocos2d-js)</span></p>
</li>
</ul>
<p>&nbsp;</p>
<h3 class="md-end-block md-heading"><span class="md-plain" style="font-size: 18pt">HTML/CSS/JS 的关系</span></h3>
<p><span style="font-size: 15px; font-family: 宋体, &quot;Songti SC&quot;">对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript这个植物人就可以对外界刺激做出反应,可以思考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。</span></p>
<p class="md-end-block md-p"><span class="md-pair-s " style="font-size: 18pt"><strong>浏览器分成两部分:渲染引擎和 JS 引擎</strong></span></p>
<p class="md-end-block md-p">&nbsp;</p>
<p class="md-end-block md-p"><span style="font-family: 宋体, &quot;Songti SC&quot;; font-size: 15px">&nbsp;<span class="cm-tab">浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。</span></span></p>
<p class="md-end-block md-p"><span style="font-size: 18pt; font-family: 宋体, &quot;Songti SC&quot;"><strong><span class="md-pair-s md-expand">DOM——文档对象模型</span></strong></span></p>
<p class="md-end-block md-p"><span style="font-size: 15px"><span class="cm-tab">&nbsp; &nbsp;&nbsp;<span class="cm-tab"> 文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。</span></span></span></p>
<p class="md-end-block md-p"><strong><span class="md-pair-s " style="font-size: 18pt; font-family: 宋体, &quot;Songti SC&quot;">BOM——浏览器对象模型</span></strong><span style="font-size: 15px"><span class="cm-tab"><strong><span style="font-family: 宋体, &quot;Songti SC&quot;; font-size: 18pt">&nbsp;</span></strong> &nbsp;&nbsp;</span></span></p>
<p class="md-end-block md-p"><span style="font-size: 15px"><span class="cm-tab"><span class="cm-tab"> 浏览器对象模型(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。</span></span></span></p>
<h3 class="md-end-block md-heading md-focus"><span class="md-plain">JS 用法</span></h3>
<p><span class="md-plain" style="font-family: 宋体, &quot;Songti SC&quot;">JS 有3种书写位置,分别为行内、内嵌和外部。</span></p>
<ol class="ol-list" start="">
<li class="md-list-item md-focus-container"><span style="font-family: 宋体, &quot;Songti SC&quot;"><span style="font-family: 宋体, &quot;Songti SC&quot;"></span></span>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand" style="font-size: 16px">行内式</span></p>
<span style="font-family: 宋体, &quot;Songti SC&quot;"><span style="font-family: 宋体, &quot;Songti SC&quot;"></span></span>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span class="cm-tag cm-bracket">&lt;<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"button" <span class="cm-attribute">value=<span class="cm-string">"点我试试" <span class="cm-attribute">onclick=<span class="cm-string">"alert('Hello World')" <span class="cm-tag cm-bracket">/&gt;</span></span></span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">可读性差, 在html中编写JS大量代码时,不方便阅读;</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">引号易错,引号多层嵌套匹配时,非常容易弄混;</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">特殊情况下使用</span></p>
</li>
</ul>
</li>
<li class="md-list-item"><span style="font-family: 宋体, &quot;Songti SC&quot;"><span style="font-family: 宋体, &quot;Songti SC&quot;"></span></span>
<p class="md-end-block md-p"><span class="md-plain" style="font-size: 16px">内嵌式</span></p>
<span style="font-family: 宋体, &quot;Songti SC&quot;"><span style="font-family: 宋体, &quot;Songti SC&quot;"></span></span>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span class="cm-tag cm-bracket">&lt;<span class="cm-tag">script<span class="cm-tag cm-bracket">&gt;<br> &nbsp; &nbsp;<span class="cm-variable">alert(<span class="cm-string">'HelloWorld~!');<br><span class="cm-tag cm-bracket">&lt;/<span class="cm-tag">script<span class="cm-tag cm-bracket">&gt;</span></span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">可以将多行JS代码写到 script 标签中</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">内嵌 JS 是学习时常用的方式</span></p>
</li>
</ul>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体, &quot;Songti SC&quot;; font-size: 16px">外部JS文件</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span style="font-family: 宋体, &quot;Songti SC&quot;"><span class="cm-tag cm-bracket">&lt;<span class="cm-tag">script <span class="cm-attribute">src=<span class="cm-string">"my.js"<span class="cm-tag cm-bracket">&gt;&lt;/<span class="cm-tag">script<span class="cm-tag cm-bracket">&gt;</span></span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体, &quot;Songti SC&quot;">利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体, &quot;Songti SC&quot;">引用外部 JS文件的 script 标签中间不可以写代码</span></p>
</li>
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand" style="font-family: 宋体, &quot;Songti SC&quot;">适合于JS 代码量比较大的情况</span></p>
</li>
</ul>
</li>
</ol>
<p class="md-end-block md-p md-focus"><span style="font-size: 18px">&nbsp;</span></p>
<p>&nbsp;</p><br><br>
来源:https://www.cnblogs.com/sanuqan/p/15520633.html
頁: [1]
查看完整版本: JavaScript 是什么