javascript------【八】

*********************************************

js中定义变量不能使用任何属性名和标签名,id

命名：js_变量
xx_变量名

Javascript

作用：操作网页元素，网页 动 起来.

增加网页和用户的交互性和校验用户添加的数据

==============================================

1.

①javascript是写在HTML页面中

<script type='text/javascript'>

//js代码

</script>

② 由浏览器解释执行

**解释型语言(java编译型语言)

2.

数据类型|变量

**弱类型语言(变量类型只有一种)

①声明变量

var a = 10;

var b = "10";

②简单数据类型

数字 number

10 10.1

字符串 string

"asnacd"
'abgc'

布尔 boolean

true false

非0 0

非null对象
null

③特殊数值

null:特殊的对象类型的值

var a = null;//用来清空变量的值

undefined：声明变量但为赋值

var a;

NaN:非数

var a = 10/'b';

**判断某个值是否是数字

isNaN('b');//true--

注意事项：

*变量可以重复定义,最终的值以最后一个为主

var a = 20;

var a = 30;

*js中变量是没有块作用范围

*数字和字符串+运算:结果字符串+字符串

3.运算符

+ - * / % > < >= <= != ==

等值比较

==:比较两个值得内容是否相同

===:比较两个值得内容和类型是否全部相同

**判断变量的值的数据类型

typeof 变量名

4.语句

if(){}

if(){}else{}

switch(){

case :

语句1;

break;

..

default:

语句

}

while(){}

do{}while()

for(var i=0;i<=100;i++){}

for-each:

java: for(类型 引用:集合){}

js: for(xx in xx){}

5.函数：

内置函数：

isNaN(变量);//判断变量的值是否是非数(true-非数;false-数字)

parseInt(字符串)//返回值为number,转换失败结果NaN

定义函数【难点】

1. function 函数名(形参){

代码块

}

**调用函数：函数名();

2. var 函数名 = function(参数){

//代码块

}

**javascript将函数作为一个值;

**调用函数：函数名(实参);

注意事项：

1.函数本身可以作为实参传递

2.函数调用时，没有重载.调用的时只要函数名相同即可调用.

3.函数内部有一个属性 arguments:调用传递的实参：数组

3.补充：

var 函数名 = new Function('形参1','形参2'...'代码块');

eg:

var add = new Function('a','b','return a+b');

add(1,2);

6.Object对象

**js中没有类的概念

①：

var 引用名 = new Object();

引用名.属性 = 值;

访问对象的属性：对象.属性名

作业：

1.课堂代码打2遍

2.在网页中输出

9*9

*

***

*****

重点：函数，对象

-------------------------------------------------

复合类型（内置对象）

Object：

**js中没有类（对象模板）

创建对象

1. var 对象名 = new Object();

var person = new Object();

//对象添加属性

person.username = 'chengcheng';

person.age = 18;

