JavaScript-第01天
JavaScript语言
是世界上用的最多的脚本语言。它是不需要编译,直接运行时边解析边执行的语言。
还是是一种客户端的脚本语言。
ECMAScript 不是一门语言,而是一个标准,JavaScript 是符合这个标准的。
JavaScript 的整体感知:
语法书写格式:
<script type="text/javascript">……</script>
代码的存放位置:
放在head标签中,如果没有style代码,就放在title标签下 ; 如果有style,则放在style下面。
还可以放在body标签上(现在学习阶段暂时不要放在这里)
alert("这是我人生中的第一个javscript程序,有点期待!")
![](https://img.haomeiwen.com/i4958771/65932aaade67070b.jpg)
注意:如果页面上出现弹出框以后,页面的位置不能改变,并且不能关闭。(其实这时候浏览器的进程已经被暂停了)/(比如上图的弹出框)
语法规则:
javascript与html、css一样,对空格、换行,以及缩进是不敏感的。
规范:将来在写代码的时候,一定要所有的代码都放在script标签中,将且代码最好有一个缩进。(代码要结构明确,可读性)
javascript代码虽然对空格,换行,缩进不敏感,但是在写的时候一定要注意规范。
写代码的时候,即加上空格也加上换行,使代码的格式更加规范,可读性更加强
第一个:alert(); 在页面上弹出一个提示框
![](https://img.haomeiwen.com/i4958771/40839d8719bbeb79.jpg)
javascript执行顺序:
从上到下,从左到右。
javascript注释:
// 注释一行代码
/**/ 注释多行代码
开发人员工具的使用:
第二个:console.log(); 在控制台中输出内容(在代码调试的时候使用的比较多)
右键,审查元素,打开开发人员工具,如果页面上有错误就会显示红叉。点击tab选项中的最后一个tab,console,可以找出这个错误来。
![](https://img.haomeiwen.com/i4958771/17ef72cc96cbedcd.jpg)
点击tab选项中的最后一个tab,console,可以找出这个具体的错误来,从而可以排除错误
![](https://img.haomeiwen.com/i4958771/15e64716d7ed1402.jpg)
点击这个错误,进入soerces,就可以看到第8行有错误,开发人员可以针对性修改。
console.log("这是我人生中的第二个javscript")
在浏览器的控制台中输出一句话。
作用:用来进行代码的调试。
应用:比如下图的百度招聘信息
![](https://img.haomeiwen.com/i4958771/5f38a8d962a41906.jpg)
第三个:prompt(); 输入框,可以用来接收用户输入的内容
prompt("请输入您的银行卡密码!!")
弹出一个输入框,给用户提供输入信息位置。
![](https://img.haomeiwen.com/i4958771/89afd128d545f3af.jpg)
直接量:
如果页面上直接使用红色框中的数据,那么这些内容叫做直接量。(下图)
![](https://img.haomeiwen.com/i4958771/2ed4c0c87f48b93c.jpg)
数据类型:
问题:为什么369没有加引号,可以输出成功,而abc没有加引号,结果输出失败了?(没有加引号的数字也能输出,是因为它是数值类型,往下看有介绍)
![](https://img.haomeiwen.com/i4958771/5e17b5a2785e00f0.jpg)
字符串:
英文是:string
特点:用引号引起来的文本的串。
注意1:这个引号可以是单引号,也可以是双引号。
我们平常说的话都可以理解为是字符串。
注意2:如果要在字符串输出引号,可以将字符串的引号改变成单引号;
![](https://img.haomeiwen.com/i4958771/4f04a54d851fa05a.jpg)
转译符:
常用的转译符有:
单引号: \' 双引号: \"
![](https://img.haomeiwen.com/i4958771/f181a739eb1b3b65.jpg)
换行: \n
![](https://img.haomeiwen.com/i4958771/d8b84c1341796ac1.jpg)
缩进: \t
![](https://img.haomeiwen.com/i4958771/66731f88a84dbe1d.jpg)
空格: \b
![](https://img.haomeiwen.com/i4958771/2c8020a54fb6379e.jpg)
回车: \r
![](https://img.haomeiwen.com/i4958771/739dbd5a3c9438a6.jpg)
斜杠: \\
![](https://img.haomeiwen.com/i4958771/078500bda5b53fa1.jpg)
注意注意:转译符的斜杠是这样的 \ ,而 / 这个斜杠只是普通的文本。
![](https://img.haomeiwen.com/i4958771/193a702b44900616.jpg)
数值类型:
英文名:number
比如:整数,小数。
特点:表达的事一种数据的量。
表现形式:123,1,0,-1,2
不用引号也可以输出
NaN:(not a number):非数字,作用:用来表示数值的一种不正常的状态(当计算发生错误的时候的状态)。 (具体在下面运算符演示)
加号的作用:
两个字符串用加号连接,起到的作用是连接这两个字符串。
![](https://img.haomeiwen.com/i4958771/a88d6cca232fc987.jpg)
两个数值用加号连接,加号起到的作用是运算符的作用。
![](https://img.haomeiwen.com/i4958771/6f49f4235228251e.jpg)
加号连接的两个直接量中有一个是字符串,加号的作用是连接。
![](https://img.haomeiwen.com/i4958771/a72e66733d5cc3db.jpg)
![](https://img.haomeiwen.com/i4958771/1bd1f4b62046dd76.jpg)
加插:
![](https://img.haomeiwen.com/i4958771/1f82de91d857fc9c.jpg)
判断数据类型:
typeof:判断数据类型。
用法1:typeof(直接量/变量)
![](https://img.haomeiwen.com/i4958771/577b4d0668ce22dd.jpg)
用法2:typeof 直接量/变量 相对于用法1是少了括号
![](https://img.haomeiwen.com/i4958771/59b3c06e4420d7e2.jpg)
变量:
变量:是用来存储数据的(就是储存数据的一块内存) / 内存是电脑的一个储存位置(断电以后会清空)
使用浏览器输出我们自己输入的内容:
![](https://img.haomeiwen.com/i4958771/2fae88e7e0a9d4ad.jpg)
![](https://img.haomeiwen.com/i4958771/51fd449652c848e9.jpg)
声明变量:
var a; (var为声明变量的关键字,a为变量名)
给变量赋值:= 等号
a="123"; (等号为赋值运算符)
![](https://img.haomeiwen.com/i4958771/7603a645dda42568.jpg)
注意:赋值运算符起到的作用是将等号右边结果赋值给等号左边的变量。
![](https://img.haomeiwen.com/i4958771/1671dc1a9996b7dc.jpg)
变量名的注意点:
1、变量名只能由英文字母,数字,下划线以及$符号组成,并且数字不能放在名称开头。 (如果名称带有下划线,那么后面就算直接跟数字也是可以的)
2、变量的命名不能使用javascript中的关键字和保留字。(比如 : var var = 123;) (关键字:已经被javascript内部使用过的。/ 保留字:还没有被javascript内部使用,但是可能有一天会被使用到的。)
3、区分大小写 (比如abc和ABC是不一样的)
![](https://img.haomeiwen.com/i4958771/b3d7b1b14b069df5.jpg)
![](https://img.haomeiwen.com/i4958771/873a3ec79daede67.jpg)
变量的类型:
这个变量中储存的是什么样的数据,那么这个变量就是什么样的类型。 (储的是string,变量就是string,储的是number,变量就是number)
![](https://img.haomeiwen.com/i4958771/5a4af702f4557288.jpg)
变量之间的互相赋值以及变量可以和直接量一起输出。
![](https://img.haomeiwen.com/i4958771/8b42899f9055748b.jpg)
前面学了:string类型,number类型。下面还有其他类型:
boolean类型:
这个只有两种取值:true(对) 和 false(错) 。
作用:用于判断条件的结果。
![](https://img.haomeiwen.com/i4958771/aefc6d85a7e3f741.jpg)
nudefined:
如果一个变量声明了但是没有赋值它的结果就是nudefined。 (nudefined在页面上是不会报错的。)
![](https://img.haomeiwen.com/i4958771/63958a563775c656.jpg)
在一些情况下它会报错:is not defind
运算符:
1、加号:+
如果加号两边都是字符串,那么加号的作用是连接。
如果加号的两边都是数值,那么加号的作用是相加。
如果加号一边是字符串,那么加号的作用是连接。
![](https://img.haomeiwen.com/i4958771/133230328caffc70.jpg)
2、减号:-
就是两个数值之间的运算。
NaN:(not a number):非数字,作用:用来表示数值的一种不正常的状态。 (一般情况下会在计算出现错误的时候出现。)
判断当前的数据是否是NaN的关键字:IsNaN (是一个非数字)
如果结果是非数字:结果是: true
如果结果是数字:结果是: falsse
![](https://img.haomeiwen.com/i4958771/5519244c80eb848a.jpg)
3、乘法:*
就是两个数值之间相乘。
4、除法:/
就是两个数值之间相除。
![](https://img.haomeiwen.com/i4958771/f1d9e198ce00ac33.jpg)
5、取余(取模):%
就是两个数值之间的操作。
![](https://img.haomeiwen.com/i4958771/70e32cc560157164.jpg)
6、括号:()
改变运算符的优先级。
![](https://img.haomeiwen.com/i4958771/e24c53338dc92aa7.jpg)
复杂运算:
math对象:
![](https://img.haomeiwen.com/i4958771/1f3cf6b577994eda.jpg)
![](https://img.haomeiwen.com/i4958771/4f9da483246f54f3.jpg)
作业:
![](https://img.haomeiwen.com/i4958771/115d829905a080e3.jpg)
JS作用
验证表单(以前的网速慢)
页面特效(PC端的网页效果)
移动端(移动web和app)
异步和服务器交互(AJAX)
服务端开发(nodejs)
浏览器工作原理
![](https://img.haomeiwen.com/i4958771/44d302f92f56179d.png)
User Interface :用户界面,我们所看到的浏览器
Browser engine :浏览器引擎,用来查询和操作渲染引擎
Rendering engine :渲染引擎,用来显示请求的内容,负责解析 HTML、CSS
Networking :网络,负责发送网络请求
JavaScript Interpreter : (解析者)JavaScript解析器,负责执行JavaScript的代码
UI Backend :UI后端,用来绘制类似组合框和弹出窗口
Data Persistence :(持久化)数据持久化,数据储存 cookie、HTML5中的sessionStorage