1.js是运行在客户端的一种解释型的编程语言
2.js的作用：
用来完成前后端交互、增加用户体验的一些逻辑实现。
3.一个网页是三部分组成：结构（HTML/HTML5)，表现（CSS/CSS3)和行为(javascript)
4.前端开发的核心是javascript
5.javascript 的组成
- ECMAScript (标准：ECMA-262) ：基础语言部分（基础，面向对象等）
- DOM （标准 ：W3C) ：节点操作
- BOM （无标准）： 浏览器操作
6.js的特点
1.松散性
js种的变量没有一个明确的类型，也叫弱类型的语言（允许将一块内存看作多种类型）
2.对象属性
对象的属性也可以映射为任意的数据
3.继承机制
js是基于原型继承的
7.使用javascript
使用js弹出一个对话框
<Script>
alert("hello world!");
</Script><script type="text/javascript" defer="defer">
<--!defer =" defer" 表示加载DOM完成后再加载 js代码
但是es6以后不用写，默认加了-->注意：
script 标签可以写在网页代码种的任意位置，因为js是同步执行的，但为了避免js阻塞，最好写在body后面。
alert('</sc'+'ript'); <--!弹出 /script 文字要这样写-->7.1 js的三种使用方式
1.使用script标签 直接写在script标签里
2.写在a标签的href里 （性能差，不推荐使用）
<a href="javascript:var a=10,b=20;alert('结果是:'+(a+b))"> 标签1 </a>
<a href="javascript:close();">×</a> 关闭当前页面，具体例子看vscode
<!-- 关闭当前页面 -->
<a href="javascript:close();">×</a>
<!-- 阻止刷新页面 -->
<a href="javascript:void(1);">阻止刷新页面</a>
<a href="javascript:alert('i love you')">弹出警告框</a>3.使用外部脚本加载js
<script scr="01_test.js" type="text/javascript" async="async"> </script>
async : 异步执行脚本，也就是执行DOM的时候，另外一条线同时执行js代码但是仅用于外部脚本
8.标识符
1.语法
区分大小写
ECMAScript 中的一切，包括变量、函数名和操作符都是区分大小写的。例如:book和Book表示两种变量。2.标识符：
所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格式规则组合起来的一个或多个字符:
1) 第一个字符必须是一个字母、下划线_ 或者 一个美元符号$
2) 其他字符可以是字母、下划线、美元符号或者数字。
3) 不能把关键字、保留字、true 、 false和 nll 作为标识符。
注释： ECMAScript 使用c的风格的注释，包括单行注释和块级注释。
关键字：
break , else, new, var,case,finally,return , void ,catch, for,switch,while
continue,function,this,with,default,if,throw,delete,in,try,do,instanceof,typeof等
注意：js在任意地方是严格区分大小写的。
9.注释
1） 单行注释
//注释内容
一般用于对单行代码进行说明
2） 多行注释
/*
…
…
*/
也叫块注释。一般对下面的代码进行整体说明，且说明内容可能较多。
例如：
/*
*需求：编写一个程序，键盘输入内容，然后在浏览器输出
*1）引入prompt() 方法
*2）输出到浏览器
**/
<script type="text/javascript" charset="utf-8" ansync="ansync" defer="defer" >
var user_input = prompt("请输入消息！"); /
document.write("您输入的消息是："+user_input);
</script>说明：
注释不会被执行，在项目中要习惯去写注释，便于后期项目维护。
10.常量
常量也叫直接量或字面量，在程序中直接给出具体的数据。
常量是不可以改变的。
如：100，true ,“abc” ,null ,undefined等定义：
1) 只定义变量
var x ;
var a, b, c;
2)定义变量且赋值
var x1 = true;
var y1 = 100, y2 = null;
说明 ：
1.定义变量时不需要给出数据的类型（松散型语言的特点）
<script>
var x = 100;
var y = null;
consloe.log(y); // 在控制台输出，用于开发测试
</script>2.变量可以重复定义，后面会覆盖前面
3.不用var定义变量也可以，默认是为 window 对象添加了属性
name = ‘张三’ ；// 相当于 window.name = ‘张三’ ；
’use strict‘ // 严格代码模式（变量必须先定义后使用）
var x = 10;
var y = 15;4.定义的变量如果没有赋值，系统将自动赋默认值为’undefined’
5.一条语句可以以分号结束，也可以不加分号；如果是多条语句写在同一行上，必须用分号隔开。
6.在书写代码时，除了字符串中可以使用中文标点之外，其它任何地方只能用英文标点符号。
12.数据类型
数据类型指的是内存存储的方式。
分为：
1）基本数据类型
number ： 数值型
用来表示一个数字，通常可用作进行加减乘除等运算。
分为整型号和浮点型。（小数位可以浮动）
100（10进制）
0123（8进制）
0xae12(16进制)
isNaN（） 用来判断 是否非数字
true ----非数字
false — 数字
string 字符型
用引号（单双引号都可以，它们没区别）引起来的以穿字符（可以是数字、字母、标点符号、汉字等）
’abc’
“abc” 没有区别
如果要输出引号 ，则要加转义符
“a’bc”
null 空值
表示一个空对象的地址指定指向的为空
boolean 布尔（逻辑）型
表示真true 或 假 false
undefined 未定义
表示定义了一个变量，但如果没给这个变量赋值，那么系统默认赋值为undefined
2）引用数据类型
object 对象型
用来声明或存储一个对象（对象，函数，正则，字符，数值等）
var a = new Number(10) ;
var obj ={
sno: '007',
sname: '张三'
}
//a 和 obj 均是对象型13.运算符
1）算数运算符
>+ - * / % 加 减 乘 除 求余注意：求余的时候，如果前面的数是负数，那么结果也是负数。（效果如下）
自增/自减
++x --x 前置自增/自减： 效果是先自增/自减 再运算
x++ x-- 后置自增/自减： 效果是先运算 再自增/自减
例子如下：
var x = 10;
2）字符串运算符
+ ：用于实现字符串连接
console.log('aaa' + 'bbb'); //aaabbbb
console.log('aa a' + 'bbb'); //aa abbb
console.log(123 + 'bbb'); //123bbb 注意数值型和字符型连接时，数值型自动转换为字符型
console.log(true+ 'bbb'); //truebbb 原理同上
console.log(undefined+ 'bbb'); //undefined 原理同上输出字符串长度：
consloe.log('aaa'.length); // 33）关系运算符
> < >= <= == === != !==返回的结果只能是true或false
比较方法：
a.数值比较，比较其大小
b.字符比较，比较ascii码值（如果是字符串那么按位比较，如果第一个字母就比出了大小，后面的字符将不进行比较）
c.汉字比较，比较unicode编码值的大小
可以通过charCodeAt() 获取编码值
常用的ascii码值：
A的ascii码 ： 65
a的ascii码 : 97
0： 48 回车：13 ESC ：27
console.log('a'<'hdhdhdd'); //true
console.log('a'<'FGSG'); //false
console.log('张三'<'李四'); //true
consloe.log('张三'.charCodeAt(0));// 24352 求'张'的编码
consloe.log('李四'.charCodeAt(0)); //26466 求'李'的编码console.log('100'== 100) //true
console.log('100' === 100) //false
console.log('3845'>'张三') //fasle ’张'24352比较规律：
部分符号<数字<大写字符<小写字母<汉字
4）逻辑运算符
逻辑运算符有： ！ && || 三种。
一般返回逻辑值 true 或 false，但是在js中也可能返回其他结果
! : 逻辑非（取反） （单目/一元运算）
!true -> false
!false -> true
&& : 逻辑与(双目/二元运算)
只要有一个操作数为false,结果为false。
|| : 逻辑或（双目/二元运算)
只要有一个操作数为true，结果为true。
重点：
console.log(!123) //false 非0的数值一般转换为true !123=false
console.log(!0) //true 数值为0 一般会被转换为 false ,!0 = true
console.log(!‘abc’) //false 非空字符转化为true
console.log(!’’) //true 空字符转化为false！！！！！对象或者数组不管有没有值，都转换为true!!!
console.log(!{}) //false
console.log(![]) //false
console.log(!{name:‘老王’}) // false
console.log(![1,2,3]) //falseif(123) { //这里的123自动转换为true ,即条件是成立的
}注意：
逻辑与运算中 &&
如果两个操作数中之间任意一个操作数为非逻辑值
第一个操作数的结果为true,那么返回第二个操作数的值；
第一个操作数的结果为false，那么返回第一个操作数值
console.log(123 && 0) // 0
console.log(123 && 10 + 20) // 30
console.log(123 && 'abc') //abc
console.log(123 && []) // []
console.log(false && [] ) //false
console.log(0 && 'abc') //0逻辑或运算中 || （与逻辑与&&相反）
如果两个操作数中之间任意一个操作数为非逻辑值
第一个操作数的结果为true,那么返回第一个操作数的值；
第一个操作数的结果为false，那么返回第二个操作数值
console.log(true || false) //true
console.log(123 || 0) //123
console.log(123 || 0+10) //123
console.log(fale || []) //[]
console.log(0 || 'aga') /aga注意：
短路运算：
a.&&运算时，如果第一个操作符为false，则不需要计算第二个操作数,结果返回false
b.||运算时，如果第一个操作符为true, 则不需要计算第二个操作数，结果返回true
var x = 100;
var y = true && ++x;
console.log(x,y); //101 101var x = 100;
var y = false && ++x; // 短路，后面的++x执行不到
console.log(x,y); //100 falsevar x = 100;
var y = false || ++x;
consloe.log(x,y); // 101 101var x = 100;
var y = true || ++x; //短路 ，后面的++x无法执行
consloe.log(x,y); // 100 true5）位运算符
暂时不讲
6）三目运算符 （ ？ ：）
语法：
表达式1 ？ 表达式2 ： 表达式3
如果表达式1 成立，返回表达式2的结果
如果表达式1 不成立，返回表达式3的结果
Tips：
三目运算相当于if语句中的双分支结构。
如果表达式2或者表达式3较为复杂，建议用if语句或者switch 语句实现。
14.流程控制
js 是一门既面向过程，也是面向对象的解释型语言。
面向过程 ： 按照代码书写的顺序依次执行（OOP）。
js也是一门结构性语言。
js的结构分为顺序结构、分支（条件/选择)结构和循环结构三种。
顺序结构: 按照代码的书写顺序依次执行，一般包含初始化，赋值，输入/输出等语句。
条件结构：用if或者switch语句实现，其中的代码是有条件选择执行的。
循环结构：某部分代码在指定的条件范围内反复执行，用for/for…in/forEach/while/do…while语句实现。
1）条件结构
a.单分支
语法：
if （条件） {
语句/语句组;
}如果条件成立，将执行语句或语句组；条件不成立，执行if的下一条语句
b.多分支
语法1：
if（条件1）{
语句/语句组;
}
else if （条件2） {
语句/语句组;
}
else if （条件3） {
语句/语句组;
}
else {
语句/语句组;
}情况语句：switch
语法：
switch(条件) {
case 表达式1: 语句1或语句组1 ; [break;]
case 表达式2: 语句2或语句组2 ; [break;]
case 表达式3: 语句3或语句组3 ; [break;]
case 表达式4: 语句4或语句组4 ; [break;]
…
case 表达式n: 语句3或语句组n; [break;]
default: 语句n+1 或者语句组n ;[break;]
}
说明：
如果满足switch里面的条件，
则执行对应case后面的语句，直到遇到break为止；
也就是说 少了break 后面的语句都会执行，陷入死循环
如果条件都不满足则执行 default里面的语句
注意:
var score = parseInt(prompt(‘请输入学生称呼：’));
prompt的数据是文本类型
parseInt 将类型 转换为 数值类型
当然也可以 parseFloat 转换为浮点型
var rs = '';
switch(Math.floor(score/10)){ //Math.floor()向下取整
case 0:
case 1:
case 2:
case 3:
case 4:
case 5: rs = '不及格';break;
case 6:
case 7: rs = '及格';break;
case 8: rs = '优秀';break;
case 9:
case 10: rs = '非常优秀' ;break;
}前面的case如果没有内容可以省略；
tips：
switch与if的区别：
switch 处理简单的条件判断，if处理的一般比较复杂
switch能处理的，if一定能处理
if能处理的，switch不一定能够处理
如果都能处理，用swicth相对简洁些。
语法 ：
for（[变量初始值];[条件];[步长]）{
[循环体];
[continue];
[break;]
}
变量初始值，条件，步长都可以放到别的地方；
比如计算1+2+3...+100
1)
var sum = 0;
for(var i=1;i<=100;i++){
sum += i;
}
2)
var sum = 0, i= 1;
for(;i<=100;i++){
sum += i;
}
3)
var sum = 0, i= 1;
for(;i<=100;){
sum += i;
i++;
}
3)
var sum = 0, i= 1;
for(;;){
if(i<=100){
sum += i;
i++;
}
else{
break; //注意这里不加break会陷入死循环
}
}b.当型循环（while)
输出前100个数的和
var sum = 0, i = 1;
while(i<=100){
sum+=i;
i++;
}**和 if的区别：**循环次数未知。
c.直到型循环
输出前100个数的和
var sum = 0, i = 1;
do {
sum+=i;
i++;
}while(i<=100)；和 while的区别：
先执行语句，再判断条件，
本质上没区别，但如果条件不满足时，do…while至少执行一次，while则一次都不不执行。
d.数组和对象遍历（后面介绍）
for …in
forEach
小结：
for只能用于循环次数已知的情况；
while和do…while可以用在循环次数已知或者未知的情况。一般循环次数已知用for较多
for…in用于遍历对象和数组；
forEach（）用于遍历数组。
for也可以用来遍历数组，但性能较差。
3）break 和 continue 语句
break语句可以用在switch语句和循环语句中(forEach循环除外)，表示跳出（结束）循环。
continue语句只能用在循环语句中(forEach除外)，表示结束本次循环，继续下一次循环。
注意：
break 和 continue语句必须单独存在，后面不能添加其他代码。
break 和 continue 语句一般存在if语句中
//break语句
//需求:求100-999之间能被3和7整除的数。
for(var i=100;i<1000;i++){
if(i % 3 == 0 && i % 7 == 0){
document.write("100-999能被3和7整除的数字为："+i+'');
break; //如果这里加了break 那么上面语句只会执行一次，也就是只有一个数字。
}
}//continue语句
//需求:求100-999之间能被3和7整除的数。
for(var i=100;i<1000;i++){
if(i % 3 == 0 && i % 7 == 0){
document.write("100-999能被3和7整除的数字为："+i+'');
continue; //终止本次循环，继续下次循环，后面有多少语句都执行不到
alert('hellow'); // 这条语句执行不到，在continue后面的语句都将执行不到
}
}
