js

简介：

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

内部js：

HTML 中的脚本必须位于 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

外部js：

作用主要包括：

• 数据验证(指的是，对表单中的数据进行合法性验证，只有验证通过才能提交)
• 操作网页，实现一些动态效果
• 访问浏览器，获得浏览器的一些信息。(比如获得浏览器的类型、版本等)
• ajax核心技术之一

特点：

1. avascript是类c的语言

2. javascript脚本可以保存在.js文件里，也可以直接写在html文件里

3. javascript基于对象，不是纯粹的面向对象的语言

   比如，没有定义类的语法，也没有继承和多态

4. javascript是一种弱类型语言，即变量在声明时，不能明确声明其类型

   变量的类型是在运行时确定的，并且可以随时改变

js组成部分：

1. ECMAScript规范

   • 主要定义了javascript的语言基础部分
   • 各个浏览器都严格遵守该规范，没有兼容性问题
   • ECMAScript规范由ECMA制订

2. dom

   主要定义了如何将html转换成一棵符合dom规范的树，并且如何对这棵树进行相应的操作。该规范由w3c定义，但是，部分浏览器没有严格遵守该规范。写代码时需要考虑兼容性问题。

3. bom（browser object model）

   浏览器内置的一些对象，用来操作窗口。

   这些对象包括window、screen、location、navigator、document、XmlHttpRequest等。 虽然该部分没有规范，但是，各个浏览器都支持这些对象

JavaScript 和 HTML DOM 参考手册

js输出

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台

alter()

innerHTML

document.write()

wirite是输出一行

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

示例：

点我

console.log()

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。

js语法

js语句

js注释

//这是单行注释

/*
多行注释
*/

js中的分号

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

在 JavaScript 中，用分号来结束语句是可选的。

即分号不写也能运行，浏览器默认会帮我们加上，为了严谨的代码风格，最好写上。

实例:

 a = 5; 
 b = 6; 
 c = a + b;

以上实例也可以这么写:

a = 5; b = 6; c = a + b;

js序列及代码块

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

js中的空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行

document.write("你好 \
世界!");

js标识符

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误 。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

js保留字

abstract	else	instanceof	supe
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

js变量

固定值称为字面量

变量，变量用于存储数据值。

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

js变量命名规则：

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

Value = undefined

仅声明，而没有赋值，，其值实际上是 undefined。

一条语句，多个变量

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

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个不可以赋同一个值:

var x,y,z=1;

x,y 为 undefined， z 为 1。

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

js数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

**注：**Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript的字符串类型可以使用’’,""

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带,也可以科学计数法

最大值 :Number.MAX_VALUE

最小值 :Number.MIN_VALUE

布尔类型，true/false

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

String

• string属于基本类型，没有char类型。
• string有一个对应的包装类String。
• length属性 返回字符串的长度
• charAt(index) 返回指定位置的字符
• substring(from, to) 返回子字符串
• indexOf(str) 指定字符串在原字符串中第一次出现的位置。
• lastIndexOf(str) 指定字符串在原字符串中最后一次出现的的位置。
• match(regexp) 返回匹配指定正则表达式的字符串，返回的结果是一个数组。
• search(regexp) 返回按照正则表达式检索到的字符串起始位置。
• toLowerCase/toUpperCase 返回小写/大写形式
• replace(regexp,newStr) 替换符合正则表达式规定的字符串

js正则表达式

//   /runoob/i是正则表达式，runoob是搜索的主体，i是修饰符，表示不区分大小写
var str = "Visit Runoob!"; 
var n = str.search(/runoob/i);
document.getElementById("demo").innerHTML = n;
(6)
//search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
//使用字符串时，会区分大小写
var str = "Visit Runoob!"; 
var n = str.search("Runoob");
document.getElementById("demo").innerHTML = n;
(6)
var str = "Visit Runoob!"; 
var n = str.search("runoob");
document.getElementById("demo").innerHTML = n;
(-1)
//RegExp 对象.在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
/*
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
*/
var patt = /e/;
patt.test("The best things in life are free!");
等效于
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
(true)
/*
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
*/
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
(e)

可以使用 typeof 操作符来检测变量的数据类型

document.getElementById("demo").innerHTML = typeof person;

js数组

