Javascript

一 Javascript的基础知识

1.1 javascript的使用方法：

（1）内部javacript:
a)在html页面中使用<script>标签，在<script>标签体中写js内容
b)弊端：和html代码混杂在一起，不好维护，不好重用
（2）外部javascript（推荐使用）
  注意： 不能使用<script src="01.js"/> 空标签方式导入

1.2变量和数据类型

（1）定义和赋值变量：var 变量名=值；
typeof（变量）:查看变量的数据类型；
注意:a:在使用var关键词定义变量，var可以省略的，但是不建议；
b:在js中可以重复定义变量，后面的变量会覆盖前面的变量；
c:js是弱类型语言，使用var来定义任何数据类型；
d:js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined）不能使用；
（2）js数据类型的分类
a:number:无论整数还是小数
b:string:无论是字符还是字符串；
c:boolean:
d:object:对象类型；

1.3 类型转换函数

string->number(整数) :  parserInt(变量)
string->number(小数):  parserFloat(变量)

1.4 运算符

（1）算术运算符： + - * /  %
（2）比较运算符： > <  >=  <= ==
（3）逻辑运算符： &&  ||   !
（4）三目运算符:  表达式 ? true的结果 : false的结果  
1.5流程控制语句  

（1）/*
if语句
if(表达式){
语句
}else{
语句
}

条件可以是：
布尔值：true：成立 ； false:不成立
number：非0：成立； 0： 不成立
string: 非空字符串： 成立 ； 空字符串： 不成立
object: 非null: 成立；  null：不成立
*/
/*
if(null){
alert("条件成立");
}else{
alert("条件不成立");
}
*/


（2） /*
swtich语句
swtich(变量){
case 选项1:
语句;
break;  如果不break，就会继续下面选项的语句
case 选项2:：
语句;
break;
default:
默认;
}

注意：
case的条件：
1）可以是常量. string,number
2）可以是变量。（java是不能是变量）
3)可以是表达式 （java不能这样）
*/


（3）/*
for语句：
for(初始化语句;条件判断语句;流程控制语句){
循环体语句
}

*/
（4） /*
while语句
初始化语句
while(条件判断语句){ 
循环体语句;
条件控制语句;
}
*/
（5） /*
do-while语句
初始化语句;
do{
循环体语句;
条件控制语句;
}while(判断条件语句)

*/

二 BOM编程

BOM编程：BOM是（Broswer Object Model） 浏览器对象模型编程

2.1.window对象

 open(): 在一个窗口中打开页面
参数一： 打开的页面
参数二：打开的方式。 _self: 本窗口  _blank: 新窗口（默认）
      参数三： 设置窗口参数。比如窗口大小
 
setInterval(): 设置定时器（执行n次）
setTimeout(): 设置定时器(只执行1次)
定时器： 每隔n毫秒调用指定的任务（函数）
参数一：指定的任务（函数）
参数二：毫秒数
 
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一：需要清除的任务ID
 
alert(): 提示框
仅仅有确定按钮
 
confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false： 点击了取消
 
propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false： 点击了取消
 
注意：
因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。

2.2.location对象

      href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法： 刷新当前页面

2.3.history对象

forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进  负整数：后退）  1   -2

2.4.screen对象（学习四个属性）

availHeight和availWidth：是排除了任务栏之后的高度和宽度
width和height一般两个宽度一样，但是availheight比实际的低，因为存在菜单栏是整个屏幕的像素值

三  事件编程

3.1 javascript事件编程的三个要素：
（以单击事件为例讲解事件编程三要素）
1）事件源：html标签
2）事件 ：click dblclick mouseover。。。。
3）监听器： 函数

3.2 javascript事件分类：

（1）点击相关的：
 单击： onclick
 双击： ondblclick

（2）焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
聚焦：  onfocus
失去焦点： onblur

（3）选项相关的：（select选项改变，做一个籍贯选项）
改变选项： onchange

（4）鼠标相关的：（画一个div区块进行演示）
鼠标经过： onmouseover
鼠标移除： onmouseout


（5）页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
页面加载： onload

四. DOM编程

4.1 概念DOM（document Object Model）文档对象模型编程。

4.2 查询标签对象

通过document对象获取，document代表一个html页面
（1）#通过document对象的集合
作用： 获取多个或者同类的标签对象
all: 获取所有标签对象
forms： 获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
var nodeList = document.all; //返回标签对象数组 
var nodeList = document.forms; //返回标签对象数组
var nodeList = document.images; //返回对象数组
var nodeList = document.links;//返回对象数组


（2）#通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性 

#通过document方法查询标签对象
document.getElementById("id属性值");   最常用
注意：
1）使用该方法获取的标签一定要有id属性
2）在同一个html页面中不要出现两个同名的id

documetn.getElementsByName("name属性值");  获取同name属性名的标签列表
注意：
1）使用该方法获取的标签一定要有name属性

document.getElementsByTagName("标签名")  获取相同标签名的标签列表

4.3 修改标签对象属性

常用的需要修改的属性：
innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html
 
value属性： 修改value属性值。 input type="text"
src属性： 修改图片的src属性。 <img src=""/> 点击按钮更换图片
案例：两张图片不断自动切换

checked属性：修改单选或多项的默认值。   <input type="radio/checked" checked=""/>  爱好全选

五 正则表达式

5.1 正则表达式的书写规则

创建正则表达式： var 变量 = /正则规则/;

[a-z]: 表示匹配字母
*  :  0或多个元素
+:   1个或多个元素
? :   0或1个元素
{n,m} 大于n,小于m的个数

正则方法： 
test（）： 用于匹配指定的字符串. true：表示匹配成功 ； false; 表示匹配失败

注意：
在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
如果需要和java一样完全匹配，需要添加边界符号

开始标记： ^
结束标记： $