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是一种动态语言,可以在晕吧形式,对对象添加属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值