Javascript基础

Javascript是什么

• Javascript是什么
• 基础 JavaScript 实例
• JavaScript 用法
• JavaScript案例：随机抽奖小程序

• JavaScript 函数
• JavaScript 表单
• JavaScript 输出

JavaScript 语言基础

数据类型

• JavaScript 数据类型
• 案例：JavaScript 数据类型

变量与常量

• JavaScript 变量
• 案例：JavaScript变量定义和赋值
• JS案例：通过常量PI求圆的周长

运算符

• JavaScript 运算符
• JS案例：计算账单金额

• JavaScript 比较 和 逻辑运算符
• JS案例：比较两个数的大小
• JS案例：赋值运算符使用示例
• JS案例：逻辑与关系运算符使用实例
• JS案例：实现选择正确或错误结果的示例

• JavaScript 类型转换
• JS案例：通过typedof测试变量类型示例

• JavaScript 语句
• JavaScript 字符串
• JS综合案例：挑选出随机生成的两个数中的最大数

流程控制语句

消息对话框

• Javascript 弹窗
• JS案例：打开页面，首先弹出一个问候对话框
• JS案例：在对话框中通过单击不同按钮来显示不同的内容
• JS案例：根据提示输入内容并且在页面上显示

注释

• JavaScript 注释

条件分支语句

• JavaScript If...Else 语句
• JS案例：通过if...else语句判断两个数中的最大值
• JS案例：判断今天是星期几
• JavaScript switch 语句
• JS案例：通过switch语句判断今天是星期几
• if语句嵌套
• JS案例：根据成绩给出学生的考评等级

循环控制语句

• JavaScript for 循环
• JS案例：通过for循环求1到100的累加和
• JavaScript while 循环
• JS案例：通过while循环求1到100的奇数累加和
• JS案例：通过do...while循环求1到100的偶数累加和
• JavaScript 循环语句嵌套
• JS案例：输出由“*”组成的直角三角形图案

• JavaScript Break 和 Continue 语句
• JavaScript typeof, null, 和 undefined
• JS案例：通过continue 和break来控制程序是否继续运行

• JS综合案例：随机答题的小游戏

JavaScript 调试

• JavaScript 错误 - throw、try 和 catch
• JavaScript 调试
• 实例：表单验证

JavaScript函数

什么是函数

• JavaScript函数

预定义函数

• JS案例：isNaN()函数应用示例
• JS案例：parseFloat（）和parseInt()函数应用

函数的创建

• JS案例：定义函数，能够在页面上输出字符串
• JS案例：定义函数，实现计算商品总价

函数的调用

• Javascript函数的调用
• JS案例：通过函数名直接调用函数
• JS案例：通过超链接调用函数

函数的参数和返回值

• Javascript函数的参数和返回值
• JS案例：通过函数统计商品的总价
• JS案例：通过函数返回值求出两个数中的最大值

函数的变量作用域

• Javascript函数变量的作用域
• JS案例：函数的变量作用域

函数的嵌套

• JS案例：用函数的嵌套算算术题
• JS综合案例：编写可画不同层数三角形图案的函数

JavaScript 对象

面向对象设计思想

• Javascipt 对象

内置对象

• Javascripts Date对象类
• JS案例：读取当前的日期并在页面上显示出来
• JS案例：计算自己活了多少天

• Javascript String对象类
• JS案例：设计一个提取字符串中数字的函数
• JS案例：输入一个字符串，然后反向输出到页面上

• Javascript Math对象
• JS案例：计算圆的面积
• JS案例：求圆周率的4次方

• Javascript Number对象
• JS案例：输出JavaScript能够处理的数值区间

自定义对象

• Javascript 通过Object类创建对象
• JS案例：通过Object类创建对象示例

• 通过字面量创建对象
• JS案例：通过字面量创建对象

• 通过构造函数创建对象
• JS案例：通过构造函数创建对象

• 通过Function对象定义方法
• JS案例：通过Function对象显示创建方法
• JS案例：通过Function对象隐式创建方法

• 通过原型对象（prototype）定义方法
• JS案例：通过原型对象（prototype）访问共享方法

• 通过for...in语句访问对象的属性
• JS案例：通过for...in语句循环访问对象的属性

数组对象

• 什么是数组
• 创建数组对象
• JS案例：创建数组对象]

• 数组的属性和方法
• JS案例：对数组元素进行排序
• JS案例：将两个数组连接成一个数组

• 数组的访问
• JS案例：使用for...in语句遍历数组

• JS综合案例：每天信息提示栏
• JS综合案例：倒计时广告牌

BOM和DOM

• 认识BOM

Window对象

• Window对象
• JS案例：在主窗口中单击链接打开新窗口
• JS案例：设置时间提醒器
• JS案例：延时5秒关闭窗口

Navigator对象

• Navigator对象
• JS案例：显示当前浏览器的信息
• JS案例：显示当前窗口占据显示器的区域大小

Document对象

• Document对象
• JS案例：退出页面时显示浏览当前页面的时间
• JS案例：打开新窗口并输出一则通知信息

DOM对象

• 什么是DOM
• DOM的节点树
• DOM的节点类型
• DOM对象的分类

访问DOM对象

• 访问HTML当前页面指定元素的方法
• JS案例：动态显示实时时间
• JS案例：获取当前页面上所有的超链接
• 访问集合对象的方法
• JS案例：访问当前HTML文档中特定的标签名
• JS案例：显示当前HTML文档中所有的标签名

改变DOM对象

• JavaScript HTML DOM - 改变HTML
• JavaScript HTML DOM - 改变CSS

操纵DOM对象

• 操作DOM元素节点
• JS案例：页面上显示欢迎词
• JS案例: 删除当前页面上所有的水平线

• JS案例：实现复制菜单示例

• JS案例：将当前页面上第一个元素移到末尾

• JS案例：替换元素节点示例

• JS综合案例：创建根据不同来宾显示不同内容的欢迎栏

• 扩展：HTMLDOM教程

事件及事件处理

事件的概念

• 事件的概念
• 事件的绑定
• JS案例：单击页面上两个按钮，显示不同的问候语
• JS案例：使用动态绑定显示问候语

• JS综合案例：实现打分评价

事件对象

• Event对象和事件流
• JS案例：显示触发事件
• JS案例：阻止事件的默认行为

处理鼠标事件

• Javascript 事件的处理
• JS案例：鼠标移入和移出时在页面显示不同的图形

处理键盘事件

• Javascript 事件的处理
• JS案例：按下不同按键时显示不同内容的对话框

处理页面事件

• Javascript 事件的处理
• JS案例：网页加载时对图片进行缩小设置
• JS案例：取消组合键的全选功能

处理文本编辑事件

• Javascript 事件的处理
• JS案例：页面显示鼠标指向的单词
• JS案例：禁止复制粘贴方式输入密码

• JS综合案例：显示按钮的说明性文字
• JS综合案例：实现返回首页、后退和前进按钮示例

Ajax初步

什么是Ajax

• Ajax简介

JavaScript 输出

http://www.runoob.com/js/js-output.html

JavaScript 应用实例

参考文档： [1] http://www.runoob.com/js/js-intro.html