javascript笔记

获得焦点onfocus,失去焦点onblur
isNaN()判断是非数字
undefined和数字相加最后的结果是NaN
null和数字相加最后的结果是数字
typeof空格变量名或typeof(变量名) 可以检测变量的类型
parseInt('120.8px') 最后的结果是 120->数字；自动去掉px;向下取整；必须数字开头
浮点数算数运算会有问题
数组使用 []，
new Array(2)创建了长度为2的空数组
new Array(4,7,9)创建了长度为3的数组，包含了【4，7，9】
console.dir(对象名) -》查看对象的具体属性、方法
getElementsByTagName返回带有指定标签名的对象的集合-伪数组的形式存储
H5新增：document.querySelector("选择器")可以返回第一个元素对象
H5新增：document.querySelectorAll("选择器")可以返回所有符合条件的元素对象集合-伪数组的形式存储
获取body元素：document.body //返回body元素对象
获取html元素：document.documentElement //返回html元素对象
innerText不识别html元素；会去除空格和换行；非标准
innerHTML识别html标签；保留空格和换行；是W3C标准
element.属性获取内置的属性值（元素本身自带的属性）
element.getAttribute('属性') 获得自定义的属性（常用！！！）
H5对于自定义属性的规定是 data-开头做为属性名并且赋值
H5获取自定义属性data-xyz的值：element.dataset.xyz或者

element.dataset['xyz']

其中element.dataset是一个集合
element.setAttribute('属性'，‘值’) 给属性赋值
element.removeAttribute(‘属性’),移除属性
element.cloneNode();返回一个复制element的节点
1. 浅拷贝：若括号内为空或false，则只复制标签不复制里面的内容
2. 深拷贝：若括号内为true或（非空）,则复制标签且复制里面的内容
阻止链接a跳转: 将a标签的href设置成javascript:void(0);或者javascript:;
增强for循环 for(var k in obj)其中obj是字典，k是键，obj[k]是值

JS执行机制

微信图片_20220314083938

微信图片_20220314083630

微信图片_20220314083641

ps:

推荐使用单引号

javascript 表单、表单验证、验证API了解了，后续有用到再来看

AJAX是异步的JavaScript和XML后面有时间再学

jQuery 是javascript库， jQuery 极大地简化了 JavaScript 编程。

jquery,prototype,mootools仅了解，后面再学，都是javascript的库（框架）

样式属性修改-权重比较高-是行内样式

会覆盖CSS的样式（外部样式表、内部样式表），属于内联样式表

浮点数的精度问题

变量命名-name也是关键字

获取页面所有图片的链接

[].map.call(document.getElementsByTagName('img'), function (img){ return img.src;})
//映射整个网页，将页面中的所有img标签,作为对象，传入匿名函数获取所有的图片链接

获取当前页面URL：location.href

获取当前URL的路径：location.pathname

以下必须是在同一个页面跳转，而不是新建一个页面

从当前页面跳转到其他页面：window.location.assign("另一网址")

返回跳转之前的一个页面（若有）：window.history.back()

返回跳转之后的一个页面（若有）：window.history.forward()

A->B->C

A:back

B:当前页面

C:forward

使用window.history.go(数字)也可以实现。数字为正往后跳转，数字为负，往前跳转。

若数字为0，则表示自身，跳转到自身，相当于刷新

在A页面数字为2，则跳转到C，在B页面数字为1，则跳转到C

在C页面数字为-2，跳转到A，在B页面数字为-1，则跳转到A

浏览器对象navigator(这些信息可以被我修改嘿嘿)


<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

三种消息框：

警告框：alert("你好，我是一个警告框！");

确认框：confirm("按下按钮");

提示框：prompt(input提示文字,input默认值);（默认值可以省略）

每milliseconds个毫秒数，就执行一次函数（不停执行）

var a = setInterval("javascript function",milliseconds);//可以直接使用setInterval
b

clearinterval（）用于停止setInterval()

 clearInterval(a);//a是setInterval()的引用，停止a就可以停止setInterval()

