[JavaScript知识库]web前端研发实习--学习笔记（3）

Javascript

目录

一、JAVASCRIPT简介：

????????1.0.产生：

????????1.1.浏览器：

????????1.2.JS组成：

????????1.3.JS的三种书写位置：

????????1.4.JS注释;

????????1.5.JS的输入输出：

二、JS变量

（一）、什么是变量

（二）、变量的使用

（三）、变量的初始化

（四）、更新变量

（五）、同时声明多个变量

（六）、声明变量的特殊情况

（七）、命名规范

三、JS数据类型

（一）、Number

????????1.0、数字型进制：常见的2，8，10，16。

????????1.1、JS数值的最大值和最小值：

????????1.2、数字型的特殊值：

（二）、String

（三）、Boolean ：ture|false

（四）、Undefined && Null

（五）、数据类型的判断

（六）、数据类型的转换（仅限于数值型）

????????6.0、其他类型转换为字符串型

????????6.1、其他类型转换为数字型

? ? ? ? 6.2、其他类型转换为布尔型

（七）、数组

? ? ? ? 7.0、数组的概念：是将一组数据存储在单个变量名下的一种存储方式

? ? ? ? 7.1、创建数组

? ? ? ? 7.2、数组的数据用','分割，数组中的值称为数组元素

? ? ? ? 7.3、获取数组元素，利用索引访问数组

? ? ? ? 7.4、数组长度：数组名.length。等于索引号+1

（八）、简单数据类型存在于栈，复杂数据类型存在堆。

四、JS运算符

（一）、算数运算符

（二）、比较运算符

（三）、逻辑运算符

（四）、逻辑中断

（五）、赋值运算符

（六）、运算符优先级

五、流程控制

（一）、顺序结构

（二）、分支结构

? ? ? ? 2.0、if分支语句：

? ? ? ? 2.1、if? else双分支语句：

? ? ? ? 2.2、多分支语句：

? ? ? ? 2.3、三元表达式:

? ? ? ? 2.4、switch语句：

（三）、循环语句

? ? ? ? 3.0、for循环

? ? ? ? 3.1、双重for循环

? ? ? ? 3.2、while循环

? ? ? ? 3.3、do while循环

? ? ? ? 3.4、continue&break

六、函数

七、 JavaScript作用域

八、JavaScript预解析

九、对象

? ? ? ? 9.0、创建对象

? ? ? ? 9.1、JavaScript内置对象

十、JavaScript Object Notation

十一、Web API

（一）、Document Object Model

? ? ? ? 11.0、DOM:文档对象模型（即处理HTML，XML的标准编程接口）

（二）、Browser Object Model

（三）、事件

? ? ? ? 1、事件有三部分组成：事件源、事件类型、事件处理程序；

? ? ? ? 2、执行事件的步骤：

（四）、操作元素

? ? ? ? 1、改变元素内容：

? ? ? ? 2、修改元素的属性：

? ? ? ? 3、修改表单的属性元素：

? ? ? ? 4、样式

（五）、其他

一、JAVASCRIPT简介：

????????1.0.产生：

? ? ? ? ? ? ? ?Javascript，这里面涉及到的内容比较庞大，这个由布兰登·艾奇在1995年花费了10天发明的即时编程语言，是一种运行在客户端的脚本语言。那么什么是脚本语言，脚本语言就是不需要通过编译，在运行过程中直接由JS解释器逐行运行解释运行。可以基于Node.js技术进行服务器端编程。JavaScript是一种弱类型语言或者说是动态语言。且和Java没有任何关系。

????????1.1.浏览器：

????????????????浏览器分为渲染引擎和JS引擎。渲染引擎是用来解释HTML和CSS的，而JS引擎即JS解释器，是用来读取网页中的JavaScript代码以及对其处理后进行运行。

????????1.2.JS组成：

????????????????JavaScript语法（ECMAScript）

????????????????页面文档对象模型（DOM）

