javaScript入门教程A.ppt

1、javaScript入门,WEB开发Cola,Css,xhtml,javascript,1. 什么是JavaScript? 2. 嵌入和运行方式(第一个JS实例) 3. 变量与数据类型 4. 函数、对像 5. 方法、属性和事件 6. 用JS操作DOM 7. 用JS操作表单,目录,JavaScript快速入门,什么是JavaScript ？ 嵌入HTML里的脚本语言 与java相似，但是是基于对像的编程语言 可以操作浏览器或HTML元素,JavaScript快速入门,嵌入和运行方式(第一个JS实例) javaScript var a=1,b=2; document.write(a+b); ,Ja

2、vaScript快速入门,显示结果,JavaScript快速入门,外嵌式 document.write(count(2,5); fun1(); test.js: function count(a,b) return a+b; Function fun1(),JavaScript快速入门,变量 var 变量名=数据的值 功能 例：var a=1; 区别java: int a=1; 未定义变量类型时默认为undefined; 类型转换parseInt, parseFloat ;,JavaScript快速入门,数据类型 主要（基本）数据类型是： 字符串 数值 布尔 复合（引用）数据类型是： 对象 数

3、组 特殊数据类型是： Null Undefined,JavaScript快速入门,控制程序的流程 单一选择结构（if）， 二路选择结构（if/else）， 内联三元运算符 ? : 多路选择结构（switch）。 在循环的开头测试表达式（while）， 在循环的末尾测试表达式（do/while）， 对对象的每个属性都进行操作（for/in）， 由计数器控制的循环（for）。,JavaScript快速入门,函数 function funName() Fun体. function integerCheck(a, b, c) / 测试。 if ( (a*a) = (b*b) + (c*c) ) ret

4、urn true; return false; / 整数检查函数的结尾。,JavaScript快速入门,作业 根据出生日期计算属相,JavaScript快速入门,对像 定义1 var obj=key1:value2,key2:value2, fun1:function(), Fun2:function() 应用 Obj.key1=“value”; 定义2 function Obj(x1,x2) this.a1=x1; this.a2=x2; this.fun1=function() this.fun2=function() 应用 Var obj=new Obj(10,20); Obj.fun1

5、();,JavaScript快速入门,对像中添加属性和方法 第一种对像 obj.pi = Math.PI; obj.area = ACirclesArea; 第二种对像 Ototype.pi = Math.PI; function ACirclesArea () return this.pi * this.r * this.r; Ototype.area = ACirclesArea;,JavaScript快速入门,DOM(文档对象模型) 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。,父节点,子节点,同级节点,属

6、性/方法/事件,html元素操作- 属性 方法 事件 内部对像document 浏览器窗口中的 HTML 文档 Var oEle=document.getElementById(sID); oEle.bgColor =“#FF00FF”; oEle.appendChild(elem) oEle.onclick=function(),JavaScript快速入门,Div里创建元素 var divEl=document.getElementById(divId); var btn=document.createElement(input); btn.type=“button”;/属性 btn.va

7、lue=OK; btn.style.color=#”F00”;/样式 divEl.appendChild(btn); ,JavaScript快速入门,得到元素 getElementById() getElementsByTagName() getElementsByName() 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 var x=document.getElementsByTagName(p); for (var i=0;ix.length;i+) / do something with each paragraph ,DOM操作,divEl.appendChild(btn); divEl.removeChild(x);