认识JavaScript
JS概括
html 骨架
css 美化
js 动效 nodejs（服务器端）
游戏，页面动效，表单验证，服务端，智能检索
js：运行在客户端（浏览器）的解释型脚本语言。
解释型：
高级语言---->二进制语言 翻译
翻译：编译型和解释型
解释型：代码从上向下一遍解释一遍运行，javascript。由js引擎来进行的
浏览器内核：渲染引擎，js引擎
编译：一次性编译成可以执行二进制文件，统一运行。java c
历史
1995年，网景公司发明了一款navigator0.9版本的浏览，公认成熟，
缺点：不能交互，不能进行表单验证，网景公司找到布兰登艾奇，livescript的语言，
用于表单校验,交互. navigator2.0 版本上运用. 10天 —> javascript
1996, 微软公司 exporer3.0 JScript。
1997年，网景公司把javascript1.0 版本ECMA（欧洲计算机制造商协会）做标准化、
ECMAScript
### JS和H5的关系
h5：狭义：html的第5个版本
h5：web开发所有技术
eg: html css js nodejs vue react
B/S 架构：
browser ：浏览器 客户端
Server: 服务器 服务端
js组成：
ECMAScript（语法），DOM，BOM
DOM：document object model 文档对象模型
BOM：browser object model 浏览器对象模型
js本质：可以通过js代码操作文档，浏览器
JS的编写
行内式
外链式
外链式不要在script、标签中写代码，如果想写，再下面写
内嵌式：写在html结构的底部，为了能够获取页面中的内容才写到最下面的
JS的注释
// 单行注释 ：代码的解释说明
/*
多行注释
*/
JS输出语句
console.log(‘控制台输出1’);
alert(‘弹框1’)
页面输出 document.write(‘
helloworld
’)提示框
var a = prompt(‘请输入…’);
console.log(a);
变量
字面量：12 ‘张三’ true
1.变量的概念：存储数据的容器
2.变量的定义：
2.1 先声明，后赋值
var x; //声明变量
x = 10;//赋值
2.2 声明的同时赋值
var y = 20;
注意：变量一定要先声明后赋值
2.3 可以同时声明多个变量，再进行赋值
var x,y,z; //声明了3个变量
x = 10;
y = 20;
z = 30;
-
变量的命名规则和规范
3.1 变量是由字母，数字，下划线，美元符号, 现在已经支持汉字了，不推荐
3.2 不能以数字开头
3.3 不能是关键字和保留字
3.4 区分大小写
3.5 规范：见名识意
3.6 驼峰命名法
如果多个单词组成，第一个单词全部小写，从第二个单词开始，首字母全部大写
JS数据类型种类
数据类型：对数据的分类
数据类型的种类：
基本数据类型：字符串(string)，数字(number)，未定义(undefined)，空(null)，布尔(boolean)
复杂数据类型：对象(了解)object
/*
姓名：“赵丽影” —》字符串
年龄：33 —>数字类型
体重：未知 ----> undefined
是否结婚: 否 ----> 布尔 true、false
空： —>null
三围：{腰围，臀围，胸围} —>对象
*/
JS数据类型检测
检测数据类型：typeof关键字
1.1 字符串(string): 单引号或者双引号引起来 ‘张丽英’ ‘123’ “true” ‘null’
数字和字符串是可以进行拼接的
1.2 数值类型(number)：10, 20.1 , -10, 01010101, 0xabef001,054, NaN
整数，小数，二进制（0和），八进制(0-7)，十六进制(0-9 a-f)
NaN: number类型，但是不是数字
NaN的由来：在参与运算的过程中，出现了无法表示的数字的时候
undefined 未定义
var x ;
console.log(x); // 只声明，未赋值
1.4 boolean 布尔
console.log(true);// 是 真 对
console.log(false);// 否 假 错
console.log(typeof true);//boolean 布尔类型
1.5 null 空
var a = null; // 后期a将重新赋值成对象
console.log(typeof a); // object
JS数据类型转换
字符串转为数值类型
1. Number()
结论一：Number()可以将纯数字的字符串转为数值
结论二：Number()可以将非纯数字的字符串转为NaN，也是数值类型
结论三：将true转为1，将false转为0.
2. parseInt()
结论一： parseInt()可以将纯数字的字符串转为数值
结论二： parseInt()可以将数字开头的字符串转为数字
结论三： parseInt()可以将非数字开头的字符串转为NaN，也是属于number类型
结论四： parseInt()保留整数
3. parseFloat()
结论一： parseFloat()保留小数点后面的数字
结论二： parseFloat()数字开头的字符串转为数字
.toFixed()保留几位小数。
4. 隐式转换 - * / %
console.log('--------------------Number()-------------------');
var str = '100';//字符串
console.log(typeof str);// 检测str的类型为string
console.log(typeof Number(str));//通过Number()将str转换为数字，再进行检测
结论：
1. Number()和parseInt()的不同点：
parseInt()可以将数字开头的字符串转为数字，Number()只能将纯数字转为数字类型
2. parseInt()和parseFloat()的不同点：
parseInt()将字符串转为整数
parseFloat()将字符串转为 小数
转为boolean类型:
-
Boolean()
console.log(Boolean(x));
-
!!
console.log(!!x);
“ ” 0 NAN underdined null 转为f
数字转为字符串
1. num.toString()
2. String(num)
- 算术运算符：+ - * / %
+: 拼接 （字符串和字符串，字符串和数字相加）
+: 求和
赋值运算符
var a = 10; //将10赋值给10
a += 20; //等价于 a = a+20 将左边a和右边20求和，再重新赋值给a
数值类型：10 10.1 NaN
NaN: 非数字的number类型
isNaN() :帮助我们检测是否是非数字，是非数字结果为true，不是非数字结果是false
底层会调用Number()方法
关系运算符:
< >= <= == != === !==
关系运算符比较出的结果是布尔类型值
console.log(10==‘10’); //只比较值，不比较类型
console.log(10===‘10’);//既比较值，也比较类型
逻辑运算符
&&(与) ||（或） !（非）
&&: 与
console.log(3>5>4);// 错误
console.log(3>5&&5>4); // 一假即假 false
||: 或 一真即真(整个表达式有一个真，结果就是真)
! : 非 取反
a++；在a的基础上加1
++a: 在a的基础上加1
区别：单独使用时，都是自身加1
在参与输出，赋值，等操作时，a++和++a是有区别的
1. a++ 先输出a，再自身加1
2. ++a 先加1，再输出
流程控制
1.流程控制语句的分类
流程控制语句：
1. 顺序语句
2.分支语句 （根据条件选择性执行）
if语句 switch语句
3. 循环（根据条件循环执行，不满足条件时终止循环）
2.if的嵌套
// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3； …
} else { // 上述条件都不成立执行此处代码 }
三种：
1. 单分支 if(条件表达式){}
2. 双分支 if(){}else{}
3. 多分支 if(){}else if(){} else if(){}… else{}
单分支
var x = 10;
对x变量进行判断，如果条件表达式为true，就执行紧挨着的大括号
如果条件表达式为false，就不执行紧挨着的大括号
if (x>=20) {
console.log('123');
}
console.log('over');
var x = +prompt('请输入...');
双分支
条件表达式的意思是：x是一个偶数
if (x%2==0) {
console.log('我是偶数');
} else {
console.log('我是奇数');
}
多分支
var x = +prompt(‘请输入数字…’);
if(x>=80&&x<=100){
alert(‘优秀’)
}else if(x>=60&&x<80){
alert(‘良好’)
}else if(x<60&&x>=0){
alert(‘差生’)
}else{
alert(‘你输入的数字超出成绩范围’)
}
3.switch语句
switch的语法
表达式：通过运算得到一个值，3+2 5>3
执行流程：拿匹配表达式和case后的常量进行比对，必对成功的，进入程序，输出该case选项的语句以及后面的语句，遇到break终止。
switch (匹配表达式) {
case 常量值:
语句;
break;
case 常量值:
语句;
break;
case 常量值:
语句;
break;
case 常量值:
语句;
break;
default:
语句;
break;
}
var x = ‘B’
// 常量： 1 3 ‘abc’ true ‘A’ ‘B’
switch (x) {
case ‘A’:
alert(‘A选项’);
break;
case ‘B’:
alert(‘B选项’);
break;
case ‘C’:
alert(‘C选项’);
break;
case ‘D’:
alert(‘D选项’);
break;
default:
alert(‘没有匹配到’);
break;
}
循环
顺序语句
分支语句 if switch
循环语句： 满足某个条件时一直执行，当条件不满足的时候，停止执行
break: 终止
break出现的场景：switch语句，循环中
continue: 中止本次循环，继续下一次循环
for循环
for(初始化语句;条件判断语句;变量更新语句){
循环体}
while循环
初始化语句;
while(条件判断){
语句体;
变量更新;
}
do while循环
初始化语句;
do{
语句体;
变量更新
}while(条件判断)
图形： 循环嵌套，外层循环控制行数，内层循环控制每行的个数
用法上：
// for循环针对循环次数已知；
// while针对循环次数未知
do while循环：针对于哪种，必须执行一次的循环。
函数
1.三元表达式
三元表达式
// 条件表达式?值1:值2
// 当条件表达式结果为true，选择的是值1
// 当条件表达式结果为false，选择的是值2
2.函数
函数的概念：完成特定功能的代码块的一个封装，这个封装的代码块可以重复执行
// 声明变量
// var x = 10;
// 声明函数
// function fn(){
// }
// 利用函数封装
function printSjx() {
document.write('<table>')
for (var i = 1; i <= 9; i++) {
document.write('<tr>')
for (var j = 1; j <= i; j++) {
// document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
document.write(`<td>${i}*${j}=${i * j}</td>`)
}
document.write('</tr>');
}
document.write('</table>')
}
// 封装完的代码可以重复执行
// 调用函数
// printSjx()
// printSjx()
// printSjx()
// 函数不调用不执行。
定义函数的两种方式区别：
-
函数声明式，调用的时候可以放在函数定义的上面或者下面
function fn(){
}
-
表达式声明法：调用时只能写在函数定义的下面，放在上面会报错
var printSanJiaoXing = function(){
}
定义函数的两种方式：
// 函数名：驼峰命名法 动词 eatApple printSanJiaoXing
// (): 必须要带
// 参数列表：个数0个或者多个（根据实际需求进行改写）
// {}: 完成特定功能的代码都需要放在{}中
// function 函数名([参数列表]){}
1. 函数声明式。通过function关键字 来声明的
// function printSanJiaoXing(){}
2. 表达式声明法(函数赋值)
函数的参数:
形参： 函数定义时写的参数叫形参
实参： 函数调用时写的参数叫实参
函数调用的本质是：将实参赋值给形参
函数调用时，实参赋值给形参
形参和实参个数相同时，参数赋值会一一对应
形参个数>实参个数: 没有给赋值的形参，值为undefined
实参的数>形参个数：可以通过arguments来获取传入的实参
每一个函数内部都会有一个叫arguments：它会记录你传递过去的所有实参
// arguments: [2, 3, 6, 4, 5]
// arguments[0] arguments[1] arguments[2] arguments[3] arguments[4]
个数 形参 = 实参 一一兑现
形参 > 实参 多出来的参数 undefined
形参 < 实参 arguments
返回值
return:
通过return 关键字返回出来的结果，函数调用时，结果就可以被保存起来
带return的函数，函数调用的结果是一个值，可以直接输出，也可以存到变量中
函数如果带return了，函数调用的结果是 一个值，可以直接输出，也可以保存到变量里
return作用补充
// 1.没有手写return的话，系统会在程序{}的结尾处，写 return undefined
// 2.函数带 return了，函数调用的结果是return后面的值
// 3.函数只写一个return；函数调用结果还是undefined
// 4.函数只能带出来一个值
// 5.return终止函数，后面的代码将不再执行。
随机数
产生一个随机数
// var x = parseInt(Math.random() * (最大值-最小值)+最小值)
// document.write(x)
// function getColor() {
// var r = parseInt(Math.random() * 256)
// var g = parseInt(Math.random() * 256)
// var b = parseInt(Math.random() * 256)
// var str = `rgb(${r},${g},${b})`
// return str;
// }
// document.write(getColor());
截取字符串位数
字符串：x
x.substr(起始位，截取位数)
x.length ：表示字符串x的长度。
保留几位小数
toFixed(x)
次方函数
x = Math.pow(2,3) // 表示2的3次方
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