设置延迟milliseconds秒后执行函数setTimeout()

myVar= setTimeout("javascript function", milliseconds);

clearTime()用于停止setTimeout()

 clearTimeout(myVar);//同上

使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

cookie实例

//设置 cookie 值的函数
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取 cookie 值的函数
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0)
        { 
            return c.substring(name.length,c.length); }//substring:提取两个索引之间的字符
        }
    return "";
}
//检测 cookie 值的函数，在页面载入时执行 checkCookie() 函数
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

开始

document.getElementById(id).innerHTML= '新的 HTML'    //文本
document.getElementById(id).（attribute属性名）='新属性值'     //属性


document.getElementById(id).style.（property样式名）= '新样式'   
//当CSS修改较少的时候推荐


document.getElementById(id).className='新类名'  （会覆盖原先的类名，只应用该新类名）
//给这个控件添加一个新的类名，当CSS修改较多的时候推荐；单独写一个样式。

document.getElementById(id).className='原先类名 新类名'   //即可保留原先的类名
或者document.getElementById(id).className += ' 新类名'

//事件见下

外部javascript

<script src="myScript.js"></script>

三种动态创建元素的区别

document.write()
element.innerHTML（若纯字符串连接的话是最慢的!）
document.createElement

若采用数组转字符串的形式：innerHTML效率最高！！！

断点调试

节点操作

获取节点总结：https://juejin.cn/post/6976087862689136670

获取最近的父节点 -若找不到则返回null

element.parentNode

获取上一个兄弟：element.previousSibling【同下获取子节点，包括所有节点，找不到返回null】

获取下一个兄弟：element.nextSibling【同下获取子节点，包括所有节点，找不到返回null】

获取上一个兄弟元素节点(推荐)：element.previousElementSibling

获取下一个兄弟元素节点(推荐)：element.nextElementSibling

获取子节点

方法1 （不提倡）：element.childNodes 获取所有子节点的集合（包括元素、属性、文本）
- 通过element.childNodes[指定的索引].nodeType可以得到以下对应的值：
  - 元素节点：1
  - 属性节点：2
  - 文本节点：3

//兄弟节点的代码和这个类似！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

//不提倡使用childNodes，因为需要专门的处理
//可以使用以下代码获取子节点中的特定的节点集合
for(var i=0;i<element.childNodes.length;i++){
    if(element.childNodes[i].nodeType == 1){
        console.log(element.childNodes[i]);
    }
}

方法2（非标准）：element.children 即可获得所有子元素节点的集合（伪数组）

获取第一个子节点-若找不到则返回null

element.firstChild(包括文本节点、属性节点、元素节点；不提倡)
element.firstElementChild（获取第一个子元素节点【ie9+】）

获取最后一个子节点-若找不到则返回null

element.lastChild (包括文本节点、属性节点、元素节点；不提倡)
element.lastElementChild（获取最后一个子元素节点【ie9+】）

实际上，开发过程中！！！使用最多的是element.children[index]获取任意的子元素

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件


//由于addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄，所以可以对一个对象添加多个事件句柄，和直接添加事件不一样。直接事件只能有一个句柄。句柄就是执行的函数。
<script>
 //绑定事件/添加事件
 //传统方式：
document.getElementById("myBtn").onclick=function(){displayDate()};//直接嵌入事件
     document.getElementById(id).attribute=新属性值
//等价于
document.getElementById("myBtn").addEventListener("click", displayDate);
    //通过addEventListener（）方法，监听事件的发生，再调用函数
    //可以使用 removeEventListener() 方法来移除事件的监听
    
//删除事件
//传统方式：element.onclock=null;
//也可以使用removeEventListener()用法和addEventListener()相同
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

注意删除事件/移除事件的区别

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的,默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄

事件冒泡或事件捕获？-不能同时存在！！！只能2选1！！！

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发，然后再触发

元素的点击事件。

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

查找元素

[HTMLCollection]是 HTML 元素的集合

//通过id
var x=document.getElementById("intro"); 

//通过标签名
var x=document.getElementById("main");
var y=x.getElementsByTagName("p"); 