????????????????浏览器对象模型（BOM）

????????1.3.JS的三种书写位置：

????????????????1.3.0.行内

????????????????1.3.1.内嵌

????????????????1.3.2.外部

????????1.4.JS注释;

????????????????1.4.0.单行注释：//

????????????????1.4.1.多行注释：/*.......*/

????????1.5.JS的输入输出：

????????????????1.5.0.alert(msg);浏览器弹出警示框。

????????????????1.5.1.console(msg);浏览器控制台打印输出信息，在浏览器控制台Console中可见。

????????????????1.5.2.prompt(info);浏览器弹出输入框。

????????????????1.5.3.confirm(msg);用于显示一个具有一个可选消息和两个按钮的模态对话框，返回布尔值。

二、JS变量

（一）、什么是变量

变量可以理解成装东西的盒子，即存放数据的容器。

（二）、变量的使用

????????A、声明变量

var name;//声明一个名称为name的变量

????????B、赋值

name = 'fan32021';//将值赋给声明好的变量

????????C、输出结果

（三）、变量的初始化

var name = 'fan32021';//声明并赋值即变量的初始化

（四）、更新变量

var name = 'fan32021';
name = 'dog';
//最后fan32021被dog代替

（五）、同时声明多个变量

var xx = '??',
    yy = '!!';//可以同时声明多个变量

（六）、声明变量的特殊情况

var age;
console.log(age);
//控制台显示undefined；

console.log(age);
//直接报错

age = 10;
console.log(age);
//控制台显示10

（七）、命名规范

????????7.0严格区分大小写。

????????7.1不能以数字开头。

????????7.2不能是标识符、关键字或保留字。

? ? ? ? ? ? ? ? 7.2.0、标识符:就是开发人员为变量，属性，函数，参数取得名字。

? ? ? ? ? ? ? ? 7.2.1、关键字：JS本身已经使用的字，不能再充当变量名，方法名。

? ? ? ? ? ? ? ? 7.2.2、保留字：实际上就是预留的关键字。

????????7.3变量必须有意义。

????????7.4遵守驼峰命名法。首字母小写后面单词的首字母需要大写。

????????7.5用A-Z，a-z，1-9，$，_，等可以，其余不可以。

三、JS数据类型

因为不同的数据所占用的空间不同，所以出现了数据类型，变量的数据类型在程序运行中由其赋值决定。JS数据类型分为两大类：A、简单数据类型（Number，String，Boolean，Undefined，Null）；B、复杂数据类型（Object），也是引用数据类型，表示对象信息，通过大括号声明，内部以key:value形式表示，可通过key获取value。

（一）、Number

????????1.0、数字型进制：常见的2，8，10，16。

????????1.1、JS数值的最大值和最小值：

? ? ? ????????? 最大值：alert(Number,MAX_VALUE);

? ? ? ? ????????最小值：alert(Number,MIN_VALUE);

????????1.2、数字型的特殊值：

? ? ? ? ????????a.Infinity ,+∞；

? ? ? ? ????????b.-Infinity,-∞；

? ? ? ? ????????c.NaN,代表一个非数值。

（二）、String

????????2.0、可以用单引号和双引号表示；

????????2.1、字符串可嵌套使用；

????????2.2、转义符；（涉及过多自信搜索）

????????2.3、弹出警示框：alert(' ');

????????2.4、字符串长度：通过length属性来检测获取字符串长度；

????????2.5、字符串的拼接：字符串 + 任何类型 = 字符串；

????????2.6、字符串拼接plus:? 字符串 = 变量 +字符串 得到全新的字符串；

（三）、Boolean ：ture|false

（四）、Undefined && Null

????????前者是未定义的数据类型 ，后者是值为空；

（五）、数据类型的判断

????????5.0、typeof() 返回值类型。

????????5.1、Object.toString();返回一个表示该对象的字符串，用于判断引用类型。

