JavaScript学习笔记--进阶之路
了解js特性&事件使用
20200316
1、JavaScript简介
历史：
第一个浏览器 就是文本和图片
网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互
诞生：为了实现用户和网页的交互而出现
(1) 网景公司的布兰登艾奇开发了js who
(2) 借鉴了 java的数据管理机制和c的函数 how
(3) Js的创建是用来解决浏览器和用户之间互动的问题的（表单提交问题）do
(4) Mocha-->liveScript-->javaScript 历程
1、开发一门新语言
2、使用已经成熟的语言（java<sun> python c ------）
这个时候使用的是java ----- 笨重
95年的时候 布兰登.艾奇 网景公司
javascript 布兰登.艾奇 10天
javascript 完善？
es1 es5和es6 es102、JavaScript特点、功能
Js是一门 基于对象的，由事件驱动的，解释性 脚本语言
javascript 核心组成：
1、ECMAscript 核心语法 规定这门语言怎么写或者说怎么用
2、DOM document object model 文档(html) 对象 模型 DOM提供了一些操作html文档的方法 ---- 标签
3、BOM browser object model 浏览器 对象 模型 BOM提供了一些操作浏览器的方法 --- 浏览器
javascript特点：
1、解释性的脚本语言 ------ 浏览器可以直接读写
2、基于事件的 -- 必须是事件触发 才能运行某一个效果
3、基于对象的 -- 万物皆对象 面向对象编程 es5里面没有对象这一个说法 只有类对象 在es6里面才有对象的概念
4、跨平台的 --- 是否有浏览器有关系
5、弱类型语言 -- 定义变量的关键字是唯一的 使用的是var
和编译语言之间的区别：
- java --> 编译器 -->0101010 --> 效果
- JavaScript --> 浏览器（javascript引擎）
- Java和JavaScript之间关系 --> 没有关系3、JavaScript引入方式
行内：
不需要在开始标签写入javascript 这个关键词 和内部样式是有区别的
注意：引号的嵌套 如果遇到引号的嵌套，需要外层引号和内层引号不能相同
不推荐使用行内引入的js代码 不利于结构和js代码逻辑的分离
onclick:是点击事件 只有点击了才能执行 不点击就不会执行
alert(1)：是js自带的弹出框，带有一个确定按钮 只是用来测试使用 不能用于实际的开发
和超连接里面的#号不一样 #属于空链接 alert属于事件弹出框
alert（）：可以放置任何内容，一般用来测试 如果是中文或者英文 要使用引号引起来，数字或者变量 不需要使用引号
<div onclick="alert(1)">我是被点击才能生效的</div>
内部：
在html代码中写入script标签，
在script双标签之间写入js代码
注意：在HTML文档中可以写入多个script标签，也可以将script标签写入任意位置，只建议放在head和body的结束标签之前，紧紧挨着head和body的结束标签
我们推荐大家将script标签写在body标签的末尾
Html代码的执行顺序是从上到下的，如果遇到script标签，就会先进入script标签，执行js代码，执行完之后再继续向下执行，因此如果在body前面获取元素，就获取不到，因此建议写在body标签的末尾
<script>
alert(1);
</script>
外部：
注意扩展名 是.js
外部js的引入 要使用script双标签 并使用src属性 引入外部js的路径
href和src的区别：都是指的路径 一个是外部样式的路径 一个是外部js的路径
script双标签在页面的位置，可以放在任何位置，但是，只建议放在head和body的结束标签之前，紧紧挨着head和body的结束标签
<script src="./js/index.js"></script>
注意：在使用外部js 的时候，不需要在外部js里面在写入script 双标签
伪协议：
<a href = 'javascript:;'></a>
注：当内部js写在head标签内的时候添加如下代码
window.onload
Window.onload = function(){ js代码 }
//当js必须写在头部时：
window.onload = function() {
var btn = document.getElementById('btn');
console.log(btn);
btn.onclick = function () {
alert('我是被点击的');
}
}
作用：写在大括号中的js代码会等到 页面上的所有标签和外部资源（图片、音频、视频、外部文件）都加载完 再执行
3.1、三种引入方式优先使用哪个？
优先使用外部 （页面和js的开发可以分离，提高开发效率）
对于一些简单的小效果 可以使用内部 尽量不要使用行内 3.2、js如何注释
被注释掉的代码是不执行的
在开发中，没有删除代码着一种说法，只有注释代码
单行注释 //
多行注释 /*注释的代码*/
快捷键 ctrl+/4、js鼠标等事件
鼠标事件：
onclick 点击事件
ondblclick 双击事件
onmouseover / onmouseenter 鼠标移入元素
onmouseout / onmouseleave 鼠标离开元素
onmousemove 鼠标在元素中移动
onmousedown 鼠标按下
onmouseup 鼠标抬起
oncontextmenu 鼠标右键菜单事件
键盘：
onkeydown 按下
onkeyup 抬起
onkeypress 按下并抬起
表单控件：
onblur 失去焦点
onfocus 获取焦点
oninput 输入
onchange 改变
onsubmit 提交
onreset 重置
页面：
onload 页面加载结束
onscroll 滚动
onresize 改变大小
统一语法：
事件源.事件类型 = 事件处理函数
//=====示例===========onmouseover和onmouseenter的区别=======会有冒泡===
这个事件认为子元素和父元素是不同的元素 因此在移入子元素之后，就理解为移出了父元素，因此从子元素中重新移入父元素也会再触发父元素的移入事件
oDiv.onmouseover = function() {
console.log('父');
}
son.onmouseover = function() {
console.log('子');
}
//onmouseenter中 在父元素中移出移入子元素 父元素的移入事件并不会触发
oDiv.onmouseenter = function(){
console.log('父');
}
son.onmouseenter = function(){
console.log('子');
}
4.1、事件
Js添加事件的方式
元素.事件名 = function(){ 当事件发生的时候浏览器页面要执行的反馈代码 }
事件不要重复添加，如果重复添加，后面的会覆盖前面的
5、js获取元素
get:获取 / set:设置
Element：元素 指的是标签名
By：通过
Id：ID名字
document.getElementById('id名字')；
测试语句： console.log()；把结果在控制台打印出来
document.getElementById('box').onclick=function(){
alert(1);
}
当使用内部或者外部js的时候，要把功能代码 放在一个函数的代码块里面
getAttribute() 6、js变量
6.1、定义赋值
定义：可以改变的量，存储数据的容器
使用关键字 var 定义 js里面所有的变量都是使用 var 关键字定义 所谓被称为弱类型语言
因为定义所有的变量只使用 var 关键字 ，所以是弱类型语言
变量的创建方式
变量的声明和赋值
声明：var 变量名; //拿来了一个空容器
赋值：变量名 = 变量值; //将数据作为内容存入容器中
变量的声明和赋值合写
var 变量名 = 变量值;
变量的连续声明
var 变量名1 = 变量值,变量名2 = 变量值,变量名3 = 变量值....
变量的连等
var a = b = c = 10; //a b c都是10
---------------------------------------------------------------------
var num = 10；
var： 申明变量的关键字
num: 变量名
= : 不是等于的意思，是赋值
10： 变量值
js里面的值的类型 是由等号右面的值决定的
6.2、命名规则
名字见名知义具有语义化，遵循驼峰标识（从第二个单词开始，首字母大写） userName passWord
变量名只能以 字母 、_ 、$ 、开头
不能使用关键字和保留字 保留字就是候选关键字
变量名不要相同(后面的会覆盖前面)
变量命名只能使用字母，数字，_，$四种字符，除此之外，都不能使用
$_abc123 除了这四种之外其他都是特殊字符，不能使用
分号：
告诉浏览器，这一行代码结束了
最好是带上分号，好习惯
引号：
单引号和双引号
单引号和双引号都是成对出现的，不能交叉使用 要嵌套使用
单引号里面一定要使用双引号 双引号里面一定要使用单引号7、事件的三部曲
谁发生了事件
发生了什么事件
发生了什么事情
------------------------------------------------------------------------
//1、 btn发生了事件 获取btn
var btn = document.getElementById('btn');
// 2、发生了什么事件 onclick
btn.onclick = function(){
// 3、把‘我成功被点击了’打印到控制台
console.log('我成功被点击了211111');
}
alert()和console.log():两个测试语句的括号里面，除了变量名和纯数字以为，其他的都要加引号8、JavaScript操作属性（内容、标签、样式）
操作表单元素：
表单元素.value；//获取表单内容
表单元素.value = '新的值'； //设置表单内容
txt.value = null;9、操作闭合标签(双标签)内容
innerHTML
标签.innerHTML //获取内容
标签.innerHTML = '新内容' //设置内容
innerHTML会覆盖原来的内容
innerText
获取内容的
标签.innerText //获取内容
标签.innerText= '新内容' //设置内容
innerText会覆盖原来的内容
区别：
innerHTML是可以识别标签，并正常输出的 但是 innerText是不可以识别标签的，会把标签当作文本正常打印9-案例
<body>
<div id="box">春眠不觉晓 处处蚊子咬</div>
<script>
var box = document.getElementById('box');
// console.log(box);
// console.log(box.innerHTML); // 获取标签内容
//box.innerHTML = '我是新内容'; // 设置新内容覆盖原内容
// 原来的内容和新的内容全部保留住
// box.innerHTML = box.innerHTML+'我是新内容';
// box.innerHTML += '我是新内容233333'; //简写
---------------------------------------------------------------
// console.log(box.innerText);
// box.innerText = '123';
// box.innerText = box.innerText + '789';
// box.innerText += '789';
// 区别：
// box.innerHTML = '<h1>我是可以识别标签的</h1>';
box.innerText = '<h1>我是可以识别标签的</h1>';
</script>
</body>10、操作元素属性
元素的属性有哪些 ？
html属性：
id class title
原有属性 id class title 自定义属性 ： 自己起名字
标签.属性名 //获取属性
标签.属性名 = '新属性值' //设置属性
这种方式对自定义属性是获取不到的
在操作类名的时候需要注意 不能直接写class（因为class是一个关键字），而应该写 元素.className 元素.className = '类名'
这种形式操作html属性 只能操作标签自带的属性，如果元素不自带的属性不能操作10-案例
<style>
.active{
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<!-- 操作元素属性 -->
<div id="box" class="div" title="我就是我"></div>
<script>
var box = document.getElementById('box');
// console.log(box);
// console.log(box.id,box.title);
// box.id = 'box1';
// box.title = '我不是我 我也不知道是谁';
// class的获取设置以及使用
// console.log(box.class); 无法获取class值
console.log(box.className); //使用className获取
box.className = 'active';
</script>
</body>11、操作元素样式
行间样式和非行间样式
js操作的样式，不管是添加样式，还是覆盖样式 或者是修改样式 最终显示的位置都是行间样式
获取属性：标签.style.样式名；
oDiv.style.width； 获得了oDiv的宽度
设置属性：标签.style.样式名 = '样式值';
oDiv.style.width = ‘300px’； 设置了oDiv的宽度
## 注意：js里面是没有 `-`,当使用样式里面的复合词的时候，要把`-`去掉，然后从第二个单词开始，首字母要大写 如font-size --> fontSize
cssText
添加样式的时候，1、保证样式在同一行 2、字符串拼接
会完全覆盖原来的样式 box.style.cssText += 'width: 100px;height: 100px;border:2px solid blue';
兼容：
打印值的时候，在`IE`浏览器里面 样式名和样式值 都是大写，并且数无序的
`IE`浏览器并不会读写cssText,必须在样式前面加 `;`11-案例
<body>
<div id="box" style="width: 200px; height: 200px;"> 我是为你</div>
<script>
// 获取元素
var box = document.getElementById('box');
// console.log(box);
// 标签.style.样式名 = ‘样式值’;
box.style.width = '100px';
box.style.height = '100px';
//box.style.background = 'blue'; // 英文 十六进制
// box.style.background-color = 'red'; // 错误的
box.style.backgroundColor = 'red'; //js中采用驼峰命名，不能使用 - 连接
box.style.fontSize = '20px';
</script>
</body>
注：相同属性后写的覆盖之前的，没有的会添加
当你的属性值赋值给一个变量的时候，如果使用这个变量，那么 `.` 的形式就不能使用了
解决方案：我们使用`[]`形式实现属性的获取以及设置
只要是从键盘输入的，都是字符串，也就是用引号引起来
如果直接使用的是属性名 那就用`.` ,如果属性名 赋值给了一个变量，并且你想使用这个变量来改变属性，那就使用`[]`.
-------------------------------------------
cssText
<body>
<div id="box"></div>
<script>
1、 var box = document.getElementById('box');
// box.style.cssText = 'width: 100px;'+
// 'height: 100px;'+
// 'background: pink;';
// 标准浏览器的
2、 box.style.cssText = 'width: 100px;height: 100px;background: pink;';
box.style.cssText += 'width: 100px;height: 100px;border:2px solid blue';
console.log( box.style.cssText)
// IE兼容解决：非标准浏览器的 指的是ie 5 6 7 8
box.style.cssText += ';width: 100px;height: 100px;border:2px solid blue';
</script>
</body>
注：cssText 书写折行时需添加''+'' 形式将属性连接 如1
一行书写时如2
数据类型&操作符
20200317
1、数据类型的分类
1）基本数据类型（用来存储单一数据）
数值类型 Number
字符串类型 String
布尔型 Boolean （true/false）
空值 null undefined
2）复杂数据类型（可以用来存储多种数据类型）
对象 Object
函数 function(){}
数组 Array()2、typeof操作符
为什么需要知道数据类型？
为了保证正常的运算，需要使用运算符把数据链接起来，形成表达式
数据的类型是有值决定
用来确定定义的数据是哪种数据类型
空格 typeof 变量名 我们一般用来判断基本数据类型
括号 typeof (变量名) 我们一般用来判断复杂的数据类型
instanceof运算符 用来确定当前的实列化是不是当前的对象创建的 2-案例
var d = 10；
console.log(typeof d) 控制台返回number数值型
console.log(typeof(d)) 两种写法3、基本数据类型--Number类型-数值类型
整数和小数
如果是小数，并且第一位是 0 ，可以省略，并不影响打印
如果是小数，并且最后一位是 0 ，0会被自动省略
负值
整数或者小数的负数
进制
二进制 0101
八进制（0-7） 如果超出这个范围 自动转化成十进制
十进制 （0-9）
十六进制（0-9 a-f）以0x开头 x可以大写也可以小写
小数相加
小数计算的方式是按照 `IEEE 754` 64位方式进行计算的 进度缺失；
解决方式：扩大100倍 结果缩小100倍
NaN
当进行一个不正常的运算的时候 会产生NaN
不是一个数字的数字 类型number
作用：只是告诉开发者，你的表达式运算出现了不正常的运算3-案例
//进度缺失 0.1 0.2特殊
var a = 0.1;
var b = 0.2;
console.log(a + b);//0.30000000000000004
解决：扩大一百倍
console.log((0.1*100 + 0.2*100) / 100); // 透明度计算会遇到
var c = 0.2;
var d = 0.3;
console.log(c + d);//0.5
var e = 3;
var f = 'aa';
console.log(e / f); //返回NaN 告知程序员数据运算类型不统一
console.log(typeof(e / f)); //返回 number 类型4、String类型
定义的
使用单引号和双引号引起来的 都是字符串
字符串是可以拼接的
键盘输入的
键盘输入的一定是字符串
长度
字符串是有长度的 并且是有下标的
长度就是字符串的字母个数，所有的下标都是从`0`开始 最后一个下标值是 长度length - 1;
字符串.length(长度)
读写
字符串只能读 不能写 而且必须通过下标
下标
下标从0开始
charAt 字符串的一个方法 可以获取到字符串中指定下标的字符
语法:字符串.charAt(指定的下标); 获取到字符串中指定下标的字符
var str1 = 'abc'; console.log(str1.charAt(0)); //a
substring() 方法用于提取字符串中介于两个指定下标之间的字符
语法：字符串.substring(start,stop);
var str="Hello world!"; str.substring(3,7);//lo w4-案例
var str = 'dyh';
var str1 = 'hnnu';
var nu = 10;
console.log(typeof str,typeof str1,typeof nu); //返回 string string number
console.log(str + str1); //字符串拼接 dyhhnnu
console.log(10 + str); //隐式转化 10dyh
console.log(str[0]); //d 这种方式是从数组演变过了的
console.log(str.charAt(0)); //字符串使用这种方式取
console.log(str.length); //返回 35、Boolean类型
当true和 false参与运算的时候，会根据隐式转换的原则 true 变为 1 false变为 0
true 1 真
false 0 假
console.log(true + false); //返回 16、null与undefined
var a = null；
null 空值 是一个空对象，是为了将来存储一个对象，提前在内存分配一块空间，是为对象进入准备的
var b；
undefined 未定义 没有值 定义的变量没有赋值 结果就是undefined
----------------------------------------------------------------------
Undefined和null的区别
基本类型数据存储在栈区 栈区的特点就是有顺序，因此可以查找里面的数据
复杂类型数据存储在堆区 堆区的特点就是没顺序，因此就不能查找里面的数据
Undefined是变量声明未赋值
Null是空指针，就是null是一个指针，但是使用这个指针查找堆区，并没有任何数据能够对应7、复杂数据类型
7.1、Object对象
关键字创建
使用关键字 new new 的作用 实列化（声明创建一个对象）一个对象
内置函数：js定义好的函数 可以直接拿过来用的 就是内置函数
var person1 = new Object(); //内置函数
person1.name = '小宝贝';
console.log(person1.name);
console.log(person1['name']);
表达式创建
1、 var obj = {}
2、 var pt = new Object();
var person = {
name:'小花',
age:18,
height:'300kg',
}
console.log(person.name);
console.log(person['name']);
对象：万物皆对象 对象包含 属性和方法 是以键值对形似存在 有键名和键值
对象：一个名词
属性：形容词
方法：动词
----------------------------------
一个人：对象
属性： 外貌 身高 胖瘦
方法：跑步 走路 跳 踢 吃饭 看书
表达式定义一个对象 键值对 有键名和键值
var person = {
name:'小花',
age:18,
height:'300kg',
}
// console.log(person.name);
console.log(person['name']);
使用关键字 new new 的作用 就是实列化一个对象
内置函数：js定义好的函数 可以直接拿过来用的 就是内置函数
var person1 = new Object(); //内置函数
person1.name = '宝贝';
console.log(person1.name);
console.log(person1['name']);7.2、function函数
关键字创建
function 函数名(参数){功能性的代码块}
调用
函数名();
表达式创建
var 变量名 = function(参数){功能性的代码块}
调用
变量名();
特点：
不调用不执行
函数是有参数的
返回值的
函数名不能重复
======================函数的使用范围=======================
封装：声明一个函数，去实现某种功能 制作工具
作为事件处理函数 ： 元素.事件 = function(){ 事件触发的时候执行的代码 }
对象中的方法 ：obj = { 'eat':function(){} }
代码复用 使用工具
======================函数中的参数=========================
函数分为两类
不需要参数的
需要参数的
函数的参数分两类
形式参数（形参）
在函数声明的小括号中写入的参数就是形参
形参命名遵循变量命名规则
函数中写入形参相当于在函数中声明变量
实际参数（实参）
在函数调用的小括号中写入的参数就是实参
实参可以是任意类型的数据
函数中写入实参相当于给形参声明的变量赋值
形参和实参的个数可以是任意多个，如果是多个参数的情况，就按照顺序依次将实参赋值给每一个形参
形参和实参的关系
形参个数多于实参：
如果形参个数多于实参，就会按照顺序依次将实参赋值给形参，多余的形参值为undefined
形参个数少于实参
如果形参个数少于实参，也会按顺序依次将实参赋值给形参，多余的实参就舍弃不要了
arguments
arguments是函数的实参集合，这个实参集合是一个伪数组，当前函数中传入的所有实参，都是这个伪数组中的数组项
一般用在形参个数不确定的时候
## 使用关键字的方式声明函数，在调用的时候 可以在函数体的上面调用，也可以在函数体的下面调用，但是表达式声明的函数，只能在函数体的下面调用
num(1);//可以调用
function num(a){
console.log(a);
}
num(2);//也可以调用
//nux(); //无法调用
var nux = function(){
console.log('222');
}
nux();//可以正常调用
//自定义构造函数
function nuw(){
console.log('自定义构造函数');
}
var per = new nuw(); //正常调用7.2.1、实参集合arguments使用
//封装一个计算任意个数字和的函数 arguments 实参集合
var a = function(){
//在函数中直接使用arguments即可
console.log(arguments);
//计算所有数字的和 循环arguments 将所有数组项依次累加即可
var he = 0//用来记录累加的和
for(var i=0; i<arguments.length; i++){
he += arguments[i]//就是每一个实参
}
console.log(he);
}
a(1,2,3,4,5,6,7,8,'abc',9); //返回 36abc97.3、Array数组
关键字创建
var arr = new Array();
给数组添加内容 数组[下标] = 内容
特点：数组是有下标（从0开始)的 数组是有长度的 （length） arr.length
表达式创建
var arr = [];
var arr1 = [1,2,3,4,5,6,7,8,9];
console.log(arr1.length); // 9
console.log(arr1[5])；//6
var arr = [];
for(var i=1;i<10;i++){
arr.push(i); //向数值中赋值 优于下
//arr[i] += i；
}
document.write(arr.toString()); //将数组转化成字符输出
关键字
var arr = new Array();
var arr = [1,2,3,true,'1',function(){},object(),[]];
arr[0] = '1'; //赋值
arr[1] = '10';
arr[2] = '100';
arr[3] = '1000';
console.log(arr[3]);
console.log(arr.length); // 4
表达式
var arr1 = [1,2,3,4,5,6,7,8,9];
console.log(arr1.length); // 9
console.log(arr1[5]); //6
数据类型转换
20200318
1、内置函数
就是js已经定义好的 可以直接拿过来用
注：首字母大写
Number 数值
String 字符串
Boolean 布尔
Object 对象
Function 函数
Array 数组
Date 时间
Error 错误
RegExp 正则表达式2、数据类型强制转换
2.1、其他类型转 Number 类型
把其他的类型转换为数值类型 语法： Number（转换的对象）
Number能转换boolean null
字符串能转换纯数字或者'',不能转换的结果 返回NaN
纯数字
console.log(Number('123')); // 123
字符串
数字字符串
console.log(Number('123')); // 123
英文字符串
console.log(Number('abc')); // NaN
空字符串
console.log(Number('')); // 0
NaN
console.log(Number(NaN)); // NaN
null
console.log(Number(null)); // 0
12px+2
console.log(Number(12px+2)); //NaN
2.2、parseInt 与 parseFloat
转换方式：如果数据转换为数字之后，不是正常数字，值也是NaN
parseInt 可以将其他类型数据转换为数字类型(数字类型的整型)，能转化就转化 不能转化 则停止
第二个参数 parseInt(转化的对象,进制)
console.log(parseInt('12px'));//12
console.log(parseInt('px12'));//NaN 不转换
console.log(parseInt('12.5'));//12
console.log(parseInt('0x123',16));//291 转换成16进制
parseFloat 可以将其他类型数据转换为数字类型(数字类型的浮点型型)
console.log(parseFloat('px12'));//NaN 不转换
console.log(parseFloat('12px'));//12
console.log(parseFloat('12'));//12
console.log(parseFloat('12.50'));//12.5
2.3、isNaN
是不是 不是 数字 是用来判断是否是数字的 当是数字的数字的时候 返回false 不是数字的时候 返回 true
console.log(isNaN('12'));//false
console.log(isNaN('abc'));//true3、其他类型转字符串
3.1、toString()
语法：转换的对象.toString();
注：不是万能的，undefined和null不能用
在时间Data()我们需要用到字符串格式的时间 ‘2020-3-17’；我们会使用toString()
转化来的字符串 是可以改变的 灵活性比较高的
var num = 10;
var sum = 'hello';
var aum = false;
var arr = [1,2,3];
console.log(num,num.toString());//10 "10"
console.log(sum,sum.toString());//hello hello
console.log(aum,aum.toString());//false "false"
console.log(arr,arr.toString());//Array(3) "1,2,3"3.2、String()
语法：String(转换的对象)
注：万能的
强制转化
var num = 10;
var sum = 'hello';
var aum = false;
var arr = [1,2,3];
console.log(num,String(num));//10 "10"
console.log(sum,String(sum));//hello "hello"
console.log(aum,String(aum));//false "false"
console.log(arr,String(arr));//Array(3) "1,2,3"4、其他类型转布尔值
4.1、Boolean
语法： Boolean(转化的对象)
程序世界的真假
假值： undefined null false 空字符串 NaN 0 除了这六个 其他都为真
console.log(Boolean(1));
console.log(Boolean(100));
console.log(Boolean('abc'));
console.log(Boolean('1000'));
console.log(Boolean([]));
console.log(Boolean({}));
//假
console.log(Boolean(0));
console.log(Boolean(false));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(''));
console.log(Boolean(NaN));
5、运算符
5.1、算数运算符
加（+）减（-）乘（*）除（/）取余（%）加加（++）减减（--）
加（+）
加法
连接符
取余（%）
取余数 两个数相除 一直到不能整除 余下的数值
加加（++）减减（--）
在自己本身增加 1 或者减 1
当 加加（++）减减（--）在变量名后面的时候，先参与运算，然后在自增或者自减
当 加加（++）减减（--）在变量名前面的时候，先自增或者自减，然后在参与运算
console.log(1+10); // 11
console.log('1' + 10); // 110
console.log(true + 1); // 2
console.log('1' + '2'); // 12
var a = 2;
var b = ++a; //a=a+1-->3-->b=3
console.log(a,b); // 3 35.2、赋值运算符
赋值（=）加等于（+=）减等于（-=）乘等于（*=）除等于（/=）等运算
加等于（+=）
var a+=1 等同于 a = a+1;5.3、比较运算符
是否相等（==）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）、不等于（!=）、绝对等于（===）、绝对不等于（!==）
等于（==） 只判断值是否相等 如果值相等 返回真（true）否则返回假（false）
不等于（!=）
全等于（===） 先取判断值是否相等 如果值相等 再去判断类型是否相等 只有值和类型都相等 才返回真（true）否则返回假（false）
不全等于（!==）
5.3、逻辑运算符
逻辑运算符是与 &&，或 ||, 非 !
与 &&
条件同时满足 才继续执行
或 ||
只要满足一个条件就能执行
非 !
取反
if(true && flase){ //flase
console.log(666);
}
if(true || flase){ //true
console.log(666);
}
if(!true){ //flase
console.log(666);
}5.4、三目运算符
格式
条件？条件成立执行的代码 ：条件不成立执行的代码
10 > 5 ? 大于返回真 : 不大于返回假;6、数据类型的隐式转换
隐式转换：就是js给你自动转换的 不要使用任何方法
当使用字符串比较的时候，其实比较的是 第一位 并且根据的是ASCII表的 值进行比较
// +
console.log('10' + '100'); // 10100
console.log(10 + '100'); // 10100
console.log(100 + true);// 101
console.log(100 + false); // 100
console.log(100 + '10'); // 10010
console.log(100 + undefined); // NaN
console.log(100 + NaN); // NaN
console.log(100 + '');// 100
console.log(100 + 'a10'); // 100a10
console.log(100 + '10a');// 10010a
// -
console.log('10' - '100'); // -90
console.log(10 - '100'); // -90
console.log(100 - true);// 99
console.log(100 - false); // 100
console.log(100 - '10'); // 90
console.log(100 - undefined); // NaN
console.log(100 - NaN); // NaN
console.log(100 - '');// 100
console.log(100 - 'a10'); // NaN
console.log(100 - '10a');// NaN
if('2' > '101'){ // 2 > 101
console.log(666);
}流程控制语句&判断循环语句
20200320
1、if语句
If(条件){条件成立时执行的代码}
If(条件){条件成立时执行的代码} else{条件不成立的代码}
If(条件){成立执行的代码} else if(条件){当if条件不成立而else if 条件成立时执行的代码}..... else{如果if和else if 条件都不成立的时候执行的代码}1.1、分支语句 if
##if条件中 不能 交叉 以及 重叠
var num = prompt('请输入成绩');// 带有一个确定按钮和取消按钮的输入框 确定 是true 取消是false
if (num >= 90) {
alert('你是天才');
} else if (num >= 80 && num < 90) {
alert('你很优秀');
} else if (num >= 60 && num < 80) { // 65 70
if(num>60 && num <=65){
console.log(1);
}else if(num>65 && num <=70){
console.log(2);
}else{
console.log(3);
}1.2、if 单分支语句
语法：if（条件）{条件成立执行的语句}
如果条件不成立 则不执行
if(true){
console.log(' 我是条件成立执行的代码块');
}
if(a>0 || b>0){
console.log(' 我是条件成立执行的代码块');
}1.3、if-else 双分支语句
语法：if（条件）{条件成立执行的语句}else{条件不成立执行的语句}
if(false){
console.log(' 我是条件成立执行的代码块111');
}else{
console.log(' 我是条件成立执行的代码块2222');
}
1.4、if-else 多分支语句
语法：if（条件一）{条件一成立执行多代码块}else if(条件二){条件二成立执行的代码块}else if(条件三){条件三成立执行的代码块}else if(){} ......
注：扩展性的代码
语法：if（条件一）{条件一成立执行多代码块}else if(条件二){条件二成立执行的代码块}else if(条件三){条件三成立执行的代码块}else if(){} ...... else{上述条件都不成立执行的代码块}
注：一般性的代码
var num = prompt('请输入成绩');// 带有一个确定按钮和取消按钮的输入框 确定 是true 取消是false
if (num >= 90) {
alert('你是天才');
} else if (num >= 80 && num < 90) {
alert('你很优秀');
} else if (num >= 70 && num < 80) {
alert('你不错');
} else if (num <= 30) {
alert(' 你废了');
}else{ // 50
alert('我没在里面')
}
注意：最后加else 不方便以后扩展1.5、if-else 嵌套
大条件下面 细分小条件
if(true){
if(true){
console.log(1);
}else{
console.log(2);
}
}else{
if(true){
console.log(1);
}else if(false){
console.log('不成立');
}
}
2、条件对比语句 switch
switch 会比if 单纯 if可以实现的 switch不一定可以实现 但是switch 能实现的 if一定可以实现
如果是牵扯到表达式以及复杂字符或者正则表达式的 都优先使用if
如果是简单的数字，以及运算符号 可以使用switch 也可以使用if
当条件结构清晰 是固定的数值或者字符串的时候 适合用switch 如果条件是某一个范围内的 适合用if
switch实际上是使用要匹配的值和每一个匹配项进行匹配
语法：
switch (要匹配的值) {
case 匹配项1:
条件一成立执行的代码块
break; // 跳出语句 防止穿透
case 匹配项2:
条件二成立执行的代码块
break;
case 匹配项3:
条件三成立执行的代码块
break;
case 匹配项4:
条件四成立执行的代码块
break;
default:
// 上述条件都不成立执行的代码块
break
}
//==================示例======1=============================
var score = 90;
//switch是进行匹配
switch(true){//要匹配的值score==90 匹配项case的值全是true 使用90 和 true进行匹配
case score>=90 : console.log('奖励电动超跑一辆'); break;
case score>=80 : console.log('奖励飞天小饼干一盒'); break;
case score>=70 : console.log('奖励五方桥鸡腿一个'); break;
case score>=60 : console.log('哪凉快哪待着'); break;
case score>=50 : console.log('奖励半死单人揍一顿'); break;
default : console.log('奖励升天双人揍一顿');//在switch的最后一个匹配项末尾可以不加break
}
//返回 奖励电动超跑一辆
//==================示例======2=============================
var a = prompt('输入数字'); //输入2
switch(Number(a)){ //键盘输入都是字符型，需转换数值型
case 1:
alert('11');
break;
case 2:
alert('22');
break;
default:
alert('都不匹配');
break;
}
//返回22
3、获取元素的方式
3.1、id方式获取
通过id获取到的元素，是一个
语法：document.getElementById('ID名');
<div id="box">id标签</div>
var box = document.getElementById('box');3.2、标签名方式获取
通过标签获取的元素，是一个 类似数组（数组的特点，有长度和下标）的变量 获取到的是一堆
语法：document.getElementsByTagName('标签名');
<div id="box">通过标签</div>
var aDiv = document.getElementsByTagName('div');
aDiv[0] 表示第一个div3.3、class类目方式获取
通过类名（class）获取的元素，是一个 类似数组（数组的特点，有长度和下标）的变量 获取到的是一堆
语法：document.getElementsByClassName('class类名');
<div class="div">类名</div>
var div = document.getElementsByClassName('div');
div[0] 表示 第一个3.4、css选择器
语法：父级.querySelector(css选择器); 获取一个
document.querySelector('css选择器' );
语法：父级.querySelectorAll(css选择器); 获取一堆
document.querySelectorAll('css选择器');
选择器就是样式里面的选择器,可以按照样式写法,继承获取. 如：'#box p'
用标签的方式获取 获取的是页面的第一个标签 但是获取的是一个
但但是 他可以继承获取
var p = document.querySelector('.box button p');
获取的是一堆 也可以使用继承的方式获取
var p = document.querySelectorAll('.box button p');4、循环结构
4.1、for 循环
满足条件的情况下 反复执行
语法：for(var 表达式一;表达式二;表达式三){ 满足条件执行的代码块 }
表达式一;是一个初始值
表达式二;结束值
表达式三;变化值
for循环过程
i = 1 满足条件 i<=10; 执行 console.log(i)
i ++ i = 2;
i = 2 满足条件 i<=10; 执行 console.log(i) ; i = 2
............
当 i = 10; 满足条件 i<=10; 执行 console.log(i) ; i = 10
当 i = 11;不满足条件 i<=10; 结束执行 跳出整个循环
//--------------------------
for(var i = 1; i<10;){
console.log(i);
}
注：防止出现死循环
//--------------------------
//正常写法
var arr = [1,2]; // 数组取元素 必须通过下标 0 - 8
for(var i = 0; i<arr.length; i++){
console.log(arr[i]);
}
//for循环的变异写法
var arr = [1,2,3,4,5];
for(var i=0; len = arr.length,i<len;i++){
console.log(arr[i]);
}4.2、嵌套for循环
for(;;){
for(;;){}
}
外面的走一次 里面的走多次4.3、for-in循环
对象没有长度和下标 数组有长度和下标
专业用来循环对象的
语法：for(var 键值 in 要循环的对象名){操作对象的方法}
注：可以循环数组 但是不建议使用 循环数组最好的方式 是 for
var obj = { //对象
name:'dyh',
age:22,
sex:'男'
}
var arr = [1,2,3]; //数组
for(var key in obj){
console.log(key); //获取到 name，age，sex 属性名
console。log(obj.name); //dyh
console。log(obj['name']); //dyh 一样的
console.log(obj[key]); //中括号可以解析变量
// 输出:dyh
// 22
// 男
}
for(var key in arr){
console.log(arr[key]);
// 输出:1
// 2
// 3
}4.4、while循环
语法：while(条件){条件成立执行的代码块 值变化}
条件满足就执行，不满足一次也不执行
var i = 1，num = 0;
while(i<=10 ){
num+=i;
i++;
console.log(num);
}4.5、do-while循环
语法：do{条件成立执行的代码块 值变化}while(条件)
在do后面的大括号里面，是不管条件成不成立，先执行一次，然后再去判断条件是否成立，如果成立则继续执行 否则就退出循环
和for比较，while和do{}while，循环的体量并不是很小，实现效果或者执行的时候，偏向于小方向
var a = 5;
do{
a--; //最少执行一次
console.log(a);
}while(a>10)跳转语句&this&自定义属性
20200321
1、跳转语句
1.1、break
break防止穿透 是直接跳出整个循环 后面的条件即使满足 也不会执行
Break写在哪一个循环中，就会打断哪一个循环，跟其他循环没有关系
for(var i=0;i<10;i++){
if( i === 6){
break; //等于6 结束整个循环
}
console.log(i);
}1.2、continue
continue是结束当前循环，如果后面的条件满足，会继续执行
for(var i=0;i<10;i++){
if( i === 6){
continue;
}
console.log(i);
}2、this知识点
函数的this指向看调用不看声明
不同的函数调用所对应的this指向
普通函数调用
函数名() this--->window
事件处理函数调用 (事件处理函数是由浏览器在事件触发的时候自动调用的)
oDiv.onclick = function(){} this--->添加事件的元素
全局中this值为window
对象的方法函数
Var obj = {fn:function(){}} obj.fn()
当对象中某一属性的值是函数的时候，我们就说这个属性是对象的一个方法
对象.方法名() this--->调用方法的对象
总结
方法函数：对象.方法() this--->调用方法的对象
普通函数：window.函数名() this--->window
事件处理函数： oDiv.onclick = function(){} oDiv.onclick() this--->添加事件的元素
全局中的this就是window2.1、this用法
js中的最高：window -- document
this指本元素，其实就是触发事件的元素（对象）以及函数
当你使用了this 的时候，不管你的this在哪，只要不触发调用this的对象或者事件，你永远都不知道this到底指向的是谁
因为在事件中，我们是可以通过方法改变this的指向的
指向：
window：当在页面中直接使用console.log(this),this指向的是window
在事件里面，当触发事件时，this指向的是事件那个 `.`前面的元素
函数里面this指向的也是window
====================================
var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
// 单独执行
f() // 1 普通函数调用 this--> window
// obj 环境执行
obj.f() // 2 this--> 事件(obj)3、自定义属性-下标
设置自定义属性：元素.自定义属性名 = 自定义属性值
获取自定义属性：元素.自定义属性名
属性：是标签自带的属性 是原有属性 我们自己起名字定义的 是非原有属性
ID class value title 原有属性 abc = 'abc',非原有属性
//=============自定义属性===================
var box = document.getElementsByTagName('div');
for (var i = 0; i < box.length; i++) {
box[i].tag = true; //
box[i].onclick = function () {
if (this.tag) {
this.style.backgroundColor = 'blue';
this.tag = false;
// console.log(this);
} else {
this.style.backgroundColor = 'red';
this.tag = true;
}
}
}
//==============自定义下标==================
//长度和下标 把下标取出来，然后当做识别标签的索引
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].index = i; // 自定义索引 就是把下标拿出来 给相对应的标签做一个标记
div[i].onclick = function () {
if (this.tag) {
this.style.backgroundColor = 'blue';
tag = false;
} else {
this.style.backgroundColor = 'red';
tag = true;
}
}
}
//================================
1、开关
- var tag = true
2、自定义属性
- ali[i].tag = true;
3、自定义下标
- ali[i].index = i;作用域&预解析&返回值
20200325
1、作用域
Js作用域分两类
全局作用域：script标签包裹的内容的区域就是全局作用域,就是全局变量能起作用的范围
var a = 10;//a变量就声明在了全局作用域，就是一个全局变量
局部作用域：函数大括号内部的区域就是局部作用域,就是局部变量起作用的范围
var fn = function(){
var b = 20//变量b声明在局部作用域中，就是一个局部变量
}
定义：它是指对某一变量和函数具有访问权限的代码空间;
在js中只有函数可以划分作用域，因此每一个函数的大括号内部都是一个局部作用域
因此我们也称局部作用域为函数作用域
不同作用域中变量和函数的访问权限
局部作用域中声明的变量和函数只能在局部作用域中访问
大伯和父亲及大姑各自家庭中的私有物品只能在自家使用
全局作用域中声明的变量和函数可以在全局中的任意位置访问
爷爷奶奶家的东西由于是大家庭的财产，所以大家都可以支配
两个同级的局部作用域之间不能互相访问对方内部的变量
父亲，大伯和大姑之间不能互相用对方的财产
全局作用域不能访问局部作用域的变量
爷爷奶奶家不能使用大伯，大姑和父亲小家庭的财产
由以上几条我们推理出了一个概念
子级作用域可以访问父级作用域的变量和函数
父级作用域不能访问子级作用域的变量和函数
同级作用域之间不能互相访问变量和函数
//==================示例==1============================
function fn(){ //fn函数声明在全局作用域中，可以在全局中的任意位置被访问到
var a = 10;//不同作用域中可以声明同名变量，因为互相之间不影响
//a变量是fn函数的作用域中声明的函数，可以在整个fn函数内部被访问到
function fun(){
var c = 20; //c是fun函数中声明的变量，可以在整个fun函数中被访问到
console.log(a);//fun函数在fn函数内部，因此可以访问到a变量 10
console.log(c);//20 可以访问
console.log(fn);//fun函数处于全局作用域内部，因此可以访问到全局函数fn
}
fun()
}
fn()
//==================示例==2============================
function a(){
var c = 20;
console.log(d);
}
function b(){
var d = 30;
a();
console.log(c);
}
console.log(d);//报错
//局部作用域中声明的变量互相之间不能访问 因此上面两个函数中打印对方的变量都会失败
//b函数中调用a函数是可行的
//因为a函数声明在全局作用域中，b函数也处于全局作用域中，因此可以访问全局作用域中的变量2、作用域链
定义：作用域链是JavaScript内部中一种变量、函数查找机制，它决定了变量和函数的作用范围，向上查找的方式。
在一个作用域中访问函数或变量的时候，
会先在当前作用域查找这个变量或函数，如果找到，就直接使用
如果没找到，就想上一级作用域查找，如果有，就直接使用
如果还没有，就继续向上查找，一直找到全局作用域，如果有，就使用，如果没有，就报错
//==================示例==1============================
var fun = function(){
function a (){
var a = 10;
console.log(a);//在a函数中访问a变量 10
}
a();//调用函数 函数名()
console.log(a);//在fun函数中访问a变量 fun中的 a函数
//如果只写函数名 表示整个函数数据
}
fun();//---->结果是什么3、函数和变量声明的预解析
在js代码开始解析执行之前，浏览器会先对js代码进行一次预解析
预解析的作用：
将所有变量和函数的声明提升到当前作用域的最顶端，之后再开始按顺序执行代码
变量声明：var 变量名
函数声明: function 函数名(){}
//===============示例===1=================================
function fn(a) {
var s = a;
s.name = '优就业';
s.age = 12;
};
var json = {
name: '小u'
};
fn(json);
console.log(json);
/*预解析
function fn(a) {
var s;
var a; //a = json对象 函数参数传入
s = a; //s = json对象
s.name = '豪豪豪'; //全局的json变量 和局部的a形参 及 局部的s变量 拥有的值都是json对象的指针，因此三个变量操作的都是同一个对象
s.age = 12;
};
var json = {
name: '小豪'
};
fn(json); //豪豪豪
console.log(json); //豪豪豪
*/
//===============示例===2=================================
var a = 4;
function fn(a) {
console.log(a);
a = 5;
};
fn(a);
console.log(a);
/*预解析
var a; //变量声明 undefined
function fn(a) { //声明函数
var a; //形参相当于声明了一个变量，实参赋值为，a = 4
console.log(a); //4
a = 5; /使用的变量a是函数fn作用域中的a变量， 这句代码是将fn函数中的a变量赋值为5 全局的a变量没有变化，还是4
};
a = 4; //全局变量赋值
fn(a); //将全局变量4 传入函数fn()
console.log(a); //4 打印全局变量
*/
//===============示例===3=================================
fn();
var a = 4;
function fn(b) {
console.log(a);
a = 3;
console.log(a);
};
console.log(a);
/*预解析
var a; //声明 undefined
function fn(b) {
var b; //undefined
//如果当前作用域声明了一个变量，我们就说当前作用域有这个变量
console.log(a); //undefined
a = 3; //要设置a变量的值，就要在当前作用域先查找，发现没有a变量，就要像父级作用域查找，全局作用域中有a变量，就可以拿来使用，这里将全局a赋值为3
console.log(a); //3
};
fn();
a = 4; //赋值
console.log(a); //4
*/
//===============示例===4=================================
function fn本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17633998.html
