学习一门语言的基本步骤
1.了解背景知识：历史、现状、特点、应用场景
2.搭建开发环境：编写一个小例子：hello world、
3.变量和常量
4.数据类型
5.运算符
6.逻辑结构
7.通用小程序
8.函数和对象
9.第三方框架、库
10.实用的项目
程序员必做50题 https://wenku.baidu.com/view/af66e2f14afe04a1b071de42.html
3.1 JS概述
(1)历史
1995年，JS出现在Netscape的浏览器中
1997年，JS提交给了ECMA，出现了ECMAScript标准规范
2009年，JS遵循CommonJS规范，开始向服务器端发展
(2)现状
既可以运行在客户端浏览器中，也可以运行在服务器端（Node.JS）
(3)特点
解释型语言，编译一行执行一行
弱类型语言 ——声明变量的时候不需要指定数据类型，后期可以存储任意的类型
基于对象
跨平台
(4)应用场景
制作浏览器端的交互效果
创建移动App
创建web服务器，操作数据库等服务器应用
2D绘图
3.2 JS的执行环境
1).浏览器自带JS解释器
2).服务器端使用Node.JS解释器
https://nodejs.org nodejs下载地址
node -v DOS状态下查看当前安装的nodejs版本
3).执行JS代码
浏览器：
创建01_hello.js和01_hello.html 文件，把js文件嵌入到html中
| <script src="01_hello.js"></script> |
NodeJS dos窗口
node 脚本文件路径
3.3 变量和常量
1. JS语法规范
1.区分大小写
2.每行代码结尾的分号可加可不加，建议都加
3.分为单行注释（//....）和多行注释（/*...*/）
2. 变量
变量——用于存储数据的容器
1.声明变量
VAR x=１; 使用关键字VAR声明了一个变量，名称叫x储存的值是1
在内存在创建空间，名称叫x，把数据1存放到空间x中。
2.变量的命名规则
变量名称可以使用字母、数字、美元符号、下划线组成，不能以数字开头
不能使用关键字和保留字作为变量名
3.声明变量未赋值
var num; 变量只是声明未赋值，此时的结果是undefined
可以为变量多次赋值，并且赋不同类型的值
弱类型语言——声明变量的时候不需要指定数据类型，后期可以存储任意的类型
4.一次性声明多个变量
var a=1,b=2,c; 多个变量之间用逗号隔开
练习：声明多个变量，分别保存语文、数学、总成绩；最后打印总成绩
3 常量
常量一旦声明就不能再重新赋值 （常量名字一般全大写）
const PI=3.14
3.4 数据类型
1.数据类型分类
数据类型分为： 原始类型和引用类型
原始类型：数值型(Number)、字符串型(String)、布尔型(Boolean)、未定义型（undefined）、空（null）
（1）数值型 整型和浮点型
整型在内存中占4个字节，浮点型占8字节
8进制 以0开头，例如013 ---> 11
16进制 以0x开头 例如 0xa ---> 10
a~f 代表 10~15 字母不区分大小写 0xff ---> 255
浮点型分为普通小数和指数型小数
3.14E6 ——> 3140000 3.14E-6——> 0.00000314。
typeof 检测数据类型 typeof 数据/typeof(数据) 检测数据的数据类型
（2）字符串型
数据被引号包含就是字符串类型，引号不区分单双引号
查看任意一个字符的Unicode码 'a'.charCodeAt()
console.log('2'.charCodeAt()); //输出 50
（3）布尔型
true/false 在程序中表示真或假 小写
一般用于是否的结果，例如是否登陆、是否注册、是否在售、是否是会员
（4）未定义型 undefined
声明了变量未赋值，结果就是undefined
（5）空 null 常和引用类型数据一起使用
2 数据类型转换
（1）隐式转换 （含字符串转为字符串，含数字转数字）
1.数字+字符串 ——> 数字转换成字符串 1 +'2' //'12'
2.数字+布尔型 ——> 布尔转数字 true-->1,false-->0 3+true //4 3+false //3
3.字符串+布尔型 ——> 布尔型转字符串 '5'+true //'5true'
| var num1=3,num2=true,num3='tedu'; console.log(num1+num2+num3); //4tedu console.log(num2+num3+num1); //'truetedu3' console.log(num3+num1+num2); //'tedu3true' |
JS中加号(+)的作用
1.执行加法运算
2.执行字符串拼接（必须要有字符串参与）
使用减法（-）、乘法（*）、除（/）隐式转换
将运算符两端的数据转换为数值型（自动调用Number），如果转换失败，返回NaN（Not a Number），不是一个数字，任何值和NaN执行-*/运算符都会返回NaN
（2）强制转换
1.将任意的数据强制转为数值型 Number()
| Number('a') //NaN Number('1a') //NaN Number('1') //1 Number(undefined) //NaN Number(null) //0 Number(true) //1 |
2.将数据强制转为整型 parseInt()
常用于将字符串或者数字转为整型，其他的数据返回NaN；如果要转换的字符串以非数字开头，页返回NaN，碰到第一个非数字的字符就停止。parseInt('123asd')-->123
3.将数据转为浮点型 parseFloat()
和parseInt()的用法基本一致，只是转的数据是浮点型
4.数值型和布尔型转为字符串型 toString()
var num=10; num.toString(); //'10'
3.5运算符
表达式：由运算符连接的操作数据，所组成的形式
运算符分类：算数运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三目运算符
（1）算数运算符
+ - * / % ++ -- 加、减、乘、除、取余、自增、自减
% 取余 console.log(3%2); //1 console.log(2%3); //2 console.log(-2%3);//-2
++ 自增 在原来的基础上+1
-- 自减 在原来的基础上-1
console.log(num++); //先打印num的值，再执行num+1
console.log(++num); //先执行num+1，再打印num的值
| var num=3; console.log(num-- + --num); //4 3+1 var a='1'; //自增隐式将数据转为数值型 a++; console.log(a,typeof a); //2 'number' |
（2）比较运算符 返回一个布尔型的值
> 、< 、>= 、<= 、== 、!= 、===(全等) 、!==(全不等)
== 只是比较两个值是否相等
数字和字符串比较，字符串会转换为数字 console.log(2=='2'); //true
=== 不仅比较值是否相同，还比较类型是否相等
| 如果数据类型不同，会发生数据类型转换 |
console.log(3>'10'); //false 数字和字符串比较，字符串会转成数字
console.log('a'>'400'); //true 两个字符串比较，比较首个字符的Unicode码('a'.charCodeAt())
console.log(3>'10a'); //false
console.log(3<'10a'); //false '10a'---->NaN
console.log(3=='10a'); //false
NaN和任何值比较(> 、< 、>= 、<= 、== 、!= 、===(全等) 、!==(全不等))，都返回false
NaN==NaN 返回false
（3）逻辑运算符 || (或着) 、&&(并且)、！(非) 返回一个布尔型的值
|| 或着 关联的两个条件只需要满足其一，结果是true，否则false
&& 并且 关联的两个条件都是true，结果是true，否则false
！ 非（反向） !true——>false ; !false——>true
| 练习：声明两个变量保存用户名和密码，如果用户名是'root'，并且密码是'123456'，打印true，否则打印false var uname='root',pwd='123456'; console.log(uname=='root' && pwd=='123456'); |
逻辑短路： （有假且为假，有真或为真）
&& 当第一个条件为false时，就不需要执行第二个条件
|| 当第一个条件为true时，就不需要执行第二个条件
注意：逻辑短路无需关注最终结果，重点是看是否执行第二条语句
| 练习：以下程序运行是否报错 var num=3; num>5 && console.log(a); 不会报错，num>5为false，后面的语句不执行 num<1 || console.log(a); 会报错，变量a未声明 练习：声明一个变量保存一个人的年龄，如果满18岁，打印‘成年人’ var age=20; age>=18 && console.log('成年人'); |
（4）位运算符（了解） 按位与(&)、按位或(|)、按位异或(^)、按位右移(>>)、按位左移(<<)
在执行位运算符的时候，计算机会把数字转成二进制进行运算。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
1 10 11 100 101 110 111 1000 1001 1010 1011 1100 1101 1110 1111 10000
| 十进制 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
| 二进制 |
1 |
10 |
11 |
100 |
101 |
110 |
111 |
1000 |
1001 |
1010 |
100110=100000+100+10
2E5 2E2 32+4+2=38
25 ———16+8+1——》10000+1000+1——》11001
按位与(&) 上下两位都是1，结果是1，否则是0
按位或(|) 上下两位含有1，结果是1，否则是0
按位异或(^) 上下两位不同为1，相同为0
按位右移(>>) 删除二进制的最后的最后一位，每次缩小到原来的一半的一半或者更多
按位左移(<<) 在二进制的最后补0，成倍增加
| 5&7 |
7|9 |
13|20 |
4^7 |
5^8 |
| 101 111 |
0111 1001 |
01101 10100 |
100 111 |
0101 1000 |
| 101 |
1111 8+4+2+1 |
11101 16+8+4+1 |
011 |
1101 |
| 5 |
15 |
29 |
3 |
13 |
| 练习：声明变量保存一个年份，判断这个年份是否为闰年，结合逻辑短路，如果是闰年，打印“闰年” 润年：4年一个闰年（能被4整除），并且不能被100整除，或者能被400整除 var year=2000; ( year%4==0 && year%100!=0 || year%400==0 ) && console.log(year+"是闰年");
|
（5）赋值运算符 = += -= *= /= %=
| 练习：//声明一个变量，保存商品价格，价格在原来的基础上打八折，然后打印价格 var price=1000; //price= price*0.8; price*=0.8; console.log(price); |
（6）三目运算符 条件表达式 ？ 表达式1 ：表达式2
由三个表达式或者数据组成的形式
如果条件表达式为true，执行表达式1；
如果条件表达式为false，执行表达式2
| //练习：声明变量保存用户名和密码，如果用户名是root，并且密码是123456，打印登录成功，否则打印登录失败 var uname='root',pwd='123456'; uname=='root' && pwd=='123456' ? console.log('登陆成功') : console.log('登陆失败'); |
浏览器端函数
alert() 弹出警示框（消息框）
prompt() 弹出提示框(输入框)，需要使用变量来接收输入的值，值的类型是字符串型
| 练习：//弹出两次提示框，分别输入两个数字，计算两个值相加，把相加的结果以警示框弹出 var res1= prompt('请输入第一个数字'); var res2= prompt('请输入第二个数字'); var sum = Number(res1)+Number(res2); alert(sum); |
var num1= prompt('请输入第一个数字'); var num2= prompt('请输入第二个数字'); num1=Number(num1); num2=Number(num2); alert(num1+num2); |