javascript入门讲解笔记

Javascript

是由网景公司开发，并且由浏览器解释执行的一种脚本语言，并且需要嵌入到html文件中。

2.主要作用

a.数据验证（只有页面数据验证通过，才能提交表单到服务器）

b.实现html动态效果

c.获取浏览器的一些信息

d.ajax核心技术之一

3.javascript特点

（1）是类似C语言

（2）可以写在 html文件中，也可以写在.js为后缀的文件中

（3）是基于面向对象，但不是纯粹的面向对象

没有类的继承 多态

（4）javascript是一种弱类型语言，在声明变量时不能确定变量的类型，只有在运行时才能确定变量的具体类型。

4.javascript的组成部分

（1）ECMAsript

它主要定义了javascript的基本语法

各个浏览器都必须遵守该规范

是由ECMA规定

（2）dom

它把浏览器中的script解析成一棵dom树，部分浏览器没有遵守该规范，编写时需要考虑兼容性问题。

（3）bom

浏览器中的内置对象，用来操作窗口。

比如：window location screen

 var 声明变量

alert 弹出对话框

5基本语法

基本类型

（1） number 数值类型

（2）string

（3）boolean

（4）undefined

（5）null

边编译边执行

false，0，null，不写结果是false

for(i=0;i<atr1.length;i++){

for(j=0;j<atr[i].length;j++){

alert(atr1[i][j]);

}

}

引用类型

数组 var atr=new Array();

var atr=['1',123];

数组中常用的方法：

atr.contact(atr1);

atr.join(' ');

函数

DOM

dom(document object model)文档对象模型

如何将结构化的文档（比如html xml）转换成一个符合dom的树，

并且定义了操作这棵树的方法和属性

（1）查找

通过id查找

var obj=document.getElementById('id');

可以通过obj.innerHTML获取该节点的html，也可以去修改该节点的html

可以通过obj.value获取obj的value值，也可以去修改obj的value值

dom操作

1.查找

（1）通过id查找

document.getElementById('b1');

（2）通过标记名字查找

document.getElementByTagName('name');

2.创建节点

document.createElement('name');

3.插入节点

（1）插入该节点中所有子节点的后面

bo.appendChild(di);

（2）在某个节点前插入节点

bod.insertBefore(div,but);

but是bod标记中的子标记（旧）

4.替换节点

bo.replaceChild（newChild，refChild）；

5.删除节点

bo.removeChild(obj);

6.样式操作

方式一

修改style的属性

注意：

必须是内联样式

如果样式的属性中包含“-”，先把“-”去掉，然后把“-”后的第一个单词大写

方式二

修改class属性

className='s1'

比如：obj.className='s1';

7.如何禁止浏览器的默认提交行为

链接中，浏览器会默认项href中地址发送请求

表单中 点击

8.引入外部文件

把所有的javascript代码放在.js为后缀的文件中

然后

<script src="my.js">

框架的使用：

$(id)  相当于document.getElementById("");

$F(id)  相当于document.getElementById("").value;

$(id1,id2),一次根据id1,id2查找相应节点，返回

trip 去掉字符串两端的空格

练习

1.通过链接添加节点

2.写表单验证

用户名

密码（6位数字）

确认密码

身份证验证码

html dom*

html dom是在w3c规范dom之前定义的浏览器支持的一些dom操作

1）

select 对象

selectedIndex是指选择下拉列表框的选项的索引

length 下拉列表框的长度

options 返回数组，是下拉列表框中的所有选项

2）option对象

text 是指option的文本

value是指选项的值

selected 当该选项被选中时值为true，否则为false

知识点;动态创建一个选项

var op=new Option(text,value);

3）table

属性：

tHead 返回表格中的head节点

tFoot 返回表格中的foot点

tBodies返回表格中的body节点

rows 返回表格中的所有行

cells 返回所有列，数组

方法

insertRow(index) 向表格中的index位置插入一行，返回的是tr

deleteRow(index)删除表格中的某一行

4）TableRow 表格中的一行

 insertCell(index) 向指定位置插入一个单元格，返回的是单元格对象

deleteCell(index)删除该行指定位置的单元格

5）TableCell

代表的是一个单元格

bom浏览器内置的一些对象

主要有：

window

1.document属性

2.open('test.html','newhtml','width=300','height=400');

3.location属性

4.opener属性

5.parent属性

6.confirm()方法

7.prompt()方法

8.setInterval(f2,500)方法

9.clearInterval(tax) 方法

事件机制：

1)什么是事件

第一种情况：用户对网页做了某些操作，比如按钮点击事件

第二种情况：用户没有对网页做任何操作，也可能产生事件，

浏览器会加载整个网页，加载完成会产生加载完成事件，当事件产生后，

会去找产生事件的相应节点是否绑定相应的事件处理代码，如果有则执行，

如果没有，则查找相应父节点是否绑定的事件代码（事件冒泡）

事件添加：

1）在html中添加事件

<a href="javascript:;" onclick="f1();">获取属性</a>

2）在dom添加事件

<a id="a1" href="javascript:;">获取属性</a>

<script type="text/javascript">

var obj=document.getElementById("a1");

obj.onclick=f1;

function f1(){

}

</script>

注意：f1后面不能加小括号。加小括号代表立即执行。

3)匿名函数

匿名函数

obj.onclick=function(){

}

匿名函数传递参数

obj.onclick=function(){

 f1(msg);

}

在dom上绑定事件可以使js和html完全分离，方便代码维护。

window.onload=function(){}整个页面加载完成以后执行匿名函数。

function f1(){

window.onload=f1;整个页面加载完成以后执行f1函数。

}

3.事件对象

1）获得事件对象

IE浏览器中可以他通过event获取

firefox需要在方法中传递event参数才能获取

建议：为了是IE和Firefox都通用，调用函数传递event参数

2）事件对象的作用

a、可以获取鼠标点击的坐标

clientX

clientY

b、获得事件源（产生事件的对象）

IE：e.target

firefox:e.srcElement

建议（Firefox和IE都可以）

var obj=e.target||e.srcElement

4）时间冒泡

a、什么是事件冒泡

当一个节点事件完成以后，该事件会依次向上传递（传递给父节点，

如果父节点还有父节点，则再向上传递）

b、如何禁止事件冒泡

e.cancelBubble=true;

js面向对象基础

1）定义

js和java不同，没有定义类型的专门语法，但js可以用函数定义类型。

2）如何创建对象

a 用new关键字

var p=new Person('zs',25);

b 通过json创建对象

var p1={"name":"zs","age":22}

注意：如果属性值是字符串，必须用引号引    起来,不是字符串不用。

值可以是number string null boolean

3）通过object创建对象

var p=new Object();

p.name="zs";

p.age=22;

因为js是一种动态语言，可以在晕吧形式，对对象添加属性。