JavaScript教程快速入门.ppt

4脚本语言JavaScript 4 1JavaScript简介4 2JavaScript基本语法4 3JavaScript函数4 4事件驱动和事件处理4 5基于对象的JavaScript语言4 6内部对象系统4 7实例 4 1JavaScript简介 JavaScript简介脚本编程工具特点和局限性JavaScript JAVA和JScript区别 4 1 1JavaScript简介 JavaScript被设计用来向HTML页面添加交互行为 JavaScript是一种脚本语言 脚本语言是一种轻量级的编程语言 JavaScript由数行可执行计算机代码组成 JavaScript通常被直接嵌入HTML页面 JavaScript是一种解释性语言 就是说 代码执行不进行预编译 所有的人无需购买许可证均可使用JavaScript 4 1 2脚本编程工具 文本编辑器JavaScript脚本存储在简单的文本文件中 通常作为HTML文档的一部分 可以存储ASCII文本文件的任何编辑器都可以使用浏览器要使用JavaScript 我们还需要两种工具 WEB浏览器以及运行浏览器的计算机 4 1 3特点和局限性 特点 1 脚本编写语言 是一种解释性语言 不需要实现编译2 基于对象的语言 在编程时 JavaScript语言可以运用自己已经创建的对象 许多功能可以来自于脚本环境中对象的方法和脚本的相互作用3 简单性 基于JAVA基本语句和控制流之上的简单而紧凑的语言变量类型采用弱类型 并未使用严格的数据类型4 安全性 他不允许访问本地的硬盘 不能将数据存入到服务器上不允许对网络文档进行修改和删除 只能通过浏览器实现信息浏览或动态交互 5 动态性 它可以直接对用户或客户输入做出响应 无须经过服务器端程序 6 跨平台性 它仅依赖于浏览器本身 与操作环境无关 4 1 3特点和局限性 局限性1 与浏览器相关的局限性虽然绝大多数浏览器都支持JavaScript语言 但并不是所有浏览器的所有版本都支持2 与安全性相关的局限性由于他不能进行各种操作 所以他只生存于WEB主页的世界里 必然要牺牲JavaScript的一些功能 4 1 4JavaScript JAVA和JScript JavaScript语言是一种新的基于对象和事件驱动并具有安全性能的脚本语言 由Netscape公司创建开发JAVA语言是由SUN公司开发的一种与平台无关的 面向对象的程序设计语言 JAVA的源代码必须经过编译 试用JAVA语言开发的程序必须在JAVA虚拟机中运行Jscript是微软公司对ECMA 262 ECMAScript 语言的一种实现 即另一种语言 4 2JavaScript基本语法 第一个JavaScript网页文档结构基本数据类型运算符条件语句循环语句消息框 4 2 1第一个JavaScript网页 利用记事本开发的一个JavaScript网页代码如下欢迎学习JavaScript语言alert HELLO WORLD 4 2 2文档结构 HTML的标签用于把JavaScript插入HTML页面当中 document write字段是标准的JavaScript命令 用来向页面写入输出 4 2 3基本数据类型 四种基本数据类型1 数值类型 是比较常用的数据类型 在JavaScript语言中数值类型即可表示整数 也可以表示实数2 逻辑类型 主要用于逻辑运算 该变量只有两个值 TRUE和FALES3 字符串类型 由单引号或双引号包围的多个字符组成的4 未定义类型 又称为undefined类型 表示一个变量还没有赋予任何初值 4 2 4运算符 4 2 4运算符 4 2 4运算符 4 2 4运算符 4 2 4运算符 4 2 5条件语句 条件语句在您编写代码时 经常需要根据不同的条件完成不同的行为 可以在代码中使用条件语句来完成这个任务 if语句在一个指定的条件成立时执行代码if else语句在指定的条件成立时执行代码 当条件不成立时执行另外的代码if elseif else语句使用这个语句可以选择执行若干块代码中的一个switch语句使用这个语句可以选择执行若干块代码中的一个 4 2 5条件语句 If语句如果希望指定的条件成立时执行代码 就可以使用这个语句 if 条件 条件成立时执行代码 注意 请使用小写字母 使用大写的IF会出错 4 2 5条件语句 If else语句如果希望条件成立时执行一段代码 而条件不成立时执行另一段代码 那么可以使用if else语句 if 条件 条件成立时执行此代码 else 条件不成立时执行此代码 4 2 5条件语句 If elseif else语句当需要选择多套代码中的一套来运行时 请使用if elseif else语句 if 条件1 条件1成立时执行代码 elseif 条件2 条件2成立时执行代码 else 条件1和条件2均不成立时执行代码 4 2 5条件语句 Switch语句如果希望选择执行若干代码块中的一个 你可以使用switch语句 switch n case1 执行代码块1breakcase2 执行代码块2breakdefault 如果n即不是1也不是2 则执行此代码 工作原理 switch后面的 n 可以是表达式 也可以 并通常 是变量 然后表达式中的值会与case中的数字作比较 如果与某个case相匹配 那么其后的代码就会被执行 break的作用是防止代码自动执行到下一行 4 2 6循环语句 在编写代码时 你常常希望反复执行同一段代码 我们可以使用循环来完成这个功能 这样就用不着重复地写若干行相同的代码 JavaScript有两种不同种类的循环 for将一段代码循环执行指定的次数while当指定的条件为true时循环执行代码 4 2 6循环语句 for循环在脚本的运行次数已确定的情况下使用for循环 for 变量 开始值 变量 结束值 变量 变量 步进值 需执行的代码 4 2 6循环语句 while循环while循环用于在指定条件为true时循环执行代码 while 变量 结束值 需执行的代码 注意 除了 还可以使用其他的比较运算符 4 2 6循环语句 do while循环do while循环是while循环的变种 该循环程序在初次运行时会首先执行一遍其中的代码 然后当指定的条件为true时 它会继续这个循环 所以可以这么说 do while循环为执行至少一遍其中的代码 即使条件为false 因为其中的代码执行后才会进行条件验证 do 需执行的代码 while 变量 结束值 4 2 7消息框 可以在JavaScript中创建三种消息框 警告框alert 文本 警告框经常用于确保用户可以得到某些信息 当警告框出现后 用户需要点击确定按钮才能继续进行操作 确认框confirm 文本 确认框用于使用户可以验证或者接受某些信息 当确认框出现后 用户需要点击确定或者取消按钮才能继续进行操作如果用户点击确认 那么返回值为true 如果用户点击取消 那么返回值为false 提示框prompt 文本 默认值 提示框经常用于提示用户在进入页面前输入某个值 当提示框出现后 用户需要输入某个值 然后点击确认或取消按钮才能继续操纵 如果用户点击确认 那么返回值为输入的值 如果用户点击取消 那么返回值为null 4 3JavaScript函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数定义function函数名 var1 var2 varX 代码 var1 var2等指的是传入函数的变量或值 和 定义了函数的开始和结束 注意 无参数的函数必须在其函数名后加括号 4 4事件驱动和事件处理 JavaScript语言是一种基于对象的语言 其基本特征就是采用事件驱动 用户的操作或系统操作的动作称为事件 Event 由事件引发的一连串程序的动作 称为事件驱动 EventDriver 而对事件进行处理的程序或函数称为事件处理程序 EventHandler 事件处理程序通常由函数担任 其基本格式与函数一样function事件处理名 参数表 事件处理语句集 主要事件onAbort中止正在加载的对象onUnload关闭当前网页onBlur失去焦点onFocus获取焦点onChange改变对象的值onMouseDown按下鼠标左键onMouseMove移动鼠标指针onClick在对象上单击鼠标onDbClick在对象上双击鼠标onSlect选择某对象onMove窗口被移动时 4 4事件驱动和事件处理 举例 事件驱动和函数处理 4 5基于对象的JavaScript语言 JavaScript是面向对象的编程语言 OOP 它使我们有能力定义自己的对象和变量类型 对象只是一种特殊的数据 对象拥有属性和方法 属性属性指与对象有关的值 如xxx length通过字符串对象的长度属性来计算字符串中的字符数方法方法指对象可以执行的行为 或者可以完成的功能如通过字符串对象的toUpperCase 方法来显示大写字母文本 4 5基于对象的JavaScript语言 对象操作语言1 New运算符利用new运算符来创建一个新的对象 newobject nexObject 参数表 创建新对象和使用对象vartoday today newDate document write 今天是 today getFullYear 年 today getMonth 1 月 today getDate 日 4 5基于对象的JavaScript语言 2 with语句 在该语句体内 任何对变量的引用被认为是这个对象的属性 以节省一些代码 Withobject 语句集 with document write 欢迎光临 write 一楼是家电卖场 write 二楼是计算机卖场 等同于三个document write 命令 4 5基于对象的JavaScript语言 3 this关键字 this是对当前对象的引用 随着函数使用场合的不同 this的值会发生变化4 for in语句该语句的功能是用于对已知对象的所有属性进行操作的控制循环 它是将一个已知对象的所有属性反复赋值给一个变量 而不是使用计数器来实现的for 对象属性名in已知对象名 4 5基于对象的JavaScript语言 for in实例for in语句varx varmycars newArray mycars 0 新浪网 mycars 1 百度网 mycars 2 搜狐网 for xinmycars document write mycars x 4 5基于对象的JavaScript语言 JavaScript为编程人员提供了一些非常有用的产用内部对象和方法 例如String 字符串 Math 数值计算 Date 日期 等string对象的方法主要用于有关字符串在Web页面中的显示 字体大小 字体颜色 字符的搜索以及字符的大小写转换Date对象主要用于处理日期和时间Math对象主要用于处理复杂的数学运算 4 5基于对象的JavaScript语言 获取当前时间的例子获得当前精确时间vartoday today newDate document write 现在的精确时间是 today getYear 年 today getMonth 1 月 today getDate 日 document write today getHours today getMinutes today getSeconds today getMilliseconds 4 6内部对象系统 窗口对象 window window对象处于对象层次的最顶端 它提供了处理navigator窗口的方法和属性浏览器对象 navigator 提供有关浏览器的信息位置对象 location location对象提供了与当前打开的URL一起工作的方法和属性 它是一个静态的对象历史对象 history history对象提供了与历史清单有关的信息文档对象 document document对象包含了与文档元素一起工作的对象 它将这些元素封装起来供编程人员使用 4 6内部对象系统 获取WEB浏览器信息获取WEB浏览器信息document write 这是一个获取WEB浏览器信息的程序 document write 浏览器名称 navigator appName document write 版本号 navigator appVersion document write 操作系统平台 navigator platform document write 系统的CPU等级 navigator cpuClass 4 6内部对象系统 窗口对象的创建和关闭窗口对象的操作varnewwin functionopennew newwin open 新窗口 height 300 width 600 top 500 left 500 toolbar no menubar no scrollbar no resizable no lo