html-javaScript-基础及对象常用方法

javaScript

边解释 边运行

网页中引用js

内部引用html

外部引用

在head标签中引用

<script src="" type="text/javascript" charset="utf-8"></script>

注意：在head中外部引用了js文件 那么在body中不可以内部引用

标签内引用

在标签内使用需要和事件结合引用

变量

js没有编译报错

---

1、JavaScript介绍

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。

JavaScript特点

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边执行边解释

弱类型语言

2、JavaScript的组成

ECMAScript包含js的基础语法

DOM(文档对象模型)包含js对网页文档的操作

BOM(浏览器对象模型)包含js对浏览器的操作

3、JavaScript的使用，JavaScript需要再HTML中应用，有三种引用方式

1、内部JS

​ 在HTML内部的任意地方添加script标签，在标签内可以编写JS的代码

2、外部JS

​ 将js的代码专门写在一个JS的文件中，在html中使用script标签的src属性引用

3、标签内JS

​ 需要与标签的事件结合使用，通过事件调用js的代码

在使用时，由于内部JS和外部JS都是使用script标签，那么当使用外部JS时，引入的script标签内不能编写其他的JS代码

4、JavaScirpt的输出方式

1、alert(“输出内容”) 可以弹出一个警告窗口显示输出的内容

2、document.write(“输出内容”)，可以往网页中添加指定的输出内容，内容可以为html的标签

3、console对象是浏览器自带的一个对象，可以往浏览器的控制台输出内容（推荐使用）

Console选项查看
console对象的常用调试方法
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');

5、JS变量

创建变量使用var 变量名 = 变量的值

JS属于弱类型语言，变量的类型可以是任意的类型，在赋值时可以赋值为任意值。

let创建局部变量

在JS中默认创建的变量，除了在函数内的变量，其他的都是全局变量

创建的变量可以重名，重名相当于覆盖，但是let创建的变量不允许重名

申明一个变量 使用var let const

直接在script标签内创建的变量是全局变量

6、数据类型

基本数据类型： underfined \ null , number ， string , boolean

引用数据类型： object

数据类型	说明
undefault	var width、变量width没有初始值，将被赋予值undefined
null	表示一个空值，与undefined值相等
number	var iNum=23; //整数 var iNum=23.0; //浮点数
boolea	true和false
string	一组被引号（单引号或双引号）括起来的文本
object	对象由花括号分隔。在括号内部，对象的属性以 名称和值对的形式 (name : value) 来定义

7、String字符串的使用，几乎与Java里的String一致

属性：length

方法：charAt() indexOf() substring() split() valueof() concat() replace()

8、数组，是多个数据的集合，与java的集合类似

​ 1、没有长度限制

​ 2、可以存储任意的类型

​ 3、下标可以为任意类型，但是除了正整数，其他的都不算真正的下标，而是作为数组对象的属性。

​ 4、遍历数组

​ 1、普通的for循环

​ 2、for in循环，取出数组所有的下标与属性

var arr = [1,99,7,32,6,true,'sdf',"hello"];			
for(var i=0;i<arr.length;i++){				
    console.log(arr[i]);			
}			
for(var i in arr){				
    console.log(arr[i]);			
}

9、函数的使用

​ 1、自定义函数

​ 函数定义

function 函数名(){

​			函数体

}

​ 2、js自带的函数

6、语法规范

js属于弱类型语言，变量可以是任意的类型 赋值时可以赋值为任意值

JS是解释性语言，解释一行执行一行，默认从上到下，一行一行的执行，所以每一行代码结尾可以不用加标识符，但是一行只能写一段或者一句代码，如果要写多句，需要使用分号结尾。推荐每一行都分号结尾

			//预编译
			全局预编译
			1.把变量声明提前
			2.把函数的声明提前
			在内存中加载变量与函数
			函数预编译
			1.找出函数中定义的变量与形参,先声明,默认赋值为underfined
			2.给形参赋值
			3.找出函数中定义的函数

---

运用

类型转换

、自动类型转换

JavaScript是一种弱类型语言，变量在运行期间参与运算时，在不同的运算环境中，也会进行相应的自动类型转换。

自动类型转换一般是根运行环境和操作符联系在一起的，是一种隐式转换，主要分为几种类型：转换为字符串类型、转换为布尔类型、转换为数字类型。

a、字符串类型转换

当使用“+”运算符进行运算时，如果其中一个操作数为字符串，另一个也会被转换为字符串进行拼接操作

对于基本数据类型，会直接转换为字面量一致的字符串

对于引用数据类型，会先试图调用对象的valueOf()方法，如果此方法返回值是引用类型，则接着再调用其toString()方法，最后将返回值转为字符串类型

b、数字类型转换

字符串类型转为数字: 空字符串被转为0，非空字符串中，符合数字规则的会被转换为对应的数字，否则视为NaN