????????5.2、isNaN() 用来判断非数值，是数值返回false，否返回ture。

????????5.3、Array.isArray();判断是否为数组。

（六）、数据类型的转换（仅限于数值型）

????????6.0、其他类型转换为字符串型

? ? ? ? ????????6.0.0、变量.toString()

? ? ? ? ????????6.0.1、String(目标)

? ? ? ? ????????6.0.2、’+‘拼接字符串

????????6.1、其他类型转换为数字型

? ? ? ????????? 6.1.0、parseInt(string,radix) 数值型整形。

? ? ? ? ????????6.1.1、parseFloat(string,radix) 数值型浮点型。

? ? ? ? ????????6.1.2、Number(目标)

? ? ? ? ? ? ? ? 6.1.3、隐式转换（’-‘，’*‘，’/')

? ? ? ? 6.2、其他类型转换为布尔型

? ? ? ? ? ? ? ? 6.2.0、Boolean(目标) ('',0,NaN,Undefined)是false，其余是ture。

（七）、数组

? ? ? ? 7.0、数组的概念：是将一组数据存储在单个变量名下的一种存储方式

? ? ? ? 7.1、创建数组

? ? ? ? ? ? ? ? 7.1.0、利用new创建数组：var 数组名 = new Array();

? ? ? ? ? ? ? ? 7.1.1、利用数组字面量创建数组：var 数组名=[];

? ? ? ? 7.2、数组的数据用','分割，数组中的值称为数组元素

? ? ? ? 7.3、获取数组元素，利用索引访问数组

? ? ? ? 7.4、数组长度：数组名.length。等于索引号+1

（八）、简单数据类型存在于栈，复杂数据类型存在堆。

四、JS运算符

（一）、算数运算符

? ? ? ? 1.0、算数运算符： +，-，*，/,%。

? ? ? ? 1.1、浮点数的计算容易出问题，注意使用。

? ? ? ? 1.2、不能直接用浮点数做判断。

? ? ? ? 1.3、%可用来判断是否被整除。

? ? ? ? 1.4、遵循四则运算规则。

? ? ? ? 1.5、表达式：简单理解为由数字运算符变量等组成的式子。

? ? ? ? 1.6、返回值：表达式最终的结果返回给我们。

? ? ? ? 1.7、递增&递减

? ? ? ? ? ? ? ? 1.7.0、前置递增：++num|--num

? ? ? ? ? ? ? ? 1.7.1、后置递增：num++|mun--

（二）、比较运算符

? ? ? ? 2.0、<,>,>=,<=,==,!=,===,!==

? ? ? ? 2.1、一个等号是赋值，两个等号是判断值相不相同，三个等号是判断是否完全相同，即包括值和类型。

（三）、逻辑运算符

? ? ? ? 3.0、&& 、||、！

（四）、逻辑中断

? ? ? ? （短路运算）有多个表达式时，左边的表达式可以确定结果就不会执行右边的表达式。

（五）、赋值运算符

? ? ? ? =（+=，-=，*=，/=，%=)

（六）、运算符优先级

? ? ? ? （）>一元运算符>算数运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符

五、流程控制

（一）、顺序结构

（二）、分支结构

? ? ? ? 2.0、if分支语句：

? ? ? ? ? ? ? ? 2.0.0、语法结构: if(条件表达式){执行语句}；

? ? ? ? ? ? ? ??2.0.1、执行思路：条件为真，执行；为假不执行，执行后续语句；

? ? ? ? 2.1、if? else双分支语句：

? ? ? ? ? ? ? ? 2.1.0、语法结构: if(条件表达式){执行语句1}else{执行语句2}；

? ? ? ? ? ? ? ??2.1.1、执行思路：条件为真，执行1；为假执行2；

? ? ? ? 2.2、多分支语句：

? ? ? ? ? ? ? ? 2.2.0、语法结构: if(条件表达式1){执行语句1}else if(条件表达式2){执行语句2}...else{执行语句n}。

