JavaScript第一周复习

JavaScript第一天

JavaScript简介：简称JS，是一个运行在【游览器】的【解释性】【弱类型】【面向对象】脚本语言

1. JavaScript由三部分组成：Ecmascript（JavaScript语法）+DOM（面向网页）+BOM（面向游览器）

2. 游览器环境：

自带JavaScript解释器

3. 解释型：在程序执行之前不需要检查代码，直接运行，遇到错误直接停止

4. 弱类型：变量保存的数据是随意的，数据类型由数据来决定的

5. 面向对象：一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物

6. 数据类型：5种

数字               number

字符串           string

布尔               boolean

未定义           underfunded

空                  null

7. JS的两种使用方式：

1. 内嵌式

b.外部样式

8. 输出方式3种：

1. 控制台输出

2. 页面输出

3. 警告框输出

9. 创建变量：变量常见后可以修改，可以反复使用

语法：var   变量名= 值；

命名规则：

1. 不能随意命名

1. 不能以数字开头

2.不能用关键字命名

3.建议用驼峰命名法或下划线命名法

2. 命名尽量见明知意

3. 变量名是name，不管你保存的是什么都会悄悄的转为一个字符串

4. 变量可以只创建不赋值

10. 多个变量简写

1. 语法：var  变量名=值，变量名=值，...；

11. 常量：创建后不能修改

1. 生活中的常量：

1. 如：一天24小时、一小时60分钟、1分钟60秒等

2. 语法：const  常量名=值；

3. 其余和变量一样

12. 运算符

1. 算数运算符：

1. %        模，又称取余

1. 作用：判断奇偶数

2. - （减） *（乘） /（除）

3. +运算符特殊，碰上字符串，左右两边都会会悄悄转换为字符串，他不再是+运算而是拼接

4. 带有隐式转换

2. 比较运算符：

1. >  <  >=   <=  =  ==  !=  !==

2. 带有隐式转换

3. 常识：

1. 数字 0~9<大写A~Z<小写a~z< 汉字

2. 汉字第一个字是 一   Unicode号是4e00，ASCII是19968

3. 汉字最后一个字是 龥  Unicode号是9fa5，ASCII是40869

3. 赋值运算符：

1. = +=  -=  *=  /=  %=

2. = 将右边的值保存到左边

4. 逻辑运算符：

1. &&（与）   

1. 条件全部满足结果为true

2. 条件只要一个不满足结果为false

2.   ||（或）

1. 全部条件不满足结果为false

2. 条件只要一个满足结果为true

3.  ！（非）

5. 自增自减运算符：

1. ++  固定每次+1

2.  --   固定每次-1

1. 例：a++和++a的区别

2.     单独使用时都没有区别

3.    参与表达式时返回值不同

4.    a++返回的是新值

5.    ++a返回的是旧值

6. 位运算

1. 左移：m<<n 翻译：m*2的n次方，读作m左移n位

2. 右移：m>>n 翻译：m/2的n次方，读作m右移n位

JavaScript第二天

1. 结构：3种

1. 顺序结构

1. 默认从上往下依次执行

2. 分支结构

1. 通过条件判断，选择部分代码执行

3. 循环结构

1. 通过条件判断，要不要重复执行代码某块

2. 分支判断

1. if(条件){

    操作；

}else{}

b.swith(条件){

     case 值；

      操作；

}

case：不带隐式转换

break：case后面可以加一个break

c.if  vs  switch

if

优点：可以做范围判断

缺点：执行效率慢，速度慢（做的是范围判断）

switch

优点：执行效率高，速度快（case做的不是范围查找，而是等值比较）

缺点：必须知道最后结果才能使用

3. 三目运算：

1. 简化分支

2. 语法：条件1？操作1：条件2？操作2：默认操作；

1. 默认操作不能省略，省略会报错

2. 操作只能有一句话，多句话举荐使用switch和if

4. 强制（显示）数据类型转换

1. 转字符串：2种

1. var str=x.toString（）；

2. var str=String（x）；

2. 转数字：3种

1. parseInt（str/num）；

2. parseFloat（str）；

3. Number（x）；

3. 转布尔

1. 语法：Boolean（x）；

2. 只有6个为flase：0，“”，underfunded，NaN，null，flase；其余全部都为true

JavaScript第三天

1. 循环结构：反复执行相同或相似的操作

循环三要素：

1. 循环条件

2. 循环体

3. 循环变量

2. 三种循环：

1. while循环：

1. 语法：

var 循环变量=值；

while（循环条件）{

循环体；

循环变量变化；

}

break——退出整个循环；

continue——退出本次循环

2. for循环：

1. 语法：

for（var 循环变量=值；循环条件；循环变量变化）{

循环体；

}

for（；；）{}//死循环

3. do...while循环：

1. 语法：

var 循环变量=值；

do{

循环体；

循环变量变化；

}while（循环条件）

3. Function基础：

1. 概念：function叫函数也叫方法，先【预定义】好，以后可以【反复使用】的【代码段】

2. 如何使用函数：

1. 创建/定义/说明：

function函数名（）{

函数体/代码段

}

注意：函数创建后不会立即执行，需要我们去调用函数

2. 调用函数：2种

1. 在JS内部写：函数名（）；

2. 在HTML上面绑定事件：