布尔类型转为数字: true被转为1，false被转为0

null被转为0，undefined被转为NaN

对象类型转为数字: valueOf()方法先试图被调用，如果调用返回的结果为基础类型，则再将其转为数字，如果返回结果不是基础类型，则会再试图调用toString()方法，最后试图将返回结果转为数字，如果这个返回结果是基础类型，则会得到一个数字或NaN，如果不是基础类型，则会抛出一个异常

​

c、布尔类型转换

数值转换为布尔类型：0表示false，其余数字都被认为是true，包括负数。

字符串转为布尔类型：空字符串会被转为false，其它字符串都会转为true

对象转为布尔类型：只要当前引用的对象不为空，都会被认为是true

当undefined和null在逻辑环境中执行时，都被认为是false

​

Array

1、对象的valueof方法与tostring方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1y9bENg-1575601622098)(D:\学习文件\博课\img\jsArray常用方法.jpg)]

2、this对象使用

在JavaScript中this表示当前上下文，即当前调用者的引用

单独使用，this 表示全局对象，即Window对象。

在对象的方法中，this 表示该方法所属的对象。

在函数中，this 表示全局对象。

在事件函数中，this 表示接收事件的元素

3、强制类型转换

4、数组的常用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xk0hIClb-1575601622099)(D:\学习文件\博课\img\jsArray常用方法2.jpg)]

将对象集合转为数组

当一些对象的方法不可以调用时可以使用

对象.prototype.方法名.call(“要使用该方法的对象”,方法参数)

Array.prototype.slice.call(对象集合, 开始下标，结束下标) //结束下标省略就是默认为集合长度

**slice** 方法一直复制到 *end* 所指定的元素，但是不包括该元素。如果 *start* 为负，将它作为 
*length + start*处理，此处 *length* 为数组的长度。如果 *end* 为负，就将它作为 
*length* + *end* 处理，此处 *length* 为数组的长度。如果省略 *end* ，那么 
**slice** 方法将一直复制到 *arrayObj* 的结尾。如果 *end* 出现在 *start* 
之前，不复制任何元素到新数组中

Array.prototype.slice.call == [].slice

虽然运行结果是一个样的，但经过试验（别人做的试验，不是我），前者的运行效率比后者大大提高，所以就这样应用。

机理：
这里的slice方法就是一个Function对象。通常情况下，程序员通过如下方法调用Function，实质是普通的函数调用方法： Array.slice(begin,end)至于call()方法，METHOD: Function::call告诉我们，可以通过

Function.call(thisArg[, arg1[, arg2[, …]]])

的形式调用一个Function对象，把当中的this对象替换为thisArg，即可以得到下面的代码：Array.prototype.slice.call(obj,begin,end)

5、内置函数

内置函数是由JavaScript语言自身提供的函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ay7LGoDS-1575601622100)(D:\学习文件\博课\img\js内置函数.jpg)]

---

js内置对象常用方法

JS内置对象：
● String对象：处理所有的字符串操作

● Math对象：处理所有的数学运算

● Date对象：处理日期和时间的存储、转化和表达

● Array对象：提供一个数组的模型、存储大量有序的数据

● Event对象：提供JavaScript事件的各种处理信息

String 对象

常用方法：

length; (属性)（返回字符串的长度）

toUpperCase(); （将字符串字母部分转换为大写）

toLowerCase(); （将字符串字母部分转化为小写）

charAt(index); （返回指定指定位置的字符串 如果index不在（0，length）中，则返回空字符串）

indexOf(substring, startpos); （返回从startpos位置开始，substring字符的位置或者索引号）

split(separator,limit); （separator 是分割的符号 ，limit是分割次数）

substring(startpos,stoppos);（提取字符串从sartpos到stoppos之间的字符串 ，stoppos可省略）

substr(startPos,length); (提取从starpos开始长度为length的字符串)

-----------------字符串截取
slice()
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串.
substring()
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.
substr()
第一个参数代表开始位置,第二个参数代表截取的长度

math对象

常用方法：

Math.ceil(x) 向上取整

Math.floor(x) 向下取整

Math.round(x) 四舍五入；

Math.random(); 随机数（返回(0,1)区间的一个随机数）

Math.max(x,y) 返回 x 和 y 之间较大的数

Math.min(x,y) 返回 x 和 y 之间较小的数

Date对象

(1)创建Date对象
常用操作

var date = new Date(); （返回的是本地时间）

自定义初始值

var date = new Date(2012, 10, 1); //2012年10月1日

var date = new Date(‘Oct 1, 2012’); //2012年10月1日

(2)常用方法
获取时间的方法：

getDate(); (返回值为1-31的某一天)

getDay(); (返回0-6的某一天)

getMonth();(返回值为0-11的某个数)

