Java Script学习笔记

Java Script 经量级的脚本语言,也是一种嵌入式 ( embedded) 语 言,是一种对象模型语言

---

引用方法

---

1、内联引用

<input type="button" value= "按钮”οnclick=" alert(123)">

2、嵌入引用

<script type="text/javascript">

alert(345)

</script>

3、链接引用

<script type="text/javascript" src="./1.js"></script>

输出语句

alert(对话框显示)

console.log(控制台打印);

document.write("body里面输出")

接收语句

prompt()

变量

---

var

1.变量的名字必须是数字、字母、下划线_和$组成

2.变量名字不能以数字开头

3.变量的名字 不能是关键字 for while if等

建议：变量名必须有意义，驼峰命名法

数据类型

---

1、数值 Number 型

2、字符串 String 型

3、布尔 Boolen 型

4、undefined 型 ：

表示一个声明了没有赋值的变量，变量之声明的时候值默认是undefined

5、null 型：

表示一个空值，变量的值如果想为 null，必须手动设置

6、对象 Object 型：数组、函数

2、注意:如果在字符串中要使用特殊符号，请加转义字符（\）。

typeof 获取变量的类型

length 属性用来获取字符串的长度

字符串拼接使用＋连接

1.两边只要有个是字符串，那么+就是字符串拼接功能

2.两边如果都是数字，那么就是算术功能。

数据类型转换

---

数值类型转换

1、调用Number()函数转换

2、调用parseInt()函数转换有效整数

3、调用parseFloat()函数转换有效浮点数

字符串类型转换

1、.toString() 进行数据类型转换（方法的调用）

2、String()进行数据类型转换 （函数的调用）

3、用“+”进行数据类型转换

布尔类型转换

1、Boolean（）

注释

---

单行注释 //

多行注释 /* */

算式操作符

---

+-*/%

加减乘除、取余

运算符

---

一元运算符：

++ 自加、-- 自减

逻辑运算符：

&&逻辑与 、||逻辑或 、！逻辑非 (在表达式中从右到左运算)

比较运算符：

大于、 <小于、 >=大于等于、 <=小于等于、== 值相等、=== 全等于包括类型相等、 != 两个值不相等、 !== 不全等

赋值运算符：=，+=、 -=、 /=、 *=、 %=

运算优先级从上往下

1、()优先级最高

2、一元运算符 ++ -- !

3、算数运算符（与数学中的运算先后一致） 先* / % 后+ -

4、关系运算符 > >= < <=

5、相等运算符 == != === !==

6、逻辑运算符 先&& 后||

7、赋值运算符 =

流程控制

---

分支结构

if-else

if（判断条件）条件要成立，才才能执行。反之则不能

else （否则判断）前面if的条件都是不成立，就执行else 代码。

switch-case-break

switch（要判断的值）

case（被判断的值）

break；跳出判断的语句

循环结构

while

while（循环判断）如果条件成立，里面的代码就会一直反复执行，每次执行代码前都要对条件进行重新判断，直到条件不成立，循环结束。

do-while 先执行一次代码，然后再进行条件判断，如果条件成立代码继续循环执行，条件不成立，代码不执行。语句中的代码总会执行一次。

do 先做一次

while 在判断是否再循环

for

for (初始表达式；判断表达式；自增自减运算)

跳出循环

Break：立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

Continue:立即跳出当前循环，继续下一次循环（跳到++的地方）

数组（Array）

---

构造函数方式创建数组

var a1=new Array();在括号内可以直接存值

数组声明

//var a1=[];//空数组

//var a1=[1,``”``d``”``];

获取数组长度

Var l = a1.length

一个数组里面存了另一个数组，称之为多维数组或二维数组，数组的维度上没有限制，只要内存够大就能存，维度越大使用起来越难。

索引表示从零开始

获取数组元素

a1[2] 表示获取标号为 2 的元素。

a2 [2] [1] 表示第二个数组里的 1 号元素。

遍历数组元素

var a = [3, 34, 4, 4123, 3, 14, 13, 1234, 1341, 4143, 13134, 13];

var b = a.length;

for (var i = 0; i < b ; i++) {

console.log(a[i]);

}

或者利用.forEach()方法遍历(局限性IE8不支持)

a.forEach(x){

console.log(x);

}//将数组元素作为实参一个一个传进来

