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:;" οnclick="f1();">获取属性</a>
2）在dom添加事件
<a id="a1" href="javascript:;">获取属性</a>
<script type="text/javascript">
var obj=document.getElementById("a1");
obj.οnclick=f1;
function f1(){

}
</script>
注意：f1后面不能加小括号。加小括号代表立即执行。
3)匿名函数
匿名函数
obj.οnclick=function(){

}
匿名函数传递参数
obj.οnclick=function(){
 f1(msg);
}

在dom上绑定事件可以使js和html完全分离，方便代码维护。
window.οnlοad=function(){}整个页面加载完成以后执行匿名函数。
function f1(){
window.οnlοad=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是一种动态语言，可以在晕吧形式，对对象添加属性。