Javascript01

关于Javascript#

Javascript简称JS。是运行在Javascript解释器或者特定引擎中的解释型 弱类型 面向对象脚本语言。

一、Javascript解释器：

1.浏览器自带js解释器 2.独立安装一个js解释器 node.js时。

二、关于编译型和解释型

1.编译型：运行程序之前需要检查语法是否正确，如果不正确直接不允许运行。比如：java，c++等（更加严格）

2.解释型：运行程序之前不用检查语法是否正确，直接运行，碰到错误就停止。比如：Javascript.php等（更自由）

三js特点

1.可用任意编辑器编写代码

2.解释型语言，无需编译

3.弱类型语言：不需要进行规定，想放什么放什么。 变量的数据由值来决定。

四：面向对象语言

一切东西都有自己的属性和方法；

对象名.属性名；

对象名.方法名（）；

五.js的作用

1.客户端数据计算

2.表单的数据验证

3.提供了事件

4.css无法实现的都有js来完成

5.和服务器端进行交互 ajax

六、js的使用

1.使用方式：2个

• 在HTML页面中body最下面写上标签

• 创建一个xxx.js文件，在里面写入js代码，最后引入到HTML页面中。

2.js的调试语句；

代码在运行期间，如果碰到错误会报错，但后续代码不会执行，甚至是逻辑错误，那并不会报错我们需要一个方法去帮助我们找到错误何在。

- 在控制台输出日志： console.log（想要输出的东西）；

• 在页面上进行输出：document.write（想要输出的东西）； 此方法如果绑定了事件，会将页面上所以内容替换{不建议使用}

• 弹出显示： alert（想要输出的东西）； 会卡主整个页面，必须关闭后用户才能看到HTML和css{不建议使用}

3.js的语法规范

**严格要求区分大小写，不能乱写 **

4.js注释：提示程序员

单行注释：// 多行注释: /***/

变量

一个变量本质来说就是一个内存

变量的值是可以改变的

何时使用：需要经常使用的数据，都要先保存在一个变量中，之后使用变量名，就相当于使用变量值。

语法： var 变量名=值；

特殊：

• =号是赋值符号，将右边数据放到放到=号左边变量名中

• 如果只声明/创建/定义了，没有赋值的话，默认值为undefined（没有任何用处）。一定要赋值

• 取变量名不能随便取，尽量见面知意。 不能以数字开头。

• 如果创建了多个变量，中间var可以省略，中间的；分号换位，逗号最后一个依然是；分号结束

• name变量名是一个关键字，只能放入字符串，哪怕你放入的不是字符串，也会变成字符串。

• 如果一个为声明的变量直接使用，会报错。 如果一个声明过的变量但是未赋值，会undefined。

常量：

一旦初始化后（第一次赋值）值不允许被修改

**语法：const 常量名=值； ** 与变量比只有关键字不同。

算数运算符 + - * / %

前四个和数学一样，特殊在于%

%：取余，俗称模，两个数相除，不取商，取余数。

作用1.判断奇偶

num（数字）%2；结果为0说明是偶数，为1说明是奇数

作用2.获取某个数字的最后几位。

例如：1234%100==>34

隐式转换

悄悄的转换，数据类型会发生变化，我们程序员看不见。

常理说只有数字才能参与算术运算，但其实字符串也可以。记住：

默认运算符左右两边都会悄悄的变成一个数字，在运算

特殊：

• +运算，只要碰上一个字符串，则都变为字符串，+运算也不再是+运算，而是变成了拼接字符串的操作。

• • • / % 运算，有字符串也可以转化为数字，但是必须是纯数字组成的字符串才可以，只要包含了非数字的字符串结果为NAN。

NAN（not a number）：不是一个数字，但确是一个数字类型，不是一个有效数字。

NAN参与任何运算计算为NAN。 NaN参与任何比较运算结果为false。

js中的数据类型

原始/基本/值类型：5个 （引用/对象型8个）

1.string 字符串 取值：无数个 必须写引号“”

2.Number 数字 取值：无数个 可以直接写入

3.Boolean 布尔 取值：两个 true或false（用于判断）

4.undefind 取值只有一个默认值undefind，没有任何意义

5.Null 空 取值Null， 作用：释放变量，内存节约内存空间

数据类型的转换

JavaScript是弱类型语言，数据类型都是由数据来决定的，对于不同数据类型的运输时，数据类型会进行转换：

number+number=number

number+string=string

如果需要查看数据类型： type of（需要检查的数据）

一.算术运算隐式转换： 悄悄的转换，数据类型会发生变化，我们程序员看不见。 默认运算符左右两边都会悄悄的变成一个数字，在运算

特殊： +运算，只要碰上一个字符串，则都变为字符串，+运算也不再是+运算，而是变成了拼接字符串的操作。* - / % 运算，有字符串也可以转化为数字，但是必须是纯数字组成的字符串才可以，只要包含了非数字的字符串结果为NAN。

