1.JavaScript初体验
1.js代码要写在中间?
<script>
alert("没有文化的人不伤心")
</script>
在浏览器中会弹出警告窗口,内容为"没有文化的人不伤心"
2.js代码写在<head>和<body>中
-
写在
<head>中<!DOCTYPE html> <html> <head> <script> alert('<head>中的JavaScript'); </script> </head> <body> </body> </html>js代码可以写在
<head>中,可以保证js代码在被调用前就被浏览器加载. -
写在
<body>中<!DOCTYPE html> <html> <head> <title>head中的JavaScript</title> </head> <body> <script> alert('body中的JavaScript'); </script> </body> </html>js代码也可以写在
<body>标签中,通常用来生成页面中的内容. -
在
<head>和<body>中可以同时都写js代码<!DOCTYPE html> <html> <head> <title>body中的JavaScript</title> <script> alert('body中的JavaScript'); </script> </head> <body> <script> alert('body中的JavaScript'); </script> </body> </html>此时的加载顺序为,先加载
<head>中的js代码,再加载<body>中的js代码,浏览器会自上而下解析代码. -
js代码放在哪里更好
- 浏览器对HTML文件是顺序加载的,也就是会先加载
<head>中的代码,再加载<body>中的代码,当浏览器解析到<head>中的代码是时,<body>中的代码并没有被解析,所以浏览器会先解析<head>中的代码,再解析<body>中的代码. - 如果把js代码放到
<head>中,则会被先解析,如果js代码需要调用<body>中的参数进行操作,则会报错undefined,因为<body>中的数据没有被加载到. - 从下载新能方面考虑,将js代码放在
<head>中,会阻塞其他资源的下载(图片,视频等)和页面的渲染(css),直到js文件加载完成后才会开始渲染,所以推荐将js代码放在<body>的底部,减小对页面加载的影响. - 3.引入外部的js文件
- 浏览器对HTML文件是顺序加载的,也就是会先加载
-
外部js文件,后缀名一定要是.js
-
外部js文件无法独立运行,需要在html中引入外部js文件
-
引入外部js文件,需要使用
<script></script>标签来引入,定义属性"src"
<script scr="路径"></script>
引入外部js文件的<script scr=""></script>标签内不能再写js代码,浏览器只会加载外部引入的js代码
-
引入外部js代码的优势
- 使html代码和js代码分离
- 方便阅读,维护
- 已经缓存的js代码会加速页面的加载
-
外部引入了js代码,html中也添加了js代码,加载顺序以书写顺序为准,写在上面的先加载,写在后面的后加载.
4.延迟执行-defer
-
defer延迟属性只能在外部引入的js代码生效,写在html中的
<script></script>标签添加defer属性没有效果. -
在引入外部js文件后,在
<script>标签中加入defer属性,那么这个js文件会被延迟执行,也就是告诉浏览器这个js文件立即下载,但是在整个页面都加载完成后,再执行.<script src="js/10_a.js" defer></script> -
如果多个js文件都添加了defer属性,则根据js文件的顺序来执行延迟执行
5.异步加载-async
-
同步加载:即文件,代码,按照顺序加载,执行,先执行第一条,再执行第二条,第一条没有加载完成,那么第二条需要等待第一条加载完成后才可以加载,简称你干完了,我再干.
-
异步加载:设置了async属性的文件,会立即加载该文件,与其他文件或代码的加载顺序互不相关,但是需要注意,设置了async的文件,下载完后立即执行,不能确保下载完成的顺序.所以不可与其他文件产生依赖关系.(慎用 )
-
async延迟属性只能在外部引入的js代码生效,写在html中的
<script>标签添加async属性没有效果.
<script src="js/11_js的异步加载.js" async></script>
- js性能优化策略
- 给
<script>设置defer属性,无阻塞下载脚本,让js文件和文档同时加载,同时使js文件在文档加载完成后执行 - 给
<script>设置async属性.使文档渲染和脚本加载同时进行,脚本加载完成后会暂停文档加载,立即执行脚本,再加载文档
- 给
2.javascript有四种输出方式:
- alert
- document.write
- innerHtml
- conlose.log
-
alert
会在浏览器弹出警告窗,显示内容
<script> alert("你站在这繁华的街上"); </script> -
document.write
会在浏览器中直接显示内容,相当于是把内容直接写在
<body>里<script> document.write("我是永远向着远方,无情的浪子") </script>但是在html文档加载完后,再使用document.write()来解析文档,则会覆盖之前的html文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button οnclick="document.write('我是谁')">点我?</button> </body> </html> -
innerHTML
给标签赋值,给标签是设置数据,应用场景-购物车数量加减,同时价格随着加减
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div> <script> var box = document.getElementById("box"); box.innerHTML = "我要从南走到北" </script> </body> </html>获取标签的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box">你要我留在这地方</div> <script> var box = document.getElementById("box"); alert(box.innerHTML); </script> </body> </html> -
conlose.log();
会在浏览器调试控制台显示内容
<script> console.log("老子今天不上课") </script>
3.javascript语法
-
javascript语句构成：
注释,值,运算符,表达式,关键字
//注释,单行注释或多行注释 var a = 1 + 2; -
分号:
每一行js代码最后都要加上分号
var a; a = 1; console.log(a); -
空格:
js会忽略多个空格,一般只写一个空格
a = 1; a + b = 2; -
折行:
单行控制在80个字符
编写代码时折行\
<script> document.write("这是一个恋爱的季节 \ 空气里飘满情侣的味道") </script>解析时折行
<script> document.write("搂搂抱抱 \n 这样就好"); </script> -
代码块:
左右大括号,括起来的内容是代码块,会按照顺序执行
function myFirst() { alert('听妈妈的话别让她受伤'); alert('想快快长大才能保护她'); } -
注释:
单行注释,//开头,只对一行生效
<script> //出自周杰伦--嘻哈空姐 document.write("她问我coffee,tea or me"); </script>多行注释,/* */
<script> /* 出自周杰伦---雨下一整晚 也可能记错了 */ document.write("这城市的小巷,雨下一整晚"); </script>行末注释,在一行的结束,//开头
<script> document.write("赤道的边境万里无云天很轻");//出自周杰伦---爱的飞行日记 </script>
4.JavaScript变量
console.log('今天天气很好，天晴了');
console.log('今天天气很好，天晴了');
console.log('今天天气很好，天晴了');
console.log('今天天气很好，天晴了');
书写困难，修改麻烦，如果把值都用一个变量代表，那么直接引用变量,只修改值即可
-
变量的定义:
值可以被修改的量叫做变量
格式:
var a = 1; a是变量名,1是变量值,也叫字面量
-
变量声明:
变量声明用var,可以声明一个或多个变量,声明多个变量时,变量用逗号隔开,没有赋值的变量会返回undefined
<script> var a = 1;//声明一个变量并赋值 var = a;//声明一个变量 var= a,b;//声明多个变量 var = a; console.log(a);//返回1 /* 没有赋值的变量,返回undefined */ </script>可以重复声明一个变量,也可以反复初始化变量的值
<script> var a = 1; var a = 2; var a = 3; console.log(a); </script> -
变量的命名规范
-
变量名称组成:字母,数字,下划线,美元符号，不能有空格
-
名称的开头要以字母开头,一般很少用下划线和美元符号开头,不可以用数字开头
-
大小写不通用
-
保留字不能作为变量名称
-
起名要做到顾名思义，看到名字就知道变量代表的是什么
-
驼峰命名法
-
小驼峰命名法：第一个单词都是小写字母，第二个单词的首字母大写。
例如：listLeft
-
大驼峰命名法：每一个单词的首字母都大写
例如：ListLeft
-
-
-
变量赋值
用 = 来为变量赋值，等号左边的是变量名，等号右边的是被赋的值
<script>
a = 1;
var = a;
console.log(a);
</script>
变量的提升
<script>
console.log(b);
b = 1;
console.log(b);
var b;
</script>
此时控制台输出的结果是1.浏览器在解析代码时，第一行代码前没有为b赋值，所以输出的结果为undefined，第三行代码是在赋值后被读取的，所以输出的结果为1。javascript引擎解析代码会获取所有被声明的变量，再一行一行的运行代码，这样所有被声明的代码都会被提升到头部，这就是变量提升。
5.javascript的数据类型
- 基本数据类型：
- 字符串-string
- 数字-number
- 布尔-boolean
- 未定义-undefined
- 空-null
- 独一无二的值-Symbol
- 引用数据类型:
- 对象-object
- 数组-array
- 函数-function
- 字符串:可以是引号中的任意文本,可以使用单引号或者双引号,但是不可以单引号套单引号,双引号套双引号,浏览器会就近分配
- 数字:可以整数,也可以是小数
- Boolean:只有两个值-true-false(对和错)
- undefined:未赋值时
- null-表示一个空内容