《网页设计与制作》PPT课件.ppt

JavaScript基础 JavaScript内容介绍 客户端和服务器端脚本语言JavaScript概述基本语法流程控制函数和事件内置对象文档对象模型 网页的脚本语言 客户端的脚本语言在浏览器上运行的Javascript服务器端的脚本语言在服务器上运行后把结果发送到客户端Jsp asp php等等 JavaScript概述 JavaScript是客户端脚本语言 是一种基于对象 Object 和事件驱动 EventDriven 的脚本语言 JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合 这些对象具有一定的属性 你可以对这些属性进行修改或计算 JavaScript的基本特点 脚本语言基于对象简单性动态性跨平台性 JavaScript与Java的区别 JavaScript和Java是两个公司开发的不同产品Java是SUN公司推出的新一代面向对象的程序设计语言而JavaScript是Netscape公司的产品 其目的是为了扩展其浏览器功能现在JavaScript已被标准化为ECMAScript 主流的浏览器都支持 认识JavaScript functionsum vars1 document f1 s1 value vars2 document f1 s2 value vars3 Number s1 Number s2 document f1 s3 value s3 效果演示 示例说明 在标识标签对之间就可加入JavaScript脚本代码 其中的language属性指明这段代码是用JavaScript来编写的 JavaScript可以直接嵌入到html中通过浏览器直接运行的 Html中嵌入JavaScript代码的方式 放在标签中 推荐使用 放在标签中 JavaScript中的注释 JavaScript中的注释和Java基本一致 也分为单行和多行注释 注释信息仅仅做为说明来使用 在程序的解释和运行中是被忽略的 单行注释 使用 符号对单行信息进行注释多行注释 使用 对多行信息进行注释例子 下面的alert 是弹出一个对话框 下面的alert 是弹出一个对话框 alert 这是第一个JavaScript例子 JavaScript基本语法 数据类型变量及类型转换表达式和运算符数组 数据类型 字符串 abc hello 你好 数字 包括整数数字和浮点型数字布尔值 true和false空值 null未定义值 undefined 变量及类型转换 变量的声明 使用var来声明变量varstr 你好 类型转换 字符 数字Number Number 1 数字 字符String String 1 表达式和运算符 算术运算符 比较运算符 逻辑运算符 流程控制 顺序 按照程序编写的顺序来执行条件if 条件 语句1elseif 条件 else语句nswitch 表达式 caselabel1 语句1 break caselabeln 语句n break default 语句n 1 循环for 初值 条件 更新 语句 do 语句 while 条件 while 条件 语句 函数 函数在JavaScript中的函数可以简单理解为一组语句 用来完成一系列工作创建函数function函数名 参数1 参数2 参数N 函数体 语句集 事件调用函数 事件 就是Web页面在浏览器处于活动状态时发生的各种事情 如 浏览器加载 卸载一个页面 用户单击鼠标 移动鼠标 以及按下键盘的某个键事件调用函数 当发生了某个事件之后去调用函数进行处理的方式 事件调用函数的格式 on事件名 事件处理函数 主要的事件调用函数 事件调用函数举例 functionclickme alert 按钮被点击 演示效果 JavaScript中的对象 内置对象JavaScript将一些非常常用的功能预先定义成对象 用户可以直接使用 这种对象就是内置对象浏览器对象网页和浏览器本身的各种元素在JavaScript程序中的体现它使JavaScript可以定位 改变内容以及展示HTML页面的所有元素自定义对象JavaScript允许用户自定义对象进行使用 常见内置对象 Math数学对象提供了进行所有基本数学计算的功能和常量的属性和方法Date日期对象提供了获取 设置日期和时间的属性和方法String字符串对象提供了对字符串进行处理的属性和方法Array数组对象用来创建数组 内置对象举例 alert Math abs 1 返回绝对值alert Math round 3 8 返回四舍五入之后的整数alert Math random 返回0和1之间的一个伪随机数效果演示 浏览器对象 窗口对象 Window Window对象处于对象层次的最顶端 它提供了处理浏览器窗口的方法和属性 位置对象 Location Location对象提供了与当前打开的URL一起工作的方法和属性 它是一个静态的对象 历史对象 History History对象提供了与历史清单有关的信息 文档对象 Document document对象包含了与文档元素 elements 一起工作的对象 它将这些元素封装起来供编程人员使用 文档对象模型 window screen history document location frame archors links area forms applets images plugins text textarea password radio reset submit checkbox button select option file 各种浏览器对象形成了一种层次模型 我们称其为文档对象模型 DocumentObjectModel 简称DOM 浏览器对象的引用方式 对应于文档对象模型中的层次关系 JavaScript对浏览器对象的引用是逐层引用例如 在引用forms对象时 使用window document forms通过对象的name属性来引用例如 引用一个name属性是form1的表单对象 使用window document form1 数组型浏览器对象的引用在文档对象模型中 有些对象属于数组型对象 如document对象下一层的images links forms等对象 在引用这种数组对象时 可以使用对象在数组中的位置 下标 来引用例如 window document forms 0 表示引用文档中的第一个表单 注 Window对象作为文档对象模型中的最顶层对象 JavaScript认为它是默认的 因此可以不写出来 如 window document forms可以写成document forms window对象 介绍 Window对象也就是窗口对象 处于文档对象模型的最顶层 代表当前浏览器窗口 主要介绍两个方法 open url windowname windowfeature 功能 打开一个新的窗口参数说明 url 要打开窗口的url地址Windowname是新打开窗口的名称Windowfeatures是新窗口的实际特性 窗口的外观 可选项Windowfeatures的可能参数 height窗口的高度width窗口的宽度menubar是否有菜单scrollbars是否有滚动条resizable窗口大小是否可以改变close 功能 关闭窗口 window对象 示例 functioncreatwindow window open 1 html mywindow menubar no height 200 width 300 functionclosewindow window close 演示效果 window的三种对话框方法 alert 方法弹出一个显示信息的警示对话框alert 您好 confirm 方法弹出带有提示信息的确认对话框confirm 确认删除吗 prompt 方法弹出一个带有输入信息的对话框name prompt 请输入你的名字 document对象 document对象是JavaScript实现网页各种功能中最常用的基本对象之一 它代表浏览器窗口中的文档 可以用来处理文档中包含的html元素 如表单 图像 超链接等 write 作用 向文档中写入文本举例说明document write 欢迎大家 效果演示 document对象 续 getElementsByName 通过html标签的name属性来获得一些元素对象返回的是具有相同name属性的html元素对象数组getElementById 通过html标签的id属性来获得一个html元素对象返回具有该id属性的html元素对象functioncheck varname document getElementsByName name varage document getElementById age alert name 0 value alert age value 示例效果