第三天 Javascript
JavaScript
比较运算符
比较类型
类型相同：直接比较
*字符串按照字典顺序比较，按位逐一去比较，直到得出大小。
类型不同：先转换类型再比较
*===（全等于） 比较的是值和类型，先比较类型是否相同，不相同直接返回false，相同的话再去比较值。
*==比较的是值
逻辑运算符
&&：与（短路）
||或（短路）
!非
其他类型转boolean：
number：0和NaN为假，其他为真。
string：除了空字符串（“”），其他都为true
undefined&null：都是false
对象：所有对象都为true
三元运算符
格式 ：
var result = 表达式?值1:值2；
如果表达式为true，选择值1，如果表达式为false，选择值2。
特殊语法（不建议使用，了解就行）
1、语句以；结尾，如果是一条语句可以不写；，可以省略（不建议使用）
2、在函数中变量定义可以使用var关键字，也可以不使用。（不建议使用）
*使用 就是局部变量
*不使用 就是全局变量
流程控制语句
差不多都和Java基础使用的方式一致。
if....else...
switch
*java中switch()，括号里只可以接收byte、short、int、char、枚举（1.5）、String（1.7）
*javascript中，括号里可以接收任何数据类型。
while
do.....while
for
基本对象
function 函数对象
1、创建
1、 function 方法名（形式参数列表）{方法体}
2、 var 方法名=function（形式参数列表）{方法体}
2、方法
3、属性
length：代表形参的个数
4、特点
1、方法定义时，形参类型不用写，返回值类型也不写。
2、方法是一个对象，如果定义方法名称相同的方法 ，前面的方法会被覆盖。
3、在JS中，方法的调用只与方法的名称有关，与方法的参数列表无关。
4、在方法声明有一个隐藏的内置对象（数组）arguments数组，封装了所有的实际参数。
//获取所有参数的和。
<script>
function run(){
var sum=0 ; //先初始化定义一个
for(var i = 0 ;i<arguments.length;i++){
sum+=arguments[i];
}
document.write(sum);
}
run(3,5,6,9);
</script>
5、调用
方法名称 （实际参数列表）
Array对象
Array对象
1、创建
1、var arr = new Array(元素列表);
2、var arr = new Array(默认长度);
3、var arr = [元素列表];
2、方法
join（参数），将数组的元素按指定的分隔符拼接成字符串。
3、属性
length：数组的长度。
4、特点
在JS中数组的类型可变，长度可变
Date日期对象
1、创建
var date = new Date();
2、方法
toLocaleString() 返回当前对象对应的本地时间本地字符串格式。
getTime() 获取毫秒值，当前时间到1970年1月1日零点的毫秒值。
Regexp正则表达式
正则表达式：定义一个字符串的组成规则
创建
1、var reg = new Regexp("正则表达式");
2、var reg = /正则表达式/;
方法
test（参数）验证参数是否和正则表达式匹配。
DOM简单学习
功能：控制HTML文档的内容
代码：获取页面标签（元素）对象。
*document.getElementById("id");通过元素的id获取对象。
操作Element对象
修改属性值：
*明确获取的对象是哪一个
*查看API找其中可以设置的属性
修改标签体内容：
先获取标签的对象
var ele = document.getElementById("id");
再修改内容
通过innerHTML方法：ele.innerHTMl = 要修改成的内容。
事件的简单学习
功能：某些组件执行了某些操作后，触发了某些代码的执行。
如何绑定事件：
1、直接在html标签上，指定事件的属性，属性值就是JS代码
事件：onclick---单击事件
2、通过js代码获取元素对象，指定事件属性，设置一个函数如（function fun01(){}）。
//先获取img标签的对象
var pho = document.getElementById("pho");
//修改指定元素的值,绑定事件
pho.onclick = fun01;
BOM(Browser Object Model)浏览器对象模型
将浏览器的各个组成部分封装成对象。
组成：
Window 窗口对象
Navigator 浏览器对象（不重要）
Screen 显示器屏幕对象（不重要）
History 历史记录对象
Location 地址栏对象
window对象
创建：
方法：
1、与弹出框有关的方法
alert()显示带有一段信息和确认按钮的警告框。
*confirm()显示带有一段信息以及确认按钮和取消按钮的对话框。
*如果点击确认按钮，则方法返回true，
*如果点击取消按钮，则方法返回false；
prompt()显示可提示用户输入的对话框
*返回值是获取用户输入的值。
2、与打开关闭有关的方法。
open()打开一个新的浏览器窗口
属性：
1、获取其他BOM对象。
history 对 History 对象的只读引用
location 用于窗口或框架的 Location 对象
Navigator 对 Navigator 对象的只读引用
screen 对 Screen 对象的只读引用。
2、获取DOM对象
document 对Document对象的只读引用
特点：
window 对象不需要存在可以直接使用。如window.方法名。
window引用可以省略，如方法名（）
location：地址栏对象
创建
1、window.location()
2、location()
方法
reload()重新加载当前页面；刷新
属性
href：设置或返回完整的URL
DOM：
概念：（Document Object Model）
将标记语言文档的各个组成部分，封装成对象，使用这些对象对标记语言进行增删改查的操作
DOM被分为三个不同的部分
核心DOM-针对任何结构化文档的标准模型。
*Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个的父对象
XML DOM-针对XML文档的标准模型
HTML DOM-针对HTML文档的标准模型。
核心DOM模型：
Document：文档对象
Element：元素对象
Node：节点对象，其他5个的父对象
Document：文档对象
创建：window.document 和document直接获取
方法
1、获取Element对象
getElementById（id值），根据id属性值获取id对象，id是唯一的
2、获取其他Dom对象
createElement（元素名称）通过指定名称创建一个元素对象
createTextNode（）创建文本节点
属性
Element：元素对象
1、获取/创建 通过document来获取和创建
2、方法
removeAttribute()删除属性
setAttribute()设置属性
Node：节点对象，其他5个的父对象
特点：所有DOm对象都可以认为是一个节点。
方法：CRUD dom树
appendchild() 向节点的子节点列表的末尾添加一个新的子节点
removechild() 删除当前节点指定的子节点
replacechild() 用新节点替换子节点
属性：
parentNode()：返回当前节点的父节点
案例：动态表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid ;
margin: auto;
width: 500px;
}
th,td{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text"id="id"placeholder="请输入编号" />
<input type="text"id="uname"placeholder="请输入名字" />
<input type="text"id="sex"placeholder="请输入性别" />
<input type="button"id="ad"value="添加" />
</div>
<table id="table">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>安林</td>
<td>男</td>
<td><a href="javascript:void(0)"onclick="fun01(this)" >删除</a> </td>
</tr>
<tr>
<td>002</td>
<td>安林林</td>
<td>男</td>
<td><a href="#"onclick="fun01(this)" >删除</a> </td>
</tr>
</table>
<script>
//绑定单击事件
document.getElementById("ad").onclick = function(){
//获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("uname").value;
var sex = document.getElementById("sex").value;
//创建td，设置td的文本为文本框的内容
var td_id = document.createElement("td");//创建td
var text_id = document.createTextNode(id);//将id的文本通过createTextNode文本节点进行赋值 ，然后添加到元素中
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_sex.appendChild(text_sex);
//创建a标签的td
var td_a = document.createElement("td");
var aa = document.createElement("a");
aa.setAttribute("href","#");
aa.setAttribute("onclick","fun01(this);");
var text_a = document.createTextNode("删除");
aa.appendChild(text_a);//将元素都添加到标签中
td_a.appendChild(aa);//将标签添加到td中
//创建tr
var tr = document.createElement("tr");
//将td添加到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_a);
//获取table，将tr添加到table中。
var table = document.getElementById("table");
table.appendChild(tr);
}
//删除一行
function fun01(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
HTML DOM
标签体的设置和获取：innerHTML。可以进行追加使用+=。
使用html元素对象的属性
控制样式
1、使用元素的style属性来设置
<div id="div1">大家好</div>
<script>
//1、使用style属性来设置样式
//先获取该标签的对象
var div1 = document.getElementById("div1");
//再绑定单击事件
div1.onclick = function(){
div1.style.border ="1px solid red";
div1.style.width = "500px";
div1.style.fontSize = "40px";
}
</script>
2、提前定义好类选择器，通过元素的className的属性来设置其class属性值。
代码如下：
<style> .d1{ border: 1px solid red ; width: 400px; font-size: 50px; } .d2{ border: 3px solid black; width: 200px; font-size: 30px; } </style> <div id="div2"> 大家好我是div2. </div> <script> var div2 = document.getElementById("div2"); div2.onclick = function(){ div2.className = "d2"; } </script>
事件：
概念：某些组件被执行了某些操作后，触发某些代码的执行。
*事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
*事件源：组件。如：按钮，文本输入框。。。
*监听器：代码。
*注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件：
1、点击事件：
onclick：单击事件
ondblclick：双击事件
2、焦点事件：
onblur：失去焦点 一般用于表单的校验
onfocus：元素活动焦点
3、加载事件：
1、onload：一张页面或一张图像完成加载。
4、鼠标事件：
onmousedown 鼠标按钮被按下
*定义方法时，定义一个形参接收event对象
*event对象的button属性可以获取鼠标哪个按钮被点击了
*左键是0，滚轮是1，右键是2.
document.getElementById("aa").onmousedown = function(num){//num是参数
alert(num.button);//num.button获取那个鼠标按钮对应的值。
}
onmouseup 鼠标按钮被松开
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素上
onmouseout 鼠标从某元素移开
5、键盘事件
onkeydown 键盘被按下
onkeyup 键盘被松开
onkeypress 键盘按下并松开
6、选中和改变事件
onselect 文本被选中
onchange 域的内容被改变时会调用：可以用于省内二级联动。代码如下：
<script>
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","昌平区","朝阳区");
cities[1] = new Array("郑州市","开封市","洛阳市","平顶山市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
//改变指定的值
function fun(obj){
//通过obj获取value的值，然后将值传给二维数组获取指定的一维数组
var arr = cities[obj];
//获取city的对象
var city = document.getElementById("city");
city.innerHTML = "<option>----请-选-择-市----</option>";//将每次都进行清空
//遍历获取的一维数组
for(var i = 0 ; i<arr.length;i++){
city.innerHTML += "<option>"+arr[i]+"</option>";//将每一个值都添加到city中
}
}
</script>
<body>
<select id="province" onchange="fun(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
7、表单事件
onsubmit 确认按钮被点击
*用于表单 的校验
如果为false表单将不会提交，如果为true，表单将提交
onreset 取消按钮被点击
总结 ：
JavaScript很重要，无论是学前端还是学后端都要精通它，感觉对逻辑没啥要求，主要还是记标签记方法，
就一句话我一个学后端的还怕前端的这一点东西吗。。。分分钟征服JavaScript！！！
