HTML+CSS+JS小整理

最新推荐文章于 2024-04-11 10:59:09 发布

枣知稻ZZD

最新推荐文章于 2024-04-11 10:59:09 发布

阅读量546

点赞数

分类专栏： java 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_49297152/article/details/109188485

版权

java 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

HTML+CSS+JS小知识

一、HTML

1、初始HTML

HTML 指 超文本标签语言，HTML 是通向 WEB 技术世界的钥匙。

**WEB 技术：Web就是在Http协议基础之上, 利用浏览器进行访问的网站。Web Page指网站内的网页. 我们常说的WWW(World Wide Web 万维网)**就是这个概念下的内容。
而Internet(互联网)则是一个更大的概念 Internet 上不只有Web, 还有FTP, P2P,Email, 或者App等其他多种不同的互联网应用方式. Web只是其中最广泛的一种 Internet的概念要大于Web。
“Web已死 Internet永生”, 意思是传统网站的重要性可能会降低, 新生的互联网服务可能会取代其重要性. 虽然单纯从流量上看, Web已经不是最大的互联网应用. 但由于其主体是文本(或者说是超文本hypertext), 流量开销本身就远小于视频等其他应用. Web可能仍是最最重要的互联网载体。

1.1、网络是什么?

将信息保存在web服务器上，人们可以使用客户机(浏览器)读取该信息。这种架构称为“服务器-客户端架构”。

为什么HTTP ?

最初，这些信息都是作为文本存储的——这就是为什么在现在文本、媒体和文件都通过该协议进行交换的情况下，名称超文本传输协议仍然存在。

1.2、如何保存、检索和保存信息?

在web上存储信息的最基本和最长久的方式是在HTML文件中。为了更好的理解，让我们举一个公司发布价格信息的简单例子，这样它的供应商就可以下载并查看这个列表，它包含有价格和生效日期的产品。这在服务器上作为HTML文件保存，可以使用web浏览器查看。浏览器从服务器请求文件，服务器端起它并关闭连接。

HTML是一种用于创建web页面的标准标记语言。换句话说，它是一个带有标记的简单文本文件，帮助浏览器找到如何显示信息的方法。

2、HTML语言和基础标签

HTML：超文本标签/标记语言，由大量HTML标签组成的，用来描述网页。不是编程语言只是一种标记。通过对标记的解析来描述页面。通常我们是用浏览器去解析HTML。

2.1、HTML标签

HTML的标签就是组成HTML网页的内容，这些内容因场景不同会被称为：标记、标签、元素、节点、对象。构成是：

HTML标签是由尖括号包含的关键词组成的，比如：<HTML>
HTML标签通常成对出现。比如:<HTML></HTML>
第一个是开始标签，第二个是结束标签。
开始和结束标签也可以被称为开放、闭合标签。

HTML标签编写的文本文件就是网页，包含HTML标签和纯文本。

HTML语言标签的语法：标签可以嵌套，但是不能交叉只能包含。

<关键字 属性="值">内容</关键字>

2.2、HTML主体部分

主要由HTML、BODY、HEAD组成。

<HTML><!--根节点-->
    <head><!--head 浏览器部分-->
       <title>标题栏</title> 
    </head>
    <body><!--body 文本部分-->
        <font color="blue" size="7">This is HTML Page.</font>
    </body>
</HTML>

HEAD下其它标签：

以<head>标签为主，包含脚本、样式、元数据等。

<meta charset="UTF-8"><!--绑定数据 不现实但可以读写-->
<title>html基础标签</title><!--标题 ：1.浏览器工具标题 2.收藏夹显示的标题 3.搜索引擎结果的标题-->
<!--<base></base> 绑定链接默认地址和默认目标的标签-->
<!--<link></link> 定义与外部资源的关系，通常链接外部样式表。-->
<!--<style></style> 内连样式-->
<!--<script> zcvcxzcdxz</script> 关联js的标签-->

3、HTML其它常用标签

3.1、居中标签

<center><!--居中标签--></center>

3.2、font字体

修改文字样式，**color属性：**指代字体颜色，其值是一些封装了颜色的单词或RGB （#FFF #999999）。 size属性： 字体大小其值是1~7的数字，或 +n 在原有内容上增加2个层次但不超过7 。

<font color="#FF0000" size="+3" id="top">这是我的首页面。</font>

3.3、段落和标题

段落标签p: 它自身有换行和令其后内容换行的特征。

标题标签h: 有 1~6 个取值，数字越大字体越小。

