HTML+CSS+JS学习笔记
- HTML
- CSS
- JavaScript
- 1.HTML，CSS，JavaSript三者关系
- 2.在HTML中怎么嵌入JavaScript代码？
- 3.关于JS中的变量
- 4.JS的函数初步
- 5.局部变量和全局变量
- 6.数据类型
- 7.null NaN undefined这三个值有什么区别
- 8.JS的常用事件和注册事件的两种方式
- 9.JS代码的执行顺序（load事件）
- 10.JS代码设置节点的属性（load事件）
- 11.JS代码捕捉回车键（keydown事件）
- 12.JS的void运算符
- 13.JS的控制语句和JS的数组
- 14.JavaScript包括三块：ECMAScript、DOM、BOM
- 15.DOM编程-获取文本框的value
- 16.DOM编程-innerHTML和innerText操作div和span
- 17.DOM编程-关于正则表达式
- 18.DOM编程-去除字符串前后空白的trim函数
- 19.DOM编程-表单验证
- 20.DOM编程-复选框的全选和取消全选
- 21.DOM编程-获取下拉列表选中项的value
- 22.1.DOM编程-显示网页时钟和JS内置对象(内置支持类)Date
- 22.2 内置支持类Array
- 23.BOM编程-window对象的open和close方法
- 24.BOM编程-弹出消息框和确认框
- 25.BOM编程-将当前窗口设置为顶级窗口
- 26.BOM编程-window的history对象(类)
- 27.BOM编程-设置浏览器地址栏上的URL
- 28.JSON-介绍
- 29.JSON-复杂一些的JSON对象
- 30.JSON-eval函数
- 31.JSON-DOM-拼接html的方式，设置table的tbody
HTML
1.系统架构
B/S架构：（以后主要走的方向是这个。）
Browser / Server （浏览器/服务器的交互形式。）
Browser支持哪些语言：HTML CSS JavaScript
写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。）
前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
S是服务器端Server，Server端的语言很多：C C++ Java python.....（我们主要是使用Java语言完成服务器端的开发）
B/S架构的系统有什么优点和缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统
不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业
内部更注重维护的成本。
B/S架构的系统有哪些代表？
京东
百度
天猫
....
C/S架构
Client / Server （客户端/服务器端的交互形式。）
缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
常见的C/S架构的系统：
QQ
微信
支付宝
....
2.什么是HTML？怎么开发HTML？怎么运行HTML？
* HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频....
* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....
* 直接采用浏览器打开HTML文件就是运行。
3.HTML是谁制定的？
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）
W3C制定了很多规范：
HTML/XML/http协议/https协议......
为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系
认真学习html，可以看看w3school
4.第一个HTML
<!--这是HTML注释-->
<!--HTML不区分大小写，语法松散-->
<!--加上下面代码的第一行就表示HTML5.0语法。去掉表示HTML4.0-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页左上角-->
<title>网页的标签</title>
</head>
<!--体-->
<body>
网页的主体内容，欢迎学习HTML！
</body>
</html>
5.HTML的基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的基本标签</title>
</head>
<body>
<!--段落标记-->
<p>编码器的体系结构具有两个优点：首先，滤波器的大小和卷积运算的步幅分别为3×3和1，使用此策略，输入图像可以是任何大小</p>
<p>其次，DenseBlock可以在编码网络中尽可能保留深度特征，并且该操作可以确保融合策略中使用所有显著特征。</p>
<p>解码器包含四个卷积层（3×3卷积），融合层的输出将是解码器的输入。使用这种简单有效的架构来重构最终融合的图像。</p>
<!--标题字：HTML预留的格式，和Word当中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<!--换行标记 br标签是一个独目标记，只有一个，不是一对-->
hello <br> world!
<!--水平线，独目标记-->
<hr>
<!--color和width都是hr标签的属性，以下三种都可以，写法松散-->
<hr color="red" width="50%">
<hr color='red' width='50%'>
<hr color=red width=50%>
<!--预留格式，如以下代码，不加上预留格式，最后在一行显示-->
<pre>
for(int i=0;i<10;i++){
System.out.println(i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--右上角加字-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>2</sub>
<!--font字体标签-->
<font color="red" size="50">字体标签</font>
</body>
</html>
6.HTML的实体符号
<!doctype html>
<html>
<head>
<title>HTML的实体符号</title>
</head>
<body>
<!--在html中，使用的某些符号正好与html语言冲突，这是要用实体符号-->
<!--实体符号：以&开始，以;结束-->
<!--小于(less than)号：< 大于(greater than)号：>-->
b<a>c
<!--空格(Non-Breaking Space)： -->
a b c
<!--实体符号还有很多，这里就介绍这些-->
</body>
</html>
7.HTML的表格
<!doctype html>
<html>
<head>
<title>HTML的表格</title>
</head>
<body>
<!--让表格往下走，加换行-->
<br><br><br><br>
<center><h1>员工信息列表</h1></center>
<!--加条横线-->
<hr>
<!--一对符号，table表示表格，tr表示一行，td表示一行中的一个格子-->
<!--
border="1px" 设置表格的边框为1像素宽度
width 宽度
height 高度
也可以以%为单位：width="60%"
-->
<!--
align对其方式(居中center，向左，向右)
可以写在table里(整个表格在页面居中)，行tr里，也可以写在td格子里
-->
<table align="center" border="1px" width="300px" height="150px">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
</html>
8.HTML的表格-单元格的合并
th标签
th标签也是单元格标签，td也是单元格标签，但是th比td多的是居中、加粗
thead、tbody、tfoot标签
thead,tbody,tfoot在table中不是必须的，只是这样做便于后期JS代码的编写
为了对表格操作方便，可以将表格分为三部分(head body foot)
也可以不分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单元格合并</title>
</head>
<body>
<!--让表格往下走，加换行-->
<br><br><br><br><br><br><br><br>
<h1 align="center" a>员工信息列表</h1>
<hr width="60%">
<!--
相邻单元格合并，有行合并和列合并
合并上下两行单元格(row合并)：
找到要合并的两个格，删除其中一个格(一般去掉后者)，再给td添加属性rowspan
rowspan="2"表示合并两个格，合并几个格就写几
注意：删除下面的单元格
合并左右两列单元格(column合并)：
同上，添加属性colspan
注意：col合并，对删除哪个没有要求
-->
<table align="center" border="1px" width="60%" height="150px">
<!--th标签也是单元格标签，td也是单元格标签，但是th比td多的是居中、加粗-->
<thead> <!--头-->
<tr>
<th>人员编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<tbody> <!--体-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
<tfoot> <!--脚-->
<tr align="center">
<td align="center">d</td>
<td>e</td>
<td rowspan="2">f</td>
</tr>
<tr align="center">
<td colspan="2">g</td>
<!--<td>i</td>-->
<!--<td>i</td>-->
</tr>
</tfoot>
</table>
</body>
</html>
9.背景色和背景图片
<!DOCTYPE html>
<html>
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor设置背景色
background设置背景图片
-->
<body bgcolor="red" background="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png">
</body>
</html>
10.HTML图片img标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>图片img</title>
</head>
<body>
<!--
1.设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放
2.img标签就是图片标签
3.src属性是图片的路径
4.width设置宽度，height设置高度
5.title设置鼠标悬停到图片时显示的信息
6.alt设置图片加载失败时显示的提示信息
7.开始标签和结束标签之间没东西，可以不写结束标签，在开始标签最后加上/
-->
<img src="img/1.png" width="100px" title="百度图片" alt="图片找不到" />
<br><br><br><br>
<div align="center" ><img src="img/1.png"> </div>
<img src="img/1.png">
</body>
</html>
11.HTML超链接
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接：<a></a>标签+属性href
href：hot reference 热引用
href属性后一定是一个资源的地址
href后面的路径：可以是绝对路径也可以是相对路径；可以是网络中某个资源的路径，也可以是本地资源的路径
-->
<a href="http://www.baidu.com">百度 </a>
<a href="http://www.baidu.com">淘宝 </a>
<a href="html的基本标签.html">基本标签</a>
<!--图片超链接:点击图片跳转，还有接着对图片进行修改-->
<a href="http://www.baidu.com">
<img src="img/1.png" width="100px">
</a>
<!--
超链接有一个target属性：
target="_blank" 开启新窗口
target="_self" 当前窗口(默认方式)
target="_top" 顶级窗口
a窗口里有1个窗口b，b窗口里有一个窗口c，如果c窗口中有一个超连接，
该链接的target是top，点击这个超链接c窗口直接到a窗口
该链接的target是parent，点击这个超链接c窗口直接到b窗口
target="_parent" 父窗口
-->
<a href="http://www.baidu.com" target="_self">
<img src="img/1.png" width="100px">
</a>
</body>
</html>
超链接的作用
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
12.列表
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--
有序列表:
ol:order list
li:list
<ol>
<li></li>
</ol>
这里也有一个type：
按照什么形式排列
type="1" 按数字排列
type="A" 按ABC...排列
type="a" 按abc...排列
type="I" 按罗马数字排列
-->
<ol type="A">
<li>水果</li>
<ol type="I">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
<li>蔬菜</li>
<ol>
<li>西红柿</li>
</ol>
</ol>
<br><br><br>
<!--
无序列表：
ul:unorder list
li:list
<ul>
<li> </li>
</ul>
还可以设置列表前小点点的样式
type="circle"
type="square"
type="disc"
-->
<ul type="circle">
<li>中国</li>
<ul type="square">
<li>北京</li>
<ul type="disc">
<li>朝阳</li>
</ul>
<li>上海</li>
<li>杭州</li>
</ul>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
13.表单form初步（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
1、表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
-->
<form action="http://192.168.111.3:8080/oa/save">
<!-- 画一个提交按钮，这个按钮可以提交表单-->
<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力-->
<!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息-->
<input type="submit" value="注册">
<!--
type="text" 文本框
type="password" 密码框(输入密码)
type="checkbox" 复选框
type="radio" 单选按钮
type="submit" 提交表单的按钮
type="button" 普通按钮，不具备提交表单的能力
-->
<!--这是一个普通按钮，不具备提交表单的能力-->
<input type="button" value="按钮">
</form>
<!--这个按钮和普通的超链接没什么太大的区别
（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）
-->
<form action="http://www.baidu.com">
<input type="submit" value="百度">
</form>
<!--
表单是以什么格式提交数据给服务器的？
http://localhost:8080/jd/login?username=abc&userpwd=111
格式：action?name=value&name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的，必须以这种格式提交给服务器。
重点强调：
表单项写了name属性的，一律会提交给服务器。
不想提交这一项，就不要写name属性
文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器。
但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。
java代码得到的是：String username = "";
-->
<form>
<table border="1px">
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录">
<input type="reset" value="清空">
</td>
</tr>
</table>
</form>
<!--submit必须放到form标签内部才有用-->
<input type="submit" value="登录" />
<!--必须放到form标签内部才有用-->
<input type="reset" value="清空" />
</body>
</html>
14.用户注册的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!--
用户注册：
用户名
密码
确认密码
性别
兴趣爱好
学历
简介
-->
<form action="http://localhost:8080/jd/register" method="post"><!--这个路径是假的-->
用户名<input type="text" name="username" />
<br>
密码<input type="password" name="userpwd" />
<br>
<!--确认密码不需要使用name属性提交给服务器，在浏览器就能判断是否密码一致，怎么判断先不写-->
确认密码<input type="password" />
<br>
<!--
1.单选，有两个选择，name相同就可以将这两个选择分成一组，只能选一个
2.传给数据库的是name和value，所以要写value
3.在后面添加checked，就默认选择了
比如：<input type="radio" name="gender" value="1" checked />男
默认选男
-->
性别
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" />女
<br>
<!--需要写value，默认选中加checked-->
兴趣爱好
<input type="checkbox" name="hobbies" value="smoke"/>抽烟
<input type="checkbox" name="hobbies" value="drink"/>喝酒
<input type="checkbox" name="hobbies" value="firehair"/>烫头
<br>
<!--
下拉列表怎么写？如下
默认选什么，在后面加selected
比如：<option value="dz" selected>大专</option>
默认选什么就提交什么
-->
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select>
<br>
<!--
文本域？textarea
可以增大：行数和列数
文本域没有value，用户填的就是value
-->
简介
<textarea rows="10" cols="60" name="introduction"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="清空" />
</form>
</body>
</html>
<!--
假设输入之后，那么提交的是name和value，如下：
http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
form表单method属性：
method="get"：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
method="post"：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
<form action="http://localhost:8080/jd/register" method="post">
method属性不指定时，默认为get。
只有当method属性指定为post的时候才是post请求。
剩下所有的请求都是get请求。
超链接也可以提交数据(按同样格式)给服务器，但是提交的数据都是固定不变的
超链接是get请求。不是post请求
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来。
POST提交的数据还是：name=value&name=value&name=value.....
-->
15.下拉列表支持多选
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>下拉列表支持多选</title>
</head>
<body>
<!--
不加name，只是演示
multiple="multiple" 支持多选的 size设置显示条目数量。
按住ctrl键再点击就可以多选了
-->
<select multiple="multiple" size="3">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
</body>
</html>
16.file控件和hidden控件
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>file控件</title>
</head>
<body>
<!--file控件：文件上传专用。-->
<input type="file">
<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<!--不想在网页上被人看到，但是又要传给服务器，可以使用hidden-->
<!--hidden与在地址栏显不显示无关，这是两件事-->
<form action="http://localhost:8080/oa/save">
<input type="hidden" name="userid" value="123">
用户代码<input type="text" name="usercode">
<input type="submit" value="提交">
</form>
</body>
</html>
17.readonly和disabled
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>readonly和disabled</title>
</head>
<body>
<!--
readonly和disabled相同点：都是只读不能修改。
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）
-->
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="123"readonly>
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled>
<br>
<input type="submit" value="提交数据">
</form>
</body>
</html>
18.input控件的maxlength属性
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>input控件的maxlength属性</title>
</head>
<body>
<!--
maxlength 设置文本框中可输入的字符数量。
-->
<input type="text" maxlength="5">
</body>
</html>
19.HTML文档中节点的id属性
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>HTML文档中节点的id属性</title>
</head>
<body id="mybody">
<!--
1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。
所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。
-->
<form id="myform">
姓名<input type="text" id="username" name="usrname">
密码<input type="password" id="userpwd" name="userpwd">
<!--id就是节点的身份证号码，不能重复。-->
<!-- <input type="text" id="username" /> -->
</form>
</body>
</html>
20.HTML中的div和span
<!DOCTYPE html>
<html lang="en">
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="UTF-8">
<title>HTML中的div和span</title>
</head>
<body>
<!--
1、div和span是什么？有什么用？
* div和span都可以称为“图层”(图层：可以理解为多个透明的图片重叠)
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。
-->
<div id="div1">我是一个div</div>
<div id="div2">我是一个div</div>
<span id="span1">我是一个span</span>
<span id="span2">我是一个span</span>
<!--div也是可以嵌套的，现在看不到效果-->
<div>
<div> tsasdhjka</div>
</div>
</body>
</html>
CSS
1.什么是CSS，有什么作用？
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。
2.在HTML页面中嵌套使用CSS的三种方式：
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式 。
语法格式：
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
</style>
</head>
第三种方式：链入外部样式表文件，这种方式最常用
（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：
<head>
<link type="text/css" rel="stylesheet" href="css文件的路径" />
</head>
这种方式易维护，维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了
3.HTML中引入CSS样式的第一种方式：内联定义方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入CSS样式的第一种方式：内联定义方式</title>
</head>
<body>
<!--
查文档：所有的样式都可以在CSS2.0.CHM文件中的属性中找到
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示）
为div添加边框：
第一种方式如下"
border-color : red;border-width : 1px;border-style : solid;
-->
<div style="width: 300px; height: 300px; background-color:burlywood;display: block;
border-color: red;border-width: 1px; border-style: solid;"></div>
<br><br>
<!--
为div添加边框：
第二种方式如下：
border:border-width||border-style||border-color;
border : 1px solid black;
-->
<div style="width: 300px; height: 300px; background-color:burlywood;display: block;
border: 1px solid red; "></div>
</body>
</html>
4.HTML中引入CSS样式的第二种方式：样式块、id选择器、标签选择器和类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入CSS样式的第二种方式：样式块</title>
<style type="text/css">
/*
id选择器
语法格式：
#id{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
...
}*/
#usernameErrorMsg{
color: red;
font-size: 24px;
}
/*
标签选择器：
语法格式：
标签名{
样式名 : 样式值;
样式名 : 样式值;
...
}
标签选择器的作用范围比id选择器广，同一标签都可以作用到
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
类选择器：
语法格式：
.类名{
样式名 : 样式值;
样式名 : 样式值;
...
}
同一类的所有标签可以设置相同的样式
*/
.myclass{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--设置样式字体大小12px，颜色为红色-->
<!--id选择器：-->
<span id="usernameErrorMsg">对不起，用户名不能为空！</span>
<!--标签选择器：-->
<div></div>
<div></div>
<div></div>
<!--类选择器：-->
<br><br><br>
<input type="text" class="myclass">
<br><br><br>
<select class="myclass">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
5.在HTML中使用CSS样式的第三种方式：引入外部独立的css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入CSS样式的第三种方式：引入外部独立的css文件</title>
<!--引入css文件-->
<link type="text/css"rel=" stylesheet" href="../css/1.css">
</head>
<body>
<!--
href="..." 超链接
src="..." 文件路径
<img src="...">
-->
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">点击我连接到百度</span>
</body>
</html>
css文件
a{
text-decoration: none;
}
/*
使用id选择器，使"点击我链接到百度！"下有横线，鼠标触碰到变成小手
cursor鼠标样式：hand和pointer都是小手，但是hand有浏览器兼容问题，建议使用pointer
*/
#baiduSpan{
text-decoration: underline;
cursor: pointer;
}
6.列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<style type="text/css">
/*
使用标签选择器
将列表左边的小圆点去除
*/
ul{
/*list-style-type: none;*/
/*list-style-type: circle;*/
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>英国</li>
</ul>
</body>
</html>
7.CSS样式的绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式的绝对定位</title>
<style type="text/css">
#div1{
background-color: red;/*div1的背景色*/
border: 1px black solid;/*div1的边框设置*/
width: 300px;/*div1的宽度*/
height: 300px;/*div1的高度*/
position: absolute;/*绝对定位，以方框左上角那个点来定位*/
left: 100px;/*距离网页的左边100px*/
top: 100px;/*距离网页的上边100px*/
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
JavaScript
1.HTML，CSS，JavaSript三者关系
JavaScript是运行在浏览器上的脚本语言。简称JS。
以后大家会学习一个叫做JSP的技术，JSP和JS有啥区别？
JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
JS : JavaScript（运行在浏览器上。）
三者关系：
CSS和JavaScript为HTML服务
CSS好比是HTML的化妆品一样。修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
JavaScript让网页能够动起来，更加生动，页面更具有交互性。
2.在HTML中怎么嵌入JavaScript代码？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript代码的第一种方式</title>
</head>
<body>
<!--
1.要实现的功能：
用户点击以下按钮，弹出消息框。
2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行相应的程序。
在JS中有很多事件，其中一个事件叫做：鼠标单击(单词：click)。
并且任何事件都会对应一个事件句柄，事件句柄是以HTML标签的属性存在的。
事件句柄写法：在事件单词前加一个on。(比如鼠标单击事件的事件句柄是onclick)
3.οnclick="js代码"，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
4.怎么使用js代码弹出消息框？
在js中有一个内置的对象叫做window(全部小写)，可以直接拿来使用，window代表的是浏览器对象。
window对象有一个函数叫做：alert，用法是：window.alert("消息");这样就可以弹窗了。
5.js中的字符串可以使用单引号，也可以使用双引号。
6.js中的一条语句结束之后可以使用分号，也可以不用。
-->
<input type="button" value="hello" onclick="window.alert('hello js')
window.alert('keas')
window.alert('asda')">
<!--window.可以省略不写-->
<input type="button" value="hello" onclick="alert('hello zhangsan')
alert('hello lisi')
alert('hello wangwu')"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript代码的第二种方式</title>
</head>
<body>
<!--
第二种方式：脚本块的方式
<script type="text/javascript">
js代码
</script>
javaScript的脚本块在整篇代码中(在一个页面中)可以出现多次，没有要求。
javaScript的脚本块在整篇代码中出现的位置没有要求，可以在<!doctype html>上面
-->
<script type="text/javascript">
/*
暴露在脚本块当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行
(这个代码的执行不需要事件)。
*/
window.alert("111")
//alert函数会阻塞整个HTML页面的加载
//点击弹窗的确定键后，该行语句才执行结束，才会接着执行下一条语句
window.alert("222")
</script>
<input type="button" value="按钮">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript代码的第三种方式：引入外部独立的js文件</title>
</head>
<body>
<!--在需要的位置引入js脚本文件-->
<!--引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序依次逐行执行-->
<script type="text/javascript" src="1.js"></script>
<!--
同一个js文件可以被引入多次，但实际开发中这种需求很少
<script type="text/javascript" src="js/1.js"></script>
注意：这种方式不行,结束的script标签必须有
<script type="text/javascript" src="js/1.js" />
-->
<script type="text/javascript" src="1.js">
//在这里之间写的代码不会执行
//window.alert("Test");
</script>
<script type="text/javascript">
window.alert("Test");
</script>
</body>
</html>
3.关于JS中的变量
JS的标识符命名规则和规范参照java
命名规则(语法上的规定)：
1.必须由数字、字母、下划线、美元符号组成
2.不能以数字开头
3.严格区分大小写
4.不能使用关键字做标识符
5.理论上没有长度限制
命名规范：
1.类名和接口名首字母大写，后面每个字母首字母大写
2.方法名和变量的名字首字母小写，后面每个单词首字母大写
3.常量名要求全部大写，并且单词与单词之间以下划线_相隔
4.驼峰命名方式
5.见名知意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于JS中的变量</title>
</head>
<body>
<script type="text/javascript">
/*
回顾java中的变量：
1.java中怎么定义/声明变量？
数据类型 变量名;
例如：
int i;
double d;
boolean flag;
2.java中的变量怎么赋值？
使用“=”运算符进行赋值运算（"="运算符右边先执行，将右边执行的结果赋值给左边的变量）
变量名 = 值;
例如：
i = 10;
d = 3.14;
flag = false;
3.java语言是一种强类型语言，强类型怎么理解？
java语言存在编译阶段，假设有代码：int i;
那么在Java中有一个特点是：
java程序编译阶段就已经确定了i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型。
int i = 10;
double d = i;
这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
i还是int类型。
i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。
编译期强行固定变量的数据类型，称为强类型语言。
javascript当中的变量？
怎么声明变量？
var 变量名;
怎么给变量赋值？
变量名 = 值;
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;
重点：javascript是一种弱类型编程语言。
*/
//在JS当中，当一个变量没有手动赋值的时候，系统默认赋值undefined
//undefined 在JS中是一个具体存在值
var i;
alert("i="+i); //i=undefined
alert(undefined);
var k=undefined
alert("k="+ k);
//一个变量没有声明/定义,直接用?
//alert(age);//语法错误：age is not defined (变量age不存在,不能这样写)
var a,b,c=200;
alert("a="+a);
alert("b="+b);
alert("c="+c);
a=false;
alert(a);
a = "abc";
alert(a);
a = 1.2;
alert(a);
</script>
</body>
</html>
4.JS的函数初步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
1.JS中的函数：
等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
函数一般都是可以完成某个特定功能的。
2.回顾java中的方法？
[修饰符列表] 返回值类型 方法名(形式参数列表){
方法体;
}
例如：
public static boolean login(String username,String password){
...
return true;
}
boolean loginSuccess = login("admin","123");
3.JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
语法格式：
第一种方式：
function 函数名(形式参数列表){
函数体;
}
第二种方式：
函数名 = function(形式参数列表){
函数体;
}
JS中的函数不需要指定返回值类型，返回什么类型都行。
*/
function sum(a,b) {
//a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意)
return a+b;
}
//函数必须调用才能执行的.
// sum(10,20);
sayHello =function (username) {
alert("hello"+username);
}
// sayHello("张三");
/*
java中的方法有重载机制，JS中的函数能重载吗？
JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意（弱类型）
重载的含义：
方法名或者函数名一样，形参不同（个数、类型、顺序）
JS中的函数不需要重载。
*/
var retValue=sum(1,2);
alert(retValue);
var retValue1=sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
alert(retValue1);// jackundefined
var retValue2=sum();
alert(retValue2); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
var retValue3=sum(1,2,3);
alert(retValue3); // 结果=3(第三个3没了)
/*
在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
*/
function test1(username) {
alert("test1");
}
function test1() {
alert("test1 test1");
}
test1("lisi");// 这个调用的是第二个test1()函数.
</script>
<!--使用事件句柄和脚本块联合的方式，并在事件句柄中调用脚本块中的函数-->
<input type="button" value="hello" onclick="sayHello('jack')">
<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" >
</body>
</html>
5.局部变量和全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的局部变量和全局变量</title>
</head>
<body>
<script type="text/javascript">
/*
全局变量：
在函数体之外声明的变量属于全局变量，全局变量的生命周期是：
浏览器打开时声明，浏览器关闭时销毁，尽量少用。
因为全局变量会一直在浏览器的内存当中，耗费内存空间。
能使用局部变量尽量使用局部变量。
局部变量：
在函数体当中声明的变量，包括一个函数的形参都属于局部变量。
局部变量的生命周期是：
函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
局部变量生命周期较短。
*/
// 全局变量
var i = 100;
function accessI(){
// 访问的是全局变量
alert("i = " + i);
}
accessI();
// 全局变量
var username = "jack";
function accessUsername(){
// 局部变量
var username = "lisi";
// 就近原则:访问局部变量
alert("username = " + username);
}
// 调用函数
accessUsername();
// 访问全局变量
alert("username = " + username);
function accessAge(){
var age = 20;
alert("年龄 = " + age);
}
accessAge();
// 报错(语法不对，无法调用局部变量)
//alert("age = " + age);
// 以下语法是很奇怪的.
function myfun() {
// 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
myname="dujubin";
}
myfun();// 访问函数
alert("myname = " + myname); // myname = dujubin
</script>
</body>
</html>
6.数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS中的数据类型</title>
</head>
<body>
<script type="text/javascript">
/*
1.虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以
这里也需要学习一下JS包括哪些数据类型？
JS中数据类型有：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
2.ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol
3.JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
typeof运算符的语法格式：
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
"undefined"
"number"
"string"
"boolean"
"object"
"function"
4.在JS当中比较字符串是否相等使用“==”完成。没有equals。
*/
function sum(a,b) {
if(typeof a=="number"&&typeof b=="number"){
return a+b;
}
alert(a + "," + b + "必须都为数字！");
}
var retValue1 = sum(false, "abc");
alert(retValue1); //没有返回值，赋默认值 undefined
var retValue2=sum(1,2)
alert(retValue2)
var i;
alert(typeof i); // "undefined"
var k = 10;
alert(typeof k); // "number"
var f = "abc";
alert(typeof f); // "string"
var d = null;
alert(typeof d); // "object" null属于Null类型,但是typeof运算符的结果是"object"(无法解释，是个bug)
var flag = false;
alert(typeof flag); // "boolean"
var obj = new Object();
alert(typeof obj); // "object"
function sayHello() {
}
alert(typeof sayHello); //"function"
/*===========================================Undefined类型===========================================*/
/*
Undefined类型只有一个值，这个值就是 undefined
当一个变量没有手动赋值，系统默认赋值undefined
或者也可以给一个变量手动赋值undefined。
*/
var i;
var k=undefined;
alert(i == k); // true
var y="undefined";
alert(y == k); // false
/*===========================================Number类型===========================================*/
/*
1.Number类型包括哪些值？(java中使用byte short int long float double 6个类型来表示数字，js中只使用了一个Number)
-1 0 1 2 2.3 3.14 100 .... NaN Infinity
整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
2.isNaN() : 结果是true表示不是一个数字，结果是false表示是一个数字。
3.parseInt()函数
4.parseFloat()函数
5.Math.ceil() 函数（Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整(大于等于自己的最小整数)）
*/
var v1=1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;
var v5 = Infinity;
// "number"
alert(typeof v1);
alert(typeof v2);
alert(typeof v3);
alert(typeof v4);
alert(typeof v5);
// 关于NaN (表示Not a Number，不是一个数字，但属于Number类型)
// 什么情况下结果是一个NaN呢？
// 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.
var a = 100;
var b = "中国人";
// 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
alert(a / b);
var e = "abc";
var f = 10;
alert(e + f); //"abc10"(+号两边如果有字符串，会做字符串拼接，而不是做加法运算)
// Infinity (当除数为0的时候，结果为无穷大)
alert(10 / 0);
// 思考:在JS中10 / 3 = ?
alert(10 / 3); // 3.3333333333333335
// 关于isNaN函数？
// 用法：isNaN(数据),结果是true表示不是一个数字, 结果是false表示是一个数字.
// isNaN : is Not a Number
function sum1(a,b) {
if(isNaN(a)||isNaN(b)){
alert("参与运算的必须是数字！")
return;
}
return a+b;
}
sum1(1,"abc");
alert(sum1(100,200));
// parseInt():可以将字符串自动转换成数字,并且取整数位.
alert(parseInt("3.999"));
alert(parseInt(3.999));
// parseFloat():可以将字符串自动转换成数字
alert(parseFloat("3.14")+1);
alert(parseFloat("3.2")+1)
// Math.ceil()
alert(Math.ceil("2.1"));
/*===========================================Boolean类型===========================================*/
/*
1.JS中的布尔类型永远都只有两个值：true和false（这一点和java相同）
2.在Boolean类型中有一个函数叫做：Boolean()。
语法格式：
Boolean(数据)
Boolean()函数的作用是将非布尔类型转换成布尔类型。
*/
// var username = "";//用户名不能为空
var username = "jack";
if(username){
alert("欢迎你" + username);
}else{
alert("用户名不能为空！");
}
/*if(Boolean(username)){
alert("欢迎你" + username);
}else{
alert("用户名不能为空！");
}*/
/*
if(布尔类型)
如果括号里不是布尔类型，会自动调用函数Boolean()，将非布尔类型转换成布尔类型
用法：
Boolean("有")--->true
Boolean("没有")--->false
规律:“有"就转换成true,"没有"就转换成false.
*/
alert(Boolean(1)); // true
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("abc")); // true
alert(Boolean(null)); // false
alert(Boolean(NaN)); // false
alert(Boolean(undefined)); // false
alert(Boolean(Infinity)); // true
/*
死循环
while(10 / 3){
alert("hehe");
}
*/
for(var i=0;i<10;i++){
alert("i = " + i);
}
// Null类型只有一个值,null
alert(typeof null);//注意：typeof null 为 "object"
/*===========================================String类型===========================================*/
/*
String类型：
1.在JS当中字符串可以使用单引号，也可以使用双引号。
var s1 = 'abcdef';
var s2 = "test";
2.在JS当中，怎么创建字符串对象呢？
两种方式：
第一种：var s = "abc";
第二种（使用JS内置的支持类String）： var s2 = new String("abc");
需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。
3.无论小string还是大String，他们的属性和函数都是通用的。
4.关于String类型的常用属性和函数？
常用属性：
length 获取字符串长度
常用函数：
indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
substring 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串
*/
// 小string(属于原始类型String)
var x="abc";
alert(x);
// 大String(属于Object类型)
var y=new String("abc");
alert(typeof y);
//无论小string还是大String，他们的属性和函数都是通用的。
alert(x.length);
alert(y.length);
//字符串的indexOf函数，获取指定字符串在当前字符串中第一次出现处的索引
alert("http://www.baidu.com".indexOf("http"))
alert("http://www.baidu.com".indexOf("https"))
// 判断一个字符串中是否包含某个子字符串？
alert("http://www.baidu.com".indexOf("https")>=0? "包含":"不包含");
// replace函数 (注意：只替换了第一个)
// 继续调用replace方法,就会替换第“二”个.
// 想全部替换需要使用正则表达式(后面再讲).
alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
// 考点:经常问 substr和substring的区别？
// substr(startIndex, length) 下标从0开始
alert("abcdefxyz".substr(2,4));//cdef
// substring(startIndex, endIndex) 注意:不包含endIndex
alert("abcdefxyz".substring(2,4));//cd [2,4)
/*===========================================Object类型===========================================*/
/*
Object类型：
1.Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
2.Object类包括哪些属性？
prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
constructor属性
3.Object类包括哪些函数？
toString()
valueOf()
toLocaleString()
4.在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
换句话说，自己定义的类中也有prototype属性。
5.在JS当中怎么定义类？怎么new对象？
定义类的语法：
第一种方式：
function 类名(形参){
}
第二种方式：
类名 = function(形参){
}
创建对象的语法：
new 构造方法名(实参); // 构造方法名和类名一致。
*/
function sayBye() {
}
// 把sayHello当做一个普通的函数来调用.
sayBye();
// 这种方式就表示把sayHello当做一个类来创建对象.
var obj=new sayBye(); // obj是一个引用,保存内存地址指向堆中的对象.
// 定义一个学生类
function Student(){
alert("Student.....");
}
// 当做普通函数调用
Student();
// 当做类来创建对象
var stu = new Student();
alert(stu); // [object Object]
// JS中的类的定义,同时又是一个构造函数的定义
// 在JS中类的定义和构造函数的定义是放在一起来完成的.
function User(a,b,c) {
this.sno=a;
this.sname=b;
this.sage=c;
}
var u1=new User(111,"zhangsnan",18);
alert(u1.sage);
alert(u1.sname);
alert(u1.sno);
// 访问一个对象的属性,还可以使用这种语法
alert(u1["sno"]);
alert(u1["sname"]);
alert(u1["sage"]);
// 定义类的另一种语法
Emp = function(ename,sal){
// 属性
this.ename = ename;
this.sal = sal;
}
var e1 = new Emp("SMITH", 800);
alert(e1["ename"] + "," + e1.sal);
//另一个例子
Product = function(pno,pname,price){
// 属性
this.pno = pno;
this.pname = pname;
this.price = price;
// 函数
this.getPrice = function(){
return this.price;
}
this.getName=function () {
return this.pname;
}
}
var xigua = new Product(111, "西瓜", 4.0);
var pri = xigua.getPrice();
alert(pri); // 4.0
// 可以通过prototype这个属性来给类动态扩展属性以及函数
//意思是在类写完之后,又想给类添加新的属性/函数,这样就可以使用属性prototype
Product.prototype.getNo=function () {
return this.pno;
}
// 调用后期扩展的getNo()函数
var pno = xigua.getNo();
alert(pno);
// 给String扩展一个函数
String.prototype.suiyi=function () {
alert("这是给String类型扩展的一个函数，叫做suiyi");
}
"abc".suiyi();
</script>
</body>
</html>
<!--
java语言怎么定义类，怎么创建对象？（强类型）
public class User{
private String username;
private String password;
public User(){
}
public User(String username,String password){
this.username = username;
this.password = password;
}
}
User user = new User();
User user = new User("lisi","123");
JS语言怎么定义类，怎么创建对象？（弱类型）
User = function(username,password){
this.username = username;
this.password = password;
}
var u = new User();
var u = new User("zhangsan");
var u = new User("zhangsan","123");
-->
7.null NaN undefined这三个值有什么区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8null NaN undefined的区别</title>
</head>
<body>
<script type="text/javascript">
// null NaN undefined 数据类型不一致.
alert(typeof null);// "object"
alert(typeof NaN);// "number"
alert(typeof undefined);// "undefine"
// null和undefined可以等同.
alert(null == NaN); // false
alert(null == undefined); // true
alert(undefined == NaN); // false
// 在JS当中有两个比较特殊的运算符
// ==(等同运算符：只判断值是否相等)
// ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
alert(null === NaN); // false
alert(null === undefined); // false
alert(undefined === NaN); // false
// == 是等同运算符
alert(1 == true); // true
alert(1 === true); // false
</script>
</body>
</html>
8.JS的常用事件和注册事件的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常用事件和注册事件的两种方式</title>
</head>
<body>
<script type="text/javascript">
/*
JS中的常用事件：
blur 失去焦点
focus 获得焦点
click 鼠标单击
dblclick 鼠标双击 (doubleclick)
keydown 键盘按下
keyup 键盘弹起
mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
mouseup 鼠标弹起
reset 表单重置
submit 表单提交
change 下拉列表选中项改变，或文本框内容改变
select 文本被选定
load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）
*/
// 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
// 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
function sayHello() {
alert("hello js");
}
/*
java中也有回调函数机制：
public class MyClass{
public static void main(String[] args){
// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
run();
}
// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
public static void run(){
System.out.println("run...");
}
}
*/
</script>
<!--注册事件的第一种方式：直接在标签中使用事件句柄-->
<!--
以下代码的含义是：
将sayHello函数 注册 到按钮上，等待click事件发生之后，该函数被浏览器调用。
我们称这个函数为回调函数。
-->
<input type="button" value="hello" onclick="sayHello()">
<!--第二种注册事件的方式-->
<input type="button" value="hello2" id="mybtn">
<input type="button" value="hello3" id="mybtn1">
<input type="button" value="hello4" id="mybtn2">
<script type="text/javascript">
//第二种注册事件的方式，是使用纯JS代码完成事件的注册。
function doSome() {
alert("do some!")
}
// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
//通过document对象的getElementById(...)方法(通过id获得元素),返回一个button对象
var btnObj=document.getElementById("mybtn")
// 第二步:给按钮对象的onclick属性赋值(这里通过函数调用的方法)
// 注意:千万别加小括号. doSome()代表返回值，函数会立即执行；doSome代表这个函数
//btnObj.onclick = doSome();--->如果这样写,不按按钮就会出现弹窗
// 这行代码的含义是,将回调函数doSome注册到click事件上.
btnObj.onclick=doSome;
//可以通过匿名函数代替上述函数
var btnObj1=document.getElementById("mybtn1");
btnObj1.onclick=function () {// 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
alert("test...")
}
//一行代码写完第二种方式(以后第二种方式就用这种)
document.getElementById("mybtn2").onclick=function () {
alert("test222222")
}
</script>
</body>
</html>
9.JS代码的执行顺序（load事件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码的执行顺序（load事件）</title>
</head>
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生-->
<body onload="ready()">
<!--
这样写的顺序是错的
页面打开之后，会自上而下执行。
<script type="text/javascript">
第一步:根据id获取节点对象
返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
var btn = document.getElementById("btn");
第二步:给节点对象绑定事件
btn.onclick = function(){
alert("hello js");
}
</script>
<input type="button" value="hello" id="btn" />
-->
<!--
如何解决上述问题？
1.把按钮写在前面
2.使用load事件
load事件发生之后，ready()函数才会执行；
load事件什么时候发生？
页面加载完毕之后(页面所有元素加载完毕之后)，load事件才会发生。
-->
<script type="text/javascript">
function ready(){
document.getElementById("btn").onclick=function () {
alert("tsetqqq");
}
}
</script>
<input type="button" value="hello" id="btn">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码的执行顺序（load事件）</title>
</head>
<body>
<script type="text/javascript">
// 页面加载的过程中,将a函数注册给了load事件
// 页面加载完毕之后,load事件发生了,此时执行回调函数a
// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
// 当id="btn"的节点发生click事件之后,b函数被调用并执行.
window.onload=function () {// 这个回调函数叫做a
document.getElementById("btn").onclick=function () {// 这个回调函数叫做b
alert("tsetqqq");
}
}
</script>
<input type="button" value="hello" id="btn">
</body>
</html>
10.JS代码设置节点的属性（load事件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码设置节点的属性（load事件）</title>
</head>
<body>
<script type="text/javascript">
window.onload=function () {
document.getElementById("btn").onclick=function () {
// 一个节点对象中只要有的属性都可以"."
var mytext=document.getElementById("mytext")
// 一个节点对象中只要有的属性都可以"."
mytext.type="checkbox";
}
}
</script>
<input type="text" id="mytext">
<input type="button" value="将文本框修改为复选框" id="btn">
</body>
</html>
11.JS代码捕捉回车键（keydown事件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS代码捕捉回车键（keydown事件)</title>
</head>
<body>
<script type="text/javascript">
/*
我们的任务是:获取用户所按的键,而键盘上的每个键都有对应的键值,即获取键值
回车键的键值是13;ESC键的键值是27
在浏览器中,当keydown事件发生时,浏览器会将当前事件对象(keydown事件对象)当作形参传到下面函数,来调用下面这个回调函数.
event只是一个形参的名字,写a/b/c...都可以,但为了程序的可读性，写event
usernameElt.onkeydown = function(event){}
当某事件发生时，浏览器会new一个当前事件对象，去调用回调函数(将当前事件对象传给函数的形参)
usernameElt.onkeydown = function(){ alert(111); }--->会new当前事件对象传给回调函数，但没有形参接受
usernameElt.onkeydown = function(a){ alert(a); } [object KeyboardEvent] 这就是当前事件对象
usernameElt.onkeydown = function(a,b){ alert(b); } undefined 因为当前对象传给了a，b没有任何东西
usernameElt.onkeydown = function(a,b,c){ alert(c); } undefined
*/
window.onload=function () {
var useElement=document.getElementById("username");
//获取键值 回车键的键值是13;ESC键的键值是27
//对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
useElement.onkeydown=function (event) {
if(event.keyCode==13){
alert("正在进行验证....");
}
}
}
</script>
<input type="text" id="username">
</body>
</html>
12.JS的void运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的void运算符</title>
</head>
<body>
页面顶部
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--实现一个功能：既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转-->
<!--
<a href="..." οnclick="window.alert('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a>
上述代码中，页面会跳转到...所写的东西
href="" 代表当前路径，会跳到当前页面
要页面不能跳转，就要让...所写的东西消失
方法：使用void()运算符
void运算符的语法：
void(表达式)
运算原理：执行表达式，但不返回任何结果。
但是这样写：href="void(0)" 也不行，会把void(0)当作某个路径跳过去了
要这样写：
href="javascript:void(0)"
其中javascript:作用是告诉浏览器后面是一段JS代码。
以下程序的javascript:是不能省略的。
注意：void(这里写的东西不唯一，但必须要写些东西/表达式)
href="javascript:void(0)"这样写之后，页面就不会跳转了，因为void(表达式) 执行表达式之后不会返回任何结
-->
<a href="javascript:void(0)" onclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转</a>
</body>
</html>
13.JS的控制语句和JS的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的控制语句和JS的数组</title>
</head>
<body>
<script type="text/javascript">
/*
JS的控制语句：
1、if
2、switch
3、while
4、do .. while..
5、for循环
6、break
7、continue
8、for..in语句（了解）
9、with语句（了解）
前7个和java用法相同，只讲第8个和第9个
*/
// 创建JS数组 (JS中数组中元素的类型随意.元素的个数随意，数组大小会自动扩容)
var arr=[false,true,1,2,"abc",3.14];
// 遍历数组for循环
for(var i=0;i<arr.length;i++)
{
alert(arr[i]);
}
// for..in语句第一种用法：用在数组方面
for(var i in arr){
//alert(i); 输出 0 1 2 3 4 5
alert(arr[i]);
}
// for..in语句第二种用法：可以遍历对象的属性
User =function (username,password) {
this.username=username;
this.password=password;
}
var u = new User("张三", "444");
alert(u.username+"，"+u.password);
alert(u["username"]+"，"+u["password"]);
for(var shuXingMing in u){
alert(shuXingMing);
alert(typeof shuXingMing);
//alert(u.shuXingMing); 输出 undefined undefined
alert(u[shuXingMing]);//shuXingMing本就是字符串，不需要加双引号，输出：张三 444
}
//with的用法
with(u){
alert(username + "," + password);
}
</script>
</body>
</html>
<!--
java数组：
public class Test{
public static void main(String[] args){
int[] arr = {1,2,3,4,5,6};
int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};
String[] arr3 = {"a","b","c"};
String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};
}
}
-->
14.JavaScript包括三块：ECMAScript、DOM、BOM
ECMAScript：JavaScript的核心语法
DOM编程：处理网页内容
是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，规范是W3C制定的。
文档对象模型 Document Object Model
BOM编程：是对浏览器本身的操作
浏览器对象模型 Brower Object Model
例如：前进、后退、地址栏、关闭窗口、弹窗等
由于浏览器有不同的厂家制造，所有BOM缺少规范，一般只有一个默认的行业规范
JavaScript包括三大块：
ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程）
HTML文档被当做一棵DOM树来看待。
一个HTML文档中有head和body，head和body里又有被标上不同id的不同标签。
//DOM编程的代表，通过id获取元素对象
var domObj = document.getElementById("id");
BOM：Browser Object Model（浏览器对象模型）
关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等
都是BOM编程。
DOM和BOM的区别和联系？
BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！(网页是在浏览器上的)
<script type="text/javascript">
window.onload = function(){
//其实document.getElementById("btn")是window.document.getElementById("btn")
//省略了window.--->BOM是包括DOM的
var btnElt = document.getElementById("btn");
alert(btnElt); // object HTMLInputElement
}
</script>
<input type="button" id="btn" value="hello" />
15.DOM编程-获取文本框的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
window.onload=function () {
var btnElt=document.getElementById("btn");
btnElt.onclick=function () {
//.value属性可以获取文本框的内容
alert(document.getElementById("username").value);
//.value="..." 还可以修改它的value
document.getElementById("username").value="zahgnsan";
}
}
</script>
<input type="text" id="username">
<input type="button"value="获取text的value" id="btn">
<br>
<script type="text/javascript">
window.onload=function () {
var btnElt1=document.getElementById("btn1");
btnElt1.onclick=function() {
document.getElementById("text1").value=document.getElementById("username").value;
}
}
</script>
<input type="text" id="text1">
<input type="button"value="获取text1的value设置给text2" id="btn1">
<!--blur事件：失去焦点事件-->
<!--οnblur="当失去焦点时执行这段代码" 焦点就是闪烁的光标-->
<!--以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。-->
<!--以下这种也是获取文本框的value-->
<input type="text" onblur="alert(this.value)">
</body>
</html>
16.DOM编程-innerHTML和innerText操作div和span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-innerHTML和innerText操作div和span</title>
<style type="text/css">
#div1{
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<!--
innerText和innerHTML属性有什么区别？
相同点：都是设置元素内部的内容。
不同点：
innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。
-->
<script type="text/javascript">
window.onload=function () {
var btn=document.getElementById("btn");
btn.onclick=function () {
// 第一步:获取div对象
var divEle=document.getElementById("div1");
// 第二步:使用innerHTML属性/innerText属性来设置元素内部的内容
/*
divElt.innerHTML = "写东西/HTML代码--->执行并展示出效果";
divElt.innerText = "不管写的是不是HTML代码，都只当作普通文本，不执行并展示出效果";
*/
//divEle.innerHTML="<font color='red'>用户名不能空 </font>";
divEle.innerText="<font color='red'>用户名不能空 </font>";
}
}
</script>
<input type="button" value="设置div中的内容" id="btn">
<div id="div1"></div>
</body>
</html>
17.DOM编程-关于正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-关于正则表达式</title>
</head>
<body>
<script type="text/javascript">
/*
1.什么是正则表达式，有什么用？
正则表达式：Regular Expression
正则表达式主要用在字符串格式匹配方面。
2.正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持，javascript中也支持。
大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多
的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。
3.正则表达式，对于我们javascript编程来说，掌握哪些内容呢？
第一：常见的正则表达式符号要认识。
第二：简单的正则表达式要会写。
第三: 他人编写的正则表达式要能看懂。
第四：在javascript当中，怎么创建正则表达式对象！（new对象）
第五：在javascript当中，正则表达式对象有哪些方法！（调方法）
第六：要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
4.常见的正则表达式符号？
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
//匹配次数的：
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
//匹配反义词：
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
正则表达式当中的小括号()优先级较高。
[1-9] 表示1到9的任意1个数字（次数是1次）
[A-Za-z0-9] 表示A-Z a-z 0-9中的任意1个字符
[A-Za-z0-9-] 表示A-Z、a-z、0-9、- 以上所有字符中的任意1个字符(A-Z是区间，最后一个-是减号)
| 表示或者
5.简单的正则表达式要会写
QQ号的正则表达式：^[1-9][0-9]{4,}$
6.他人编写的正则表达式要能看懂？
email邮箱地址正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
^
\w+
([-+.]\w+)*
@
\w+
([-.]\w+)*
\.
\w+
([-.]\w+)*
$
7.怎么创建正则表达式对象，怎么调用正则表达式对象的方法？
第一种创建方式：
var regExp = /正则表达式/[flags];
第二种创建方式:使用内置支持类RegExp
var regExp = new RegExp("正则表达式",["flags"]);
关于flags(flags可以有也可以没有)：
g：全局匹配
i：忽略大小写匹配
m：多行搜索匹配（ES规范制定之后才支持m）
当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。
正则表达式对象的test()方法？
true / false = 正则表达式对象.test(用户填写的字符串);
true : 字符串格式匹配成功
false: 字符串格式匹配失败
*/
window.onload=function () {
// 给按钮绑定click
document.getElementById("btn").onclick=function () {
var email=document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(emailRegExp.test(email)){
document.getElementById("emailError").innerText="邮箱地址合法";
}else{
document.getElementById("emailError").innerText="邮箱地址不合法";
}
}
//给文本框绑定focus(获得焦点)
document.getElementById("email").onfocus=function () {
document.getElementById("emailError").innerText="";
}
}
</script>
<input type="text" id="email">
<!--使用span输出提示邮箱是否合法信息-->
<span id="emailError" style="color: red;font-size: 12px"></span>
<br>
<input type="button" value="验证邮箱" id="btn">
</body>
</html>
18.DOM编程-去除字符串前后空白的trim函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-去除字符串前后空白的trim函数</title>
</head>
<body>
<script type="text/javascript">
// 可以使用prototype属性自己对String类扩展一个全新的trim()函数!
String.prototype.trim=function(){
//alert("扩展的trim");
/*使用正则表达式来表示前空白和后空白：
正则表达式写法：/正则表达式/
前空白：/^\s+/
后空白：/\s+$/*/
return this.replace(/^\s+/,"").replace(/\s+$/,"");
/*
this.replace(/^\s+|\s+$/g,"");
只用一次replace:
/正则表达式/flags
flags=g 全局匹配
/^\s+或\s+$/g
*/
}
window.onload=function () {
document.getElementById("btn").onclick=function () {
var username=document.getElementById("username").value;
username=username.trim();
alert(username);
}
}
</script>
<input type="text" id="username">
<input type="button" value="获取用户名" id="btn">
</body>
</html>
19.DOM编程-表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-表单验证</title>
<style type="text/css">
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!--
需求：表单验证
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
-->
<script type="text/javascript">
window.onload=function () {
// 获取username的span标签
var usernameErrorSpan=document.getElementById("usernameError")
var usernameEle= document.getElementById("username");
// 给用户名文本框绑定blur事件
usernameEle.onblur=function () {
var username=usernameEle.value.trim();
if(username.length==0){
// 用户名为空
usernameErrorSpan.innerText="用户名不能为空";
}else{
// 用户名不为空(第八步)
// 继续判断长度[6-14]
if(username.length<6||username.length>14){
usernameErrorSpan.innerText="用户名长度必须在[6-14]之间";
}
else {
// 用户名长度合法
// 继续判断是否含有特殊符号
var regExp=/^[A-Za-z0-9]+$/;
if(regExp.test(username)){
// 用户名最终合法
}else {
usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
}
}
}
/*if(usernameEle.value.trim().test("")){
document.getElementById("usernameError").innerText="111";
}*/
}
// 给username这个文本框绑定获得焦点事件
usernameEle.onfocus=function () {
// 清空非法的value
if(usernameErrorSpan.innerText!=""){
usernameEle.value="";
}
// 清空span
usernameErrorSpan.innerText="";
}
var pwdErrorSpan=document.getElementById("pwdError");
// 获取确认密码框对象
var userpwd2Elt=document.getElementById("userpwd2");
// 绑定blur事件
userpwd2Elt.onblur=function () {
var userpwdElt=document.getElementById("userpwd");
if(userpwdElt.value!=userpwd2Elt.value)
{
pwdErrorSpan.innerText="密码不一致"
}
}
// 绑定focus事件
userpwd2Elt.onfocus=function () {
if(pwdErrorSpan.innerText!=""){
userpwd2Elt.value="";
}
pwdErrorSpan.innerText="";
}
// 给email绑定blur事件
var emailSpan=document.getElementById("emailError");
var emailElt=document.getElementById("email");
emailElt.onblur=function () {
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(emailRegExp.test(emailElt.value)){
// 合法
}else {
emailSpan.innerText="邮箱地址不合法"
}
}
// 给emailElt绑定focus
emailElt.onfocus=function () {
if(emailSpan.innerText!=""){
emailElt.value="";
}
emailSpan.innerText="";
}
//给提交按钮绑定鼠标单击事件
var submitBtnElt=document.getElementById("submitBtn")
submitBtnElt.onclick=function () {
// 触发username的blur userpwd2的blur email的blur
// 不需要人工操作,使用纯JS代码触发事件.
usernameEle.focus();
usernameEle.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
if (usernameErrorSpan.innerText==""&&pwdErrorSpan.innerText==""&&emailSpan.innerText==""){
var userFormElt=document.getElementById("userFrom");
// 可以在这里设置action,也可以不在这里.
userFormElt.action="http://localhost:8080/jd/save";
// 提交表单
userFormElt.submit();
}
}
}
</script>
<form id="userFrom" method="get">
用户名<input type="text" name="username" id="username"><span id="usernameError" ></span><br>
密码<input type="text" name="userpwd" id="userpwd"><br>
确认密码<input type="text" id="userpwd2"><span id="pwdError" ></span><br>
邮箱<input type="text" name="email" id="email"><span id="emailError" ></span><br>
<input type="button" value="注册" id="submitBtn">
<input type="reset" value="重置">
</form>
</body>
</html>
20.DOM编程-复选框的全选和取消全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
window.onload=function () {
var firstChk=document.getElementById("firstChk");
var interest=document.getElementsByName("aihao");
firstChk.onclick=function () {
/*if(firstChk.checked){
for(var i=0;i<interest.length;i++){
interest[i].checked=true;
}
}else {
for(var i=0;i<interest.length;i++){
interest[i].checked=false;
}
}*/
for(var i=0;i<interest.length;i++){
interest[i].checked=firstChk.checked;
}
}
var all=interest.length;
for(var i=0;i<interest.length;i++){
//第一个循环是给每一个复选框都注册click事件和绑定回调函数
interest[i].onclick=function () {
var checkedCount=0;
//第二个循环是判断有几个复选框被选中
for(var i=0;i<interest.length;i++){
if(interest[i].checked)
checkedCount++;
}
firstChk.checked=(all==checkedCount);
}
}
}
</script>
<input type="checkbox" id="firstChk">全选<br>
<input type="checkbox" name="aihao" value="smoke">抽烟<br>
<input type="checkbox" name="aihao" value="drink">喝酒<br>
<input type="checkbox" name="aihao" value="tt">烫头<br>
</body>
</html>
21.DOM编程-获取下拉列表选中项的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-获取下拉列表选中项的value</title>
</head>
<body>
<script type="text/javascript">
window.onload=function () {
var provinceListElt=document.getElementById("provinceList");
provinceListElt.onchange=function () {
alert(provinceListElt.value);
}
}
</script>
<select id="provinceList">
<option value="" >--请选择省份--</option>
<option value="001" selected>河北省</option>
<option value="002">河南省</option>
<option value="003">山东省</option>
<option value="004">山西省</option>
</select>
</body>
</html>
<!--
实际上的功能是：选择地区时，根据下拉列表，先选择省，再选择省里的市...(这个功能目前还实现不了)
省份和市区的关系是：1对多
省份表t_province
id pcode pname
----------------------------
1 001 河北省
2 002 河南省
3 003 山东省
4 004 山西省
市区表t_city
id ccode cname pcode(fk)
----------------------------------------------
1 101 石家庄 001
2 102 保定 001
3 103 邢台 001
4 104 承德 001
5 105 张家口 001
6 106 邯郸 001
7 107 衡水 001
前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001
然后将001发送提交给服务器，服务器底层执行一条SQL语句：
select * from t_city where pcode = '001';
返回一个List集合，List<City> cityList;
cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。
-->
22.1.DOM编程-显示网页时钟和JS内置对象(内置支持类)Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-显示网页时钟和JS内置对象(内置支持类)Date</title>
</head>
<body>
<script type="text/javascript">
//获取系统当前时间
var nowTime=new Date();
//输出系统当前时间
document.write(nowTime);//Sat Feb 19 2022 15:44:03 GMT+0800 (中国标准时间)
//上一种输出格式看不懂,换一种方式,转换成具有本地语言环境的日期格式.
document.write("<br>");
var aa= nowTime.toLocaleString();
document.write(aa);
document.write("<br>");
var t=new Date();
var year=t.getFullYear();
//如果使用getYear(),那么2022年只会出现22年
var month=t.getMonth();// 月份是:0-11
// var dayOfWeek = t.getDay(); 获取的一周的第几天(0-6)
var day=t.getDate();
document.write(year + "年" + (month+1) + "月" + day + "日")
document.write("<br>");
document.write("<br>");
/*
重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
var times = t.getTime();
document.write(times);
一般会使用毫秒数当做时间戳. (timestamp)
*/
var times=t.getTime();
document.write(times);
</script>
<script type="text/javascript">
function displayTime() {
var time=new Date();
var strTime=time.toLocaleString();
document.getElementById("timeDiv").innerHTML=strTime;
}
/*
window.setInterval(code,millisec) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
code:要调用的函数或要执行的代码串。
millisec:周期性执行或调用 code 之间的时间间隔，以毫秒计。
返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
setInterval() 方法会不停地调用函数，直到 window.clearInterval() 被调用或窗口被关闭
*/
function start(){
// 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.
v=window.setInterval("displayTime()",1000);
}
function stop() {
window.clearInterval(v);
}
</script>
<br><br>
<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="停止系统时间" onclick="stop()"/>
<div id="timeDiv"></div>
</body>
</html>
22.2 内置支持类Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM编程-内置支持类Array</title>
</head>
<body>
<script type="text/javascript">
/*// 创建长度为0的数组
var arr = [];
alert(arr.length); 0
// 数据类型随意
var arr2 = [1,2,3,false,"abc",3.14];
alert(arr2.length); 6
// 下标会越界吗
arr2[7] = "test"; // 不会，自动扩容.
document.write("<br>");
// 遍历
for(var i = 0; i < arr2.length; i++){
document.write(arr2[i] + "<br>");
}
// 另一种创建数组的对象的方式
var a = new Array();
alert(a.length); 0
var a2 = new Array(3); // 3表示长度.
alert(a2.length); 3
var a3 = new Array(3,2); //3,2表示数组中的元素 不是长度了
alert(a3.length); // 2*/
var a = [1,2,3,9];
var str=a.join("-");
alert(str);
// 在数组的末尾添加一个元素(数组长度+1)
a.push(10);
alert(a.join("-"));
// 将数组末尾的元素弹出(数组长度-1)
var endElt= a.pop();
alert(endElt);
alert(a.join("-"));
// 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
// push压栈
// pop弹栈
// 反转数组.
a.reverse();
alert(a.join("-"));
</script>
</body>
</html>
23.BOM编程-window对象的open和close方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-window对象的open和close方法</title>
</head>
<body>
<script type="text/javascript">
/*
1、BOM编程中，window对象是顶级对象，代表浏览器窗口。
2、window有open和close方法，可以开启窗口和关闭窗口。
window.open()
window.close()
*/
</script>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com')">
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')">
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank')">
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent')">
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top')">
<input type="button" value="打开表单验证" onclick="window.open('2open.html')"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-window对象的open和close方法</title>
</head>
<body>
<input type="button" value="关闭当前窗口" onclick="window.close()">
</body>
</html>
24.BOM编程-弹出消息框和确认框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-弹出消息框和确认框</title>
</head>
<body>
<script type="text/javascript">
function del() {
if(window.confirm("亲，确认删除数据吗？")){
alert("delete data ....");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框！')">
<input type="button" value="弹出确认框(删除)" onclick="del();">
</body>
</html>
25.BOM编程-将当前窗口设置为顶级窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-将当前窗口设置为顶级窗口</title>
</head>
<body>
<script type="text/javascript">
/*
如果当前这个窗口不是顶级窗口，将当前窗口设置为顶级窗口
004为顶级窗口，004中套了一个005页面，将005设置为顶层窗口
*/
</script>
<!--
如何让004页面中套一个005页面？
使用內联框架iframe
-->
<iframe src="5-child-window.html" width="500px" height="500px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-将当前窗口设置为顶级窗口</title>
</head>
<body>
005页面
<script type="text/javascript">
function setTop() {
//window代表当前窗口,当前浏览器005页面
//window.top就是当前窗口的顶级窗口 004窗口
//window.self表示当前自己这个窗口 005窗口
if(window.top!=window.self){
//将顶级窗口的location地址设置为005地址
window.top.location=window.self.location;
}
}
</script>
<input type="button" value="如果当前窗户不是顶级窗口,将当前窗口设置为顶级窗口" onclick="setTop()">
</body>
</html>
26.BOM编程-window的history对象(类)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-window的history对象(类)</title>
</head>
<body>
<a href="7history对象.html">007页面</a>
<input type="button" value="前进" onclick="window.history.go(1)">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-window的history对象(类)</title>
</head>
<body>
007页面
<!--
演示浏览器上的后退按钮，从007页面退到006页面
两种方法：
window.history.back()
window.history.go(-1)
-->
<input type="button" value="后退" onclick="window.history.back()">
<input type="button" value="后退" onclick="window.history.go(-1)">
</body>
</html>
27.BOM编程-设置浏览器地址栏上的URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaidu() {
/*var locationObj=window.location;
locationObj.href="http://www.baidu.com";*/
window.location.href="http://www.baidu.com";
//href可以省略不写
//window.location = "http://www.baidu.com";
document.location.href="http://www.baidu.com";
//href也可以省略
//document.location = "http://www.baidu.com";
}
</script>
<input type="button" value="百度" onclick="goBaidu()">
</body>
</html>
<!--
总结，有哪些方法可以通过浏览器往服务器发请求？
1、表单form的提交（可以是get，也可以是post）
2、超链接(get请求)<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
3、document.location.href=url;
4、window.location.href=url;
5、window.open("url")
6、直接在浏览器地址栏上输入URL，然后回车(get请求)（这个也可以手动输入，提交数据也可以成为动态的。）
以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->
28.JSON-介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
/*
1、什么是JSON，有什么用？
JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
JSON主要的作用是：一种标准的数据交换格式。
（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
（比如： C语言与Java之间进行数据交换）
2、JSON是一种标准的轻量级的数据交换格式。特点是：
体积小，易解析。
3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是有其优点是：语法严谨。
（通常银行相关的系统之间进行数据交换的话会使用XML。）
4、JSON的语法格式：
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};
*/
// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
var studentObj={
"sno":"110",
"sname":"张三",
"sex":"男"
}
// 访问JSON对象的属性
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var stu = new Student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.sex)
// JSON数组
var students=[
{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130","sname":"王五","sex":"男"}
]
for(var i=0;i<students.length;i++){
var stuOBj=students[i];
alert(stuOBj.sno+","+stuOBj.sname+","+stuOBj.sex);
}
</script>
<input type="button" value="百度" onclick="goBaidu()">
</body>
</html>
<!--XML介绍：students.xml
<?xml version="1.0" encoding="GBK"?>
HTML和XML有一个父亲：SGML（标准通用的标记语言。）
HTML主要做页面展示：所以语法松散。很随意。
XML主要做数据存储和数据描述的：所以语法相当严格。
<students>
<student sno="110">
<sname>张三</sname>
<sex>男</sex>
</student>
<student sno="120">
<sname>李四</sname>
<sex>男</sex>
</student>
<student sno="130">
<sname>王五</sname>
<sex>男</sex>
</student>
</students>-->
29.JSON-复杂一些的JSON对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
var user={
"usercode":110,
"username":"zs",
"sex" : true,
"address" : {//家庭住址address可以是一个JSON对象
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12212121",
},
"aihao" : ["smoke","drink","tt"] //爱好是一个数组
}
// 访问人名以及居住的城市
alert(user.username+"居住在"+user.address.city);
var jsonData={
"total":3,
"students":[
{"name":"zhangsan","birth":"1999-12-01"},
{"name":"lisi","birth":"1981-10-20"},
{"name":"wangwu","birth":"1982-10-20"}
]
}
</script>
</body>
</html>
30.JSON-eval函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程-设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
//window对象的eval函数的作用是：将字符串当做一段JS代码解释并执行。
window.eval("var i=100");
alert("i=" +i);
/*
java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
可以使用eval函数,将json格式的字符串转换成json对象.
*/
//这是java程序给发过来的json格式的"字符串"
var fromJava ="{\"name\":\"zhangsan\",\"password\":\"123\"}"
window.eval("var jsonObj ="+fromJava);
// 访问json对象
alert(jsonObj.name+","+jsonObj.password);
/*
面试题：
在JS当中：[]和{}有什么区别？
[] 是数组。
{} 是JSON。
java中的数组：int[] arr = {1,2,3,4,5};
JS中的数组：var arr = [1,2,3,4,5];
JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};
*/
/* JSON是一种行业内的数据交换格式标准。
JSON在JS中以JS对象的形式存在。*/
var json={
"username":"zahgnsna"
}
// JS中访问json对象的属性
alert(json.username);
alert(json["username"]);
</script>
</body>
</html>
31.JSON-DOM-拼接html的方式，设置table的tbody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON-DOM-拼接html的方式，设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
var data={
"total":4,
"emps" : [//JSON数组,里面使JSON对象
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7361,"ename":"SMITH2","sal":1800.0},
{"empno":7360,"ename":"SMITH3","sal":2800.0},
{"empno":7362,"ename":"SMITH4","sal":3800.0}
]
}
// 希望把数据展示到table当中.
window.onload=function () {
var displayBtnElt =document.getElementById("displayBtn");
displayBtnElt.onclick=function () {
var emps=data.emps;
var html=""
for( var i=0;i<emps.length;i++){
var emp=emps[i];
html+="<tr>";
html+="<td>"+emp.empno+"</td>";
html+="<td>"+emp.ename+"</td>";
html+="<td>"+emp.sal+"</td>";
}
document.getElementById("emptbody").innerHTML=html;
document.getElementById("count").innerHTML=data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn">
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="emptbody">
<!-- <tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>-->
</tbody>
</table>
总计<span id="count">0</span>条数
</body>
</html>
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