//通过类名
var x=document.getElementsByClassName("intro");

//getElementsByTagName 和 getElementsByClassName 这两个方法查找多个 dom 元素，返回的是 htmlcollection 类型，是伪数组而不是真数组，故不能使用数组的方法。我们可以使用数组原型配合 slice 方法，利用 call，apply，bind 方法将伪数组转为真数组。

//例如：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
console.log(y)//在控制台我们可以看到原型proto为htmlcollection，是伪数组
//伪数组转为真数组方法1
console.log(Array.prototype.slice.call(y))//在控制台我们可以看到原型proto为Array(0)，是真数组

//伪数组转为真数组方法2
console.log(Array.prototype.slice.apply(y))//在控制台我们可以看到原型proto为Array(0)，是真数组

//伪数组转为真数组方法3
console.log(Array.prototype.slice.bind(y)())//在控制台我们可以看到原型proto为Array(0)，是真数组

添加HTML元素到最后(appendChild)

//添加到最后
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);//添加到最后
</script>

创建新的 HTML 元素 (节点) 到最前- insertBefore()

//添加插入到指定元素前
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

移除已存在的元素removeChild


<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换 HTML 元素 - replaceChild()


<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

script内嵌则按顺序执行，如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

对象赋值对象，他们之间是引用的关系，一个改变了，另一个也会改变。

定义：

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。

JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值（Number.MAX_VALUE）为 ±1.7976931348623157e+308，最小值（Number.MIN_VALUE）为 ±5e-324。

字符串（String）字面量可以使用单引号或双引号

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

定义对象：例如var person={firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

无穷大用Infinity表示，负无穷大用-Infinity表示，这是js内置的

注释：

单行注释以 // 开头。

多行注释以 /* 开始，以 */ 结尾。

变量命名：

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
一条语句，可以练习定义多个变量

一条语句，多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量

未赋值

未使用值来声明的变量，其值实际上是 undefined

全局变量：在函数外声明的变量作用域是全局的

访问全局变量：使用var定义的，可以使用 window.carName 访问变量

访问全局变量：使用let定义的，不可以使用 window.carName 访问变量

局部变量：在函数内声明的变量作用域是局部的（函数内）

变量重载：在相同作用域中var 定义的用var重载,let定义的不能重载,const 定义的不能重载

//for循环：

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}

arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。->形参数组


x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
    var i, max = arguments[0];
    if(arguments.length < 2) return max;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

instanceof运算符

判断该变量是否为指定类型
语法：
变量名 instanceof 类型
例如
var a=[];
console.log(a instanceof Array); true
var b={};
console.log(b instanceof Array); false

typeof 运算符

检测变量的类型

函数表达式

var x = function (a, b) {return a * b}//匿名函数

箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2, …, 参数N) =>{ return 表达式; }//箭头表达式
//ps:箭头函数是不能提升的，所以需要在使用之前定义。

使用对象构造器构造对象同java

function person(firstname,lastname,age,eyecolor) 
{    
	this.firstname=firstname;    
	this.lastname=lastname;    
	this.age=age;    
	this.eyecolor=eyecolor; 
}

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

不能为现存的构造函数添加新的属性和方法，除非使用JavaScript prototype!!!

JavaScript prototype是原型对象，相当于基类

直接对原型对象操作，可以使被它继承的所有对象都修改，所有对象都继承于一个原型对象，所有原型对象都继承于object原型

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承

使用prototype继承实现添加属性：


function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

使用prototype继承实现添加方法：


function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

对象定义、创建对象方法

（严格定义）用var定义的变量不可以delete删除

（不严格定义）直接用变量名定义，可以用delete删除（它属于window的对象的属性）

可以用window.变量名调用，也可以this.变量名、

字符串内置长度：变量.length

