第一周内容复习
day1
一、认识JavaScript
1、JavaScript简称js，是一个运行在浏览器端的解释型弱类型面向对象的脚本语言。 由ECMAScript、DOM(和网页挂钩)、BOM(和浏览器挂钩)三部分组成。
- 浏览器端为环境 自带JavaScript解释器 --- 打开浏览器就可自动运行
- 编译型 在程序执行前需要检查代码语法的正确性，正确运行，不正确便不 运行。代表：Java、C#...... 3.解释型 不需要检查代码语法的正确性，直接就可运行，运行中碰到错误便 停止运行。代表：JavaScript、php...... 4.强类型 变量保存的数据是由数据类型决定的 5.弱类型 变量保存的数据可以随意，数据类型由数据来决定。 6.面向对象 语法：对象名.属性; 对象名.方法名(); 7.js特点 可以使用一切编辑工具编写js代码; 解释性; 弱类型; 面向对象; 可以做css完成不了的一切操作。
二、如何使用js
1、两种使用方式 1.在html页面上书写一个script标签，再在scrip里面写上js代码 2.创建一个xx.js的文件,然后再HTML里面将xx.js文件引入
2、3种输出方式 1.console.log(想要输出的东西);--->在控制台输出,不会对页面产生影响。 console-->控制台 log-->日志 2.document.write(想要输出的东西)-->在页面上输出,如果搭配点击事件,会把页面上原本的东西替换掉。支持标签。 document-->文档 3.alert(想要输出的东西);-->警告框,有时候会卡住整个页面，导致用户只能看见一个白板。
3、变量 1.创建后可以再次修改 2.反复使用一个数据时，提前将其保存在一个变量中,以后使用变量名就相当于在使用这个数据。 3.语法 var 变量名=值; 4.特点 变量名不能以数字开头; 用驼峰命名法或下划线命名法对变量进行命名; 命名要尽量的见名之意; 当变量名时name时,不管你保存的是什么数据类型,都会转为一个字符串; 变量名不能是关键字; 变量名可以只创建，不赋值，默认值为undefined； 如果多个变量连续创建，可以进行简写： -->var 变量名=值，变量名=值，变量名=值, ... ; 4、常量 1.创建后不能再修改； 2.生活中的常量：pi 一小时 一分钟 一天 一年； 3.语法 --> const 常量名=值; 5、数据类型
- 5个 原始/基本/值 类型 number --> 数字类型（输出字体颜色为蓝色）； string --> 字符串（输出字体颜色为黑色），必须加上""或''； boolean --> 布尔型（输出字体颜色为蓝色），取值为true或者false，一般用于条件判断； null --> 空，用于释放变量内存，节约内存空间，提升网页的性能； undefined -->一个垃圾东西，不能拿来使用 （字体颜色为灰色）； 2.查看数据类型 --> typedof(变量); 3.引用/对象 类型（11个） 可以理解为有11个对象（属性和方法） 6、运算符 1.算术运算符（+ - * / %） % --> 取余，俗称模，用于判断奇偶数（任意数%2）、取出某个数的后n位。如：1234%10-->4 1234%100-->34 2.带有隐式转换-->悄悄的将数据类型进行转换，将左右两边转为数字再进行算术运算。 相应转值：true-->1 false-->0 undefined-->NaN(NaN参与的任何算术运算结果都是NaN，参与的任何比较运算结果也都是NaN) null-->0 "100"-->100 "100px"-->100 3.比较/关系运算符(< > <= >= == != === !==) 结果-->一定是一个布尔值 带有隐式转换-->默认左右两边都会悄悄转为数字再进行比较 特点：1.如果参与比较的左右两边都是一个字符串，则会按位比较每个字符的十六进制Unicode号或者十进制的ASCII码； 数字0-9 < 大写A-Z < 小写a-z < 汉字 汉字的第一个字为“一”，Unicode号为4e00，ASCII码为19968 最后一个字为“龥”，Unicode号为9fa5，ASCII码为40869 2.NaN参与的比较运算结果都是false 如何判断数据x是不是NaN-->!isNaN(x) 结果是布尔值：true-->说明x是有效数字 false-->说明x是NaN 4.赋值运算符 1.= 赋值 2.（-= += /= %= ...）个相当于运算后再进行赋值 i=i+1 --> i+=1 5.逻辑运算符-->用于写条件 &&：与（并且） 当条件都满足，结果才为true，否则为false ||：或 只要有一个条件满足，结果就为true，否则为false !：颠倒布尔值 6.自增自减运算符 ++ i++ ===> i+=1 ===> i=i+1 自增：固定每次只能加1； 累加：+= 每次加多少由程序员决定
笔试题 前++和后++的区别？ 1.如果单独使用，他们没啥区别； 2.当他们与其他表达式一起使用时，他们的返回结果不同： 前++ 返回的是加了之后的新值 后++ 返回的是加了之前的旧值
7、位运算 左移：m << n --> 读作m左移了n位，相当于m2的n次方 右移：m >> n --> 读作m右移了n位，相当于m/2的n次方 8、用户输入框 var 变量=prompt("提示文字")
day2
一、分支结构
1、if分支：有3种写法 1.一个条件一件事，满足条件就执行，否则不执行。 if(条件){ 操作 } 2.一个条件两件事，满足条件就执行第一件事，否则执行第二件事 if(条件){ 操作 }else{ 默认操作} 3.多个条件多件事，满足哪个条件就执行哪件事 if(条件){ 操作} else if(条件){ 操作 }else{ 默认操作 } 2、switch 分支 语法： switch(变量/表达式){ case 值1: 操作1; break; case 值2: 操作2; break; ... default: 默认操作; } 如果中间多个条件，做的操作是一样的，可以省略掉中间部分的break 3、三目运算：简化简单的分支（操作只能有一句话） 条件?操作:默认操作 4、面试题 if和switch有什么区别？ 1.switch...case--> 优点：执行效率高，速度快，case做的是等值比较，而不是范围查找； 缺点：必须要知道最后的结果是什么才可以使用 2.if...else... --> 优点：可以做范围判断 缺点：执行效率较慢，速度慢，做的是范围查找
二、强制类型转换
（隐式转换出来的不是我们想要的类型，就可以使用强制转换） 1、转数字 1.var num=parseInt/parseFloat(str); 执行原理：从左往右依次读取每个字符，遇到非数字字符则停止转化，如果一开始就不认识则为NaN，parseInt()不认识小数点，parseFloat()认识第一个小数点。 paresInt();专门用于将字符串转为整数； parseFloat();专门用于将字符串转为小数 2.Number(x);-->万能转换，完全等同于隐式转换，还不如-0 1 /1 2、转字符串 x.toString();--> x 能是undefined 和 null，undefined和null不能用来做任何操作； String(x);--> 万能转换，完全等效于隐式转换，还不如+"" 页面一切东西都是字符串类型 3、转布尔 Boolean(x);-->万能转换,完全等效于隐式转换，还不如!!x 只有6个元素会为false--> 0，"',undefined，null，NaN，false。 分支或循环条件中，无论条件怎么写，只需要判断是不是这6个元素，如果是则为false，否则为true。
day3
一、循环
1、循环--> 反复执行 相同 或 相似的操作。从宏观上来看几乎是一瞬间就完成，在微观上看是一次一次的执行的； 2、执行原理--> 先判断条件是否满足，如果满足则做一次循环体操作，然后继续判断条件，当条件不满足时才会结束循环。 3、3种循环类型 1.while循环 var 循环变量=？; while(循环条件){ 循环体; 循环变量变化; } 2.for循环 for(var 循环变量=？;循环条件;循环变量变化){ 循环体; } 3.do...while循环 var 循环变量=？; do{ 循环体; 循环变量变化; }while(循环条件);
和while循环的区别：只看第一次循环 --> 如果循环条件都满足，则没有区别 如果循环条件不满足，while循环一次也不会执行，do...while至少会执行一次 4.while和for的区别 他们在原理上几乎没有区别； 一般来说，当我们不确定循环次数的时候，会使用while循环-->死循环； 当我们确定循环次数的时候，会使用for循环 4、死循环 1.3种类型--> while(true){ 操作 } for(;;){ 操作 } do{操作}while(true); 2.退出循环语句--> break(退出整个循环)、continue(退出本次循环) 3.使用情况：在不确定循环次数的时候，就可以使用死循环
二、函数基础
1、函数--> function 也称之为方法，需要先定义好，定义了之后便可以反复使用的代码段。 2、使用情况--> 不希望打开页面程序便立刻执行，而是由用户去触发或者程序员调用。在js种，函数时第一公民，尽量每个独立的功能都封装为一个函数。 3、使用步骤（2步） 1.创建函数 function 函数名(形参列表,....){ 操作 } 2.调用函数 函数名(实参列表,...); 3.在HTML上绑定点击事件 4、形参和实参的使用 使用带有形参的函数时，必须传入实参 传参的顺序是不能乱的，必须和形参的顺序一一对应 5、循环和函数的区别 循环-->几乎是一瞬间就完成了 函数-->需要调用后才能执行
day4
一、函数
1、Function：函数也叫方法，需要先提前定义，以后可以反复使用的代码段。 2、2种创建函数的方式 1.声明函数方式 function 函数名(形参列表){ 函数体; return 返回值; } 2.直接量化方式 var 函数名=function(形参列表){ 函数体; return 返回值; } 函数名和变量名是同一个东西，尽量不要重复。 3、函数调用 var 接住返回的值=函数名(实参列表); 4、作用域： 全局作用域--> 其成员在任何地方都可以使用 函数作用域--> 其成员只能在调用时，在函数内部可以使用 变量使用规则：优先使用局部的，局部内没有找到就去全局找，全局都没有就会报错。 缺点： 1.不要对未声明的变量直接赋值，会导致全局污染 2.函数内部的东西在函数外部用不到，不过可以用return返回解决。return后面跟着一个数据，就会把这个数据返回到全局作用域。 当省率return时，会默认return返回一个undefined。 5、声明提前 规则--> 在程序正式执行前，会将var声明的变量和function声明的函数提前到当前作用域的顶部，但是其赋值会留在原地。 当var 和 function 同时提前时，var会提前到function的前面。 6、重载：同一个函数，根据所传参数的不同，自动选择对应的函数去执行，但是在js中不支持同名函数的存在。 在js中进行重载的方法-->函数中有一个类数组对象（arguments），和数组有相同点： 1.都可以使用下标访问某个元素 2.都可以使用lenth获取数组长度 3.都可以使用遍历获取每个一个数组元素 作用： 哪怕没有形参，也能接住所有的实参，通过在函数内部判断实参的不同去执行不同的分支，相当于变相实现了重载。 语法： function 函数名(){ if(arguments.length==?){
}...
}
二、数组基础
1、数组--> 一个变量可以保存多个数据 2、2种创建数组的方式 1.直接量方式--> var arr=[数据,....]; 2.构造函数方式--> var arr=new Array(数据,...); 3、获取数组的元素：arr[i]-->下标i是从0开始，到arr.length-1结束 4、添加/替换: arr[i]=新数据; 5、数组的三大不限制： 1.不限制类型 2.不限制长度 3.不限制下标越界--> 获取元素时，如果下标越界，则得到undefined；添加元素时，下标越界，得到的是一个稀疏数组，如果搭配上遍历，那会得到很多undefined。 6、数组的唯一一个属性：arr.length--> 获取到数组的长度，但是长度是从1开始数的。 7、数组操作： 1.向末尾添加元素--> arr[arr.length]=新数据； 2.获取倒数第n个元素--> arr[arr.length-n]; 3.缩容--> arr.length-=n; 8、遍历数组(搭配上循环来使用)--> 取出每一个数组元素执行相同或相似的操作 for(var i=0;i<arr.length;i++){ arr[i]; // 当前元素 }
day5
一、DoM
1、DoM-->Document Object Model:文档对象模型-->专门用于操作html文档 2、DOM树概念：Dom将html看作一个倒挂的树状结构，但是树根不是html标签，而是document对象。 1.document对象由浏览器自动创建，一个页面只有一个document对象 2.作用-->可以通过树根找到任何一个DOM元素/节点/对象（属性和方法） 3.DOM会将页面上的每一个元素、属性、文本、注释...视为一个DOM元素/节点/对象 3、查找元素 1.直接通过HTML的特点去查找 1.通过id查找 var elem=document.getElementByld("id值"); 找到便返回当前找到的DOM元素，没找到返回一个null； 如果出现多个相同id，只会找到第一个。 2.通过标签名查找 var elem=document/已经找到的父元素.getElementsByTagName("标签名"); 找到了返回一个类数组DOM集合，没找到返回空集合; js只能直接操作DOM元素，不能对DOM集合进行操作，得通过下标拿到某一个或者遍历拿到每一个。 3.通过class 查找 var elem=document/已经找到的父元素.getElementsByClassName("class 名"); 找到了返回一个类数组DOM集合，没找到返回空集合; js只能直接操作DOM元素，不能对DOM集合进行操作，得通过下标拿到某一个或者遍历拿到每一个。 4、通过关系去获取元素：前提条件-->必须先找到一个元素才可以使用关系 1.找父元素--> elem.parentNode; --- 返回单个元素 2.找子元素--> elem.children; -----返回元素集合 3.找到第一个子元素--> elem.firstElementChild; ---- 返回单个元素 4.找到最后一个子元素--> elem.lastElementChild;-----返回单个元素 5.找到前一个兄弟--> elem.previousElementSibling;----返回单个元素 6.找到后一个兄弟--> elem.nextElementSibling;----返回单个元素 5、对找到的元素进行操作：前提-->先找到相应元素 1.内容： elem.innerHTML-->获取和设置开始标签到结束标签之间的内容，可以识别到内容里面包含的标签 获取: elem.innerHTML; 设置: elem.innerHTML="新内容"; elem.innerText-->获取和设置开始标签到结束标签之间的纯文本，不能识别标签 获取: elem.innerText; 设置: elem.innerText="新内容"; input.value-->专门获取/设置input里的内容 获取: input.value; 设置: input.value="新内容" 2.属性： 获取属性值：elem.getAttribute("属性名"); 设置属性值: elem.getAttribute("属性名","属性值"); 简化版--> elem.属性名; elem.属性名="属性值"; 简化版缺点：1.class必须写为className，因为calss在ES6之后变为了一个关键字 2.不能操作自定义属性 3.样式 3种使用样式的方式： 内联样式 内部样式表 外部样式表 一般用内联样式来进行js操作--> 因为内联样式不会牵一发而动全身，且其优先级最高。 获取样式：elem.style.css属性名; 设置样式：elem.style.css属性名="css属性值"; 特点： 1.css属性名，有横线的地方，去掉横线，变为小驼峰命名法 如border-radius ---> borderRadius 2.只能获取到内联样式
二、绑定事件
语法：elem.on事件名=function(){ 操作; } this关键字-->如果单个元素绑定事件，this指代这个元素； 如果多个元素绑定事件，this指带当前触发事件的元素。
一切的元素获取，往往都是为了判断 一切的设置，都可以说是添加或者修改
