javaScript入门教程A.pptVIP

YOUR SITE HERE 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实例) !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titlejavaScript/title /head body script language=javaScript“ type=text/javascript var a=1,b=2; document.write(a+b); /script /body /html JavaScript快速入门 显示结果 JavaScript快速入门 外嵌式 script type=text/javascript src=test.js/script body script language=javascript document.write(count(2,5)); fun1(); /script /body test.js: function count(a,b){ return a+b; } Function fun1(){} JavaScript快速入门 变量 var 变量名=数据的值 功能 例：var a=1; 区别java: int a=1; 未定义变量类型时默认为undefined; 类型转换parseInt, parseFloat ; JavaScript快速入门 数据类型 主要（基本）数据类型是： 字符串 数值 布尔 复合（引用）数据类型是： 对象 数组 特殊数据类型是： 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)) ){ return 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(); 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 文档。您可以添加、移除、改变或重排页面上的项目。 父节点 子节点 同级节点 属性/方法/事件 html元素操作----div / 属性 方法 事件