javascript

一、javascript简介作用：负责网页的交互（数据校验，网页特效）

javascript的知识系统：

ECMAScript基础语法（统一）

BOM（非ECMA）

DOM（非ECMA）

二、变量和数据类型（重点）

定义： var 变量名=值

类型是赋值的时候确定的

js数据类型：

number：数值类型

string：字符串类型

boolean：布尔值

object：对象类型

三、常用的转换函数

字符串->整数

java： Integer.parseInt("字符串")

js: parseInt("字符串")

注意：

1）可以转换10进制

2）可以转换16进制

3）如果第一个字符是数值类型，则继续转换，直到非数值为止！！！否则转换错误！！（ NaN）

字符串->小数

java:  Float.parseFloat("字符串")

js: parseFloat("字符串")

四、运算符

算术运算符： +   -  *  /   %

注意：在js中，boolean类型可以使用1和0来表示true和false

比较运算符： >  >=  <  <=  ==  !=

逻辑运算符： &&(与)  ||(或)   !（非）

&&  || ： 都有短路的功能

赋值运算符 ： =   +=  -=  *=  /=

三目运算符： 表达式 ? true的情况 : false的情况

五、在js中如何使用debug功能来调试代码

六、流程控制语法

条件： if(){ }elseif {}.... else{}

if条件内容：

boolean

string

number

object

条件： switch(){  case1:  case2:  case3:  }

case条件内容：

常量

变量

表达式

循环： for(var i=0;i<10;i++){   }

循环： while(x>10){  }

循环： do{.....}while(x<10);  

练习：

1，显示“*”为正方形，5行5列。

2，显示“*”为三角型，5行，第1行有1个“*”，第2行有2个“*”……

3，显示乘法口诀。

1*1=1

1*2=2 2*2=4

....

1*9=9 2*9=18 ...

for-in语句：循环迭代数据

语法：

for(var 变量 in 遍历的数组|对象){

}

作用：

1）遍历数组（重点）

2）遍历对象

with语句

作用：  有了With 语句，在存取对象属性和方法时就不用重复指定参考对象（为了节省代码）

七、js函数

语法：

定义函数：

function 函数名(形式参数列表){

函数体

}

调用函数：

函数名(实际参数列表);

1）js函数的形式参数不能使用var定义。

    2) js函数不需要声明返回类型,使用return返回数据即可！！

    3) js函数没有重载的概念，后面声明的同名方法会把前面的方法给覆盖调！！！

    4) js函数的形式参数和实际参数的数量可以不一致的，依然可以调用成功！！

    5) js函数的调用原理：

    a)每个js函数中有包含一个内置的数组arguments，该数组用于存储函数调用时传递过来的实际参数数据

    实际参数数据 -> arguments

    b)arguments数组数据会依次从左到右地赋值给形式参数

八、内置对象

1）String对象

charAt(): 查找指定下标的字符

indexOf(): 查询第一次出现指定字符的下标

lastIndexOf(): 查询最后一次出现指定字符的下标

fontcolor(): 设置字符串的字体颜色

replace（）：替换字符串

substring(): 截取字符串

split() : 使用指定的字符进行切割字符串 

2）Number对象

3）Math对象

ceil(): 向上取整   3.94 -》4

floor(): 向下取整   3.94 -> 3

round(): 四舍五入取整  3.49 -> 3   3.51-> 4

random()：生成一个0~1的随机小数（包含0，不包含1） 

4) Date对象

年： getFullYeaer()

月： getMonth()+1

星期： getDay() (0-6)

日期：getDate()

时： getHours()

分： getMinutes()

秒： getSeconds()

案例：会动的网页时钟（必须练习）

5)Array对象

注意：

1）js数组可以不指定长度，默认长度为0

2）js数组可以存放任意类型的数据

3) js数组可以自动扩容(类似于集合)

join(): 使用指定的字符串拼接数组的每个元素，返回新的字符串

reverse(): 反转数组的每个元素的顺序。  0,1,2,3-》 3,2,1,0

6）RegExp对象：使用正则表达式

复习正则表达式基础语法

^  : 代表字符串的开始

$ ：代表字符串的结束

*  : 代表0或多个匹配的内容

+：代表1或多个匹配的内容

? : 代表0或1个匹配的内容

{4}: 代表出现4次匹配的内容

{4,12}:  代表出现4~12次匹配的内容

[a-z]: 匹配小写字母

[A-Z]: 匹配大写字母

[0-9] |  \d : 匹配数字

\D : 匹配非数字字符

\w: 匹配包含下划线在内的单词字符。等价于'[A-Za-z0-9_]'

创建方式

1)创建对象1

//var reg  = new RegExp("^[0-9]{4}$");

2)创建对象2：  var 变量 =  /正则内容/;

var reg = /^[a-z]{4}$/i;

常用方法