? ? ? ? ? ? ? ??2.2.1、执行思路：条件1为真，执行1；条件2为真，执行2，.....,为假执行n。

? ? ? ? 2.3、三元表达式:

? ? ? ? ? ? ? ? 2.3.0、语法结构：条件？表达式1：表达式2。

? ? ? ? ? ? ? ? 2.3.1、执行思路：条件为真返回一，为假返回2。

? ? ? ? 2.4、switch语句：

? ? ? ? ? ? ? ? 2.4.0、语法结构：switch(表达式){case value1:执行语句1;break;(相同的n个) dafault:最后的执行语句}。

? ? ? ? ? ? ? ? 2.4.1、执行思路:表达式返回值和哪个case匹配上执行哪个即可。

（三）、循环语句

? ? ? ? 3.0、for循环

? ? ? ? ? ? ? ? 语法结构：for(初始化变量;条件表达式;操作表达式){循环体;}

? ? ? ? 3.1、双重for循环

? ? ? ? ? ? ? ? 语法结构：for(初始化变量1;条件表达式;操作表达式){for(初始化变量2;条件表达式;操作表达式){循环体;}}

? ? ? ? 3.2、while循环

? ? ? ? ? ? ? ? 3.2.0、语法结构：while(条件表达式){循环体;}

? ? ? ? ? ? ? ? 3.2.1、执行思路：表达式为则执行循环，否则退出循环

? ? ? ? 3.3、do while循环

? ? ? ? ? ? ? ? 3.3.0、语法结构：do{循环体}while(条件表达式)

? ? ? ? ? ? ? ? 3.3.1、执行思路：先执行一次循环体然后才判断while条件是否满足，无论如何都会执行一次循环体

? ? ? ? 3.4、continue&break

? ? ? ? ? ? ? ? 3.4.0：跳出本次循环

? ? ? ? ? ? ? ? 3.4.1：跳出大循环

六、函数

函数就是封装了一段可被重复调用执行的代码块。其目的是实现大量代码的重复使用。函数的使用：首先声明函数，调用函数。即函数不被调用自己不会执行。封装可以理解为简单理解为打包。可以通过添加参数来实现不同的代码。

声明：function? 函数名(形参，...){

? ? ? ? 函数体；

? ? ? ? return 所需结果；

}

调用：函数名(实参，...)

形参是用来接受实参的，即可理解为形参是一个不需要声明的变量，函数的参数可有可无，且无数量限制。return 的结果就是函数的返回值。

匿名函数：定义了一个没有名称函数，并将返回值赋值给一变量。常见用法，立即执行函数（IIFE）常用于需要在页面加载完以后立即执行的函数。

七、 JavaScript作用域

? ? ? ? 7.0、限定变量的可用范围，目的是为了提高程序的可靠性。

? ? ? ? 7.1、JS的作用域：全局作用域（<script>或.js文件下定义的变量）及局部作用域（函数内部定义的变量）。

? ? ? ? 7.2、变量的作用域：全局变量：全局作用域下的变量；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 局部变量：局部作用域下的变量；

? ? ? ? ? ? ? ? 全局变量可在局部作用域下使用即全部可用，而局部作用域下的局部变量则不可行，即不能在局部作用域外使用，函数中未声明直接赋值的变量也为全局变量，函数的形参需要作局部变量来看。

? ? ? ? 7.3、JS中无块级作用域

? ? ? ? 7.4、作用域链：链式查找；内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，即采用就近原则。

八、JavaScript预解析

? ? ? ? 8.0、预解析：JS引擎运行JS分两步：预解析，代码执行（按照代码书写的顺序从上往下执行）。

? ? ? ? 8.1、JS引擎会把JS里面所有的var还有function提升到当前的作用域最前面。

? ? ? ? 8.2、变量预解析（变量提升）：把所有变量声明提升到当前的作用域最前面（不会处理赋值）；

