1.JS
为什么要学习JavaScript
-
网页三部分：
HTML：控制网页的 结构
CSS：控制网页的 样式
JavaScript：控制网页的行为
不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。
-
最初的javascript
-
用于判断客户端的输入（表单校验）
-
-
现在的JavaScript：
现在的JS无所不能-
异步与服务器交互（AJAX）
-
网页和特效（演示）
-
服务端开发（nodejs）
-
命令行工具开发（nodejs）
-
桌面程序（Electron）
-
app开发（ReactNative）
-
控制硬件--物联网（Ruff）
-
游戏开发（cavans, cocos2d-js）
-
组成
-
ECMAScript - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关
-
DOM：一套操作网页元素的API(方法)
-
BOM：一套操作浏览器功能的API(方法)
使用方式
行内
<a href="#" οnclick="alert(666)"> 点我</a>
外联
. <script src="js文件路径"></script>
这是一对html标签，原则上可以放在html页面的任意位置,src后链接的是JavaScript文件，文件的扩展名为.js，如index.js,在里面直接写js文件即可.
内联
直接写在html文件内
<script type="text/javascript">
//在script标签内写js脚本
</script>
位置
head中
body结尾(推荐)
2.变量的概念及基本运算
变量
变量声明
变量命名规则
- 由字母、数字、下划线、$符号组成 ;
- 不能以数字开头
- 区分大小写
- 不能是关键字和保留字
变量名必须有意义
遵守驼峰命名法
变量赋值
数据类型
基本
Number
String
Bool
复合
Array
Object
特殊
null
undefined
Symbol
数据类型获取
typeof
类型转化
转化为数字
Number ()
常用于数字字符串型
parseInt()
可取整,可用来计算保留多位小数
parseFloat()
可取小数,
隐式转化
+变量
变量-0
转化为字符串
String()
toString()
变量+''
转化为bool值
0 null undefined 空字符串 NaN 转化为false,其余转化为true
Boolean()
!! 强制转化
运算符
算术
加 +
算术加减法,跟数学一样
字符串拼接
减 _
乘 *
除 /
取余 %
赋值
将xx赋值给一变量 =
加等 +=
减等 -=
乘等 *=
除等 /=
取余等 %=
关系
结果是bool值,可用于判断
小于 <
大于 >
小于等于 <=
大于等于 >=
等于 ==
全等于 ===
不等于 !=
不全等 !=
逻辑
与(且) &&
两边都成立,才取true,一边不成立,就取false
或 ||
只要有一边成立,就取true,两边都不成立才取false
非 !
取逻辑的反面 !true=false
一元运算符
自加 ++
自减 --
前置 先运算,在使用 后置先使用,在运算
3.流程控制语句
条件判断语句
单分支
if(条件){ 表达式 }
条件为true则执行
双分支
if(条件){表达式1}else{表达式2}
条件为true则执行表达式1,否则是表达式2
条件 ? 表达式1 : 表达式2
条件成立则执行表达式1,否则表达式2
多分支
if(){}else if(){} else if(){}else{}
条件分支语句
语法
switch(条件){ case 值1: 语句1;break; default:语句n}
case 匹配时,是全等
使用break终止匹配继续,防止代码穿透
如果所有的case都为false,则会执行default后的语句
循环语句
while(条件){ 循环体 }
do{ 循环体}while(条件)
先循环一次,再判断条件
for(初始化变量;条件表达式;变量更新){ 循环体}
如果for循环不写任何表达式,只写两个分号;
此时循环是一个死循环,会一直执行下去
三元运算符
语法: 条件表达式 ? 语句1 : 语句2;
?询问表达式是否成立,也就是返回值是否为true
成立则执行语句1
不成立则执行语句2
跳出
不能再if语句中使用,默认只会对离他最近的循环起作用
continue
跳出当前循环,进行下一次
break
结束循环
4.函数
概念
函数就是代码块，可以多次调用，很容易实现模块化编程。
声明
直接声明
function 函数名(形参){语句...}
赋值式(匿名函数)
var 函数名 = function(形参){语句...}
函数名: 和变量名命名规则一致
函数名和变量名冲突
变量会覆盖含函数
调用方式
以函数方式调用
函数名()
以方法调用
变量.函数名()
区别:直接声明的函数可以先调用,在声明,而匿名函数则不行
参数
形参 声明函数的是形参
实参 调用函数的是实参
形参默认值,一般设置在最后
arguments 有实参,但没有形参接收时使用
形参和实参是位置一一对应关系
返回值 return
结束代码执行,也就是return后的语句都不会执行
作为函数的处理结果返回
在哪里调用,就返回到哪里
返回值可以是任意类型,如果不写,就相当于返回一个undefined
自执行
自执行的函数都是匿名函数
语法:(function(){语句...})();
第一个括号用于包裹函数.最后一个括号是调用函数
5.系统函数
数学函数
Math.random() 0--1取随机数
Math.ceil() 向上取整
Math.floor() 向下取整
Math.sqrt() 对一个数进行开方
num.toFixed() 保留两位小数
其它
parseInt()
isNaN()
parseFloat()
6.作用域
全局作用域,在script标签之内
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法
全局变量,在任何地方都可访问
局部作用域,在函数之内
调用函数时创建作用域,函数执行完毕,作用域销毁
局部变量,只能在函数内访问
隐式全局,在函数内声明,但没有 var
作用域链
变量查找的顺序
1 先在函数内部查找
2 如果没有找到,则到上级作用域
3 找到全局还没有找到,则报错
7.预编译
代码运行,分为两步
1 预编译
声明变量但不赋值
声明函数
2 执行,物理顺序(从上到下)
作用
函数可以先调用,再声明
变量先调用,但输出undefined
变量提升
预编译时,将变量提升到作用域顶端,但不使用var,则不会提升
8.事件
鼠标事件
onclick 点击
onmouseover 移入
onmouseout 移出
onmousemove 移动
ondblclick 双击
onmousedown 按下
onmouseup 抬起
表单事件
onfocus 获取焦点
onblur 失去焦点
onreset 重置
onsubmit 提交
onchange 改变时触发
绑定方式
行内绑定
js动态绑定
9.对象
window 是可见的最大对象,也就是浏览器窗口
构造函数
使用new关键字调用的函数,是构造函数
new String()
new Number()
构造函数是专门用来创建对象的函数
被创建的对象,称为是该构造函数的实例
自定义
由属性和方法组成
声明
var obj={ property:'123',fun:function(){}}
向对象添加属性
对象.属性名 = 属性值;
修改对象属性值
对象.属性名 = 新值;
如果读取对象中没有该属性值,不会报错,而是返回undefined
