【】1、html的简介【HTML】
1.什么是html？HyperText Mark-up Language ，超文本标记型语言，是网页的语言。
* 超文本：超出文本的范畴
* 标记：理解为标签，html中所有的操作都是通过标签来实现的
* html是做网页。
2.html程序遵循一定的规范
1）html程序以<html>开始，同时</html>结束
* 比如创建java里面方法，public void add() { 方法体 }
2）html程序包含两部分内容：head和body
* <html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
3）html的标签有开始标签，同时也要结束标签
4）html的代码不区分大小写的
5）有些标签没有结束标签，需要在标签内结束 <br/>
* 实现换行的操作，使用标签实现的<br>, 没有</br>
3.html的操作思想
* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。
【】2、字体标签【HTML】
1.文字标签 <font>
* <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
** 常用两个属性
1）color：设置文字的颜色(有三种表示方式)
第一种：直接使用英文单词进行表示 red green yellow......
第二种：使用十六进制数字进行表示 #ffffff，
第三种：使用RGB颜色值配置 rgb(255,0,0)
2）size：设置文字的大小
【注意】文字大小值范围：1-7，如果值超过了7，使用还是7的效果
2.标题标签
* <h1></h1> <h2></h2>.......<h6></h6>
* 标题标签可以自动换行，从h1到h6字体的大小依次变小的
3.水平线标签
* <hr/>
* 属性
1）color：表示设置水平线颜色
2）size：设置水平线的粗细，范围1-7
4.注释标签
* 在java里面有几类注释？三类注释:单行注释，多行注释，文档注释
* 在html中注释 <!-- 注释的内容 -->
5.特殊字符
* 实现空格的操作
* 小于号(<):<
* 大于号(>):>
【】3、列表标签【HTML】
1.定义列表
* 首先需要使用 <dl></dl>: 定义列表的范围
* 之后在dl标签里面，<dt></dt>: 定义上层内容
* 在dl标签里面， <dd></dd>: 定义下层内容
2.有序列表标签
* 使用 <ol></ol>: 定义有序列表的范围
** ol标签上面有属性 type：排序的方式
** type属性里面的值 1(默认) a i
* 之后在ol标签里面：<li></li>: 封装具体的内容
3.无序列表标签
* 首先使用标签 <ul></ul>: 定义无序列表的范围
** ul标签上面有属性 type：设置特殊符号
** type属性里面的值 disc(默认) circle square
disc(黑色实心圆) circle(空心圆) square(黑色实心正方形)
* 之后在ul标签里面： <li></li>: 封装具体的内容
【】4、图形标签【HTML】
1.在html中显示图片
2.标签：<img src="图片的路径名称"/>
3.属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
* 鼠标移动到图片上面，稍等片刻出现文字,如果图片找不到，显示alt的内容,这个属性在某些浏览器不能显示的
【】5、超链接标签【HTML】
1.什么是超链接：点击打开新的内容
2.标签：<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
3.属性
* href：链接到地址
* target：超链接的打开方式
* 在默认的情况下，打开方式在当前的页面打开
* target里面的值：_self,当前页面打开； _blank，在新标签页打开
【】6、表格标签（重点）【HTML】
操作技巧：首先数表格里面有多少行，数每行里面有多少个单元格
1.什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
2.标签
1）首先定义表格的范围：<table></table>
* 属性
* border：设置表格线
* bordercolor：设置表格线的颜色
* cellspacing: 设置单元格之间的距离
* cellpadding: 设置文字和单元格之间的距离
* width: 设置表格的宽度
* height：设置表格的高度
2）在table标签里面表示行： <tr></tr>
** 属性
*** align：设置对齐方式，值 left center right
3）在tr标签里面表示列： <td></td>
** 属性
*** align：设置某个单元格对齐方式
4）在tr标签里面也可以表示单元格：<th></th>
** 实现居中和加粗的效果
3.合并单元格
* 是在td标签上面进行的操作，使用两个属性
3.1）rowspan：跨行
* <th rowspan="4"></th>表示跨4行
3.2）colspan：跨列
* <td colspan="3"></td> 表示跨3列
4.标题标签：<caption>标题内容</caption>
【】7、表单标签（重点）【HTML】
1.什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
2.使用表单标签实现数据提交到服务器上这个过程
3.form 标签：如果写表单，首先定义表单的范围
1）属性
* action：提交的服务器的地址
* method：表单的提交方式（有很多种，常见的有两种 get和post）
* 代码
<form action="hello.html" method="get"></form>
2）get和post提交，在默认情况下，提交方式是get提交
* get提交方式会在地址栏携带数据，安全性很差
* post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）
4.输入项：可以输入内容或者选择内容的地方
1）要求1：输入项里面必须要有name属性
要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值
2）输入项需要写到form标签里面
3）大部分输入项是通过标签input进行封装操作的
* <input type="输入项的类型"/>
3.1）第一个：普通输入项 <input type="text"/>
3.2）第二个：密码输入项 <input type="password"/>
3.3）第三个：单选输入项 <input type="radio"/>
* 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
* 设置默认选中，使用属性 checked="checked"
3.4）第四个：复选输入项 <input type="checkbox"/>
* 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
* 设置默认选中，使用属性 checked="checked"
3.5）第五个：文件输入项，上传文件的。<input type="file"/>
3.6）第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
<input type="hidden"/>
3.7）第七个：普通按钮 <input type="button"/>，一般与JS一起使用
* 可以写value属性，设置输入项的默认值,在网上会显示按钮的名称
【注意】密码输入项中需要显示提示时可用<input type="password" placeholder="请输入密码"/>
4）下面的两个输入项不是使用input标签进行封装的
4.8）第八个：下拉选择输入项
* <select>
<option>AAAA</option>
<option>BBBB</option>
</select>
* 使用属性 selected="selected" 默认选中
4.9）第九个：文本域
* <textarea cols="10" rows="5"></textarea>
5.提交按钮和其他的按钮
* 提交按钮： <input type="submit"/>
* 属性 value：设置提交按钮显示的内容
* 重置按钮：<input type="reset"/>
* 属性 value：设置重置按钮显示的内容
* 不是做清空表单输入项的操作，使表单输入项回到初始状态
* 使用图片进行提交：<input type="image" src="图片路径"/>
【】8、其他的标签的使用【HTML】
1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
2）div : 自动换行
span：在一行进行显示
【】9、案例：注册页面【HTML】
1.如果单元格里面没有内容，使用占位符替代（使用空格 ）
2.想要一个超链接没有效果，在href属性值写成#
--------
day01
【CSS】
【】1、css的简介【CSS】
1.什么是css？层叠样式表
* 样式表：有很多的属性和属性值，来设置内容样式
* 层叠：一层一层的，样式的优先级。
* 优先级: 最终以谁的样式为准
* 使用css目的是：把网页的内容和样式进行分离，利用代码的维护。
* 想要使用css，不能单独使用，要和html结合使用
【】2、css和html的结合方式(四种结合方式)【CSS】
1.第一种：使用html标签里面的属性 style="css的代码"
* 代码 <div style="background-color:red;color:blue;">
2.第二种：使用html的标签
* <style type="text/css">
css的代码;
</style>
3.第三种：使用html标签实现 link，写在head里面(开发中使用)
* 首先创建css文件，在css文件里面写css代码,在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
4.第四种：使用html的style标签，在标签里面使用语句样式操作(一般不用该种方式)
* 首先创建css文件，在css文件里面写css代码
* 写style标签，在标签里面 @import url(css路径);
【】3、css的选择器【CSS】
1.css优先级
* 在一般情况下，优先级是后加载的优先级高
2.格式规范： 属性名称1:属性值1;属性名称2:属性值2;
3.选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
* css有三个基本选择
1）标签选择器
** 使用标签名称作为选择器
div {
background-color: red;
}
2）class选择器
** 每个html标签上面都有一个属性class，通过设置class属性的值
** 代码
.haha {
background-color:red;
}
3）id选择器
** 每个html标签都有一个属性id，通过设置id的属性值
** 代码
#hehe {
background-color:green;
}
4.选择器的优先级
* style > id选择器 > class选择器 > 标签选择器
【注意】一个html文档ID属性值必须唯一
【】4、css的扩展选择器【CSS】
1.关联选择器
* 设置嵌套标签的样式
* 代码
div p {//表示对div标签下的p标签进行设置
background-color:red;
}
2.组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {//表示同时对div标签和p标签进行设置
background-color:green;
}
3.伪元素选择器
* 比如超链接为例，
* 状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited
------------------------------------------------------------------------------
day02
【JavaScript基础】
【】1、JavaScript的简介【JavaScript基础】
1.什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端
2.JavaScript的特点（三个）
第一个：交互性
第二个：安全性
** JavaScript不能访问本地硬盘里面的文件
第三个：跨平台性
** 在java里面跨平台，通过虚拟机实现的
** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript
3.JavaScript由三部分组成
1）第一部分：ECMAScript
** 由ECMA组织制定语句，语法
2）第二部分：BOM
** broswer object model：浏览器对象模型
3）第三部分：DOM
** document object model：文档对象模型
【】2、js和html的结合方式【JavaScript基础】
* 有两种结合方式
1. 第一种：使用html中的标签 <script type="text/javascript"> js代码 </script>
2. 第二种：使用html的标签，引入外部的js文件【项目开发常用方式】
<script type="text/javascript" src="js文件的路径"></script>
* 使用第二种方式的时候有两点注意
注意一：不要在script标签里面写js代码了，不会执行
注意二：结束script标签 </script>，不要在标签内结束
* js的注释有两种：单行注释和多行注释
//单行注释
/*
多行注释
*/
【】3、js的变量声明和数据类型【JavaScript基础】
1.在js里面如何声明变量，都是使用一个关键字var
2.js的原始类型
* 在java里面有基本的数据类型？八个
* js的原始类型有五个
1）string：字符串类型
2）number：数字类型
3）boolean：布尔类型 true false
4）null
* null是特殊的引用类型
* 表示对象引用为空
5）undefined
* 表示定义了一个变量，但是没有赋值
* var a;没有赋值
3.typeof(变量的名称): 查看当前变量的类型
* alert(typeof(a));
【】4、js的引用类型和类型转换【JavaScript基础】
1.引用对象
* Object 对象：所有对象都由这个对象继承而来
* Boolean 对象：Boolean 原始类型的引用类型
* Number 对象： Number 原始类型的引用类型
2.类型转换
* 转换成字符串
* 转换成数字：parseInt() 和 parseFloat()
* 强制类型转换
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串；
【】5、js的语句【JavaScript基础】
1.在java里面语句：if 、 switch 、while do-while for
* java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的
2.使用document.write()向页面输出内容
* 可以向页面输出变量
* 可以向页面直接输出html代码
** document.write(i);
document.write("<br/>");
【】6、js的运算符【JavaScript基础】
1.算术运算符
+ - * /....
2.赋值运算符
+=含义： x+=y 相当于 x=x+y
3.比较运算符
==：表示条件的判断，如果是=，表示赋值
4.逻辑运算符
&& || !
5.js的运算符和java不同的内容
1）js里面不区分整数和小数
* 比如 var a = 123/1000*1000,如果在java里面结果是 0
* js里面的结果：123
2）字符串的相加和相减操作
* 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN
* //字符串的相加和相减
3）boolean类型相加和相减的操作
* 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算
4）：==和===区别
* ==比较的是值
* === 比较的是值和类型
【补充】
null == undefined，值为true
null === undefined，值为false，因为类型不同
【注意】区分 undefined 和 null
undefined：变量定义了未初始化，即访问对象不存在属性
null：访问的对象不存在
【】8、js的数组【JavaScript基础】
1.什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
2.js里面定义数组的方式
1）第一个：var arr1 = [];
2）第二个：var arr2 = ["10",10,true]; //可以写任意的类型
3）第三种：var arr3 = new Array(3);
** 表示定义数组名称是arr3，数组的长度是3
或var arr5 = new Array(); 表示数组长度不确定
4）第四种：var arr4 = new Array(4,5,6);
** 表示定义数组名称是arr4，数组里面的值4 5 6
3.数组里面的属性：查看数组的长度 length
【注意】
* 数组的长度：在js里面数组的长度可变的
** 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串
【】9、js的string对象【JavaScript基础】
1.字符串对象
* 创建字符串：var a = "abc"; var b = new String("bb");
2.属性 length 字符串的长度
3.方法
1）第一类：与html相关的方法（设置字符串的样式的方法）
* bold() 使用粗体显示字符串。
** document.write(a.bold());
* fontcolor() 使用指定的颜色来显示字符串。
** document.write(a.fontcolor("red"));
* fontsize() 使用指定的尺寸来显示字符串。
** document.write(a.fontsize(7));
* link() 将字符串显示为链接
** document.write(a.link("04-练习99乘法表.html"));
2）第二类：与java相似的方法（在java里面也有类似的方法）
* charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""
* concat() 连接字符串
* indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1
* split() 把字符串分割为字符串数组
* substr() 从起始索引号提取字符串中指定数目的字符。
* substring() 提取字符串中两个指定的索引号之间的字符
** var str4 = "MARYJACKLUCY";
document.write(str4.substr(2,3));
//RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值
document.write(str4.substring(2,3));
//R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)
【】10、js的Array对象【JavaScript基础】
1.创建数组
2.属性
* length 设置或返回数组中元素的数目
3.方法
* concat()：连接数组
* join()：把数组根据指定字符进行分隔（返回一个字符串，即将数组元素用指定的字符连接成一个字符串）
* pop() 删除并返回数组的最后一个元素
* push() 向数组的末尾添加元素，并返回新的长度
【注意】向数组里面使用push方法添加一个数组时，会将数组当成一个元素添加
*reverse() 颠倒数组中元素的顺序
【】11、js的Math对象【JavaScript基础】
1.进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用
2.方法
* ceil(x) 对一个数进行上舍入。
* floor(x) 对一个数进行下舍入。
* round(x) 把一个数四舍五入为最接近的整数
* random() 返回 0 ~ 1 之间的随机数
【】12、js的Date对象【JavaScript基础】
1.进行日期操作的对象
2.使用Date对象，new Date();
3.方法
* toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
* 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份
* 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
** document.write(date.getMonth()+1);
* 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
** 如果当前的星期是星期日，返回的是0
* 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
* 得到当前的小时 getHours()
* 得到当前的分 getMinutes()
* 得到当前的秒 getSeconds()
* 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数，一般用于解决浏览器的缓存问题
【】13、js的RegRxp对象【JavaScript基础】
1.RegExp 对象表示正则表达式
2.正则表达式：规定字符串出现的规范
3.使用：new RegExp("正则表达式")
4.方法：
* test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。
【】14、js的bom对象【JavaScript基础】
1.script标签放置位置
* 建议放到</body>后面
* html的解析是从上到下进行解析的，如果在head里面就获取输入项里面的值，因为还没有解析到
输入项，所以肯定得不到值。
2.什么是bom:浏览器对象模型
1）第一个：navigator
* 浏览器的信息
2）第二个：screen
* 屏幕的信息
3）第三个: history
* 访问地址的历史信息
history.go(-1)返回上一页；history.go(1)下一页
4）第四个: location
* 设置url
* href 设置或返回完整的 URL
【备注】location.href一般用于页面跳转
5）第五个: window（***）
* window对象是窗口对象，是顶层对象
* 方法
* setInterval("需要执行的js代码",毫秒数):在指定的时间内，重复执行js代码(即，每隔一段时间(毫秒值)就执行一次代码(需要执行的js代码))，返回一个id值，给clearInterval(id)使用
** 有两个参数:第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数）
** 代码
setInterval("alert('setinterval');",3000);
* setTimeout("执行的js代码",毫秒数) :在指定的时间之后，执行js代码，执行一次；，返回一个id值，给clearTimeout(id)使用
** 有两个参数: 第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数）
** 代码
setTimeout("alert('settimeout');",3000);
* clearInterval(id) 取消由 setInterval() 设置的 timeout。
* clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。
【备注】setTimeout()和location.href一起使用，可以实现网页延时跳转，例setTimeout("location.href='www.baidu.com'",2000)会在2秒后跳转到百度网页
【】15、js的全局变量和局部变量【JavaScript基础】
* 回顾：在java里面成员变量
1.全局变量
* 在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用。（要注意上下顺序）
2.局部变量
* 在js的方法里面定义一个变量，这个变量只能在方法里面使用。
3.浏览器里面自带的调试工具
* ie浏览器：点击键盘上f12，在页面下面出现一个条，点击控制台，出现调试的信息。
* 火狐浏览器：点击键盘上f12，在下面出现一个条，点击控制台，出现调试的信息。
** 火狐浏览器里面需要安装firebug插件
* 谷歌浏览器：点击键盘上的f12,在下面出现一个条，点击console,出现调试的信息。
【备注】//全局变量的第二种声明（使用）方式（了解）
function fun(){
param = "abc11111";
}
fun();
alert(param);
【】16、js的全局函数【JavaScript基础】
1.不属于任何对象，可以使函数
2.主要的函数
* eval(): 把字符串当成js代码执行
* isNaN() 检查某个值是否是数字（is Not a Number）
** 如果是数字返回 false,如果不是一个数字返回 true。
* parseInt() 解析一个字符串并返回一个整数
* encodeURI() 把字符串编码为 URI
* decodeURI() 解码某个编码的 URI
** var decodestr2 = decodeURI(encodestr2);
【备注】经过实际开发经验证明，前台有的时候需要编码两次，后台才能正常解码，encodeURI(encodeURI())
---------------------------------------------------------------------------------
day03
【JavaScript高级】
【】1、js的函数【JavaScript高级】
1.在java里面定义方法
public void/int 方法名称(参数列表) {
方法体和返回值;
}
2.在js里面定义函数有三种方式
1)第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
* 注意一：参数列表，不需要写类型（var），直接写参数名称
* 注意二：返回值，根据实际需要可以有也可以没有
2)第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; }
* 代码
var test1 = function(a,b) {
return a+b;
}
//调用函数
alert(test1(3,4));
3)第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）
* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")
【】2、js的函数的重载【JavaScript高级】
1.在java里面存在重载，方法名称相同，参数列表不同
2.js里面是否存在函数的重载？
第一，在js不存在重载
第二，可以使用js函数里面arguments数组模拟重载的效果
（3）模拟重载的效果
* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果
* 代码
//模拟重载的效果
function add1() {
//模拟重载的效果（有几个参数，实现这几个参数的相加）
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
//调用
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));
【注意】js里不存在函数重载，但可以内置的arguments数组模拟重载的效果；
js里如果有同名的函数名，后面的函数会覆盖前面的函数（即，同名的函数名，后加载的函数会覆盖先加载函数）
【】3、js的事件【JavaScript高级】
1.什么是事件：在html的元素里面可以触发事件调用js里面的函数
2.在html的标签上面如何使用事件
* 有三种方式
1）第一种：使用事件属性调用js方法
<input type="button" value="第一种方式" οnclick="add1();"/>
2）第二种：首先得到要绑定的标签，在使用事件的属性
document.getElementById("buttonid").onclick = add1;
【注意】函数名后不能不能填()，否则函数会立即被执行
3）第三种：首先得到要绑定的标签，写js的代码(匿名函数方式)
document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};
【注意】工作中一般使用第一种和第三种；第一种方式可以传递参数，第三种方式(匿名函数方式)不能传递参数，一般用于表单提交
【】4、js的常用的事件【JavaScript高级】
1.onload事件和onclick事件
* onload：html页面在加载时候触发事件，调用响应的js方法
【注意】onload事件一般写在body标签里，页面加载完成后时就执行
** <body οnlοad="test1();">
* onclick：鼠标点击事件
** <input type="text" οnclick="test2();"/>
2.onfocus事件和onblur事件
* onfocus：获取焦点
* onblur：失去焦点
3.onmouseover 鼠标被移到某元素之上
4.onmouseout 鼠标从某元素移开
5.onkeypress：点击键盘上面的某个键，调用方法
* <input type="text" id="textid1" οnkeypress="key1(event);"/>
【注意】οnkeypress="key1(event);"点击键盘事件必须要传递参数，event为事件对象
【】5、js的dom对象【JavaScript高级】
1.什么dom：document object model：文档对象模型
* 文档：指的是标记型文档（html、xml）
* 对象：在对象里面有属性和方法
** 使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作
* 要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例）
** html中包含 标签、属性、文本内容
2.使用dom解析html
* 解析过程：根据html的层级结构在内存中分配一个树形结构
* document对象，代表整个文档
* element对象，代表标签
* attribute属性对象
* text文本对象
* Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找
3.DHTML的简介
* 不是一种技术，是很多技术的简称。
* 包含的技术：
** html：封装数据
** css：使用属性和属性值修改数据的样式
** ECMAScript：语句和语法
** DOM：对标记型文档进行操作
【】6、document对象【JavaScript高级】
1.document对象代表整个文档
2.方法
1）write()，向页面输出内容，可以输出html代码
* document.write("aa");
document.write("<hr/>");
2）getElementById(): 获取标签对象，通过标签的id值进行获取，返回一个字符串
* var input1 = document.getElementById("textid");
3）getElementsByName(): 根据标签里面name属性的值得到标签对象，返回数组（标签对象数组）
var inputs1 = document.getElementsByName("name1");
* 如果只有一个标签，使用getElementsByName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值;如果有多个标签需要遍历取值
4）getElementsByTagName()：根据标签的名称获取标签对象，返回数组
* var inputs3 = document.getElementsByTagName("input");
* 如果只有一个标签，使用getElementsByTagName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值
var arr = document.getElementsByTagName("input");
【】7、innerHTML属性【JavaScript高级】
1.innerHTML属性不是dom里面属性
2.实现什么功能
1）第一，获取标签里面的文本内容
** var span1 = document.getElementById("spanid");
alert(span1.innerHTML);
2）第二，向标签里面设置内容（可以写html代码）
** var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
【注意】innerHTML的写的功能（标签名.innerHTML = ""）会将原来的内容覆盖
【】【JavaScript高级】
8、练习：动态生成表格
【】9、表单的提交【JavaScript高级】
1.在html中写form标签，提交方式有三种方式:
1.1）第一种方式：在form标签里面，写提交按钮 <input type="submit"/>
<input type="submit" value="提交"/>
1.2）第二种方式：在form标签里面，写普通按钮并使用事件onclick <input type="button" οnclick="toSubmit()"/>, 再用<form>标签对象调用.submit()；
1.3）第三种方式：使用超链接提交数据
* <a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
* <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>
【】10、表单校验【JavaScript高级】
1.如何进行表单的校验
1）使用submit进行表单提交，进行表单校验
* 使用事件 onsubmit事件，写在form标签里面
<form method="get" οnsubmit="return checkForm();">
* 如果return返回的值true可以提交表单，如果返回false不会提交表单
2）使用button进行表单校验
* 在form标签里面，写普通按钮并使用事件onclick <input type="button" οnclick="toSubmit()"/>, 再用<form>标签对象调用.submit()；
【】11、json的简介【JavaScript高级】
1.JavaScript Object Notation，JavaScript 对象表示法。json是数据的交换格式，比xml更加轻巧。
json是js的原生的格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。
2.json的两种数据格式
* json有数据格式
1）第一种：json的对象的格式
* 写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
** 类似于key-value形式
** 名称和值之间使用冒号隔开，多个值之间使用逗号隔开
** json数据的名称是字符串的类型，json数据的值的类型可以是 string, number, object, array, true, false, null类型
** 具体数据的格式 {"name":"zhangsan","age":20,"addr":"nanjing"}
2）第二种：json的数组的格式
* 写法 [json对象1,json对象2........]
** 在数组里面有多个json对象，多个json对象之间使用逗号进行隔开
** 具体数据的格式 [{"name":"lucy","age":20},{"name":"mary","age":30}]
3.可以使用json的这两种格式组成更加复杂json的格式
* 复杂的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}
【】12、js解析json【JavaScript高级】
1.js解析json的对象的数据格式
* 通过json对象数据格式里面的name的名称得到name对应的值
2.js解析json的数组的数据格式
* 遍历json数组，根据下标得到json数组里面每个json对象，解析每个json对象，根据json对象的数据的名称得到值
1.什么是html？HyperText Mark-up Language ，超文本标记型语言，是网页的语言。
* 超文本：超出文本的范畴
* 标记：理解为标签，html中所有的操作都是通过标签来实现的
* html是做网页。
2.html程序遵循一定的规范
1）html程序以<html>开始，同时</html>结束
* 比如创建java里面方法，public void add() { 方法体 }
2）html程序包含两部分内容：head和body
* <html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
3）html的标签有开始标签，同时也要结束标签
4）html的代码不区分大小写的
5）有些标签没有结束标签，需要在标签内结束 <br/>
* 实现换行的操作，使用标签实现的<br>, 没有</br>
3.html的操作思想
* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。
【】2、字体标签【HTML】
1.文字标签 <font>
* <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
** 常用两个属性
1）color：设置文字的颜色(有三种表示方式)
第一种：直接使用英文单词进行表示 red green yellow......
第二种：使用十六进制数字进行表示 #ffffff，
第三种：使用RGB颜色值配置 rgb(255,0,0)
2）size：设置文字的大小
【注意】文字大小值范围：1-7，如果值超过了7，使用还是7的效果
2.标题标签
* <h1></h1> <h2></h2>.......<h6></h6>
* 标题标签可以自动换行，从h1到h6字体的大小依次变小的
3.水平线标签
* <hr/>
* 属性
1）color：表示设置水平线颜色
2）size：设置水平线的粗细，范围1-7
4.注释标签
* 在java里面有几类注释？三类注释:单行注释，多行注释，文档注释
* 在html中注释 <!-- 注释的内容 -->
5.特殊字符
* 实现空格的操作
* 小于号(<):<
* 大于号(>):>
【】3、列表标签【HTML】
1.定义列表
* 首先需要使用 <dl></dl>: 定义列表的范围
* 之后在dl标签里面，<dt></dt>: 定义上层内容
* 在dl标签里面， <dd></dd>: 定义下层内容
2.有序列表标签
* 使用 <ol></ol>: 定义有序列表的范围
** ol标签上面有属性 type：排序的方式
** type属性里面的值 1(默认) a i
* 之后在ol标签里面：<li></li>: 封装具体的内容
3.无序列表标签
* 首先使用标签 <ul></ul>: 定义无序列表的范围
** ul标签上面有属性 type：设置特殊符号
** type属性里面的值 disc(默认) circle square
disc(黑色实心圆) circle(空心圆) square(黑色实心正方形)
* 之后在ul标签里面： <li></li>: 封装具体的内容
【】4、图形标签【HTML】
1.在html中显示图片
2.标签：<img src="图片的路径名称"/>
3.属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
* 鼠标移动到图片上面，稍等片刻出现文字,如果图片找不到，显示alt的内容,这个属性在某些浏览器不能显示的
【】5、超链接标签【HTML】
1.什么是超链接：点击打开新的内容
2.标签：<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
3.属性
* href：链接到地址
* target：超链接的打开方式
* 在默认的情况下，打开方式在当前的页面打开
* target里面的值：_self,当前页面打开； _blank，在新标签页打开
【】6、表格标签（重点）【HTML】
操作技巧：首先数表格里面有多少行，数每行里面有多少个单元格
1.什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
2.标签
1）首先定义表格的范围：<table></table>
* 属性
* border：设置表格线
* bordercolor：设置表格线的颜色
* cellspacing: 设置单元格之间的距离
* cellpadding: 设置文字和单元格之间的距离
* width: 设置表格的宽度
* height：设置表格的高度
2）在table标签里面表示行： <tr></tr>
** 属性
*** align：设置对齐方式，值 left center right
3）在tr标签里面表示列： <td></td>
** 属性
*** align：设置某个单元格对齐方式
4）在tr标签里面也可以表示单元格：<th></th>
** 实现居中和加粗的效果
3.合并单元格
* 是在td标签上面进行的操作，使用两个属性
3.1）rowspan：跨行
* <th rowspan="4"></th>表示跨4行
3.2）colspan：跨列
* <td colspan="3"></td> 表示跨3列
4.标题标签：<caption>标题内容</caption>
【】7、表单标签（重点）【HTML】
1.什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
2.使用表单标签实现数据提交到服务器上这个过程
3.form 标签：如果写表单，首先定义表单的范围
1）属性
* action：提交的服务器的地址
* method：表单的提交方式（有很多种，常见的有两种 get和post）
* 代码
<form action="hello.html" method="get"></form>
2）get和post提交，在默认情况下，提交方式是get提交
* get提交方式会在地址栏携带数据，安全性很差
* post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）
4.输入项：可以输入内容或者选择内容的地方
1）要求1：输入项里面必须要有name属性
要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值
2）输入项需要写到form标签里面
3）大部分输入项是通过标签input进行封装操作的
* <input type="输入项的类型"/>
3.1）第一个：普通输入项 <input type="text"/>
3.2）第二个：密码输入项 <input type="password"/>
3.3）第三个：单选输入项 <input type="radio"/>
* 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
* 设置默认选中，使用属性 checked="checked"
3.4）第四个：复选输入项 <input type="checkbox"/>
* 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
* 设置默认选中，使用属性 checked="checked"
3.5）第五个：文件输入项，上传文件的。<input type="file"/>
3.6）第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
<input type="hidden"/>
3.7）第七个：普通按钮 <input type="button"/>，一般与JS一起使用
* 可以写value属性，设置输入项的默认值,在网上会显示按钮的名称
【注意】密码输入项中需要显示提示时可用<input type="password" placeholder="请输入密码"/>
4）下面的两个输入项不是使用input标签进行封装的
4.8）第八个：下拉选择输入项
* <select>
<option>AAAA</option>
<option>BBBB</option>
</select>
* 使用属性 selected="selected" 默认选中
4.9）第九个：文本域
* <textarea cols="10" rows="5"></textarea>
5.提交按钮和其他的按钮
* 提交按钮： <input type="submit"/>
* 属性 value：设置提交按钮显示的内容
* 重置按钮：<input type="reset"/>
* 属性 value：设置重置按钮显示的内容
* 不是做清空表单输入项的操作，使表单输入项回到初始状态
* 使用图片进行提交：<input type="image" src="图片路径"/>
【】8、其他的标签的使用【HTML】
1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
2）div : 自动换行
span：在一行进行显示
【】9、案例：注册页面【HTML】
1.如果单元格里面没有内容，使用占位符替代（使用空格 ）
2.想要一个超链接没有效果，在href属性值写成#
--------
day01
【CSS】
【】1、css的简介【CSS】
1.什么是css？层叠样式表
* 样式表：有很多的属性和属性值，来设置内容样式
* 层叠：一层一层的，样式的优先级。
* 优先级: 最终以谁的样式为准
* 使用css目的是：把网页的内容和样式进行分离，利用代码的维护。
* 想要使用css，不能单独使用，要和html结合使用
【】2、css和html的结合方式(四种结合方式)【CSS】
1.第一种：使用html标签里面的属性 style="css的代码"
* 代码 <div style="background-color:red;color:blue;">
2.第二种：使用html的标签
* <style type="text/css">
css的代码;
</style>
3.第三种：使用html标签实现 link，写在head里面(开发中使用)
* 首先创建css文件，在css文件里面写css代码,在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
4.第四种：使用html的style标签，在标签里面使用语句样式操作(一般不用该种方式)
* 首先创建css文件，在css文件里面写css代码
* 写style标签，在标签里面 @import url(css路径);
【】3、css的选择器【CSS】
1.css优先级
* 在一般情况下，优先级是后加载的优先级高
2.格式规范： 属性名称1:属性值1;属性名称2:属性值2;
3.选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
* css有三个基本选择
1）标签选择器
** 使用标签名称作为选择器
div {
background-color: red;
}
2）class选择器
** 每个html标签上面都有一个属性class，通过设置class属性的值
** 代码
.haha {
background-color:red;
}
3）id选择器
** 每个html标签都有一个属性id，通过设置id的属性值
** 代码
#hehe {
background-color:green;
}
4.选择器的优先级
* style > id选择器 > class选择器 > 标签选择器
【注意】一个html文档ID属性值必须唯一
【】4、css的扩展选择器【CSS】
1.关联选择器
* 设置嵌套标签的样式
* 代码
div p {//表示对div标签下的p标签进行设置
background-color:red;
}
2.组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {//表示同时对div标签和p标签进行设置
background-color:green;
}
3.伪元素选择器
* 比如超链接为例，
* 状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited
------------------------------------------------------------------------------
day02
【JavaScript基础】
【】1、JavaScript的简介【JavaScript基础】
1.什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端
2.JavaScript的特点（三个）
第一个：交互性
第二个：安全性
** JavaScript不能访问本地硬盘里面的文件
第三个：跨平台性
** 在java里面跨平台，通过虚拟机实现的
** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript
3.JavaScript由三部分组成
1）第一部分：ECMAScript
** 由ECMA组织制定语句，语法
2）第二部分：BOM
** broswer object model：浏览器对象模型
3）第三部分：DOM
** document object model：文档对象模型
【】2、js和html的结合方式【JavaScript基础】
* 有两种结合方式
1. 第一种：使用html中的标签 <script type="text/javascript"> js代码 </script>
2. 第二种：使用html的标签，引入外部的js文件【项目开发常用方式】
<script type="text/javascript" src="js文件的路径"></script>
* 使用第二种方式的时候有两点注意
注意一：不要在script标签里面写js代码了，不会执行
注意二：结束script标签 </script>，不要在标签内结束
* js的注释有两种：单行注释和多行注释
//单行注释
/*
多行注释
*/
【】3、js的变量声明和数据类型【JavaScript基础】
1.在js里面如何声明变量，都是使用一个关键字var
2.js的原始类型
* 在java里面有基本的数据类型？八个
* js的原始类型有五个
1）string：字符串类型
2）number：数字类型
3）boolean：布尔类型 true false
4）null
* null是特殊的引用类型
* 表示对象引用为空
5）undefined
* 表示定义了一个变量，但是没有赋值
* var a;没有赋值
3.typeof(变量的名称): 查看当前变量的类型
* alert(typeof(a));
【】4、js的引用类型和类型转换【JavaScript基础】
1.引用对象
* Object 对象：所有对象都由这个对象继承而来
* Boolean 对象：Boolean 原始类型的引用类型
* Number 对象： Number 原始类型的引用类型
2.类型转换
* 转换成字符串
* 转换成数字：parseInt() 和 parseFloat()
* 强制类型转换
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串；
【】5、js的语句【JavaScript基础】
1.在java里面语句：if 、 switch 、while do-while for
* java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的
2.使用document.write()向页面输出内容
* 可以向页面输出变量
* 可以向页面直接输出html代码
** document.write(i);
document.write("<br/>");
【】6、js的运算符【JavaScript基础】
1.算术运算符
+ - * /....
2.赋值运算符
+=含义： x+=y 相当于 x=x+y
3.比较运算符
==：表示条件的判断，如果是=，表示赋值
4.逻辑运算符
&& || !
5.js的运算符和java不同的内容
1）js里面不区分整数和小数
* 比如 var a = 123/1000*1000,如果在java里面结果是 0
* js里面的结果：123
2）字符串的相加和相减操作
* 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN
* //字符串的相加和相减
3）boolean类型相加和相减的操作
* 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算
4）：==和===区别
* ==比较的是值
* === 比较的是值和类型
【补充】
null == undefined，值为true
null === undefined，值为false，因为类型不同
【注意】区分 undefined 和 null
undefined：变量定义了未初始化，即访问对象不存在属性
null：访问的对象不存在
【】8、js的数组【JavaScript基础】
1.什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
2.js里面定义数组的方式
1）第一个：var arr1 = [];
2）第二个：var arr2 = ["10",10,true]; //可以写任意的类型
3）第三种：var arr3 = new Array(3);
** 表示定义数组名称是arr3，数组的长度是3
或var arr5 = new Array(); 表示数组长度不确定
4）第四种：var arr4 = new Array(4,5,6);
** 表示定义数组名称是arr4，数组里面的值4 5 6
3.数组里面的属性：查看数组的长度 length
【注意】
* 数组的长度：在js里面数组的长度可变的
** 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串
【】9、js的string对象【JavaScript基础】
1.字符串对象
* 创建字符串：var a = "abc"; var b = new String("bb");
2.属性 length 字符串的长度
3.方法
1）第一类：与html相关的方法（设置字符串的样式的方法）
* bold() 使用粗体显示字符串。
** document.write(a.bold());
* fontcolor() 使用指定的颜色来显示字符串。
** document.write(a.fontcolor("red"));
* fontsize() 使用指定的尺寸来显示字符串。
** document.write(a.fontsize(7));
* link() 将字符串显示为链接
** document.write(a.link("04-练习99乘法表.html"));
2）第二类：与java相似的方法（在java里面也有类似的方法）
* charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""
* concat() 连接字符串
* indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1
* split() 把字符串分割为字符串数组
* substr() 从起始索引号提取字符串中指定数目的字符。
* substring() 提取字符串中两个指定的索引号之间的字符
** var str4 = "MARYJACKLUCY";
document.write(str4.substr(2,3));
//RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值
document.write(str4.substring(2,3));
//R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)
【】10、js的Array对象【JavaScript基础】
1.创建数组
2.属性
* length 设置或返回数组中元素的数目
3.方法
* concat()：连接数组
* join()：把数组根据指定字符进行分隔（返回一个字符串，即将数组元素用指定的字符连接成一个字符串）
* pop() 删除并返回数组的最后一个元素
* push() 向数组的末尾添加元素，并返回新的长度
【注意】向数组里面使用push方法添加一个数组时，会将数组当成一个元素添加
*reverse() 颠倒数组中元素的顺序
【】11、js的Math对象【JavaScript基础】
1.进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用
2.方法
* ceil(x) 对一个数进行上舍入。
* floor(x) 对一个数进行下舍入。
* round(x) 把一个数四舍五入为最接近的整数
* random() 返回 0 ~ 1 之间的随机数
【】12、js的Date对象【JavaScript基础】
1.进行日期操作的对象
2.使用Date对象，new Date();
3.方法
* toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
* 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份
* 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
** document.write(date.getMonth()+1);
* 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
** 如果当前的星期是星期日，返回的是0
* 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
* 得到当前的小时 getHours()
* 得到当前的分 getMinutes()
* 得到当前的秒 getSeconds()
* 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数，一般用于解决浏览器的缓存问题
【】13、js的RegRxp对象【JavaScript基础】
1.RegExp 对象表示正则表达式
2.正则表达式：规定字符串出现的规范
3.使用：new RegExp("正则表达式")
4.方法：
* test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。
【】14、js的bom对象【JavaScript基础】
1.script标签放置位置
* 建议放到</body>后面
* html的解析是从上到下进行解析的，如果在head里面就获取输入项里面的值，因为还没有解析到
输入项，所以肯定得不到值。
2.什么是bom:浏览器对象模型
1）第一个：navigator
* 浏览器的信息
2）第二个：screen
* 屏幕的信息
3）第三个: history
* 访问地址的历史信息
history.go(-1)返回上一页；history.go(1)下一页
4）第四个: location
* 设置url
* href 设置或返回完整的 URL
【备注】location.href一般用于页面跳转
5）第五个: window（***）
* window对象是窗口对象，是顶层对象
* 方法
* setInterval("需要执行的js代码",毫秒数):在指定的时间内，重复执行js代码(即，每隔一段时间(毫秒值)就执行一次代码(需要执行的js代码))，返回一个id值，给clearInterval(id)使用
** 有两个参数:第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数）
** 代码
setInterval("alert('setinterval');",3000);
* setTimeout("执行的js代码",毫秒数) :在指定的时间之后，执行js代码，执行一次；，返回一个id值，给clearTimeout(id)使用
** 有两个参数: 第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数）
** 代码
setTimeout("alert('settimeout');",3000);
* clearInterval(id) 取消由 setInterval() 设置的 timeout。
* clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。
【备注】setTimeout()和location.href一起使用，可以实现网页延时跳转，例setTimeout("location.href='www.baidu.com'",2000)会在2秒后跳转到百度网页
【】15、js的全局变量和局部变量【JavaScript基础】
* 回顾：在java里面成员变量
1.全局变量
* 在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用。（要注意上下顺序）
2.局部变量
* 在js的方法里面定义一个变量，这个变量只能在方法里面使用。
3.浏览器里面自带的调试工具
* ie浏览器：点击键盘上f12，在页面下面出现一个条，点击控制台，出现调试的信息。
* 火狐浏览器：点击键盘上f12，在下面出现一个条，点击控制台，出现调试的信息。
** 火狐浏览器里面需要安装firebug插件
* 谷歌浏览器：点击键盘上的f12,在下面出现一个条，点击console,出现调试的信息。
【备注】//全局变量的第二种声明（使用）方式（了解）
function fun(){
param = "abc11111";
}
fun();
alert(param);
【】16、js的全局函数【JavaScript基础】
1.不属于任何对象，可以使函数
2.主要的函数
* eval(): 把字符串当成js代码执行
* isNaN() 检查某个值是否是数字（is Not a Number）
** 如果是数字返回 false,如果不是一个数字返回 true。
* parseInt() 解析一个字符串并返回一个整数
* encodeURI() 把字符串编码为 URI
* decodeURI() 解码某个编码的 URI
** var decodestr2 = decodeURI(encodestr2);
【备注】经过实际开发经验证明，前台有的时候需要编码两次，后台才能正常解码，encodeURI(encodeURI())
---------------------------------------------------------------------------------
day03
【JavaScript高级】
【】1、js的函数【JavaScript高级】
1.在java里面定义方法
public void/int 方法名称(参数列表) {
方法体和返回值;
}
2.在js里面定义函数有三种方式
1)第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
* 注意一：参数列表，不需要写类型（var），直接写参数名称
* 注意二：返回值，根据实际需要可以有也可以没有
2)第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; }
* 代码
var test1 = function(a,b) {
return a+b;
}
//调用函数
alert(test1(3,4));
3)第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）
* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")
【】2、js的函数的重载【JavaScript高级】
1.在java里面存在重载，方法名称相同，参数列表不同
2.js里面是否存在函数的重载？
第一，在js不存在重载
第二，可以使用js函数里面arguments数组模拟重载的效果
（3）模拟重载的效果
* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果
* 代码
//模拟重载的效果
function add1() {
//模拟重载的效果（有几个参数，实现这几个参数的相加）
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
//调用
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));
【注意】js里不存在函数重载，但可以内置的arguments数组模拟重载的效果；
js里如果有同名的函数名，后面的函数会覆盖前面的函数（即，同名的函数名，后加载的函数会覆盖先加载函数）
【】3、js的事件【JavaScript高级】
1.什么是事件：在html的元素里面可以触发事件调用js里面的函数
2.在html的标签上面如何使用事件
* 有三种方式
1）第一种：使用事件属性调用js方法
<input type="button" value="第一种方式" οnclick="add1();"/>
2）第二种：首先得到要绑定的标签，在使用事件的属性
document.getElementById("buttonid").onclick = add1;
【注意】函数名后不能不能填()，否则函数会立即被执行
3）第三种：首先得到要绑定的标签，写js的代码(匿名函数方式)
document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};
【注意】工作中一般使用第一种和第三种；第一种方式可以传递参数，第三种方式(匿名函数方式)不能传递参数，一般用于表单提交
【】4、js的常用的事件【JavaScript高级】
1.onload事件和onclick事件
* onload：html页面在加载时候触发事件，调用响应的js方法
【注意】onload事件一般写在body标签里，页面加载完成后时就执行
** <body οnlοad="test1();">
* onclick：鼠标点击事件
** <input type="text" οnclick="test2();"/>
2.onfocus事件和onblur事件
* onfocus：获取焦点
* onblur：失去焦点
3.onmouseover 鼠标被移到某元素之上
4.onmouseout 鼠标从某元素移开
5.onkeypress：点击键盘上面的某个键，调用方法
* <input type="text" id="textid1" οnkeypress="key1(event);"/>
【注意】οnkeypress="key1(event);"点击键盘事件必须要传递参数，event为事件对象
【】5、js的dom对象【JavaScript高级】
1.什么dom：document object model：文档对象模型
* 文档：指的是标记型文档（html、xml）
* 对象：在对象里面有属性和方法
** 使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作
* 要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例）
** html中包含 标签、属性、文本内容
2.使用dom解析html
* 解析过程：根据html的层级结构在内存中分配一个树形结构
* document对象，代表整个文档
* element对象，代表标签
* attribute属性对象
* text文本对象
* Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找
3.DHTML的简介
* 不是一种技术，是很多技术的简称。
* 包含的技术：
** html：封装数据
** css：使用属性和属性值修改数据的样式
** ECMAScript：语句和语法
** DOM：对标记型文档进行操作
【】6、document对象【JavaScript高级】
1.document对象代表整个文档
2.方法
1）write()，向页面输出内容，可以输出html代码
* document.write("aa");
document.write("<hr/>");
2）getElementById(): 获取标签对象，通过标签的id值进行获取，返回一个字符串
* var input1 = document.getElementById("textid");
3）getElementsByName(): 根据标签里面name属性的值得到标签对象，返回数组（标签对象数组）
var inputs1 = document.getElementsByName("name1");
* 如果只有一个标签，使用getElementsByName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值;如果有多个标签需要遍历取值
4）getElementsByTagName()：根据标签的名称获取标签对象，返回数组
* var inputs3 = document.getElementsByTagName("input");
* 如果只有一个标签，使用getElementsByTagName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值
var arr = document.getElementsByTagName("input");
【】7、innerHTML属性【JavaScript高级】
1.innerHTML属性不是dom里面属性
2.实现什么功能
1）第一，获取标签里面的文本内容
** var span1 = document.getElementById("spanid");
alert(span1.innerHTML);
2）第二，向标签里面设置内容（可以写html代码）
** var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
【注意】innerHTML的写的功能（标签名.innerHTML = ""）会将原来的内容覆盖
【】【JavaScript高级】
8、练习：动态生成表格
【】9、表单的提交【JavaScript高级】
1.在html中写form标签，提交方式有三种方式:
1.1）第一种方式：在form标签里面，写提交按钮 <input type="submit"/>
<input type="submit" value="提交"/>
1.2）第二种方式：在form标签里面，写普通按钮并使用事件onclick <input type="button" οnclick="toSubmit()"/>, 再用<form>标签对象调用.submit()；
1.3）第三种方式：使用超链接提交数据
* <a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
* <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>
【】10、表单校验【JavaScript高级】
1.如何进行表单的校验
1）使用submit进行表单提交，进行表单校验
* 使用事件 onsubmit事件，写在form标签里面
<form method="get" οnsubmit="return checkForm();">
* 如果return返回的值true可以提交表单，如果返回false不会提交表单
2）使用button进行表单校验
* 在form标签里面，写普通按钮并使用事件onclick <input type="button" οnclick="toSubmit()"/>, 再用<form>标签对象调用.submit()；
【】11、json的简介【JavaScript高级】
1.JavaScript Object Notation，JavaScript 对象表示法。json是数据的交换格式，比xml更加轻巧。
json是js的原生的格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。
2.json的两种数据格式
* json有数据格式
1）第一种：json的对象的格式
* 写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
** 类似于key-value形式
** 名称和值之间使用冒号隔开，多个值之间使用逗号隔开
** json数据的名称是字符串的类型，json数据的值的类型可以是 string, number, object, array, true, false, null类型
** 具体数据的格式 {"name":"zhangsan","age":20,"addr":"nanjing"}
2）第二种：json的数组的格式
* 写法 [json对象1,json对象2........]
** 在数组里面有多个json对象，多个json对象之间使用逗号进行隔开
** 具体数据的格式 [{"name":"lucy","age":20},{"name":"mary","age":30}]
3.可以使用json的这两种格式组成更加复杂json的格式
* 复杂的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}
【】12、js解析json【JavaScript高级】
1.js解析json的对象的数据格式
* 通过json对象数据格式里面的name的名称得到name对应的值
2.js解析json的数组的数据格式
* 遍历json数组，根据下标得到json数组里面每个json对象，解析每个json对象，根据json对象的数据的名称得到值
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