特殊字符、转义字符

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值	实例
==	等于	x==8	false	实例 »
x==5	true	实例 »
===	绝对等于（值和类型均相等）	x==="5"	false	实例 »
x===5	true	实例 »
!=	不等于	x!=8	true	实例 »
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true	实例 »
x!==5	false	实例 »
>	大于	x>8	false	实例 »
<	小于	x<8	true	实例 »
>=	大于或等于	x>=8	false	实例 »
<=	小于或等于	x<=8	true	实例 »

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

输入语法：input 输入的内容默认为value变量，可以通过修改默认value的值初始化input

增强for循环

for (i in 字典|对象)

{

代码段；

}

每个i都是字典的键

JavaScript 类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

请注意：

NaN 的数据类型是 number，NaN 属性是代表非数字值的特殊值。
一个数字除以一个字符串结果不是一个数字；一个数字除以一个字符串数字结果是一个数字
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 object。

通过构造函数编写函数判断类型

function isArray(myArray) {
   return myArray.constructor.toString().indexOf("Array") > -1;
}

function isDate(myDate) {
   return myDate.constructor.toString().indexOf("Date") > -1;
 }

正则表达式

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

语法

var patt=new RegExp(pattern,modifiers);

 或更简单的方法

 var patt=/pattern/modifiers;
//pattern为正则表达式模型
//modifiers为RegExp 修饰符


var re = new RegExp("\\w+");
//等价于
var re = /\w+/;

RegExp 修饰符

修饰符用于执行不区分大小写和全文的搜索。

i - 修饰符是用来执行不区分大小写的匹配。

g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。

//判断是否包含e
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

//exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

try,catch,finally,throw

function myFunction() {
var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";         #throw语句用于抛出异常，让catch捕捉
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

预解析

JavaScript 声明提升

指的是：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 初始化不会提升

指的是：JavaScript 只有声明的变量会提升，初始化的不会。

严格模式声明

严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明。"use strict" 指令只允许出现在脚本或函数的开头。

严格模式下

不能使用未声明的变量,对象也是一个变量。
不允许删除变量或对象。
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能保留关键字
由于一些安全原因，在作用域 eval() 创建的变量不能被调用
不允许使用以下这种语句:

"use strict";
with (Math){x = cos(2)}; // 报错

禁止this关键字指向全局对象。

为什么使用严格模式:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

严格模式问题待解决

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

var x = 0.1;
var y = 0.2;
var z = x + y          // z 的结果为 0.30000000000000004
if (z == 0.3)          // 返回 false

为解决以上问题，可以用整数的乘除法来解决：

var z = (x * 10 + y * 10) / 10;    // z 的结果为 0.3

javascript 中分号是可选的

HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML 约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

约束验证 HTML 输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

完整列表，请查看 HTML 输入属性。

约束验证 CSS 伪类选择器

选择器	描述
:disabled	选取属性为 "disabled" 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"optional"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

完整列表，请查看 CSS 伪类。

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

this关键字的妙用：

//this关键字的妙用：
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
<h1 onclick="changetext(this)">点击文本!</h1>


//等价于


<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

显式函数绑定(绑定this的对象)

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

javascript void [无返回值，但要执行括号的语句]

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

实例

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a> 
<br> ... <br> 
<p id="pos">尾部定位点</p>

设置函数执行延迟的两种做法

function print() {    
    document.getElementById("demo").innerHTML="RUNOOB!"; //延迟3秒
}
setTimeout(print, 3000);

setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";//匿名函数延迟3秒
}, 3000);

回调函数setTimeout以及AJAX实现了异步

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据


var xhr = new XMLHttpRequest();
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();


xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}


xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}

如果你使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX：

$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});

JavaScript Promise

Promise 只不过是一种更良好的编程风格

正常情况：resolve()

失败情况：reject()

throw "Some error"; === reject("Some error") 是一样的，都可以被catch捕捉

resolve中传递的值将作为紧接着的then的value

then 块默认会向下顺序执行，并且是并行执行的！

return一个Promise对象,相当于创建一个子线程，必须子线程执行完之后才能继续执行之后的线程。

return之前的then并行执行,return之后的必须等return执行完。return给上一个then之后，才能执行return之后的then。之后的then依然是并行执行除非还有return。