<p>我是标签 <font color="#FF0000" size="5">段落里的标记</font></p>
<!--hn 标题标签 1~6 数字越大字体越小-->
<h1>标题1</h1>

3.4、文本分割线、换行和特殊字符

**文本分割线hr：**width表示分割线宽度单位是【px像素和百分比会自适应】。

**换行b’r：**用于文本和标签后的换行。

转义字符: 一些有意义的单词和&组成。

<!--文本分割线 width 宽度 px像素 百分比会自适应-->
<hr color="red" width="50%"/>
<!--转义字符:&nbsp; 代表空格 空几个就是几个&amp; 代表& &lt; <&gt; >  --> 
<br/><!--换行-->

3.5、超级链接

**超级链接a：**可以点击后跳转到另一位置的标签，可以是另一个网页也可以是本网页的另一个地方。

<!--a 超级链接 href 跳转的地址 target 跳转方式 _blank 新窗口 _self 当前值 _parent 父类 无框架时等效于_self   _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<!--name 属性设置锚点 失效时请使用id-->

3.6、span和div

<!-- HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。
		1.HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
			<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
		2.HTML <span> 元素是内联元素，可用作文本的容器。
			<span> 元素也没有特定的含义。-->
<div style="background-color:green">div3</div>
<span style="background-color:#00FFFF">span1qhgwehqv</span>

3.7、有序和无序列表

使用有序列表ol和无序列表ul，都是通过li来组成列表的每一项。

<!-- ol 有序的 type属性 1（默认） i 
	ul 无序的 type 默认● square ■ circle ○-->
<ol type="i">四大名著
		<li>《师徒四个送快递》</li>
		<li>《富二代落魄史》</li>
		<li>《卖草鞋的百万富翁》</li>
		<li>《名营企业奋斗史》</li>
</ol>
<ul type="square">sony第四世代神作
		<li>《新战神》</li>
		<li>《美国末日》</li>
		<li>《对马岛之魂》</li>
		<li>《死亡搁浅》</li>
</ul>

3.8、表格

table表格，每一行由tr组成，称之为单元行。第一行每一个单元是th称之为标题格。其他行每一个单元td称之为单元格。

<!--表格 table 标签 属性{border:边框 cellspacing 外间距 cellpadding 内边距}
	align:水平排列方式 left center right table上 整个表格不作用于内容 tr上整行 td上单个单元格
 rowspan:合并行 colspan:合并列
-->
<table border="1px" width="750px" height="240px" cellspacing="0px" cellpadding="0px" align="center">
		<!--valign:垂直排列方式 top middle bottom -->
		<tr align="center" valign="bottom"><!--tr 单元行-->
			<!--<th>编号</th><th>姓名</th><th>年龄</th><!--th 标题格 -->
				<td><b>编号</b></td><td>姓名</td><td>年龄</td></tr><!--td 单元格 -->
		</tr>
		<tr><td align="center">1</td><td>张三</td><td>23</td></tr><!--td 单元格 -->
		<tr><td align="center">2</td><td>李四</td><td>33</td></tr>
		<tr>
			<td>3</td><td rowspan="2" align="center">麦哲伦</td><td>46</td>
		</tr>
		<tr>
			<td>4</td><td>28</td>
		</tr>
		<tr>
			<td>5</td><td colspan="2" align="center">略</td>
		</tr>
</table>

3.9、表单与表单元素

form表单，通过form标签组成表单根元素。收集用户录入信息发送到服务器指定位置 action 提交的位置和方向 method 提交方式 get/post。

**表单：**收集用户输入的信息发送到服务器指定位置。

<!--form表单 收集用户录入信息发送到服务器指定位置 action 提交的位置和方向 method 提交方式 get/post-->
<form action="OK.html" method="get"></form>

**表单元素：**可以接收用户输入的各标签。

input标签的type类型为：text、password、hidden、radio、checkbox、submit、button、reset、file。即：文本输入框、密码框、隐藏域、单选框、多选框、提交按钮、按钮、重置按钮、文件选择。

select标签下拉列表，option是组成列表的每一个选项。