<elem   οnclick="函数名()"></elem>——什么元素都可以绑定事件

3. 如何使用函数

1. 不希望打开页面立刻执行

2. 希望用户来触发提升用户的体验感

3. 每一个独立的功能都要封装一个函数

4. 形参

1. 概念：其实就是一个变量，不需要加var，而且还不需要赋值

1. 语法：

function 函数名（形参，...）{

函数体/代码段

}

ii.使用形参函数时，必须传入实参——实际参数，就是传过去的值

函数名（实参，...）

注意：传参时顺序不能乱，必须和形参一一对应，数量不能多和少

5. 总结：

1. 不带参数的函数用于执行一些固定操作

2. 带参数的函数可以根据传入的参数不同，做一些略微调整

6. 循环和函数都能反复执行，它们的区别在哪

1. 循环：几乎是一瞬间完成

2. 函数：需要调用后才会执行

JavaScript第四天

1. 自定义函数

1. 概念：需要先定义，以后可以反复使用的代码段

2. 如何使用：

1. 不希望打开立即执行，希望用户来触发

2. 创建

1. 【声明方式】创建函数

function 函数名（形参列表）{

操作；

return；         //返回值/结果

}

2. 【直接量】创建函数

var 函数名=function（形参列表）{

操作；

return；         //返回值/结果

}

1. 作用域

1. 全局作用

1. 全局变量和全局函数，在页面任何位置都可以使用

2. 局部作用

1. 局部变量和局部函数，在【当前函数调用时可以使用】

注意：优先使用局部变量，局部没有找全局，全局没有就会报错

2. 声明提前

1. 规则

在程序执行之前，将var声明的变量（轻）和function声明的函数（重）都会悄悄的集中定义在当前作用于的顶部，但赋值会留在原地

2. 强调

1. 声明创建方式的函数会完整的提前（第一种）

2. 直接量方式创建的函数不会完整的提前，只会变量部分提前（第二种）

3. 如何使用

1. 变量名和函数名尽量不要重复

2. 先创建后使用

3. 重载

1. 目的

减轻压力，记住一个方法就可以执行很多操作

2. 解决

在【函数内部】自带arguments的对象（类似数组对象】不需要创建

3. 固定套路

1. 通过下标去获取某个实参——arguments【i】

2. 通过length去获取传入的实参——arguments.length

4. 数组的基础

1. 创建数组：2种

1. 直接两方式：

var arr=【数据1，...】

2. 构造函数：

var arr=new Array（数据1，...）

2. 获取数组

数组名【i】；

3. 添加/替换

数组名【i】=新数据

如果下标没人则为添加，有人则为替换

4. 三大限制

1. 不限制元素类型

2. 不限制元素长度

3. 不限制下标越界

5. 解决

1. 语法：数组名.length

2. 作用：获取到数组的长度，从1开始

f.固定套路

末尾添加元素：数组名【数组名.length】=新数据

获取数组倒数第n个元素：数组名【数组名.length-n】

缩容：数组名。length-=n

6. 遍历数组

固定公式

for(var i=0;i<arr.length;i++){

arr[i];//当前元素

}

JavaScript第五天

1. DOM:

Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法

2. DOM树概念：

1. DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象

2. document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根

3. 作用：

1. 可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）

2. DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象

3. 查找元素

1. 直接通过HTML的特点去查找元素

1. 通过ID 查找元素

var elem=document.getElementById("id值");

2. 通过标签名查找元素

var elems=document/已经找到的父元素.getElementsByTagName("标签名");

3. 通过class 查找元素

var elems=document/已经找到的父元素.getElementsByClassName("class名");

2. 通过关系去获取元素：前提条件：必须先找到一个元素才可以使用关系

  父元素：elem.parentNode; - 单个元素

子元素：elem.children; - 集合

第一个子元素：elem.firstElementChild; - 单个元素

最后一个子元素：elem.lastElementChild; - 单个元素

前一个兄弟：elem.previousElementSibling; - 单个元素

后一个兄弟：elem.nextElementSibling; - 单个元素

为什么要通过关系去找元素呢？

不希望影响到别人，只希望影响到自己的关系网

4. 操作元素

1. 内容

1. elem.innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签的

 获取：elem.innerHTML;

       设置：elem.innerHTML="新内容";

2. elem.innerText - 获取和设置开始标签到结束标签之间的纯文本，不识别标签的

获取：elem.innerText;

设置：elem.innerText="新内容";

3. input.value - 专门获取/设置input里的内容

获取：input.value;

设置：input.value="新内容";

2. 属性

1. 获取属性值：elem.getAttribute("属性名");

2. 设置属性值：elem.setAttribute("属性名","属性值");

3. 简化版

1. 获取属性值：elem.属性名;

2. 设置属性值：elem.属性名="属性值";

3. 缺点

1. class必须写为className - ES6(2015年)class变成了一个关键字

2. 不能操作自定义属性

3. 样式

1. 使用样式的方式：3种

内联样式

   内部样式表

   外部样式表

5. 绑定事件

a.elem.on事件名=function(){

操作;

}

b.关键字this - 这个

如果单个元素绑定事件，this->这个元素

如果多个元素绑定事件，this->当前触发事件元素

c.一切的获取，往往都是为了判断

d.一切的设置，可以说是添加也可以说是修改