某的数据转为数字的结果： true->1 false->0 undefined->NaN null->0 "100"->100 "100abc"=NaN

NAN（not a number）：不是一个数字，但确是一个数字类型，不是一个有效数字。

NAN参与任何运算计算为NAN。 NaN参与任何比较运算结果为false。

用普通比较运算判断xxx是不是NaN： ！isNaN（xxx）判断xxx是不是一个有效数字 true->说明是一个有效数字 false->说明是一个NaN

二.强制/显示转换

隐式转换的结果可能不是我们想要的，我们程序员可以手动调用某些方法，进行数据类型的转换后再进行运算。

转数字：

1. var num=parseint（str/num）

原理：从左往右依次读取每个字符，进行转换，碰到非数字字符就会停止，而且不认识小数点，如果一开始就碰到了不认识的字符，结果为NaN

2.var num=parsefloat（str） 原理：和parseint一样，但是认识小数点。 注意数字只有一个小数点，第二个小数点就是不认识的字符。

总结：只要带有单位的数字，我们都可以用parsexxx来去掉单位变为数字。

函数

一.什么是函数

函数也称方法，需要预定义（提前创建好）后，可以反复使用的代码段（里面可以放若干代码）

二.创建函数并且调用函数

第一步：创建 function 函数名（）{ 若干代码段}

第二步： 调用 2种方式

1.直接写在js里 函数名（）；程序员写几次执行几次。

2.绑定在页面元素上，让用户来触发，用户触发一次执行一次，提升了用户体验感/多了交互感。

<标签 οnclick=“函数名（）；”></标签> onclick：点击事件

三.何时使用函数：

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

2.希望用户/程序员来触发

3.希望能够反复执行

4.本身就是一段独立的功能体

5.将一个功能封装为一个函数，函数是一等公民地位，而且函数中的变量会自动释放

四 .带有参数的函数

1.创建带参数的函数

形参：就是一个变量名，只不过这里的变量名不需要var并没有保存真正的值，形式参数，简称形参

function 函数名（形参{ 函数体；}

2.调用带参数的函数

实参：实际参数，这个变量所保存的值 函数名（实参） 一个函数执行相识操作

例如实现两个数相加

function add（a，b）{ console.log（a+b）； } add（1，2） add（2,3）

注：带参数的函数在调用是，传入实参的顺序和个数都要一一的和形参对应。

总结：1.如果你的函数是固定不变的，则不需要使用带参数的函数2.如果你的函数体希望根据传入的实参不同做的事也略微不同，需要使用带参数的函数。

分支结构

一:代码中流程控制语句：3种

1.顺序结构 ：默认结构，代码从上往下一步一步执行

2.分支/选择结构：根据条件选择一部分代码去执行

3.循环结构：根据条件，判断你是否需要再一次重复执行一些代码

二.比较符运算 > < >= <= == != 作用：比较判断/条件中出现

结果：6个运算符 结果一定是一个布尔值

比较运算符也是有隐式转换，大部分会转为数字比大小

三 if结构

分支结构：根据条件的不同，选择一部分代码执行操作

1.一个条件一个事件，满足就做，不满足就不做 if（条件）{操作}

2.一个条件二个事件，满足就做，不满足就做第二件 if（条件）{操作}else{默认操作}

3.多个条件多件事，满足谁 做谁 if（条件）{操作}else if（条件2）{默认操作1}else{默认操作2}

注：1.else想写多少写多少 2.最高的else可以省略，但如果条件都不满足的话则什么都不会执行。3.分支结构只要满足了一个就不可能再走另一条路。

四 逻辑运算符

&&(与，并且) ||（或）！（非）

&&：只有全部条件都满足，最后结果才为false 只要有一个条件为false，结果就位false

||：只有全部条件都不满足，最后结果才为false 只要有一个条件为true ，结果就位true

！：颠倒布尔值

循环结构

反复执行相同或相似的操作，几乎是一瞬间就完成很多次。叫循环。

循环三要素：

1.循环条件：开始，结束，重复执行的次数。

2.循环体：循环操作，干什么事

3.循环变量：创建并且要让他不断的改变（自增、自减），往往向着不满足循环条件在变化。

while循环

语法：

var 循环变量=几；

while（循环条件）{ 循环体； 循环变量的变化}

原理：先判断循环条件，如果条件为真，则执行一次循环体中的语句，然后再一次判断循环条件，如果为真，则再执行一次循环体中的语句···直到循环条件为假，才会退出循环。

循环是一次一次执行的，只不过速度很快而且循环没结束之前，会卡主后面的代码。

死循环

停不下来的循环，多半用于不确定循环次数的时候。

while（true）{循环体;} 死循环多半都要配上一个 退出循环：break可以出现在任何一个循环中

for循环