数组创建

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//没赋值的部分为undefined
var cars=new Array();
cars[0]="Saab";
cars[11]="Volvo";
cars[25]="BMW";
//
var cars=new Array("Saab","Volvo","BMW");
//
var cars=["Saab","Volvo","BMW"];

数组合并

//两个数组的合并
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
(document.write(children)->Cecilie,Lone,Emil,Tobias,Linus)
//三个数组的合并
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
(document.write(family)->Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone)

用数组的元素组成字符串 - join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join();
(Banana,Orange,Apple,Mango)

删除数组的最后一个元素 - pop()

数组的末尾添加新的元素 - push()

将一个数组中的元素的顺序反转排序 - reverse()

删除数组的第一个元素 - shift()

从一个数组中选择元素 - slice()

数组排序（按字母顺序升序）- sort()

数字排序（按数字顺序升序）- sort()

数字排序（按数字顺序降序）- sort()

在数组的第2位置添加一个元素 - splice()

转换数组到字符串 -toString()

在数组的开头添加新元素 - unshift()

数组还有length属性，toString()方法

js对象

对象也是一个变量，但对象可以包含多个值（多个变量）。

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

空格和折行无关紧要。声明可横跨多行：

//单行声明
var person={firstname:"John", lastname:"Doe", id:5566};
//多行声明
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象的寻址方式：

name=person.lastname;
name=person["lastname"];

对象方法

你可以使用以下语法创建对象方法：

methodName : function() { code lines }

你可以使用以下语法访问对象方法：

objectName.methodName()

示例：

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

注意调用方法名时记得()

person.fullName;//不加括号输出函数表达式
person.fullName();//加括号输出函数执行结果

函数也是对象，不加括号输出函数表达式，加括号输出函数执行结果

var a = function x() {return "123"}; 
document.getElementById("demo").innerHTML=a()

定义属性的一种方式

var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});//writable:false->不可写，只读

js prototype（原型对象）

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

js函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

function functionname()
{
    // 执行代码
}
//带参的函数
function myFunction(var1,var2)
{
代码
}

• 使用function关键字定义函数。
• 函数不能有返回类型，但是可以有返回值。
• 函数内部，可以使用arguments对象来获得参数值。
• 函数没有重载。

普通函数:
语法:function 函数名(参数列表){函数体}
举例：
function method(){
alert(“我是一个方法”);
}
method();
匿名函数
语法function (参数列表){函数体}
对象函数:
var fu = new function(a,b){
alert(a+b);
}
fu(1,4);

var a = function x() {return "123"}; 
document.getElementById("demo").innerHTML=a()

js作用域

变量的作用域

js引擎(浏览器内部负责解释执行javascript脚本的模块)在执行js脚本时

执行过程分为两个阶段：

第一阶段：

将所有的变量声明以及函数的定义存放到一个特殊的对象(活动对象)里。

具体过程：

在解析

第二阶段：

执行js代码，在碰到变量时，会先从该代码所对应的活动对象里查找该变量的定义，如果没有找到，则向上查找对应的活动对象。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

---

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

---

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

js运算符

没啥好讲的

https://www.runoob.com/js/js-operators.html

js的控制结构

选择结构

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

if的优化？

const condition = 2
//var condition=new Date().getMinutes();
let obj = {
  '1' : () => { document.write(1) },
  '2' : () => { document.write(2) },
  '3' : () => { document.write(3) },
}
obj[condition]();//数据类型随便，主要是这一句调用参数；
				 //值得注意的是，如果条件不符合，所有表达式都不成立,则程序不会继续执行。
				 //即obj[condition]();之后的语句也不会执行

循环结构

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
    document.write(cars[i] + "<br>");
    i++;
}

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
    document.write(cars[i] + "<br>");
    i++;
}

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

js错误

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

JavaScript 抛出（throw）错误**

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;//获得输入框的值
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";//用于清空输入栏
  }
}
</script>

</body>
</html>

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

js变量提升及严格模式

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下两个实例将获得相同的结果：

实例1：

x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x
var x; // 声明 x

实例2：

var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

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

var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = "x 为：" + x + "，y 为：" + y;           // 显示 x 和 y
var y = 7; // 初始化 y
(x 为：5，y 为：undefined)

JavaScript 严格模式(strict mode)不允许使用未声明的变量。

严格模式