//直接使用
new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve(123);
    }, 1000);
}).then(function (value) {
	console.log(value);
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve(312);
        }, 4000);
    });
}).then(function (value) {
	console.log(value);
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});



//写成print函数
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

异步函数将Promise代码继续结合化简

异步函数（async function）是 ECMAScript 2017 (ECMA-262) 标准的规范，几乎被所有浏览器所支持，除了 Internet Explorer。异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise

//继续化简上面的代码
async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {    return a * b; } 
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {    return a * b; } 
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值，即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

JavaScript 闭包

还记得函数自我调用吗？该函数会做什么？

实例

var add = (function () {   
    var counter = 0;    
    return function () {return counter += 1;}
})();  
add(); 
add(); 
add();  // 计数器为 3

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

进制转换：

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

Number 属性

属性	描述
Number.MAX_VALUE	最大值
Number.MIN_VALUE	最小值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷，在溢出时返回
Number.POSITIVE_INFINITY	正无穷，在溢出时返回
Number.EPSILON	表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
Number.MIN_SAFE_INTEGER	最小安全整数。
Number.MAX_SAFE_INTEGER	最大安全整数。

数字方法

方法	描述
Number.parseFloat()	将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。
Number.parseInt()	将字符串转换成整型数字，和全局方法 parseInt() 作用一致。
Number.isFinite()	判断传递的参数是否为有限数字。
Number.isInteger()	判断传递的参数是否为整数。
Number.isNaN()	判断传递的参数是否为 isNaN()。
Number.isSafeInteger()	判断传递的参数是否为安全整数。

数字类型原型上的一些方法

方法	描述
toExponential()	返回一个数字的指数形式的字符串，如：1.23e+2
toFixed()	返回指定小数位数的表示形式。 `var a=123; b=a.toFixed(2); // b="123.00"`
toPrecision()	返回一个指定精度的数字。如下例子中，a=123 中，3会由于精度限制消失: `var a=123; b=a.toPrecision(2); // b="1.2e+2"`

jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。

jQuery 同时提供 companion UI（用户界面）和插件。

//使用jquery的必要引用
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

jQuery 函数是 $() 函数

如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

//javascript的方式
function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;//onload：页面加载时就调用该函数

//等价于

//jquery的方式
function myFunction()
{
    $("#h01").html("Hello jQuery");//CSS选择器选择了id为h01的DOM对象，$("#h01")是一个jquery对象，它有html()方法，相当于innerHTML
}
$(document).ready(myFunction);
//document是一个DOM对象。$(document)是一个jquery对象，它有ready()方法，相当于onload


//juqery还可以修改css: attr("style","color:red")

Prototype

Prototype 是一种库，提供用于执行常见 web 任务的简单 API。

//使用Prototype的必要引用
<script
src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</script>

API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。

Prototype 通过提供类和继承，实现了对 JavaScript 的增强。

//javascript的方式
function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;//onload：页面加载时就调用该函数

//等价于

//jquery的方式

function myFunction()
{
    $("h01").insert("Hello Prototype!");//CSS选择器选择了id为h01的DOM对象，$("#h01")是一个Prototype对象，它有insert()方法，相当于innerHTML
}
Event.observe(window,"load",myFunction);
//Event.observe() 接受三个参数：
    //1、您希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
    //2、您希望处理的事件
    //3、您希望调用的函数

//Prototype还可以修改css: writeAttribute("style","color:red")

Prototype和jquery相比Event.observe();能处理更多事件不只是onload

MooTools

MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。

javascript总结-DOM-增删改查-属性操作-事件操作

增

删

改

查

属性操作

事件操作

事件对象

鼠标常用事件

事件委托-简化代码-只定义父节点的点击事件-通过e.target获得触发事件源对象

禁止选中文字-禁用右键菜单

键盘事件-keycode返回ASCII值

onkeyup:松开时触发【不区分字母大小写】
onkeydown:按下时触发【不区分字母大小写】
onkeypress:按下时触发，但！不识别功能键比如ctrl,shift,箭头等【区分字母大小写】