求数组元素的和

var a = [3, 34, 4, 4123, 3, 14, 13, 1234, 1341, 4143, 13134, 13];

var b = a.length;

var c=0;

for (var i = 0; i < b ; i++) {

c+=a[i];

}

console.log(c);

数组对象

Array.isArray()

.push(元素1，元素2) 向数组末尾添加一个或多个元素，并且返回新长度。

.pop() 删除并返回数组的最后一个元素。

.unshift(元素1，元素2)向数组开头添加一个或多个元素，并且返回新长度。

.shift() 删除并返回数组的第一个元素。

.slice(开始索引，结束索引) 从数组中提取指定元素

.splice(开始索引，删除个数，替换元素) 从数组中删除指定元素，并且可以在原位置上新增元素

.join(连接符) 数组内元素合并为一个字符串

.concat()连接两个或更多个数组或元素，并返回结果

.reverse() 颠倒数组中元素顺序

.sort() 对数组进行排序

.indexOf()

函数

---

关键字声明

function函数名(参数 ){代码}

函数中的代码想要执行，必须调用这个函数〈不管什么情况下，函数不调用就一定不会执行)

调用

函数名(参数 )；

把一段相对独立的具有特定功能的代码块封装（写到一个地方），形成一个独立实体，就是函数，起个名字(函数名),在后续开发中可以反复调用。

形参与实参

1、形式参数：是在声明函数时写的；多个形参使用‘隔开；形参的值时不固定，形参仅仅是一个占位

2、占位：与实参实际传入的值要一一对应

3、实际参数：实在调用时，实际传入函数中的值；多个值使用，隔开；传入后，在函数中使用形式参数获取具体的值

函数的返回值

代码执行完后要给它代用一个返回值，把你想要返回的值写在 return 后面。

匿名函数与自调用

将匿名函数赋值给一个变量，这样就可以通过变量进行调用

var fun1 = function(){

console.log(1);

}

fun1();

匿名函数的自调用的方法执行

(function (``){

alert(123);

})()

关于自执行函数(匿名函数自调用)的作用：防止全局变量污染。

函数当作参数

函数也是一种数据类型

可以当一个值使用

回调

f1(f2);

function f1()

{

var a=10;

var f2= function(){

alert(2);

}

return f2;

}

闭包

var k=f1();

k();

函数对象

---

.cal()