和while循环能做的事情一模一样，只不过语法更简单舒服。

语法 for（var 循环变量=几；循环条件；循环变量的变化）{循环体；}

特殊：1.for的死循环 for（；；）{循环体} 2.创建循环变量部分，逗号隔开创建多个。

总结：1.while循环：一般用于循环次数不明确的情况下。2.for循环一般用于已经确定了循环次数的情况。

数组

数组中的元素都是按照线性顺序排列。

特点：除了第一个元素，每个元素都有一个唯一的前驱元素，除了最后一个元素每一个元素都有唯一的一个后驱元素，数组中的每个元素都有一个唯一的位置序号，称之为下标，用来表示数组中的每一个元素，下标是从0开始的，到最大长度-1结束。

一 、创建数组

直接量方式： var arr=[];空数组 var arr=[元素，元素，···]；

二、访问数组中的元素：数组名[下标]；

三 、添加/修改元素：数组名[下标]=新元素；

特殊： 1.下标处没人，则为添加 2.下标处有人则为替换 3.如果下标越界会导致我们的数组变为一个稀疏数组，不是好东西，因为会导致下标不在连续

四、数组具有3大不限制：

1. 不限制长度 2.不限制类型 3.不限制下标越界。

五、数组唯一的属性：length 长度

语法： 数组名.length

有了这个属性就可以实现数组的三个固定套路：

1.永远希望在末尾添加：arr[arr.length]=新值；

2.获取倒数第几个：arr[arr.length-n];

3.缩容；删除数组的倒数n个：arr.length-=n；

六、遍历数组：把数组中的每一个元素都取出来执行相同或相似的操作。

公式 for（var i=0;i<数组名.length;i++）{数组名[i]；}

文档对象模型

Document object Model 简称：DOM 文档对象模型

• DOM树：DOM将HTML看做了一个倒挂的树状结构，但是树根不是一般的HTML标签

树根：是一个document对象，document对象不需要程序员创建，由浏览器的js解释器创建，一个页面只有一个document。

作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）DOM节点：一个标签，文本，属性，元素。

查找元素的主要方式：

标签查找：var elems=document/已经找到的父元素.getElementByTagName（“标签名”）； 在当前DOM树中，获取具体DOM节点。

返回：找到一个DOM集合 没找到空数组

特殊：

1.返回的不是一个DOM节点，而是一个DOM集合，不能直接用来操作，要呢使用下标拿到每一个，要么使用遍历拿到全部。 2.不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素

class查找 var elems=document/已经找到的父元素.getElementByClassName（“标签名”）； 特点与标签查找一样。

节点之间的关系进行查找 （前提必须先找到1人才能使用关系）

找父元素：elem.parentNode； 单个元素；

找子元素 elem.chirdren； 集合

找第一个子元素：elem.firstElementChild；

找最后一个子元素：elem.lastElementchild；

前一个兄弟元素：elem.previousElementSibling；

后一个兄弟元素elem.nextElementSibling；

操作元素

<标签名 属性名=“属性值” style=“样式” > 内容</标签名> 整个称之为一个元素。

一、内容

1.innerHTML属性； 获取或设置某个元素的内容，并且可以识别标签。

获取内容： elem.innerHTML；

设置内容：elem.innerHTML=“新内容”；

2.innerText属性：获取或设置某个元素的文本，不能识别标签。

获取内容： elem.innerText；

设置内容：elem.innerText=“新内容”

以上两种为双标签准备。

3.Value属性：专门为单标签input操作内容准备

获取内容： input.Value；

设置内容 input.Value=“新内容”

二、属性 只要放在 HTML标签上的都是一个属性

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

2.设置属性： elem.setAttribute("属性名"，“属性值”)；

（此方法适用任何情况，无敌，可以用于操作自定义标签！！！！）

简化版：

获取： elem.属性名

设置：elem.属性名=“属性值”；

缺陷：1.不能操作自定义属性，只能操作标准属性。2.class在ES6中升级为了一个关键字，所以要写class要换为className。

三、样式

js操作用内联样式的好处：1.优先级高，写js必定生效。2.一次只会操作一个元素。不会牵一发动全身。

语法：

获取： elem.style.css属性名；

设置：elem.style.css属性名=“css属性值”

特殊：css属性名，把横线要换为小驼峰写法。获取时不能获取样式表中的样式。

四、元素绑定事件

单个元素：

elem.οnclick=funtion（）{ 操作； this—>单个元素绑定事件，this代表elem绑定事件这元素}

多个元素

for（var i=0;i<elems.length;i++）{ elems[i].οnclick=funtion（）{ 操作； this->多个元素绑定事件，this代表当前触发事件的元素 } }

 总结：1.一切获取都是为了判断
        
      2.一切设置都是为了修改
      
      3.千万不要对着一个集合做操作，要么遍历全部，要么下标拿一个。