<!--为了可以接收用户输入设置了各种标签称为 表单元素 必须在form下才能搜集-->
用户名：<input type="text" name="username" value="默认值"/><!--输入文本框 type:text 文本框 value 输入的内容--><br/>
密码：<input type="password" name="pwd" value="123"/><!--密码输入框--><br/>
性别：男：<input type="radio" name="sex" value="男" checked/> 女：<input type="radio" name="sex" value="女"/>
<!--单选框 type:radio 如果多个单选框加入互斥只需要name一致即可 checked 选中状态 值：true checked 或者不写值 --><br/>
<!--下拉菜单 select代表下拉 option代表下拉选项 selected 选中状态，值：true selected 或者不写值-->
地址：<select>
	<option value="">----</option>
	<option value="beijing" selected>--北京--</option>
	<option value="xian">--西安--</option>
 </select>
<br/>
<!--复选框 type:checkbox checked 选中状态，值：true checked 或者不写值 name一致也不会互斥-->
爱好：篮球：<input type="checkbox" name="hobby" value="篮球" checked/>
足球：<input type="checkbox" name="hobby" value="足球"/>
排球：<input type="checkbox" name="hobby" value="排球" checked/>
<br/>
<input type="file" value="" name="filename"/><!--选择文件-->
<br/>
<!--文本域 rows 占行数 cols占列数 -->
备注：<textarea rows="10"  cols="30" name="more">说点什么吧.....</textarea>
<!--按钮-->
<br/>	
<input type="button" value="按钮"/><br/><!--毫无作用按钮-->
<input type="reset" value="清除"/><br/><!--清除按钮 所填内容归零-->
<input type="submit" value="提交"/><br/><!--提交按钮 让表单内容提交到指定位置-->
<input type="hidden" name="xu" value="热铁别摸！！！"/><!--隐藏文本域-->

二、CSS

层叠样式表(Cascading Style Sheets, CSS)是一种样式表语言，用于描述用标记语言编写的文档的表示。基本的格式和样式可以通过HTML来完成，但是最好是使用CSS。

web应用程序包含许多页面，无论是动态的还是静态的。如果我们使用HTML标签来设计信息，我们必须在每个页面中重复这些信息。假设我们想要改变背景颜色——我们必须为网站的每一个页面编辑HTML。

相反，我们可以使用CSS在一个位置存储我们的样式定义，并将每个HTML页面引用到该位置。通过改变CSS文件，我们可以改变每个页面的背景颜色，样式定义的样式表。

CSS不仅仅是设置背景颜色，当然，它还允许我们为各种元素、字体、页面布局等等设置颜色。

CSS具有复用性。

1、CSS语法规则

选取作用的标签对象之后，通过style的属性来设置内容。语法为：属性1：值；属性2：值。

因为作用位置以及style书写的位置可以做以下分类：

1.1、书写位置

**行内样式表：**一行标签之内，直接书写在标签的style属性里。
**内嵌样式表：**写在<head>的<style>下，然后通过选择器选取要作用的标签。
**外联样式表：**将内容写在一个外部样式表中（.css）用<link href=“XXX.css” type=“text/css” rel=“stylesheet”/>

注意:多种样式作用同一个属性：就近原则。

可以根据并列关系作用标签： td，th；给 td 和 th 都添加样式。

可以根据从属关系作用标签：table th；给 table 下的和 th 添加样式。

期中 td th 都可以用等效的 id 和 class 选择器选择。

1.2、选择器

通过选择器选择标签对象，然后给这些对象添加属性。

id ：给需要修改的标签取一个唯一id值，访问的时候#id名访问。
class：给需要修改的标签取一个通用的class值，访问的时候.class名访问。
标签名：直接书写标签名来访问需要添加样式的标签。

注意：多种样式互相补充互相作用(style属性不一样)。

id、 class 、标签名同时作用同一属性，优先级：id > class> 标签名 。

class 命名多个名字用空格隔开 class=“cls1 cls2 cls3” 一个标签多个class值。

2、CSS的常用属性

2.1、background-image、background-color

**background-color:**背景颜色，使用颜色单词来确定背景，或者RGB来设置颜色。

**background-image:**背景图片，使用url来选择图片。

/*background-color:#00ffff;背景颜色*/
background-image:url('../Images/img011.jpg');/*背景图片*/
background-repeat: no-repeat;/*background-repeat 平铺方式 repeat-x水平方向 repeat-y垂直方向 no-repeat 则不允许平铺。*/
background-position:center;/*background-position定位属性 center中 top上 bottom下 right右 left左 中可以和其他一起使用 当有两个值的时候前一个为x水平 后一个为y垂直 也可以是数值px 和百分比%*/
background-attachment:fixed;/*设置滚动值 可视区是固定的（fixed） 默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。*/

2.2、font字体

**font：**字体相关的设置，通过颜色color来设置颜色。