getFullYear();(返回一个四位数的年份 ，如2017)

getHours();(返回0-23的某一个小时)

getMinutes();(返回0-59的某个数代表分钟)

getSeconds();(返回0-59的某个数代表秒数)

getTime();(返回从1970年1月1日之间的毫秒数)

设置时间的方法：

setDate(12);(设置天数为12)

setMonth(2);

setHours(14);

setMinutes(22);

Array对象

创建数组
var myarr = new Array();

var myarr = new Array(“1”,“2”,“3”);

常用方法
arrayObject.concat(array1,array2,…,arrayN) （连接多个数组）

arrayObject.join(分隔符) （为数组加入分隔符分隔数组元素）

arrayObject.reverse() （颠倒数组元素）

arrayObject.slice(start,end) （选取从start到end的部分数组）

arrayObject.sort(方法函数) （排序 方法函数指定是降序还是升序排序，sort方法是冒泡排序）

Event对象

窗口事件
(只在body和frameset元素中才有效 ）

onload 页面或图片加载完成时

onunload 用户离开页面时

表单元素事件
(在表单元素中才有效 ）

onchange 框内容改变时

onsubmit 点击提交按钮时

onreset 重新点击鼠标按键时

onselect 文本被选择时

onblur 元素失去焦点时

onfocus 当元素获取焦点时

键盘事件
(在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效）

onkeydown 按下键盘按键时

onkeypress 按下或按住键盘按键时

onkeyup 放开键盘按键时

(在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效 )

onclick 鼠标点击一个对象时

ondblclick 鼠标双击一个对象时

onmousedown 鼠标被按下时

onmousemove 鼠标被移动时

onmouseout 鼠标离开元素时

onmouseover 鼠标经过元素时

onmouseup 释放鼠标按键时

其他
onresize 当窗口或框架被重新定义尺寸时

onabort 图片下载被打断时

onerror 当加载文档或图片时发生错误时

---

JS中 map, filter, some, every, forEach, for in, for of 用法总结

1.map

有返回值，返回一个新的数组，每个元素为调用func的结果。

let list = [1, 2, 3, 4, 5];
let other = list.map((d, i) => {
    return d * 2;
});
console.log(other);
// print: [2, 4, 6, 8, 10]

2.filter

有返回值，返回一个符合func条件的元素数组

let list = [1, 2, 3, 4, 5];
let other = list.filter((d, i) => {
    return d % 2;
});
console.log(other);
// print: [1, 3, 5] 

3.some

返回一个boolean，判断是否有元素符合func条件，如果有一个元素符合func条件，则循环会终止。

let list = [1, 2, 3, 4, 5];
list.some((d, i) => {
    console.log(d, i);
    return d > 3;
});
// print: 1,0 2,1 3,2 4,3
// return false

4.every

返回一个boolean，判断每个元素是否符合func条件，有一个元素不满足func条件，则循环终止，返回false。

let list = [1, 2, 3, 4, 5];
list.every((d, i) => {
    console.log(d, i);
    return d < 3;
});
// print: 1,0 2,1 3,2
// return false

5.forEach

没有返回值，只针对每个元素调用func。
优点：代码简介。
缺点：无法使用break，return等终止循环。

let list = [1, 2, 3, 4, 5];
let other = [];
list.forEach((d, i) => {
    other.push(d * 2);
});
console.log(other);
// print: [2, 4, 6, 8, 10]

6.for in

for-in循环实际是为循环”enumerable“对象而设计的，for in也可以循环数组，但是不推荐这样使用，for–in是用来循环带有字符串key的对象的方法。
缺点：只能获得对象的键名，不能直接获取键值。

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// print:  "obj.a = 1" "obj.b = 2" "obj.c = 3"

7.for of

1、for of为ES6提供，具有iterator接口，就可以用for of循环遍历它的成员。也就是说，for of循环内部调用的是数据结构的Symbol.iterator方法。

2、for of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、后文的Generator对象，以及字符串。

3、有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6的数组、Set、Map都部署了以下三个方法，调用后都返回遍历器对象。

entries
entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于Set，键名与键值相同。Map结构的iterator接口，默认就是调用entries方法。

keys
keys() 返回一个遍历器对象，用来遍历所有的键名。

values
values() 返回一个遍历器对象，用来遍历所有的键值。
这三个方法调用后生成的遍历器对象，所遍历的都是计算生成的数据结构。

// 字符串
let str = "hello";
for (let s of str) {
  console.log(s); // h e l l o
}

// 遍历数组

// print:  a 1 b 2 c 3

说明：对于普通的对象，for…in循环可以遍历键名，for…of循环会报错。
一种解决方法是，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。

// entries
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

Js正则表达式RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 “g”、“i” 和 “m” 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
c](https://www.w3school.com.cn/jsref/jsref_exec_regexp.asp)	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4