.apply(()

构造函数

---

function Person(){ }

var per = new Person()；

构造函数首字母大写，用的时候new出来，与普通函数构造没什么区别。

只要调用构造函数时立刻构造出来一个新对象。

作用域

---

作用域：变量可以起作用的范围和区域

只有函数可以制造作用域

全局变量与全局作用域

在任何地方都可以访问到的变量就是全局变量，全局变量所在的区域就是全局作用域

局部变量与局部作用域

只在固定的代码片段内可访问到的变量，最常见的例如函数内部的变量，就是局部变量，局部变量所在区域就是局部作用域（函数作用域）

注意

不适用 var 声明的变量是全局变量，不推荐使用。

变量退出作用域之后会销毁，全局变量关闭网页和浏览器才会销毁。

变量提升:在代码执行之前变量已经在编译阶段被声明了

注意：如果一个变量声明了但是没有赋值就会是 undefined

必须先声明再使用

对象

---

内建对象

宿主对象

自定义对象

万物皆对象

JavaScript 中的对象其实就是生活中对象的一个抽象

JavaScript 的对象是无序属性的集合。

我们可以把 JavaScript 中的对象想象成 键值对 ，其中值可以是数据和函数。

对象的行为和特征

特征---属性

行为---方法

事物的 特征 在对象中用 属性 来表示。

事物的 行为 在对象中用 方法 来表示。

对象的声明

1、字面量声明对象 Var a={ };

2、实例化方式声明对象(内置构造函数) var a= new Object();

3、自定义构造函数方式 function a(){ }

var b=new a(); 实例化自定义构造函数方式声明对象

增删改查

var a= new Object();

a.name='xxx'

delete a.name

a.name='bbb'

for(var n in a){

consolle.log(n);

}

对象的遍历及删除

遍历 ：for(键 in 对象)

遍历对象

for(var k in a) {

console. log(a[k]);

}

遍历数组

var a = [2,,4,7,8,4];

for(var k in a) {

Console.log(a[k]);

}

删除：delete

var a= {

name : '路飞',

age:15 ,

sex:'男',

}

c onsole . log (a);

delete a.age;

console.log(a);

原型对象

所有函数都有的一个隐藏对象，当一个类需要创建一个公用属性时候可以在里面添加属性或方法，避免反复调用空间。

用法：类名.prototype.属性名/方法

this

---

this是个对象

1、函数如果在某个对象下，this 就指向这个对象

2、函数如果被直接调用，this 指向 window 对象

往父级寻找指向，如果没有就往全局（window）对象找

This永远指向一个对象

argument

---

是一个类数组对象

系统给数组传递的隐藏对象，用来封装实参的

callee

工厂方法创建对象

---

function Person(name, age, gender) {

this.name = name;

this.age = age;

this.gender = gender;

console.log(this);

return this;

}

​

var person_1 =new Person("孙悟空", "18", "男");

var person_2 =new Person("沙悟净", "18", "男");

instanceof查看该实例是否为此类构造的

用法：实例名 instanceof 类名

所有对象都是object的实例

垃圾回收

---

对于不再使用的对象设置为null

js会自动清理内存

数学对象

---

Math 对象的属性(常量)

属性(常量) 描述

Math.E 常量 数学常数 e。这是欧拉数，自然对数的底。

Math.LN2 常星 2 的自然对数。

Math.LN10 常量 10 的自然对数。

Math.LOG2E 常量 以 2 为底 e 的对数。

Math.LOG10E 常量 以 10 为底 e 的对数。

Math.PI 常量 Pi 这是圆的周长与直径的比值。

Math.SQRT12 常量 0.5 的平方根，或相当于 1 除以 2 的平方根。

Math.SQRT2 常量 2 的平方根。

Math对象的方法(函数)

方法（函数） 描述

Math.abs 函数 返回数字的绝对值。

Math.acos 函数 返回数字的反余弦值。

Math.acosh 函数 返回数字的双曲反余弦值（或反双曲余弦值）。

Math.asin 函数 返回数字的反正弦值。

Math.asinh 函数 返回数字的反双曲正弦。

Math.atan 函数 返回数字的反正切值。

Math.atan2 函数 将与X轴的角度(以弧度为单位)返回由 y 和 x 坐标表示的点。

Math.atanh 函数 返回数字的反双曲正切。

Math.ceil 函数 返回大于或等于提供的数值表达式的最小整数。

Math.cos 函数 返回数字的余弦值。

Math.cosh 函数 返回数字的双曲余弦。

Math.exp 函数 返回 e（自然对数的底）的乘幕数。

Math.expm1 函数 返回e（自然对数的底）的乘幂数减去 1结果。

Math.floor 函数 返回小于或等于提供的数值表达式的最整数。

Math.hypot 函数 返回参数平方和的平方根。

Math.imul 函数 返回被视为 32 位带符号整数的两个数字的积。

Math.log 函数 返回数字的自然对数。

Math.loglp 函数 返回 1 加上一个数字的的自然对数。

Math.log10 函数 返回数字以 10 为底的对数。

Math.log2 函数 返回数字以 2 为底的对数。

Math,max 函数 返回提供的两个数值表达式中的较大值。

Math.min 函数 返回提供的两个数字中的较小值。

Math.pow 函数 返回基表达式的指定乘幕数的值。

Math.random 函数 返回介于 0 和 1 之间的伪随机数。

Math.round 函数 返回舍入到最近整数的指定数值表达式。

Math.sign 函数 返回数字符号，它指示数字为正数、负数还是 0。

Math.sin 函数 返回数字的正弦值。

Math.sinh 函数 返回数字的反双曲正弦。

Math.sqrt 函数 返回数字的平方根。

Math.tan 函数 返回数字的正切值。

Math.tanh 函数 返回数字的双曲正切。

日期对象

---

实例化构造函数获取时间对象

var a = new Date();

console.log(a)

获取当前的时间：

var a=date.now();

console.log(a)

获取年份:

var a = new Date();

console.log(a.getFullYear());

获取月份:

var a = new Date();

console.log(a.getMonth()+1);

获取日子:

var a = new Date();

console.log(a.getDate());

获取小时:

var a = new Date();

console.log(a.getHours());

获取分钟:

var a = new Date();

console.log(a.getMinutes());

JS 获取的时间是计算本地时间，

JS 中月份的数组是从 0 开始的，如果要获取正常的月份可在后面 +1

包装类

字符串对象

---

.length()

.charAt(索引) 可以返回字符串里面指定位置的字符

.charCodeAt(索引)可以返回字符串里面指定位置字符的Unicode编码

.concat(字符1，字符2)可以连接一个或多个字符

.indexOf(字符，开始位置) 可以开始检索一个字符串中是否含有指定内容

.lastIndexOf()(字符，开始位置) 可以从后往前检索一个字符串中是否含有指定内容

.slice(开始，结束)截取指定内容字符串

.substring(开始，结束)截取指定内容字符串

.substr(开始，数量)截取指定位置数量的字符串

.split()将字符串拆分为数组

.toUpperCase()字符串字母变大写并返回

.toLowerCase()字符串字母变小写并返回

.search(可以传正则表达式)可以搜索字符串里面是否含有指定内容，并返回索引

.match()可以根据正则表达式从一个字符串中将符合条件的内容封装成数组提取出来

.replace(指定内容，替换内容)可以将字符串里面的指定内容替换为新内容

.trimEnd()

.trimStart()

正则表达式

---

用于定义一些字符串的规则

计算机可以通过正则表达式来检查一个字符串是否返回规则

或者将字符串中符合规则的呢内容提取出来

创建正则表达式的对象

var a = new RegExp("正则表达式","匹配模式");

var a = /正则表达式/匹配模式；

在正则表达式中 | 、[ ]表示或者的意思

在正则表达式中 [a-z] 表示 a 到 z 的意思

在正则表达式中 [A-z] 表示任意字母的意思

在正则表达式中 [ ^ ] 表示除了的意思

量词 (正则表达式) {次数} 可以通过大括号规定正则表达式连续次数

在正则表达式中 正则表达式 + 正则表达式 表示左边出现一次出现一次

在正则表达式中 正则表达式 * 正则表达式 表示左边出现一次出现零次

在正则表达式中 正则表达式 ？ 正则表达式 表示左边出现一次出现零或一次

在正则表达式中 ^正则表达式 表示出现并且在开头

在正则表达式中 正则表达式$ 表示出现并且在结尾

^正则表达式$ 既是开头又是结尾

. 表示任意字符

如果想查找这些正则表达式规则里面的保留字（包括 \ ）用转义字符 \ 表示

\w 任意字母、数字

\W 除了字母、数字

\d 任意数字

\D 除了数字

\s 空格

\S 除了空格

\b 单词边界

\B 除了单词边界

判断手机号规则 ^1 [3-9] [0-9]{9}$

var phone = 13333333333

var phoneReg = /^1[3-9][0-9]{9}$/;

console.log(phoneReg.test(phone));

去除输入框空格

var str = prompt("输入用户名");

str = str.replace(/^\s*|\s*&/g,"");

console.log(str);

匹配模式 i 表示忽略大小写

匹配模式 g 表示全局模式

.test() 可以使用这个方法检查一个字符串是否符合正则表达式的规则，如果符合返回true，否则返回false

DOM

---

文档对象模型 ：Document Object Model

节点Node：构成网页的最基本的组成部分，网页中的每一个部分都可以称为节点。

文档节点：这个Html文档

元素节点：Html中的html标签

属性节点：元素的属性

文本节点：Html标签中的文本内容

nodeName nodeType nodeValue

文档节点：#document 9 null

元素节点： 标签名 1 null

属性节点： 属性名 2 属性值

文本节点： #text 3 文本内容

.innerHTML 获取元素内部html代码，对自结束标签没有意义，不要使用

获取 HTML 元素

document.getElementById(id) 通过元素 id 来查找元素 document.getElementsByTagName(name) 通过标签名来查找元素 document.getElementsByClassName(name) 通过类名来查找元素

改变 HTML 元素

element.innerHTML = new html content 改变元素的 inner HTML element.attribute = new value 改变 HTML 元素的属性值 element.setAttribute(attribute, value) 改变 HTML 元素的属性值 element.style.property = new style 改变 HTML 元素的样式

var a = document.getElementById("btn");

btn.onclick = function(){

alert("点击按键");

};

window.onload = function(){

把需要界面加载完毕之后执行的动作放在这里面

}