JavaScript语言基础.ppt

第4章JavaScript语言基础 第4章JavaScript语言基础 本章主要内容包括 4 1JavaScript简介4 2JavaScript函数4 3JavaScript事件4 4JavaScript对象化编程4 5访问文档对象4 6用VS2008编辑与调试JavaScript4 7JavaScript实例 4 1JavaScript简介 4 1 1将JavaScript插入网页使用标签在网页中插入JavaScript代码 插入方法如下 document write 我是菜鸟我怕谁 language javascript 表示使用JavaScript脚本语言document write用来输出内容 4 1 2插入JavaScript的位置JavaScript脚本在网页中的位置 1 放在body标记里的脚本在网页读取到该语句时就会执行 2 放在head标记里的脚本在被调用时才会执行 通常是在 中定义函数 通过调用函数来执行该脚本 3 可以添加外部脚本文件 其后缀通常为 js 添加方法如下 4 1 3JavaScript语句在JavaScript中 一行的结束就被认定为语句的结束 最好还是在结尾加上一个英文半角分号 示例如下 document write Thisisaheader document write Thisisaparagraph 4 1 4JavaScript注释1 单行注释插入单行注释的符号是 2 多行注释多行注释以 开始 以 结束 3 HTML注释标记是HTML注释标记 对于标记中符合JavaScript语法规则的内容仍然会执行 否则会被注释掉 示例如下 简单的例子说明三种注释的使用 4 1 5JavaScript弹出框1 警告 alert alert 的方法以对话框显示信息 并有一个 确定 按钮 2 确认 confirm 确认框用于作出选择 是 或 不是 confirm 有两种取值 true或false 例 varr confirm 你是学生吗 if r true document write 是 else document write 不是 3 提问 prompt prompt和confirm类似 不过它允许访客输入回答内容 例 varname prompt 请输入你的姓名 document write 欢迎你 name prompt 可以给出初始值 格式如下 prompt 提示信息 初值 4 2JavaScript函数 4 2 1定义函数定义函数的格式如下 function函数名 函数代码 编写两数相加的简单函数 函数的名字为add 如下 functionadd sum 1 1 alert sum 4 2 2函数的调用可以通过多种方法调用函数 最简单的函数调用方式 按钮的单击事件 通过button按钮的鼠标单击事件onclick调用add 函数 代码如右边 functionadd sum 1 1 alert sum 4 3JavaScript事件 JavaScript有很多事件 例如 鼠标单击 移动 网页的载入和关闭 4 3 1单击事件4 3 2鼠标经过 移出事件使用鼠标经过事件调用函数的代码如下 鼠标滑过调用函数当鼠标经过按钮时 触发onmouseover事件 调用函数displaymessage 使用鼠标移出事件调用函数的代码如下 鼠标移出调用函数鼠标移动到这个按钮中 当再移动出去时 触发onmouseout事件 调用函数displaymessage 4 3 3其他事件P 35 4 4JavaScript对象化编程 JavaScript对象有基本对象 全局对象 文档对象 对象有它自己的属性 方法和事件 引用对象的属性 方法和事件用 这种方法 4 4 1基本对象4 4 4 1String字符串对象声明一个字符串对象的方法 vars 我有个美好的愿望 访问其length属性的方法 varL s length 返回该字符串的长度 字符串对象的方法 indexOf indexOf 该方法从中查找 如果给出就忽略之前的位置 如果找到了 就返回它的位置 没有找到就返回 1 所有的 位置 都是从零开始的 4 4 1 2Array数组对象数组的定义方法 var newArray 使用数组元素 在定义数组时直接初始化数据 var newArray 例如 varmyArray newArray 1 4 5 Hi 定义时指定有n个空元素的数组 vara newArray n 4 4 1 3Math数学对象Math对象提供对数据的数学计算 对象使用格式 Math 方法 abs x 返回x的绝对值 max a b 返回a b中较大的数 min a b 返回a b中较小的数 pow n m 返回n的m次幂 nm random 返回大于0小于1的一个随机数 round x 返回x四舍五入后的值 sin x 返回x的正弦 4 4 1 4Date日期对象定义一个日期对象 vard newDate Date日期对象方法的使用格式为 方法getXXX 是获得某个数值 方法setXXX 是设定某个数值 get setFullYear 返回 设置年份 用4位数表示 get setYear 返回 设置年份 用2位数表示 get setMonth 返回 设置月份 0表示1月 get setDate 返回 设置日期 get setDay 返回 设置星期几 0表示星期天 get setHours 返回 设置小时数 24小时制 get setMinutes 返回 设置分钟数 get setSeconds 返回 设置秒钟数 下面的例子显示当前日期today newDate varday vardate if today getDay 0 day 星期日 if today getDay 1 day 星期一 if today getDay 2 day 星期二 if today getDay 3 day 星期三 if today getDay 4 day 星期四 if today getDay 5 day 星期五 if today getDay 6 day 星期六 date 今天是 today getYear 年 today getMonth 1 月 today getDate 日 day document write date 4 4 2全局对象 全局对象就是一些全局函数 可以直接使用 eval 把字符串当作标准语句或表达式来运行 例如 b 2 5 2 vara eval b isNaN 如果括号内的值是NaN 不是数字 则返回true 否则返回false parseInt 把括号内的内容转换成整数 如果是字符串 则字符串开头的数字部分被转换成整数 如果以字母开头 则返回NaN parseFloat 把括号内的字符串转换成浮点数 如果字符串开头的数字部分被转换成浮点数 如果以字母开头 则返回NaN toString toString 把对象转换成字符串 4 4 3文档对象 文档对象是指在网页文档里划分出来的对象 主要对象 window document location navigator screen history等 这些文档对象组成一个文档对象模型 DocumentObjectModel DOM DOM结构如图所示 要引用某个对象 就要把父级的对象都列出来 例如 要引用表单MyForm的文本框UserName 就要用document MyForm UserName 4 4 3 1window对象 window窗口对象是最大的对象 它描述的是一个浏览器窗口 在引用它的属性和方法时 一般不需要用window xxx这种形式 而直接使用xxx 1 window对象的方法 1 open 方法 打开一个窗口 用法 open 页面地址 窗口名称 窗口风格 页面地址 表示要打开的网页地址 如果用单引号 则不打开任何网页 窗口名称 表示被打开的窗口的名称 window name 可以使用 top blank 等内建名称 窗口风格 表示被打开的窗口的样式 如果只需要打开一个普通窗口 该字符串用单引号 如果要指定样式 就在字符串里写上一到多个参数 参数之间用逗号隔开 例如 打开一个400 100的干净窗口 open blank width 400 height 100 menubar no toolbar no location no directories no status no scrollbars yes resizable yes open 方法有返回值 返回的就是它打开的窗口对象 2 close 关闭一个已打开的窗口 用window close 或self close 关闭本窗口 用 close 关闭指定的窗口 3 延时方法setTimeout 和setInterval 两个方法都可以用来实现在一个固定时间段之后执行JavaScript 但两者各有各的应用场景 相同 都有两个参数 一个是将要执行的代码字符串 一个是以毫秒为单位的时间间隔 当过了指定 时间间隔 之后就将执行 代码字符串 区别 setInterval在执行完一次代码之后 经过固定的时间间隔 它还会自动重复执行代码 而setTimeout只执行一次那段代码 使用setInterval每隔5秒钟就显示一次时间 代码如下 setInterval showTime 5000 functionshowTime vartoday newDate alert Thetimeis today toString 用setInterval命令创建的对象 可以用clearInterval 命令终止 例如 varMyMar setInterval showTime speed clearInterval MyMar 2 window对象的属性 1 closed和opener属性 closed属性可以判断一个窗口是否已经被关闭 如果一个窗口是通过open 方法打开的 在opener中存放的是打开的它的父窗口 通过opener属性可以操纵它的父窗口 父窗口可以通过open 方法的返回值和子窗口发生联系 例如 通过opener属性可以获取父窗口的属性信息 alert opener name 下面的语句可以判断一个窗口的父窗口是否已经被用户关闭 if window opener closed document write 父窗口已经被关闭 else document write 父窗口还没有被关闭 2 defaultStatus和status属性 defaultStatus属性的值是浏览器状态栏默认的显示信息 status属性是状态栏中当前显示的信息 4 4 3 2history对象4 4 3 3location对象 4 4 3 4document对象 document文档对象描述当前窗口或指定窗口对象的文档 它包含文档从到的