JavaScript 严格模式（strict mode）即在严格的条件下运行。

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 的目的是指定代码在严格条件下执行。

(支持严格模式的浏览器:Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。)

严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。

"use strict";
x = 3.14;       // 报错 (x 未定义)

严格模式的限制：

• 不允许使用未声明的变量(对象也是一个变量。)
• 不允许删除变量或对象。
• 不允许删除函数。
• 不允许变量重名。
• 不允许使用八进制。
• 不允许使用转义字符。
• 不允许对只读属性赋值。
• 不允许对一个使用getter方法读取的属性进行赋值。
• 不允许删除一个不允许删除的属性。
• 变量名不能使用 “eval” 字符串。
• 变量名不能使用 “arguments” 字符串
• 禁止this关键字指向全局对象
• 以及…(详情查看链接)

为什么使用严格模式:

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

• 消除代码运行的一些不安全之处，保证代码运行的安全；

• 提高编译器效率，增加运行速度；

• 为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行

js使用误区

注意注意注意

js事件

常用的事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jyvWOYke-1572799456517)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\js_md\常用的事件.png)]

定时器

	//设置定时器
	setTimeout(函数,毫秒值)
			setTimeout(function () {
				alert("哈哈")
			},3000);
	//清除定时器	
	clearTimeout(定时器的名称)
	
	<script>
			var time;
		   var  fn = function () {
				alert("haha");
				time = setTimeout(fn,3000);
			}
			var close = function () {
				clearTimeout(time);
			}
			fn();
			close();
	</script>
	
	setInterval(函数,毫秒值(后期可以关闭))

js表单及表单验证

HTML 约束验证

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

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

HTML 约束验证基于：

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

约束验证 HTML 输入属性

HTML 输入属性

约束验证 CSS 伪类选择器

CSS 伪类

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>

var x=document.forms["myForm"]["email"].value;

DOM

prototype****框架的使用

$(id): 相当于document.getElementById(id);

$F(id): 相当于document.getElementById(id).value;

**$(id1,id2…)😗*依次查找id为id1,id2…的节点，返回一个数组。

strip(): 除掉字符串两端的空格。

BOM

浏览器对象模型 (BOM)

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

window对象在编写时可以不使用 window 这个前缀

window.screen 对象包含有关用户屏幕的信息。

• screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

• screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

所有 screen 属性实例:

document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("<br>");
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http: 或 https:）
• location.href 属性返回当前页面的 URL。
• location.assign() 方法加载新的文档。

window.history 对象包含浏览器的历史。

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击向前按钮相同

window.navigator 对象包含有关访问者浏览器的信息。

<div id="example"></div>
<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.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

window.alert()

确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。

window.confirm()

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

window.prompt()

JavaScript 计时事件

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout() - 在指定的毫秒数后执行指定代码。
• clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
• clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

var myVar;
 
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
    clearTimeout(myVar);
}
----------------------------
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(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 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

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

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

事件的绑定方式

1:在HTML中绑定，使用这种绑定方式时，js代码可以写在任意地方

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

2:在js中绑定，使用这种绑定方式时，js代码必须写在事件绑定的对象之后

<button id="bt" >现在的时间是?</button>
<p id="demo"></p>
<script>
var obj = document.getElementById("bt");
obj.onclick=function(){alert(123)}
</script>

原因是js的加载执行顺序，js是加载一行就执行一行的。此时，js先于HTML加载的情况下就会找不到节点

当指定加载完之后，再加载执行js时，js可以写在任意地方

<script>
window.onload=function(){
var obj = document.getElementById("bt");
obj.onclick=function(){alert(123)}
}
</script>
<button id="bt">现在的时间是?</button>

3.监听事件

addEventListener() 方法用于向指定元素添加事件句柄。

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

你可以向一个元素添加多个事件句柄。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

addEventListener(event, function, useCapture)

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

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

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

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

removeEventListener() 方法来移除事件的监听。

element.removeEventListener("mousemove", myFunction);

事件冒泡或事件捕获？

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

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

元素插入到

元素中，用户点击

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

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

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

元素的点击事件。

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

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

元素的点击事件

什么是事件冒泡？

当一个节点产生事件以后，该事件会依次向上传递(先传给父节点，如果父节点还有父节点，再向上传递)。