网页前端之JS | swx的博客
前
(在学习时，可以先放在head标签之中，最后在放到结束标签前)
优点：保证html展示内容优先加载，最后加载脚本，增强用户体验性
JavaScript的语法及规则：alert相当于是System.out.println()
\1. 注释：
单行注释： // Hbuilder快捷键：ctrl+/
多行注释：/**/ Hbuilder快捷键：ctrl+shift+/
\2. 变量：标示内存中的一块空间，用于存储数据，且数据是可变的。
声明：var 变量名； 变量赋予默认值，默认值为undefined
var 变量名=值；
注意：必须以字母或下划线开头，中间可以使数字，字符或下划线。
变量名不能包含空格等符号
不能使用JavaScript的关键字作为变量名，如：function、this、class
JavaScript严格区分大小写
基本数据类型：5类
string：字符串类型 “” ‘’ 都是字符串，JavaScript中没有单个字符
boolean：布尔类型 固定值为false和true
number：数字类型 任意数字
null：空 一个占位符
undefined：未定义类型 该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值
注意：因为undefined是从null中派生出来的，所以undefined==null
JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，还可以赋予任意类型的值。
typeof() 可以分辨变量值属于哪种基本数据类型：undefined、string、boolean、number。 如果一个变量是引用类型或者null类型的话，会返回object。
ECMAScript实现之初的一个bug：null属于基本数据类型，然而typeof(null)返回的却是object
引用数据类型:引用数据类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。
标准创建方式： var str= new String(); //和java相同
var str= new String; //js独有的方式
\3. 运算符：与java基本一致
比较运算符：== 逻辑等。 仅仅对比值
=== 全等。对比值并且对比类型
逻辑运算符：没有& | 只有三个
&&：and
||： or
!： not
\4. 正则对象
RegExp对象的创建方式：
var reg= new RegExp(“表达式”); （开发中基本不用）
var reg=/^表达式$/； 直接量（开发中常用）
直接量中存在边界，即^代表开始，$代表结束
直接量方式的正则是对象，不是字符串，别用引号
使用正则对象：方法：compile：编译正则表达式 （不咋用）
exec：检索字符串中指定的值，返回找到的值，并确定其位置 （不咋用）
test方法： 正则对象.test(string); 用来校验字符串是否匹配正则，全部字符匹配返回true，有一个字符不匹配返回false
注意：/表达式/ 普通方式，只要有成立正则的字符存在，就返回true，除非全部字符不符合正则，返回false（检查不严格，适合字符串查找、替换）
/^表达式$/ 直接量方式，只要有无法成立正则表达式的字符存在，就返回false（检查严格，适合表单校验）
\5. JS数组对象
特性：JS数组可以看作java中的ArrayList集合。
数组中的每一个成员都没有类型限制，即可以存放任意类型。
数组的长度可以自动修改
四种创建方式：
（1）var arr=[1,2,3,”a”,true]; 常用的js数组 （常用）
（2）var arr=new Array(); 创建一个数组对象，数组长度默认为0 （常用）
（3）var arr= new Array(4); 数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。
（4）var arr =new Array(“a”,1,true);创建了一个数组，长度为3，元素是“a”,1,true
常用属性：length 设置或返回数组中元素的数目
常用方法： join（string） 把数组的所有元素放入一个字符串。元素通过指定的分隔符string进行分隔 （对原来的数组无影响）
pop（） 删除并返回数组的最后一个元素（原先数组无了）
push（新元素） 向数组的末尾添加一个或更多的元素，并返回新的长度（原先数组无了）
reverse（） 颠倒数组中元素的顺序（物理翻转，就是把元素下标进行互换）该方法的返回值就是翻转成功的新数组。（会对当前的数组进行操作，原来的数组无了）
\6. 全局函数(global)
undefined属于全局函数的属性，但是我们在使用的时候不用加global.undefined
（1）执行： eval（string） 计算JavaScript字符串，并把它作为脚本代码来执行
作用：增强程序的扩展性
注意：只可以传递原始数据类型string，传递string对象无作用。
（2）编码和解码
URL/URI编码：中文和特殊符号 %十六进制
作用：保证数据传递的完整性
encodeURI（string） 把字符串进行URI编码，返回值就是编码后的结果
decodeURI（string） 解码某个编码的URI
（3）URI和URL的区别
URI是统一资源标识符 标识资源详细名称 必须包含资源名
URL是统一资源定位器 定位资源的网络位置 必须包含http：//
资源：就是可以通过浏览器访问的信息统称为资源（图片、文本、HTML、CSS等等）
（4）字符串转数字
parseInt(string) 解析一个字符串并返回一个整数 小数点后面部分直接去掉
parseFloat(string) 解析一个字符串并返回一个浮点数
注意：如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。
如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN（Not A Number，一个数字类型的标识，表示不是一个正确的数字）
\7. 自定义函数/自定义方法
函数：如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中
作用：增强代码的复用性
格式： function 方法名(参数列表){
函数体
}
注意：JavaScript函数定义必须用小写的function
无需定义返回值类型，在function后面直接写方法名
参数的定义无需使用var关键字，否则会报错
函数体中，return可以不写，也可以return具体值，也可以仅仅写return
JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，则返回值为undefined
函数如果同名，JavaScript中不存在方法重载，只有方法相互覆盖，所以最后定义的函数覆盖之前的定义。
再调用时仅仅根据方法名来调用函数，即使实际参与函数与形参不匹配，也不会影响正常调用。
如果实参未赋值，就使用默认值undefined
\8. 自定义对象
①function构造函数：JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示。（相当于java中创建某个class类）
无形参格式：function 对象名(){
函数体
}
例如：
声明一个Person对象：
function Person(){
this.name=”swx”; // this 就是当前的Person对象
this.age=”23”; //name age是对象的属性
}
var p=new Person(); //创建了一个Person对象
alert(p.name);
为属性赋值：
（1）构造参数赋值：function Person(n,a){
this.name=n;
this.age=a;
}
var p=new Person(“swx”,”23”);
（2）创建对象后，调用属性进行赋值
p.name=”sss”;
属性定义方式：
（1）this关键字，在对象声明定义阶段，定义一个属性
（2）创建对象后，使用对象.属性 方式来动态定义属性
p.sex=”男”; //为Person对象声明了一个新的属性sex并赋值为男
应用场景：适用于对象构建及代码复用
②对象直接量
开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”
格式： var 对象名 = {属性名1：“属性值1”，属性名2：“属性值2”，属性名3：“属性值3”……}; // 不一定非要字符串了 可以直接数字18
该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可。
适用场景：适用于快速创建实例对象及数据封装
BOM对象
BOM（Browser Object Model）浏览器对象模型
浏览器：IE、火狐、谷歌、360等任意浏览器
作用：用来执行浏览器的相关操作（例如：浏览器的地址，弹出消息等）
一般情况下，window代表了BOM对象
window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写
（1）消息框
alert() 警告框，用来弹出警告消息
注意：不同浏览器显示的组件样式不同，我们无需关注
confirm() 确认框 用于告知用户信息并收集用户的选择
有一个返回值，boolean类型
（2）定时器
循环定时器：调用一次就会创建并循环执行一个定时器
格式：setInterval(调用的方法名()，毫秒值);
会有一个返回值，返回值就是这个定时器的id
取消：clearInterval(id); 取消id的定时器
一次性定时器：调用一次就会创建并执行一个计时器一次
格式：setTimeout(调用的方法名()，毫秒值);
也会有一个返回值，返回值就是这个定时器的id
取消：clearTimeout(定时器ID); 这个id在当前页面要求是唯一的。
（3）location对象
包含浏览器地址栏的信息
常用属性：href 设置或返回完整的URL （直接调用会返回当前页面的URL，设置href属性=””;浏览器就会跳转到对应的路径，这里可以是html页面，也可以是外网路径，但必须要加https：//）
DOM对象
DOM（Document Object Model）文档对象模型
文档：标记型文档（HTML等）
DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象
通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的
HTML文件会加载并解析到内存中，会生成一张DOM树
DOM树：
每个标签都会被加载成DOM树上的一个元素节点对象
每个标签的属性会被加载成DOM树上的一个属性节点对象
每个标签的内容体会被加载成DOM树上的一个文本节点对象
整个DOM树，是一个文档节点对象，即DOM对象
*一个HTML文档加载到内存中就会形成一个DOM对象*
特点：必定会有一个根节点
每个节点都是节点对象
常见的节点关系：父子节点关系
文本节点对象没有子节点（叶子节点）
每个节点都有一个父节点，零到多个子节点
只有根节点没有父节点
获取元素对象的四种方式： document的相关方法，所以要用document调用
getElementById(); 通过元素id获取对应元素对象 （可以通过id获取对应的元素对象，如果找不到，返回null）
getElementsByName(); 通过元素的****name属性****获取符合要求的所有元素
getElementsByTagName(); 通过元素的****元素名属性（标签名）****获取符合要求的所有元素
getElementsByClassName(); 通过元素的****class属性****获取符合要求的所有元素
注意事项：
获取某个或某些元素节点对象，必须保证元素节点对象先被加载到内存中。（这就是为什么script标签为什么推荐放在之前的原因，这就可以保证元素都被加载完了，再运行script标签时就能找到相应的标签）
元素对象常见属性：
value: 可以修改元素的值
元素对象.value 获取元素对象的value属性值
元素对象.value=属性值 设置元素对象的value属性值
className： 可以修改元素的样式
//本来是class，但是class是关键字，所以要用className
元素对象.className 获取元素对象的class属性值
元素对象.className=属性值 设置元素对象的class属性值
checked： 可以修改单选/复选的选中与否
元素对象.checked 获取元素对象的checked属性值
元素对象.checked=属性值 设置元素对象的checked属性值
HTML中checked=”checked”,JavaScript中返回true，false
innerHTML： 可以操作元素的内容体
元素对象.innerHTML 获取元素对象的内容体
元素对象.innerHTML=值 设置元素对象的内容体
追加内容体信息： 元素对象.innerHTML+=值
JS事件
通常鼠标或热键的动作称之为事件（Event）。
作用：通过JS事件，我们可以完成页面的指定特效
JS事件驱动机制：
事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事情
监听器：专门处理事件源所产生的事件
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理
JS常见事件： 一般都是放在标签中，事件=“方法()”
\1. 点击事件（onclick）：由鼠标或热键点击元素组件时触发
\2. 焦点事件
焦点：即整个页面的注意力。 默认一个正常页面最多仅有一个焦点 （例如：文本框中闪烁的小竖线）
通常焦点也能反映出用户目前的关注点，或者正在操作的组件。
获取焦点事件（onfocus）：当元素组件获取焦点时触发
失去焦点事件（onblur）：元素组件失去焦点时触发
\3. 域内容改变事件（onchange）：元素组件的值发生改变时触发
\4. 加载完毕事件（onload）：元素组件加载完毕时触发
//以前有推荐script代码放在最后是因为要元素标签加载完在调取，现在有了这个方法，也可以让元素组件加载完再调取。
\5. 表单提交事件（onsubmit）：表单的提交按钮被点击时触发
注意：该事件需要返回boolean类型的值来执行 提交/阻止表单数据的操作
事件得到true，提交表单数据
事件得到false，阻止表单数据提交
在form标签处写。
用于表单的校验，也可以控制表单的提交 onsubmit=”return run1()” run1方法中必须要有返回值（可以进行表单校验，符合返回true，会提交表单；不符合返回false，表单提交会被阻止）
\6. 键位弹起事件（onkeyup）：在组件中输入某些内容时，键盘键位弹起时触发该事件（可以进行校验）
\7. 常用鼠标事件
鼠标移入事件（onmouseover）：鼠标移入某个元素组件时触发
鼠标移出事件（onmouseout）：鼠标移出某个元素组件时触发
JS事件的两种绑定方式：
\1. 元素事件句柄绑定：将事件以元素属性的方式写到标签内部，进而绑定对应函数
//可以绑定一个或者多个 无参、带参函数，如果是带参的话，外面是“”里面是’’。多个函数时，函数之间用“ ， ”隔开，顺序就是执行顺序。
优点：开发快捷；传参方便；可以绑定多个函数
缺点：JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护
\2. DOM绑定方式：使用DOM的属性方式绑定事件
两种：（1）对象.事件属性 一次只能绑定一个函数，不能传递参数
window.onload=run1；
（2）匿名函数 可以绑定多个函数，可以传递参数
window.onload=function(){
//这个方法是页面加载的方法，可以在这里调取此页面的所有元素，获得元素后就可以继续使用匿名函数调取方法
run1();
run2();
}
优点：使得HTML代码和JS代码完全分离
缺点：不能传递参数；一个事件只能绑定一个函数。解决：匿名函数就可以，匿名函数内部就可以绑定多个函数
Window setInterval() 方法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
如果你只想执行一次可以使用 setTimeout() 方法
Window clearInterval() 方法
显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行:
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：
if问题
在 JavaScript 里，不为空 “” 的字符串、不为 0 的数字、不为 null 的对象、不为 undefined 的对象属性、布尔型 true，单独作为判断式里的一个表达式时 JavaScript 通通认定为真（true），反之则为假（false）
原型和原型链
一、原型
①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype
1
2
| var a = [1,2,3];
a.__proto__ === Array.prototype; // true
|
二、原型链
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
二、原型链
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
举例，有以下代码
1
2
3
4
5
6
7
8
9
| function Parent(month){
this.month = month;
}
var child = new Parent('Ann');
console.log(child.month); // Ann
console.log(child.father); // undefined
|
在child中查找某个属性时，会执行下面步骤：
访问链路为：
①一直往上层查找，直到到null还没有找到，则返回undefined
②Object.prototype.__proto__ === null
③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象
js的方法：
1
| JSON.stringify() //将数组转为字符串
|
1
| stringObject.indexOf(searchvalue,fromindex) //从stringObject中检索searchvalue，对大小写敏感，没找到返回-1，找到返回stringObject中的index值
|