JavaScript
JavaScript是web的第三个支柱,除了HTML和CSS之外,它通常用于使web页面具有交互性。要理解JavaScript (JS),我们需要知道DOM是什么。
**文档对象模型(DOM)**是一种独立于语言的应用程序编程接口,它将HTML文档转换为树结构。每个文档的节点都被组织在树结构中,称为DOM树
,其中最顶层的节点称为“文档对象”
。
**浏览器对象模型(BOM)**统管浏览器的属性、结构、功能的。
1、概述
**JavaScript:**是客户端脚本语言。 **plug-in:**专家级程序员开发语言。
Java 和 Js 没有关系,区别是:
- js客户端脚本,java客户端语言。
- js基于对象,java面向对象。
- java编译执行,js解释执行。
- java强语言,js弱语言。(弱在数据类型)
**Js的构成:**核心、DOM(文档对象模型 document object model)、BOM(浏览器模型 browse object model)。
写法: <script language="script" type="text/javascript"></script>
- html网页的body写。
- 在head里的script标签写。
- 在单独js文件写。连接进入。
注意: 1 、2 都在<script></script>
。3、<script language="script" type="Text/javascript" src="XXX.js"></script>
2、语法
2.1、变量与类型
**js的数据类型:**String、boolean、number、object、null、undefined 、Array。
**数型转化:**String–number–boolean,在js里面 true=1,false=0。
定义变量: var 变量名 = 值,使用 typeof
xxx 来判断xxx的类型。new Array
来定义数组,类型可以不一致。而且不会自动转化。
**类型转化方法:**字符转数字–parseInt()
& parseFloat()
。
var inp = document.getElementById("input1");
document.write(inp.value);
document.write("<br/>");
var str = "字符<br/>";
var num = "43<br/>";
document.write(str);
document.write(num);
var nums = new Array("字符",123,true);
document.write(typeof nums[0]+"<br/>");
document.write(typeof nums[1]+"<br/>");
document.write(typeof nums[2]+"<br/>");
var str2 = "2.2";
var num2 = 2;
document.write(parseFloat(str2)+num2);
str2 = true;// 不会受之前数值的类型限制
document.write(str2+"<br>");
str2 = "haha123";
document.write(parseFloat(str2)+"<br/>");// NAN Not A Number 类型转化失败时。
2.2、输出内容
alert()
跳出一个信息,会中止程序,一个参数是输出的内容。confirm()
跳出一个对话框可以选择,是或者否。一个参数选择提示信息,返回一个boolean的值。prompt()
跳出一个对话框可以录入输入内容,两个参数一个信息提示一个录入内容,返回录入的信息。document.write()
在页面书写内容 一半写在body的script里.注意往页面书写标签会被解析。
2.3、运算符
算术运算符:+ - * / %
比较运算符:> < >= <= != == === !== == 不转化类型在 js中,true 就是 1。===会类型转化。
赋值运算符:+= -= /= %=
逻辑运算符:&& || !
2.4、逻辑语法
判断: 三元运算符、if判断、switch判断。
**循环:**while、do…while、for循环、for in循环。
在js语法体系中,任何类型的值都可以作为boolean的值放在流程控制中判断 if 其中为false的内容:0,false,null,undefined,NaN,空字符。
for in 循环 每次从数字里拿出一个索引 for(p in arr) arr[p]。
2.5、类定义
- 使用Object来定义一个对象,对象名就是变量名。
- 给对象添加属性只需要.+属性名就可以。
- 也可以把方法作为一个属性,意思是有一个属性名的方法。
- 在方法内可以使用定义的属性,通过this关键字来调用。方法参数不需要指定类型。
JSON定义对象 JSON {键:值,键:值…}
var stu = new Object();
stu.name = "张三";
stu.age = 23;
stu.eat = function(food){
// 定义方法可以使用自己的属性 用this来使用
alert(this.age+"岁的"+this.name+"在吃"+food+"....");
};
stu.eat(true);
// 使用JSON格式来定义 键:值
// JSON 定义数组
var nums = [];
nums.push("hello");// 数组放值。
nums.push(123);
document.write("1:"+nums+"<br/>");
nums.length = 0;// 清空数组
document.write("2:"+nums+"<br/>");
// JSON定义对象 JSON {键:值,键:值....}
var str2 = {
name:"李四",
age:44,
hobby:["动漫","游戏","可乐"],// 数组定义
eat:function(){// 方法定义
document.write(this.hobby);
}
};
str2.eat();
document.write("<hr>");
// 函数的构造运用
function student(sno){
this.sno = sno;
this.eat = function(){
document.write(sno);
};
this.play = function(){test();};
};
var s = new student("instance");
s.eat();
s.play();
2.6、函数
函数:使用阶段:
-
封装一段可以重复使用的代码
function abc(a,b,c){}
js里的方法必有返回值,通过return来返回的。如果没写那么返回值就是undefined。调用函数的时候可以使用与形参不一致的参数。函数无重载时,后面的声明会覆盖前面的声明。函数的参数全部封装在arguments
的数组里。 -
高级使用
js中函数也可以作为一个数据类型,声明函数时创造了Function对象,对象名就是函数名,意味着函数可以赋值,也可以作为返回值和参数。
-
可以作为构造函数的构造器
如果调用时候使用
new
那么该函数就是一个构造函数。
function abc(a,b,c){
alert(a+b+c);
}
function abc(a,b,c){
alert(a+b);
}
//abc(1,2,3);
function test(){return 123;}
function test2(num){
alert(num);
return test();// 作为返回值。
}
var nums = test2(test());// 作为参数传递。
document.write("<font color=red >"+nums+"</font>");
var person1 = {
name:"悟空",
age:23
}
var person2 = {
name:"八戒",
age:44,
}
var person = {
get:function(a,b){
return this.name+":"+this.age+":"+a+":"+b;
}
}
var strs = person.get.call(person2,"行","吧");// call方法
strs = person.get.apply(person1,["行","吧"]);// apply方法
document.write("<br/>"+strs+"<br/>")
var name = "东野圭吾";
function show1(){
var name2 = "山本耀司";
document.write("<br/>"+name+"<br/>");
document.write("<br/>"+name2+"<br/>");
}
function show2(){
document.write("<br/>"+name+"<br/>");
document.write("<br/> 1"+name+"<br/>");// 因为name2 找不到而报错
}
show1();
show2();
alert("信息提示框");
var flag = confirm("选择对话框");
var string = prompt("信息输入框","默认值1");
document.write("<br/>"+flag+"<br/>");
document.write("<br/>"+string+"<br/>");
3、DOM
HTML DOM(文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被结构化为对象树:
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有对象:
JavaScript 能改变页面中的所有 HTML 元素。
JavaScript 能改变页面中的所有 HTML 属性。
JavaScript 能改变页面中的所有 CSS 样式。
JavaScript 能删除已有的 HTML 元素和属性。
JavaScript 能添加新的 HTML 元素和属性。
JavaScript 能对页面中所有已有的 HTML 事件作出反应。
JavaScript 能在页面中创建新的 HTML 事件。
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:
作为对象的 HTML 元素。
所有 HTML 元素的属性。
访问所有 HTML 元素的方法。
所有 HTML 元素的事件。
**换言之:**HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素及其属性的标准。
3.1、获取标签对象
方法 | 描述 |
---|---|
document.getElementById(id) | 通过元素 id 来查找元素 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过类名来查找元素 |
document.getElementsByName(name) | 通过name名来查找元素 |
id获取的是单个标签对象,而其它都是标签的数组。
3.2、改变 HTML 元素
方法 | 描述 |
---|---|
element.innerHTML = new html content | 改变元素的 inner HTML |
element.attribute = new value | 改变 HTML 元素的属性值 |
element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
element.style.property = new style | 改变 HTML 元素的样式 |
3.3、添加和删除元素
方法 | 描述 |
---|---|
document.createElement(element) | 创建 HTML 元素 |
document.removeChild(element) | 删除 HTML 元素 |
document.appendChild(element) | 添加 HTML 元素 |
document.replaceChild(element) | 替换 HTML 元素 |
document.write(text) | 写入 HTML 输出流 |
3.4、添加事件处理程序
方法 | 描述 |
---|---|
document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
3.5、CSS选择器查找HTML元素
使用querySelectorAll()
查找匹配指定 CSS 选择器(id、类名、类型、属性、属性值等等)的所有 HTML 元素。
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段(索引 0):' + x[0].innerHTML;
</script>
3.6、通过 HTML 对象选择器查找 HTML 对象
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
以下是其他HTML获取HTML的对象连接。
- document.anchors
- document.body
- document.documentElement
- document.embeds
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title
function change(){
var f1 = document.getElementById("input1");
//f1.color = "blue";
//f1.setAttribute("size","7");
//f1.style.font-size = "18px";
f1.style.color = "blue";
f1.style.width = "200px";
f1.type = "hidden";
}
3.7、BOM计时器
**setTimeOut()😗*一次计时器 一个参数:事件本身,返回计时器对象。
**setInterval()😗*每一次计时器 两个参数;A:事件本身 B:间隔时间,返回计时器对象。
**clearTimeOut()😗*清除一次计时器 一个参数:计时器。
**clearInterval()😗*清除所有计时器 一个参数:计时器。
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
3.8、DOM 事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应:
JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码,请向 HTML 事件属性添加 JavaScript 代码:οnclick=JavaScript
事件 = JavaScript
<!--例子-->
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本!</h1>
HTML 事件属性
如需向 HTML 元素分配事件,您能够使用事件属性。
<button onclick="displayDate()">试一试</button>
使用 HTML DOM 分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件。
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
3.9、事件监听
addEventListener() 方法: 添加当用户点击按钮时触发的事件监听器。
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
您能够向一个元素添加多个事件处理程序。
您能够向一个元素添加多个相同类型的事件处理程序,例如两个 “click” 事件。
您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素,例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时,JavaScript 与 HTML 标记是分隔的,已达到更佳的可读性;即使在不控制 HTML 标记时也允许您添加事件监听器。
通过使用 removeEventListener() 方法轻松地删除事件监听器。
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型(比如 “click” 或 “mousedown”)。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
**注意:**请勿对事件使用 “on” 前缀;请使用 “click” 代替 “onclick”。
向元素添加事件处理程序
当用户点击某个元素时提示 “Hello World!”:
element.addEventListener("click", function(){ alert("Hello World!"); });
也可以引用外部“命名”函数:当用户点击某个元素时提示 “Hello World!”:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
向相同元素添加多个事件处理程序
addEventListener()
方法允许您向相同元素添加多个事件,同时不覆盖已有事件:
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
向 Window 对象添加事件处理程序
addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上,比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象,比如 xmlHttpRequest 对象。
【实例】添加当用户调整窗口大小时触发的事件监听器:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
传递参数
当传递参数值时,请以参数形式使用调用指定函数的“匿名函数”:
element.addEventListener("click", function(){ myFunction(p1, p2); });
3.10、DOM 导航
根据 W3C HTML DOM 标准,HTML 文档中的所有事物都是节点:
- 整个文档是文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 所有注释是注释节点
有了 HTML DOM,节点树中的所有节点都能通过 JavaScript 访问。
能够创建新节点,还可以修改和删除所有节点。
节点关系
节点树中的节点彼此之间有一定的等级关系。
- 术语(父、子和同胞,parent、child 以及 sibling)用于描述这些关系。
- 在节点树中,顶端节点被称为根(根节点)。
- 每个节点都有父节点,除了根(根节点没有父节点)。
- 节点能够拥有一定数量的子
- 同胞(兄弟或姐妹)指的是拥有相同父的节点。
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
从以上的 HTML 中您能读到以下信息:
- <html> 是根节点
- <html> 没有父
- <html> 是 <head> 和 <body> 的父
- <head> 是 <html> 的第一个子
- <body> 是 <html> 的最后一个子
同时:
- <head> 有一个子:<title>
- <title> 有一个子(文本节点):“DOM 教程”
- <body> 有两个子:<h1> 和 <p>
- <h1> 有一个子:“DOM 第一课”
- <p> 有一个子:“Hello world!”
- <h1> 和 <p> 是同胞
在节点之间导航
通过 JavaScript,您可以使用以下节点属性在节点之间导航:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
子节点和节点值
DOM 处理中的一种常见错误是认为元素节点中包含文本。
<title id="demo">DOM 教程</title>
(上面例子中的)元素节点 <title> 不包含文本。
它包含了值为 “DOM 教程” 的文本节点。
文本节点的值能够通过节点的 innerHTML
属性进行访问:
var myTitle = document.getElementById("demo").innerHTML;
访问 innerHTML 属性等同于访问首个子节点的 nodeValue
:
var myTitle = document.getElementById("demo").firstChild.nodeValue;
也可以这样访问第一个子节点:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
以下三个例子取回 <h1> 元素的文本并复制到 <p> 元素中:
<html>
<body>
<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
DOM 根节点
有两个特殊属性允许访问完整文档:
- document.body - 文档的 body
- document.documentElement - 完整文档
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示 <b>document.documentElement</b> 属性。</p>
</div>
<script>
//alert(document.body.innerHTML);
alert(document.documentElement.innerHTML);
</script>
</body>
</html>
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 等同于标签名
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 总是 #text
- 文档节点的 nodeName 总是 #document
<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
最重要的 nodeType 属性是:
节点 | 类型 | 例子 |
---|---|---|
ELEMENT_NODE | 1 | <h1 class=“heading”>W3School</h1> |
ATTRIBUTE_NODE | 2 | class = “heading” (弃用) |
TEXT_NODE | 3 | W3School |
COMMENT_NODE | 8 | |
DOCUMENT_NODE | 9 | HTML 文档本身(<html> 的父) |
DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
3.11、DOM 集合
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象是类数组的 HTML 元素列表(集合)。
下面的代码选取文档中的所有 <p> 元素:
var x = document.getElementsByTagName("p");
// 该集合中的元素可通过索引号进行访问。
// 如需访问第二个 <p> 元素,您可以这样写:
y = x[1];
HTML HTMLCollection 长度
length 属性定义了 HTMLCollection 中元素的数量:
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
实例解释:
- 创建所有 <p> 元素的集合
- 显示集合的长度
length 属性在您需要遍历集合中元素时是有用的:
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}
3.12、DOM 节点列表
NodeList 对象是从文档中提取的节点列表(集合)。
NodeList 对象与 HTMLCollection 对象几乎相同。
如使用 getElementsByClassName() 方法,某些(老的)浏览器会返回 NodeList 对象而不是 HTMLCollection。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
下面的代码选取文档中的所有 <p> 节点:
var myNodeList = document.querySelectorAll("p");
- 创建所有
元素的列表
- 显示该列表的长度
length 属性在您希望遍历节点列表中的节点时很有用:
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
HTMLCollection 与 NodeList 的区别
HTMLCollection(前一章)是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表(集合)。
它们都有定义列表(集合)中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, ...
) 像数组那样访问每个项目
。
访问 HTMLCollection 项目,可以通过它们的名称、id 或索引号。
访问 NodeList 项目,只能通过它们的索引号。
只有 NodeList 对象能包含属性节点
和文本节点
。
节点列表不是数组!
节点数组看起来像数组,但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过,您无法对节点列表使用数组方法,比如 valueOf()
、push()
、pop()
或 join()
。
4、BOM
浏览器对象模型(Browser Object Model (BOM))允许 JavaScript 与浏览器对话。
浏览器对象模型(Browser Object Model (BOM))
不存在浏览器对象模型(BOM)的官方标准。
现代的浏览器已经(几乎)实现了 JavaScript 交互相同的方法和属性,因此它经常作为 BOM 的方法和属性被提到。
4.1、Window - 浏览器窗口
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至(HTML DOM 的)document 对象也是 window 对象属性:
window.document.getElementById("header");// js可以省略
窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸:
- window.innerHeight - 浏览器窗口的内高度(以像素计)
- window.innerWidth - 浏览器窗口的内宽度(以像素计)
浏览器窗口(浏览器视口)不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或
- document.body.clientHeight
- document.body.clientWidth
一个实用的 JavaScript 解决方案(包括所有浏览器):
实例
// 该例显示浏览器窗口的高度和宽度:(不包括工具栏和滚动条)
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他窗口方法
一些其他方法:
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
4.2、Screen 对象包含用户屏幕的信息
Window Screen
window.screen 对象不带 window 前缀也可以写:
属性:
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth 色深
- screen.pixelDepth
Window Screen 宽度
screen.width
属性返回以像素计的访问者屏幕宽度。
Window Screen 可用宽度
screen.availWidth
属性返回访问者屏幕的宽度,以像素计,减去诸如窗口工具条之类的界面特征。
实例
显示以像素计的屏幕可用宽度:
document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;
Window Screen 可用高度
screen.availHeight
属性返回访问者屏幕的高度,以像素计,减去诸如窗口工具条之类的界面特征。
实例
显示以像素计的屏幕可用高度:
document.getElementById("demo").innerHTML="Available Screen Height: " + screen.availHeight;
Window Screen 色深
screen.colorDepth
属性返回用于显示一种颜色的比特数。
所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率:
- 24 bits =16,777,216 种不同的 “True Colors”
- 32 bits = 4,294,967,296 中不同的 “Deep Colors”
更老的计算机使用 14 位:65,536 种不同的 “High Colors” 分辨率。
异常古老的计算机,以及老式的手机使用 8 位:256 中不同的 “VGA colors”。
实例
显示以位计的屏幕色彩深度:
document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;
HTML 中使用的 #rrggbb (rgb) 值代表 “True Colors” (16,777,216 中不同的颜色)。
Window Screen 像素深度
screen.pixelDepth
属性返回屏幕的像素深度。
实例
显示以位计的屏幕像素深度:
document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;
4.3、Location 地址
window.location 对象可用于获取当前页面地址(URL)并把浏览器重定向到新页面。
Window Location
*window.location*
对象可不带 window 前缀书写。
一些例子:
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议(http: 或 https:)
- window.location.assign 加载新文档。
Window Location Href
window.location.href
属性返回当前页面的 URL。
实例
显示当前页面的 href (URL):
document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;
Window Location 主机名
window.location.hostname
属性返回(当前页面的)因特网主机的名称。
实例
显示主机的名称:
document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;
Window Location 路径名
window.location.pathname
属性返回当前页面的路径名。
实例
显示当前 URL 的路径名:
document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;
Window Location 协议
window.location.protocol
属性返回页面的 web 协议。
实例
显示 web 协议:
document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;
Window Location 端口
window.location.port
属性返回(当前页面的)互联网主机端口的编号。
实例
显示主机的端口号:
document.getElementById("demo").innerHTML = "端口号是: " + window.location.port;
Window Location Assign
window.location.assign()
方法加载新文档。
实例
加载新文档:
<html>
<head>
<script>
function newDoc() {
window.location.assign("https://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
4.4、History 浏览历史
window.history 对象包含浏览器历史。
Window History
window.history
对象可不带 window 书写。
为了保护用户的隐私,JavaScript 访问此对象存在限制。
一些方法:
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
Window History Back
history.back()
方法加载历史列表中前一个 URL。
这等同于在浏览器中点击后退按钮。
实例
在页面中创建后退按钮:
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
Window History Forward
history forward()
方法加载历史列表中下一个 URL。
这等同于在浏览器中点击前进按钮。
实例
在页面中创建前进按钮:
<html>
<head>
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>
4.5、Navigator 访问者的信息
window.navigator 对象包含有关访问者的信息。
Window Navigator
window.navigator
对象可以不带 window 前缀来写。
一些例子:
- navigator.appName
- navigator.appCodeName
- navigator.platform
浏览器 Cookie
cookieEnabled
属性返回 true,如果 cookie 已启用,否则返回 false:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>
浏览器应用程序名称
appName
属性返回浏览器的应用程序名称:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>
很陌生吧,“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
浏览器应用程序代码名称
appCodeName
属性返回浏览器的应用程序代码名称:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>
“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。
浏览器引擎
product
属性返回浏览器引擎的产品名称:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
</script>
浏览器版本
appVersion
属性返回有关浏览器的版本信息:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>
浏览器代理
userAgent
属性返回由浏览器发送到服务器的用户代理报头(user-agent header):
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.userAgent;
</script>
警告!!!
来自 navigator 对象的信息通常是误导性的,不应该用于检测浏览器版本,因为:
- 不同浏览器能够使用相同名称
- 导航数据可被浏览器拥有者更改
- 某些浏览器会错误标识自身以绕过站点测试
- 浏览器无法报告发布晚于浏览器的新操作系统
浏览器平台
platform
属性返回浏览器平台(操作系统):
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.platform;
</script>
浏览器语言
language
属性返回浏览器语言:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>
浏览器是否在线?
onLine 属性返回 true,假如浏览器在线:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.onLine;
</script>
Java 是否启用?
javaEnabled()
方法返回 true,如果 Java 已启用:
实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.javaEnabled();
</script>
4.6、弹出框
JavaScript 有三种类型的弹出框:警告框、确认框和提示框。
警告框
如果要确保信息传递给用户,通常会使用警告框。
当警告框弹出时,用户将需要单击“确定”来继续。
语法
window.alert("sometext");
window.alert() 方法可以不带 window 前缀来写。
实例
alert("我是一个警告框!");
确认框
如果您希望用户验证或接受某个东西,则通常使用“确认”框。
当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。
语法
window.confirm("sometext");
window.confirm()
方法可以不带 window 前缀来编写。
实例
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
提示框
如果您希望用户在进入页面前输入值,通常会使用提示框。
当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。
语法
window.prompt("sometext","defaultText");
window.prompt()
方法可以不带 window 前缀来编写。
实例
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "!今天过的怎么样?";
}
折行
如需在弹出框中显示折行,请在反斜杠后面加一个字符 n。
实例
alert("Hello\nHow are you?");
4.7、Timing 计数器
JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件( Timing Events)。
Timing 事件
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法:
-
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
-
setInterval(function, milliseconds)
等同于 setTimeout(),但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
setTimeout() 方法
window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
实例
单击按钮。等待 3 秒,然后页面会提示 “Hello”:
<button onclick="setTimeout(myFunction, 3000)">试一试</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
如何停止执行?
clearTimeout()
方法停止执行 setTimeout()
中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout()
方法可以不带 window 前缀来写。
clearTimeout()
使用从 setTimeout()
返回的变量:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
实例
类似上例,但是添加了“停止”按钮:
<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>
<button onclick="clearTimeout(myVar)">停止执行</button>
setInterval() 方法
setInterval()
方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval() 方法可以不带 window 前缀来写。
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
本例每秒执行一次函数 “myTimer”(就像数字手表)。
实例
显示当前时间:
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
如何停止执行?
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。
window.clearInterval(timerVariable)
window.clearInterval() 方法可以不带 window 前缀来写。
clearInterval() 方法使用从 setInterval() 返回的变量:
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
实例
类似上例,但是我们添加了一个“停止时间”按钮:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">停止时间</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
4.8、Cookies
Cookie 让您在网页中存储用户信息。
什么是 cookie?
Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切(session会话)。
Cookie 是为了解决“如何记住用户信息”而发明的:
- 当用户访问网页时,他的名字可以存储在 cookie 中。
- 下次用户访问该页面时,cookie 会“记住”他的名字。
Cookie 保存在名称值对中,如:
username = Bill Gates
当浏览器从服务器请求一个网页时,将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
如果浏览器已关闭本地 cookie 支持,则以下实例均无法工作。
通过 JavaScript 创建 cookie
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
通过 JavaScript,可以这样创建 cookie:
document.cookie = "username = Bill Gates";
您还可以添加有效日期(UTC 时间)。默认情况下,在浏览器关闭时会删除 cookie:
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
通过 path 参数,您可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。
document.cookie = "username = Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/e:cookie.txt";
通过 JavaScript 读取 cookie
通过 JavaScript,可以这样读取 cookie:
var x = document.cookie;
document.cookie 会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2=value; cookie3=value;
通过 JavaScript 改变 cookie
通过使用 JavaScript,你可以像你创建 cookie 一样改变它:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
旧 cookie 被覆盖。
通过 JavaScript 删除 cookie
删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值:
直接把 expires 参数设置为过去的日期即可:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径,一些浏览器不会让你删除 cookie。
Cookie 字符串
document.cookie 属性看起来像一个正常的文本字符串。但它不是。
即使你向 document.cookie 写一份完整的 cookie 字符串,当再次读取时,你只能看到它的名称-值对。
如果设置了新 cookie,则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie,所以如果你读取 document.cookie,你得到的东西会像这样:
cookie1 = value; cookie2 = value;
显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2
如果你想找到一个指定 cookie 的值,你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。
JavaScript Cookie 实例
在下面的示例中,我们将创建一个 cookie 来存储访问者的名称。
访客第一次到达网页时,会要求他填写姓名。然后将该名称存储在 cookie 中。
下次访客到达同一页时,他将收到一条欢迎消息。
例如,我们将创建 3 个JavaScript函数:
- 设置 cookie 值的函数
- 获取 cookie 值的函数
- 检查 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.toUTCString();// 设置过期时间
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
例子解释:
上面这个函数的的参数是:cookie 的名字(cname),cookie 的值(cvalue),以及知道 cookie 过期的天数(exdays)。
通过把 cookie 名称、cookie 值和过期字符串相加,该函数就设置了 cookie。
获取 cookie 的函数
然后,我们创建一个函数返回指定 cookie 的值:
实例
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
函数解释:
把 cookie 作为参数(cname)。
创建变量(name)与要搜索的文本(CNAME”=”)。
解码 cookie 字符串,处理带有特殊字符的 cookie,例如 “$”。
用分号把 document.cookie 拆分到名为 ca(decodedCookie.split(’;’))的数组中。
遍历 ca 数组(i = 0; i < ca.length; i++),然后读出每个值 c = ca[i]。
如果找到 cookie(c.indexOf(name) == 0),则返回该 cookie 的值(c.substring(name.length, c.length)。
如果未找到 cookie,则返回 “”。
检测 cookie 的函数
最后,我们创建检查 cookie 是否设置的函数。
如果已设置 cookie,将显示一个问候。
如果未设置 cookie,会显示一个提示框,询问用户的名字,并存储用户名 cookie 365 天,通过调用 setCookie 函数:
实例
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
现在组合起来
实例
// 设置cookie方法
function setCookie(cname, cvalue, exdays) {
var d = new Date();// 获取时间
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));// exdays 设置过期时间
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");// 输入文本框
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
5、JavaScript 面向对象
和Java一样,js也是有自己的面向对象封装思想。如何去定义类。
老方法:使用声明方式定义,使用new
关键字创建。
<script>
// 使用函数式声明定义类
function Person(name,age){
this.name = name;
this.age = age;
this.show = function(){
console.log(name+":"+age);
};
}
var p1 = new Person("张三",22);
p1.show();
</script>
新方法:定义类,使用new创建对象。
<script>
class Person2{
// 构造方法
constructor(name,age){
this.name = name;
this.age = age;
}
// getName
getName(){
console.log("getName方法");
return this.name;
}
showName(){
console.log(this.getName());// 调用带有返回值的内部方法
}
show(){
console.log(this.name+":"+this.age);
}
// 静态方法
static show2(){
console.log("静态方法");
}
}
var p2 = new Person2("李白",44);
p2.getName();
p2.show();
Person2.show2();// 静态方法直接使用类名。
p2.showName();
</script>