注意！
1. 如果使用addEventlistener不需要加on
2. 三个事件的执行顺序是keydown--keypress--keyup

BOM（window对象）

窗体事件/窗体加载事件-load

当所有元素被完全加载完毕时，才执行！

窗体事件/窗体加载事件-DOMContentLoaded

仅当DOM加载完，不包括样式表、图片、flash！

调整窗体事件-onresize

location对象-解析获取URL，获得参数

navigator对象

元素偏移量offset系列-只读-直接获取当前元素的位置属性

offset和style的区别

元素可视区 client系列

元素滚动scroll系列

offset系列，client系列，scroll系列总结

立即执行函数-创建了独立的作用域

自己立即调用自己的函数

语法：( function() {} ) () 或 ( function() {} () )

//匿名函数
(function(a,b){
    console.log(a+b)
})(1,2)
//结果打印3

//函数
(function cal(a,b){
    console.log(a*b)
}(3,5))
//结果打印15

mouseenter和mouseover的区别

本地存储

sessionStorage-关闭页面时清空

localStorage-关闭页面时不清空

永久生效

posted @ 2023-06-06 09:04 迷路之本阅读(19) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

lost-ways

javascript笔记

javascript笔记

JS执行机制

ps:

样式属性修改-权重比较高-是行内样式

浮点数的精度问题

变量命名-name也是关键字

获取页面所有图片的链接

浏览器对象navigator(这些信息可以被我修改嘿嘿)

三种消息框：

警告框：alert("你好，我是一个警告框！");

确认框：confirm("按下按钮");

提示框：prompt(input提示文字,input默认值);（默认值可以省略）

每milliseconds个毫秒数，就执行一次函数（不停执行）

clearinterval（）用于停止setInterval()

设置延迟milliseconds秒后执行函数setTimeout()

clearTime()用于停止setTimeout()

cookie

使用 JavaScript 创建Cookie

使用 JavaScript 读取 Cookie

使用 JavaScript 修改 Cookie

使用 JavaScript 删除 Cookie

cookie实例

开始

外部javascript

三种动态创建元素的区别

断点调试

节点操作

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件

语法

事件冒泡或事件捕获？-不能同时存在！！！只能2选1！！！

查找元素

添加HTML元素到最后(appendChild)

创建新的 HTML 元素 (节点) 到最前- insertBefore()

移除已存在的元素removeChild

替换 HTML 元素 - replaceChild()

定义：

注释：

变量命名：

一条语句，多个变量

未赋值

全局变量：在函数外声明的变量作用域是全局的

访问全局变量： 使用var定义的，可以使用 window.carName 访问变量

访问全局变量： 使用let定义的，不可以使用 window.carName 访问变量

局部变量：在函数内声明的变量作用域是局部的（函数内）

变量重载：在相同作用域中var 定义的用var重载,let定义的不能重载,const 定义的不能重载

arguments 对象

instanceof运算符

typeof 运算符

函数表达式

箭头函数表达式的语法比普通函数表达式更简洁。

使用对象构造器构造对象同java

不能为现存的构造函数添加新的属性和方法，除非使用JavaScript prototype!!!

JavaScript prototype是原型对象，相当于基类

使用prototype继承实现添加属性：

使用prototype继承实现添加方法：

对象定义、创建对象方法

字符串内置长度：变量.length

特殊字符、转义字符

比较运算符

字符串方法

条件运算符

语法

输入语法：input 输入的内容默认为value变量，可以通过修改默认value的值初始化input

增强for循环

for (i in 字典|对象)

{

}

每个i都是字典的键

JavaScript 类型转换

JavaScript 数据类型

通过构造函数编写函数判断类型

正则表达式

RegExp 修饰符

try,catch,finally,throw

预解析

JavaScript 声明提升

JavaScript 初始化不会提升

严格模式声明

访问全局变量：使用var定义的，可以使用 window.carName 访问变量

访问全局变量：使用let定义的，不可以使用 window.carName 访问变量

异步函数将Promise代码继续结合化简