<span style="background-color:#f7f7f7"><span style="color:#777777">typora-copy-images-to: media
</span></span>
基本语法
JavaScript的历史:
在95年以前,就有很多上网的用户了,当时的带宽只有28.8kb/s,用户要进行表单的验证时,点击提交按钮,直接就将数据发送到服务器了,受限于带宽的关系,浏览器和服务器的通信很慢,大概一次通信需要30s的时间。
这样,问题就出现了,我们平常注册一个用户,需要填写很多信息,当我们将所有信息填写好,点击提交按钮后,等待30s以后,提示我们用户名被占用了,修改,提交,等待30s,提示用户名不符合规范,修改,提交,等待30s,密码不符合规范,修改,等待。。。这样的用户体验感很差,给网民造成很大的烦恼。随着上网的用户越来越多,问题越来越严重。
这时候,网景公司(Netscape ,这是一家浏览器公司)下定决心要解决这个问题,并将这个问题交给布兰登·艾奇(Brendan Eich,1964年~,当时在网景公司工作的一个程序员)来解决,他用了10个工作日的时间,设计了一个门语言,叫做LiveScript,专门用来解决客户端上的问题。网景公司和Sun公司合作,在发布的时候,改名为Javascript,目的是为了利用 Java 这个因特网时髦词汇。JavaScript 从此变成了因特网的必备组件。
因为 JavaScript 1.0 如此成功,微软推出了JScript脚本语言,后来陆续有好几家公司都创建了自己的客户端脚本语言。
此时,JavaScript 并没有一个标准来统一其语法或特性,随着互联网的发展,分久必合的趋势越来越有必要,最终,1997年,ECMA(欧洲计算机制造商协会)邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39,定义了标准,名为ECMAScript。
ECMAScript是一个标准,而javascript是语言。
js概念
概念:支持面向对象的跨平台脚本语言。
理解:
-
脚本语言:依赖别的语言才能运行
html必须在浏览器中才能运行,js嵌套在html中才能运行
-
跨平台:可以在不同的平台上运行
windows、linux、安卓。。。
-
支持面向对象
使用面向对象的思想编程
应用场景:
-
表单验证:规范用户输入数据,和后台数据进行交互
-
网页特效:给页面内容加行为,让页面动起来
-
游戏开发:飞机大战、打砖块
JS和H5的关系
我们现在所说的H5,其实指的是大前端,主要技术包含:html+css+html5+css3+javascript+前端框架(vue+react+angular)+app+小程序+......
html5是html的下一个版本,就目前而言,我们知道的h5只是一些标签,并不能完美的展示出他的强大之处,有很多高端功能需要使用js来激活,例如:多媒体标签自定义控制多媒体的各种场景;canvas标签用js来绘制图形等。
随着h5应用越来越多,js的使用方式和各种框架及插件也越来越多,甚至已经从前端语言可以实现后台服务器的功能。js的发展已经成为一种潮流。
js的组成
js的组成示意图 |
---|
![]() |
ECMAScript:语法标准
BOM:操作浏览器的标准
DOM:操作html文档的标准
JS在html中
js的书写位置
js的不能独立运行,需要依赖html,html是由标签组成的,所以js在html中就体现为一个script双标签。js的代码就写在这个标签中。
这个标签可以放在html文档的任意位置,但在不同的位置,对于代码的执行有一定的影响,对于初学者,建议将script标签放在body结束之后。
当浏览器在执行html代码的时候,就会解析其中的script标签,并运行js代码。
js的注释
注释代码不会被执行,仅仅起到一个提示的作用。注释可以对复杂的代码进行解释,方便后期的维护和开发。
单行注释:
<span style="background-color:#f8f8f8"><span style="color:#aa5500">// js的单行注释是双斜杠</span></span>
多行注释:
<span style="background-color:#f8f8f8"><span style="color:#aa5500">/*</span>
<span style="color:#aa5500">js的多行注释:</span>
<span style="color:#aa5500">开头是斜杠星号</span>
<span style="color:#aa5500">结尾是星号斜杠</span>
<span style="color:#aa5500">*/</span></span>
js的输出
所谓输出,其实就是将内容显示在网页中,和html不同,js代码不会主动显示在网页中,要显示指定的内容,需要特殊方法指定才能显示在网页中,这个指定显示的过程就叫做输出。
-
以弹窗的形式显示
<span style="background-color:#f8f8f8"><span style="color:#000000">alert</span>(<span style="color:#116644">11</span>);</span>
这种输出通常适用于给用户做提示,例如:登录成功;删除失败;用户名被占用等......
-
以文本的形式显示
<span style="background-color:#f8f8f8"><span style="color:#000000">document</span>.<span style="color:#000000">write</span>(<span style="color:#116644">123456</span>);</span>
这种输出方式通常用于动态改变或增加body标签中的内容,有些网页,我们在查看源代码的时候发现body中是没有代码的,但是在网页中会显示出很多内容,其实就是用js显示上的。这个中输出方式,显示的内容会自动添加到body标签中。
-
可输入内容的弹窗
<span style="background-color:#f8f8f8"><span style="color:#000000">prompt</span>(<span style="color:#116644">12345</span>)</span>
这种弹窗通常在项目使用较少,项目中要提示用户输入内容的时候通常都会使用表单。
-
询问用户是否确认操作的弹窗
<span style="background-color:#f8f8f8"><span style="color:#000000">confirm</span>(<span style="color:#116644">12345</span>)</span>
这种弹窗通常在项目中用户进行某些敏感操作时,提示用户是否继续进行下去,例如:用户点击了删除按钮之后,用户点击了退出按钮之后,需要让用户确认是否继续操作,可以取消。
-
浏览器控制台输出
<span style="background-color:#f8f8f8"><span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">123</span>);</span>
这种输出方式在开发过程中很常用,通常用于调试代码时,在浏览器的控制台查看调试结果,不会影响到整体项目的逻辑和效果。
注意:在js代码中,每行结束可以加分号,也可以不加分号,但是建议加上。
变量
在实际项目中,很多情况下,需要在一个初始数据的基础上进行多次累加操作,例如:
<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 第一次输出数字1</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">1</span>)
<span style="color:#aa5500">// 第二次需要在第一次的结果基础上添加2</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">1</span><span style="color:#981a1a">+</span><span style="color:#116644">2</span>)
<span style="color:#aa5500">// 第三次需要在第二次的结果基础上添加3</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#116644">1</span><span style="color:#981a1a">+</span><span style="color:#116644