test(): 使用正则表达式去匹配目标字符串。如果返回true，则表示匹配成功，false,匹配失败！

注意：

1）js的正则表达式匹配规则：只要目标字符串出现了符合正则规则的内容，就可以匹配成功（不需要完全匹配）

通常，我们在写js的正则表达式的时候，都会加上边界匹配符,这样就可以达到完全匹配的效果：

^: 字符串开始

$: 字符串结束

符号：

i : 代表忽略大小写

正则案例；给表单进行数据验证（必须练习）

用户名： 6-16位字母或数字，下划线

密码：   4-12位数字

邮箱：   邮箱规则    [e-mail]   [e-mail]   [e-mail]  [e-mail]

    字母或数字或下划线（至少1个）@字母或数字(两个以上).字母（2-3个）.字母（2-3可有可无）

九、js自定义对象

java：使用类（class）定义对象  ，创建对象： new 

js:  使用函数（function）定义对象， 创建对象 ： new

四种语法定义、创建对象：

语法1： (类似于有参的构造方法)

function 对象名(属性列表){

定义属性

定义方法

}

语法2： (类似于无参的构造方法)

function 对象名(){

}

语法3：直接使用Object的模板去创建对象

var p = new Object();

语法4：(符合json语言语法，ajax）

var p = {

属性名1：属性值1,

属性名2：属性值2,

方法名1: 方法内容1

原型： }

原型原理：

1）每个js对象都有一个内置的prototype的属性，该属性的值是Prototype对象

2）该prototype属性可以添加方法，而添加的方法会自动地添加到所在的对象上

原型作用：给（内置对象）对象添加方法

总结：

1）java基础语法（运算符,流程控制...）

2)  对象部分

（重点）内置对象（，RegExp ）

（重点）自定义对象（语法？？ ArrayUtil案例）

原型（了解）

JS之BOM_DOM编程

一、BOM编程

1）什么是BOM？

BOM，Browser Object Model 浏览器对象模型。

BOM编程一句话概括：使用js代码控制浏览器

BOM编程原理：浏览器被封装了不同的对象，可以通过浏览器对象控制浏览器

2)window对象: 控制浏览器的窗口 

方法：

;

confirm()

propmt()

close()

open();

setInterval();/clearInteval_r();

setTimeout();

3)location对象: 控制浏览器的地址栏

属性： href

方法： reload()

4) histroy对象: 控制历史记录栏

方法：

forward()

back()

go()

5)screen对象: 控制屏幕

属性：

availHeight

avlilWidth

width

height

二、js事件编程

1)js事件编程入门

gui事件编程：

事件源：事件发生的源头（窗体，按钮，菜单）

事件：窗口事件（windowEvent），键盘事件（KeyEvent），鼠标事件（MouseEvent）

监听器：可以监听某类事件的发送，并且触发业务逻辑。 

js事件编程：

事件源：事件发生的源头（网页的html标签）

事件：鼠标事件，键盘事件，选项事件，页面事件。。。。

监听器：使用js函数编写监听器程序

js编程步骤：

1）编写事件源

2）编程监听器（js函数）

3）注册监听器 ( onclick   ondblclick onchage ...... )

2）注册事件的两种方式

1）直接在事件源（标签）使用相关属性去注册事件给监听器

问题：和绑定代码和html标签依赖！！！ 

好处：可以更加方便从标签内部传递参数

2）先获取事件源对象，在使用属性去注册事件给监听器(实际应用中建议使用这种方式)

//得到事件源对象

var btn =  document.getElementById_x_x_x_x_x_x_x_x_x("btn");

//注册事件给监听器

btn.onclick = function(){

fun1();

}

好处： js事件代码和html代码进行分离！！！方便管理代码

问题：不能从标签内部传递参数

3）js事件分类

点击相关：

onclick   单击事件

ondblclick 双击事件

页面加载相关

onload    加载页面

onunload  退出页面

鼠标相关

onmousedown  鼠标按下  

onmouseup    鼠标抬起

onmousemove  鼠标移动

onmouseover   鼠标移到某个元素上

onmouseout  鼠标从某个元素离开

焦点相关

onfocus   获得焦点

onblur   失去焦点

选项相关

onchange   选项改变

表单提交相关

onsubmit   表单提交时触发

return true/false: true：则提交表单，false，不提交表单

三、DOM编程

1)DOM简介

1）什么是DOM编程： DOM，Document Object Model 文档对象模型

2）一句话概括DOM编程： 使用js代码控制HTML或CSS内容

3）DOM编程原理：html页面内容会被封装成不同的对象，通过这些对象控制html页面（包括css）

2）获取节点对象

方式一：

document.getElementById_x_x_x_x_x_x_x_x_x();

document.getElementsByName()

document.getElementsByTagName()

方式二：

document.all

document.forms;

document.images;

document.links;

方式三：

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

3)案例

随机滚动广告

全选反选

动态表格

二级下拉菜单