JavaScript语言.ppt

第4章JavaScript语言 Web标准 的网页组成 结构 决定网页 是什么 各级标题 段落 列表等 表现 决定网页 是什么样子 字号 字体 颜色等 行为 决定网页 做什么 变化 交互等 决定网页的结构和内容 设定网页的表现样式 控制网页的行为 第4章JavaScript语言 任务4 1用定时器为新闻首页添加时钟显示任务4 2为新闻首页状态栏添加走马灯效果 任务4 1用定时器为新闻首页添加时钟显示 知识目标 1 掌握JavaScript基本语法 2 掌握window对象的定时操作技能目标 1 会用JavaScript语言进行客户端编程教学重点 1 JavaScript基本语法 2 DOM操作中获取节点和属性的方法 3 window对象 4 日期 Date 对象教学难点 1 将Date对象按照指定格式转换为字符串 2 定时操作 X HTML中使用JavaScript的三种方式 方式1 javascript基本例子 X HTML中使用JavaScript的三种方式 方式2 functiontest alert 你单击了按钮 javascript基本例子 X HTML中使用JavaScript的三种方式 方式3 javascript基本例子 functiontest alert 你单击了按钮 CSS x HTML JavaScript模式常见构成 x HTML页面 functiona JavaScript文件 body font size 24px CSS样式文件 网页的基本元素 功能逻辑的实现 网页美化 浏览器对象模型 BOM 浏览器对象模型 BOM 是JavaScript编程技术的重要组成部分 BOM由一系列相关的对象构成 用于JavaScript和浏览器窗口进行交互 window对象是整个BOM的核心 其他5个对象都是window对象的属性 BOM中定义了6种重要的对象 1 window对象表示浏览器中打开的窗口 2 document对象表示浏览器中加载页面的文档对象 3 location对象包含了浏览器当前的URL信息 4 navigator对象包含了浏览器本身的信息 5 screen对象包含了客户端屏幕及渲染能力的信息 6 history对象包含了浏览器访问网页的历史信息 DOM模型概述 DOM DocumentObjectModel 文档对象模型 是由W3C国际组织制定的Web标准之一 它为应用程序访问和操作XML和HTML文档提供了一套标准的API 属性 方法和事件 主要作用 定义文档的操作 文档一般指HTML页和XML文件 Dom模型 DOM模型是HTML页面元素组成的基本框架 基于HTML的DOM架构 DOM操作 1 获取节点主要方法getElementById 用于元素id名getElementsByTagName 用于XHTML标记名 如input 返回数组类型2 节点属性处理格式 元素结点 属性名称获取属性格式 document getElementById 元素id 属性名获取属性例子 document getElementById div1 innerHTML设置属性格式 document getElementById 元素id 属性名 属性值 设置属性例子 document getElementById div1 innerHTML 你好 varobj document getElementById image1 obj src 1 jpg 窗口 window 对象 window对象对应着Web浏览器的窗口 使用它可以直接对浏览器窗口进行操作 window对象提供的主要功能有 1 系统提示框window alert用于显示消息提示框用法 window alert 字符串 2 状态栏控制浏览器状态的显示信息可以通过window status属性直接进行修改 用法 window status 字符串 3 定时操作 定时操作 定时操作通常有两种使用目的 一种是周期性地执行脚本 例如在页面上显示时钟 需要每隔一秒钟更新一次 另一种则是将某个操作延时一段时间执行 例如某个特别耗时的操作 可以使用window setTimeout函数使其延时执行 而后面的脚本可以继续运行不受影响 1 window setInterval和window clearInterval setInterval函数用于设置定时器 每隔一段时间执行指定的代码 用法 timer window setInterval code interval clearInterval函数用于清除setInterval函数设置的定时器 用法 window clearInterval timer 2 window setTimeout和window clearTimeout setTimeout函数用于设置定时器 在一段时间之后执行指定的代码 用法 timer window setTimeout code time clearTimeout函数用于清除setTimeout函数设置的定时器 用法 window clearTimeout timer 任务4 2为新闻首页状态栏添加走马灯效果 知识目标 1