? ? ? ? 8.3、函数预解析（函数提升）：把所有函数声明提升到当前作用域前面，不调用函数。

九、对象

? ? ? ? 对象是一个具体的事物，是一组无序的相关属性和方法的集合。由属性（事物的特征）和方法（事物的行为）组成。对象分为自定义对象，内置对象，浏览器对象。

? ? ? ? 9.0、创建对象

? ? ? ? ? ? ? ? 9.0.0、利用字面量创建对象：

? ? ? ? ? ? ? ? ? ? ? ? var? ?对象名 = {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 属性：赋值；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ...

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 方法：function(){}

????????????????????????}

? ? ? ? ? ? ? ? ? ? ? ? 调用：a.对象名.属性名；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?b.对象名['属性名']；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?c.对象名.方法名()

? ? ? ? ? ? ? ? 9.0.1、利用new Object创建对象

? ? ? ? ? ? ? ? ? ? ? ? var? 对象名 = new Object();

? ? ? ? ? ? ? ? ? ? ? ? 对象名.属性名 = ’ 赋值‘

? ? ? ? ? ? ? ? 9.0.2、用构造函数创建对象

? ? ? ? ? ? ? ? ? ? ? ? 构造函数的语法结构格式：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? function? 构造函数名(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.属性 = 值；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.方法 =? function(){};

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? 使用：new? 构造函数名()

? ? ? ? ? ? ? ? ? ? ? ? 用for in 遍历对象： for(变量 in 对象){输出}

? ? ? ? 9.1、JavaScript内置对象

? ? ? ? ? ? ? ? JS语言自带的一些对象{Math、Date、Array、String}，可以在MDN文档中自行查看。

十、JavaScript Object Notation

? ? ? ? Json是一种语法，用来序列化数据与JS语法相似又不同。

? ? ? ? Json通常用于前后台数据传输，存储为静态数据文件(.json文件)

? ? ? ? Stringify 将值转化为JSON字符串

? ? ? ? parse将JSON字符串解析为值

十一、Web API

? ? ? ? DOM + BOM 是JavaScript中独有的，即用于实现网页交互。API是给程序员提供的一套操作浏览器功能和页面元素的API(DOM和BOM),即针对浏览器做交互效果。

（一）、Document Object Model

? ? ? ? 11.0、DOM:文档对象模型（即处理HTML，XML的标准编程接口）

? ? ? ? ? ? ? ? 改变内部文档的标签与样式

? ? ? ? ? ? ? ? 获取元素:

? ? ? ? ? ? ? ? 11.0.0、通过ID获取

? ? ? ? ? ? ? ? ? ? ? ??getElementById()方法可以获取带有ID的元素。

? ? ? ? ? ? ? ? 11.0.1、根据标签名获取

????????????????????????getElementByTagName()获取特定标签的元素，会追回为伪数组类型。

? ? ? ? ? ? ? ? 11.0.2、通过HTML5新方法获取

? ? ? ? ? ? ? ? ? ? ? ? a、getElementByClassName('类名')

? ? ? ? ? ? ? ? ? ? ? ? b、querySelector()返回指定选择器的第一个元素对象

? ? ? ? ? ? ? ? ? ? ? ? c、querySelectorAll('选择器')返回指定选择器中的所有元素

? ? ? ? ? ? ? ? 11.0.3、获取特殊元素(body,html)

? ? ? ? ? ? ? ? ? ? ? ? a、body：document.body

? ? ? ? ? ? ? ? ? ? ? ? b、html：document.documentElement

? ? ? ? ? ? ? ? 11.0.4、创建、插入

? ? ? ? ? ? ? ? ? ? ? ? var parent=document.getElementById("content")

? ? ? ? ? ? ? ? ? ? ? ? var para=document.createElement("p");

? ? ? ? ? ? ? ? ? ? ? ? var node=document.createTextNode("a paragraph");

? ? ? ? ? ? ? ? ? ? ? ? //在新节点作为最后一个子元素插入

? ? ? ? ? ? ? ? ? ? ? ? para.appendChild(node);

? ? ? ? ? ? ? ? ? ? ? ? parent.appendChild(para);

? ? ? ? ? ? ? ? ? ? ? ? //将新节点作为第一个子元素插入

? ? ? ? ? ? ? ? ? ? ? ? parent.insertBefore(para,element.firstChild);

? ? ? ? ? ? ? ? 11.0.5、替换

? ? ? ? ? ? ? ? ? ? ? ? var child=parent.firstChild;

? ? ? ? ? ? ? ? ? ? ? ? var para=document.createElement("p");

? ? ? ? ? ? ? ? ? ? ? ? var node=document.createTextNode("a paragraph");

? ? ? ? ? ? ? ? ? ? ? ? para.appendChild(node);

? ? ? ? ? ? ? ? ? ? ? ? parent.replaceChild(para,child);

? ? ? ? ? ? ? ? 11.0.6、删除

? ? ? ? ? ? ? ? ? ? ? ? var child = parent.firstChild;

? ? ? ? ? ? ? ? ? ? ? ? parent.removeChild("child");

（二）、Browser Object Model

? ? ? ? BOM是在浏览器页面初始化时，在内存创建的全局对象，用来描述当前窗口的属性和状态；BOM的浏览器为了和JS交互而实现的接口(API),包括方法&属性；非官方标准，部分功能各浏览器间不一致;BOM的核心对象是Window。

? ? ? ? Window对象，表示当前浏览器窗口，核心模块：Document（文档模块），Frame（HTML框架对象），Navigator（浏览器对象），Screen（显示屏幕对象），Location（当前页面的地址对象），History（页面历史记录对象）。

（三）、事件

? ? ? ? 可以理解为触发一响应机制

? ? ? ? 1、事件有三部分组成：事件源、事件类型、事件处理程序；

? ? ? ? ? ? ? ? （1）、事件源：事件被触发的对象，谁？

? ? ? ? ? ? ? ? （2）、事件类型：如何触发什么事件？

? ? ? ? ? ? ? ? （3）、事件处理程序：通过一个函数赋值的方法完成。

? ? ? ? 2、执行事件的步骤：

? ? ? ? ? ? ? ? （1）、获取元素

? ? ? ? ? ? ? ? （2）、注册事件，给元素添加事件

? ? ? ? ? ? ? ? （3）、事件处理，即添加事件处理程序

（四）、操作元素

? ? ? ? 1、改变元素内容：

? ? ? ? ? ? ? ? （1）、element.innerText:起始到终止位置的内容，去除html标签，同时空格和换行也会去掉。

? ? ? ? ? ? ? ? （2）、element.innerHTML:起始位置到终止位置全部内容，包括HTML标签，同时保留表格及换行。

? ? ? ? ? ? ? ? （3）、上述两个属性可以续写，可获取元素的内容。

? ? ? ? 2、修改元素的属性：

? ? ? ? ? ? ? ? 可用修改元素属性来实现一些切换功能

? ? ? ? 3、修改表单的属性元素：

? ? ? ? ? ? ? ? value等专有属性

? ? ? ? 4、样式

（五）、其他

? ? ? ? HTML属性通过getAttribute(name),setAttribute(name,value),removeAttribute(name),分别实现获取，设置，移除。

? ? ? ? CSS内联样式获取通过style获取属性集，可以对集合中的某个属性进行修改。

有关JavaScript的知识目前就总结到这里 ，上述文档中有什么总结不当的内容还希望大佬留言指正！！！? ? ?

? ? ? ? ? ? ? ? ? ??

? ? ? ??

? ? ? ? ? ? ?

? ? ? ? ? ? ? ??

? ? ? ? ? ?

????????????????????????????????????????

? ??

? ? ? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ? ? ? ??