JavaScript学习

JavaScript

JavaScript是web的第三个支柱,除了HTML和CSS之外,它通常用于使web页面具有交互性。要理解JavaScript (JS),我们需要知道DOM是什么。

**文档对象模型(DOM)**是一种独立于语言的应用程序编程接口,它将HTML文档转换为树结构。每个文档的节点都被组织在树结构中,称为DOM树,其中最顶层的节点称为“文档对象”

**浏览器对象模型(BOM)**统管浏览器的属性、结构、功能的。

1、概述

**JavaScript:**是客户端脚本语言。 **plug-in:**专家级程序员开发语言。

Java 和 Js 没有关系,区别是:

  1. js客户端脚本,java客户端语言。
  2. js基于对象,java面向对象。
  3. java编译执行,js解释执行。
  4. java强语言,js弱语言。(弱在数据类型)

**Js的构成:**核心、DOM(文档对象模型 document object model)、BOM(浏览器模型 browse object model)。

写法: <script language="script" type="text/javascript"></script>

  1. html网页的body写。
  2. 在head里的script标签写。
  3. 在单独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、输出内容

  1. alert() 跳出一个信息,会中止程序,一个参数是输出的内容。
  2. confirm() 跳出一个对话框可以选择,是或者否。一个参数选择提示信息,返回一个boolean的值。
  3. prompt() 跳出一个对话框可以录入输入内容,两个参数一个信息提示一个录入内容,返回录入的信息。
  4. 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、类定义

  1. 使用Object来定义一个对象,对象名就是变量名。
  2. 给对象添加属性只需要.+属性名就可以。
  3. 也可以把方法作为一个属性,意思是有一个属性名的方法。
  4. 在方法内可以使用定义的属性,通过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、函数

函数:使用阶段:

  1. 封装一段可以重复使用的代码

    function abc(a,b,c){} js里的方法必有返回值,通过return来返回的。如果没写那么返回值就是undefined。调用函数的时候可以使用与形参不一致的参数。函数无重载时,后面的声明会覆盖前面的声明。函数的参数全部封装在 arguments 的数组里。

  2. 高级使用

    ​ js中函数也可以作为一个数据类型,声明函数时创造了Function对象,对象名就是函数名,意味着函数可以赋值,也可以作为返回值和参数。

  3. 可以作为构造函数的构造器

    ​ 如果调用时候使用 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的对象连接。

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_NODE1<h1 class=“heading”>W3School</h1>
ATTRIBUTE_NODE2class = “heading” (弃用)
TEXT_NODE3W3School
COMMENT_NODE8
DOCUMENT_NODE9HTML 文档本身(<html> 的父)
DOCUMENT_TYPE_NODE10<!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函数:

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检查 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>
  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值