font-family:微软雅黑;/*字体*/
font-style:oblique;/*字体风格 normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示*/
font-variant:small-caps;/*小写转大写*/
font-weight:lighter;/*粗细程度（100~900）bold 大 bolder 更大 lighter小*/
font-size:3em;/*设置字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。*/

2.3、text文本

**text：**文本相关的设置，设置每一个字符的样式。

text-indent: 5em;/*em=16px ex=8px px 缩进*/
/*text-align:justify;水平排列方式left center righter*/
/*vertical-align:top;垂直排列方式top middle bottom 作用table */
word-spacing:5px;/*单词间距*/
letter-spacing:10px;/*字母间距 对汉字自持*/
text-transform:capitalize;/*大小写转化none 无转化 uppercase 全大写 lowercase 全小写 capitalize首字母大写 */
text-decoration:blink;/*风格 underline下划线 overline上划线 line-through中划线 blink闪烁 */
white-space:pre;/*留白*/

2.4、无序列表样式

**type:**设置无序列表的序号类型。也可以通过 url 来设置图片。

list-style-type:circle;列表索引 square circle*
list-style :url('../Images/img01.jpg') circle inside;

2.5、table

设置表格的边框和去掉重复边框。

/*单线条*/
table{
	border-collapse:collapse;
}
/*样式并列使用[,]*/
table,td{
	border:1px dotted red;/*边框像素 实虚线（solid实 dotted虚） 颜色 */
}

2.6、超级链接伪类

/*超级链接的伪类*/
a:link{color:#00ffff};/*超级链接未访问*/
a:visited{color:#778899}/*超级链接访问过*/
a:hover{color:#ff0000}/*超级链接鼠标悬停*/
a:active{color:green}/*超级链接鼠标按住*/

3、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

3.1、padding内边距

内容与父级元素边框的距离。

padding:20px 10px 1px;
/*
padding-top:20px;padding-left:20px; padding-right:20px;padding-bottom:20px--->上、左、右、底
top right bottom left 四个方向合并：
-1个值: A，全部都一样。
-2个值: AB，A是上下，B是左右。
-3个值: ABC，A是上，B是左右，C下。
-4个值: ABCD，A是上，B是右，C是下，D是左。
*/

3.2、margin外边距

当前元素与平级元素的距离。

margin:20px;/*上下左右都20px*/
/*
margin-top:20px;margin-left:20px; margin-right:20px;margin-bottom:20px--->上、左、右、底
top right bottom left 四个方向合并：
-1个值: A，全部都一样。
-2个值: AB，A是上下，B是左右。
-3个值: ABC，A是上，B是左右，C下。
-4个值: ABCD，A是上，B是右，C是下，D是左。
*/

3.3、width、height

width:200px;// 宽度
height:80px;// 高度

4、定位

有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

#div1{
	background-color:red;
	/*position:relative;相对*/
	position:absolute;/*绝对*/
	width:100%;
	height:20px;
	left:20px;
}
#div2{
	/*position:relative;相对*/
	position:absolute;
	top:30px;
	width:100%;
	height:30px;
	bottom:5px;
	background-color:#00ffff;
}

5、CSS+DIV

使用DIV+CSS可以完成各种混排效果，使用 float:left/right。

#middle{
	width:100%;
	height:160px;
}
#middle_left{
	background-color:red;
	width:33.33333%;
	height:160px;
	float:left;/* 滑动 left right */
	clear:none;/* 清理格式 */
}
#middle_center{
	background-color:green;
	width:33.33333%;
	height:160px;
	float:left;
}
#middle_right{
	background-color:blue;
	width:33.33333%;
	height:160px;
	float:left;
}

6、filter过滤器

filter: blur(1px); /* 照片模糊程度 */
filter: brightness(60%);/* 照片黑白程度 */
filter: contrast(60%);/* 照片昏暗程度 */
filter: drop-shadow(-10px -10px 50px -100 red);/* 滤镜阴影 第一个值正负表示阴影方向左右 第二个值正负表示阴影方向上下 第三个值阴影大小*/
box-shadow:-10px -10px  10px 10px red; 
filter: grayscale(100%);/*滤镜黑白*/
filter:hue-rotate(150deg);/*滤镜对比度1*/
filter:invert(90%);/*滤镜对比度2*/

三、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的对象连接。

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 属性是属性节点
所有注释是注释节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PiPg1nWp-1603196186905)(E:\讲师工作\二阶段\课程笔记\第一部分\ct_htmltree.gif)]

有了 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>