person.say = function(){//代码块};

//访问对象属性

person.username;

person['username'];

对象.属性名;

对象['属性名'];

//调用对象方法

对象.方法名();

//遍历对象的属性

for(var v in person){

//遍历过程中，v代表属性名的字符串形式

person[v];//访问对象的每个属性

}

2.JSON创建对象【重点】

对象：

{

属性1:值,

属性2:值,

函数名:function(){

//代码块

}

}

//--------

var person = {

username:'chengchegn',

age:18,

say:function(){

alert("再呵呵json");

}

};

课堂练习：

product{id:100,name:,price,fun:("不服跑个分")}

Array:

1.

创建数组：

var 数组名 = new Array();

**数组长度可变，且不固定

**类型任意;

**数组有length属性，代表长度

数组名[下标] = 值;//数组赋值

访问数组

数组名[下标]

遍历数组

for( var a in 数组){

//a代表数组的下标

数组[a]//访问数组的元素

}

2.JSON创建数组

创建数组

var 数组名 = [ 元素1,元素2,元素3....];

3.函数：

sort();//对数组中的元素排序（按照字符串的排序规则:按照第一个位进行排序）

4.属性

length:数组长度

String

1.创建字符串

var s = 'abc';

var s = new String('abc');

函数：

charAt(number);//获得number下标位置的字符

Date

1.创建日期

var date = new Date();//创建当前系统时间

var date = new Date('1999-9-9');//创建指定时间的日期

函数：

getFullYear();//获得年份

getMonth();//获得月份

getDate()

getDay()

getHours()

getMinutes()

getSenconds()

<!-- <!-- <!-- <!-- <!-- <!-- <!-- --> --> --> --> --> --> -->

联系：

今天的日期:

2015年1月28日 16:39:33星期几

Math

'静态'函数:

属性(常量)：

PI 圆周率

方法：

random();//返回0~1随机数

//获得0~100随机数

Math.random()*100;

重点：

Object创建（json）

Array创建(json)

Date 记常用函数

====================================================================

事件：

作用：增加网页和用户交互性

//鼠标，键盘，....

事件模型：

事件源：发生事件HTML标签对象

事件（事件对象）:事件行为:单击，双击，按键按下...

监听器：监听当事件触发，并指定事件发生后作出的行为(函数执行)

**添加事件步骤：

①找到事件源

②监听什么事件（确定事件监听器）

③事件发生所触发的js代码

鼠标相关：

单击事件： onclick

eg：<button onclick='少量js代码'>按钮</button>

<button onclick='fun();'>按钮</button>

双击事件 ondblclick

移入事件 onmouseover

移出事件 onmouseout

鼠标按下 onmousedown

鼠标弹起 onmouseup

键盘相关：

按键按下 onkeydown

按下抬起 onkeyup

body相关：

网页加载完毕后触发
onload **网页加载完毕后执行的js代码

网页滚动时 onscroll

网页缩放 onresize

表单相关事件[重点]

<form>
onsubmit 当表单被提交时触发

获得焦点 onfocus

失去焦点 onblur

值发生改变 onchange

操作HTML标签：

：通过触发事件改变HTML标签的属性，和样式

1.获得HTML标签

var js标签 = document.getElementById('id值');

2.访问HMTL标签属性

js标签.html标签属性名

imgTag.src

inpText.value

修改属性值

标签对象.属性 = 值

imgTag.src = 值;

3.访问样式:

js标签.style.css属性名 = 值;

** aa-bb -----aaBb

js标签.style.fontSize = 值;

----------------------------------

select下拉列表有一个属性 selectedIndex选中选项的下标

禁止元素的默认行为：

<form action='' onsubmit='return false'>

<a href='' onclick='return false'>

---------------------------------

DOM编程：Document Obejct Model 文档对象模型

**浏览器加载HTML页面后，将所有的html标签，封装成对象

最终封装成一个树状结构

**目的：

通过js对文档中的html标签执行添加，删除，修改，查找

【父元素拥有对子元素的所有操作权】

操作dom的方法

1.查找html的dom对象

//根据id查找

var jsdom = document.getElementById('id值');

//var jstbdom：代表table元素

jstbdom.getElementById('id值');

//根据标签名查找

var jsdoms = document.getElementsByTagName('标签名');//jsdom是dom对象数组

//通过name属性值查找(常用表单)

var jsdoms = document.getElementsByName('name属性值');//jsdoms是dom对象数组

**获得标签体内部的内容:

jsdom.innerHTML

//添加标签体内的内容

jsdom.innerHTML = 值;

**新建dom对象

var newdom = document.createElement('标签名');

2.添加标签对象

父标签.appendChild(新js对象);//将'新js对象'追加值父标签的所有子标签的最后一个位置

3.删除标签对象

父标签.removeChild(被删除js对象);

4.替换标签对象

父标签.replaceChild(新标签,被替换标签);

5.在指定位置添加新标签对象

父标签.insertBefore(新元素,标准dom对象<位置>);

补充：

dom对象的常用属性:[了解]

**标签的属性

dom.innerHTML
dom标签体内部的文字（dom对象不能文本节点）

dom.ChildNodes所有的子节点的数组(空白部分个别浏览器会作为一个节点)

dom.firstChild第一个子节点

dom.lastChild
最后一个子节点

dom.nextSibling下一个兄弟节点(右边)

dom.previousSibling前一个兄弟节点(左边)

dom.parentNode直接父标签对象

form表单中：

selectDom.options获得是selectDom中所有的option对象
:数组

**获得被选中的option：selectDom.options[selectDom.selectedIndex];

作业：

动态表格：完成添加功能

==============================================================

技巧：

在事件绑定的函数中:一旦事件触发，会自动向函数内传入一个event对象(代表当前事件)

event.target
:产生事件的事件源对象

event.type
:事件名称：不包含‘on’

在操作表单元素

①document.forms:当前网页中所有的表单对象

②document.form的name值.表单元素的name值:当前的表单元素

**当表单元素的name值有重复时，获得是该name值得元素数组

③document.form的name.select的name.options[document.form的name.select的name.selectedIhndex]

**var sel = document.fm1.city;

sel.options[sel.selectedIndex];

*********************事件冒泡*********************

事件冒泡：

当子标签和父标签添加了相同的事件监听器，触发子标签的事件，该事件会以冒泡的形式(向父标签传递)

会触发父标签的相同监听器所绑定的函数.

**禁止事件冒泡

取消事件冒泡：

*chrome +Fox
：event.stopPropagation();

*IE（IE11版本以下）: event.cancelBubble=true;

*********************事件冒泡*********************

【重点】

事件模型

DOM查找，添加，替换，删除

====================================================

引入外部js文件：

**jquery1.8**.js

**将javascript代码放入一个外部的**.js中

在HTML页面中：

<script type='text/javascript' src='外部js文件路径'></script>

myeclipse：**WebRoot

WEB-INF

lib:导入当前项目jar(将jar包直接拷贝lib，自动导入classpath)

web.xml

jsp

*.jsp

html

*.html

css

*.css

iamges

*.jpg|png|gif|bmp

js

*.js

**HTML页面和JSP 都可以导入css，和js文件.

**JSP导入外部的css和js文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.ContextPath}/css相对项目的路径" />

<script type="text/javascript" src='${pageContext.request.ContextPath}/js文件相对项目路径'></script>

====================================================

BOM编程：

浏览器对象模型

窗口 window:window是整个浏览器中的所有对象的根对象[window的属性使用时，可以不加window]

window.alert;

警告框 window.alert('警告输出内容');

window.prompt;

对话框 var result = window.prompt('提示内容');//result代表用户输入的值

window.confirm;

确认框 var result = window.confirm('提示文字');//true|falsel：true代表用户点击确认

定时器：

延时定时器

var timerId = setTimeout(fun,ms);//延长？ms以后再指定方法

//**timerid:定时器id

清除定时器:

clearTimeout(timerId);

周期定时器

var timerid = setInterval(fun,ms);//每个？ms执行一次fun方法

清除周期定时

clearInterval(timerId);

open():

打开一个新的窗口：window.open("url");

close();

关闭窗口: window.close();

地址栏 location

//跳转页面

【******】location.href = url;

网页主体 document

document.write("网页输出内容");

将通讯录中的

登录页面|注册页面|添加联系人页面|修改页面|-----添加表单验证

展示所有联系人页面：

**删除功能：添加确认框