课程门户-章节详情

王梅

1 JavaScript概述
- 1.1 JavaScript的用途、发展简史和特点
- 1.2 将JavaScript脚本加入HTML网页的方法
- 1.3 JavaScript的基本语法
- 1.4 案例实现：在网页打开时弹窗显示欢迎词
- 1.5 闯关练习
2 JavaScript变量和运算符
- 2.1 变量和数据类型
  - 2.1.1 变量
  - 2.1.2 数据类型
  - 2.1.3 案例实现：判断变量的数据类型决定是否递增
- 2.2 运算符
  - 2.2.1 运算符和优先级
  - 2.2.2 案例实现：十六、八和十进制的简单算术运算
- 2.3 综合案例：简易购物计算器
- 2.4 闯关练习
3 JavaScript流程控制语句
- 3.1 选择结构
  - 3.1.1 选择结构控制语句（if和switch语句）
  - 3.1.2 案例实现：根据年龄值显示年龄段
- 3.2 循环结构
  - 3.2.1 循环结构控制语句（for、while和do...while语句））
  - 3.2.2 案例实现：用最简单代码实现年月日下拉选择列表
- 3.3 综合案例：根据指定年份生成年历
- 3.4 闯关练习
4 函数
- 4.1 普通函数
  - 4.1.1 函数的定义和调用
  - 4.1.2 案例实现：用函数实现网页版计算器
- 4.2 匿名函数
  - 4.2.1 匿名函数使用方法
  - 4.2.2 案例实现：用匿名函数实现网页版计算器
- 4.3 变量的作用域
  - 4.3.1 全局变量和局部变量
  - 4.3.2 案例实现：计算1到100的和
- 4.4 内部函数
  - 4.4.1 常用内部函数介绍
  - 4.4.2 案例实现：使用内部函数确认操作是否结束
- 4.5 综合案例：文本框中的跑马灯效果
- 4.6 闯关练习
5 事件和事件处理
- 5.1 事件
  - 5.1.1 事件介绍
  - 5.1.2 案例实现：同一位置两图片切换特效
- 5.2 event事件对象
  - 5.2.1 event事件对象介绍
  - 5.2.2 案例实现：控制文本域中仅能输入数字或字母
- 5.3 综合案例：限定范围的拖动特效
- 5.4 闯关练习
6 自定义对象和内置对象
- 6.1 对象概述
- 6.2 自定义对象
  - 6.2.1 自定义对象的方法
  - 6.2.2 案例实现：用自定义对象方法求商品总价
- 6.3 String对象
  - 6.3.1 String对象介绍
  - 6.3.2 案例实现：生成上传图片预览
- 6.4 Date对象
  - 6.4.1 Date对象介绍
  - 6.4.2 案例实现：案显示当前日期星期
- 6.5 Math对象
  - 6.5.1 Math对象介绍
  - 6.5.2 案例实现：网页版猜数小游戏
- 6.6 Array对象
  - 6.6.1 Array对象介绍
  - 6.6.2 案例实现：图片轮播
- 6.7 RegExp对象
  - 6.7.1 RegExp对象介绍
  - 6.7.2 案例实现：表单数据的验证
- 6.8 综合案例：生成月历
- 6.9 闯关练习
7 BOM浏览器对象模型
- 7.1 浏览器对象模型概述
- 7.2 Window 对象
  - 7.2.1 案例实现：带圆点的图片轮播案例
  - 7.2.2 案例实现：选号抽奖案例实现
  - 7.2.3 案例实现：控制网页加载时显示的广告窗口
- 7.3 screen对象与location对象
  - 7.3.1 案例实现：根据不同的屏幕分辨率打开不同布局的网站首页
- 7.4 history对象与navigator对象
  - 7.4.1 案例实现：识别网页运行的操作平台
- 7.5 document对象
  - 7.5.1 document对象的子对象
  - 7.5.2 案例实现：形成随屏而生的置顶图标
- 7.6 综合案例：浮动广告与滚动新闻
- 7.7 闯关练习
8 DOM文档对象模型
- 8.1 DOM节点
- 8.2 节点对象的属性
  - 8.2.1 案例实现：使用节点属性实现列表项的隐藏
- 8.3 节点对象的方法
  - 8.3.1 案例实现：创建一个无序列表（ul）并且添加两个li节点
  - 8.3.2 节点删除
  - 8.3.3 案例实现：删除列表中最后一个节点
  - 8.3.4 复制节点
  - 8.3.5 案例实现：如何复制一个列表到另一个div钟
- 8.4 DOM操作元素的属性
- 8.5 DOM操作元素的内容
- 8.6 DOM操作元素的样式
- 8.7 案例实现：手风琴特效菜单
- 8.8 综合案例：增加删除员工信息
- 8.9 闯关练习
9 表单对象与表单元素
- 9.1 表单对象和表单元素
  - 9.1.1 表单对象的属性、方法和事件
  - 9.1.2 案例实现：创建会员注册表单
- 9.2 访问表单对象和表单元素
  - 9.2.1 访问表单对象和表单元素
  - 9.2.2 案例实现：随机生成指定位数的验证码
- 9.3 操作表单对象
  - 9.3.1 提交表单对象
  - 9.3.2 案例实现：验证表单文本框提交内容的合法性
- 9.4 综合案例：购物车功能实现
- 9.5 闯关练习

综合案例：简易购物计算器

1 简易购物计算器
2 能力提升

根据给定的网页基础架构，实现简单车贷计算器的功能：

	<!DOCTYPE html ">
	<html >
	<head>
	<meta charset="utf-8" />
	<title>简单的车贷计算器</title>
	<style>
	body{background-color:lightgray;}
	#box{
	width:650px;
	height:450px;
	border:1px solid gray;
	font-size:20px;
	margin:auto;
	padding:20px;
	font-family:'隶书';}
	input,select{font-size:20px;
	border-radius:5px;
	font-family:'隶书';}
	.c1{color:red;}
	</style>
	</head>
	<body>
	<div id="box">
	<h2 style="text-align:center">简单车贷计算器</h2>
	<p class="c1">说明：假设贷款年利率为5.5%</p>
	<p><b>输入购车总价，并选择首付比例和贷款年限，然后点击计算按钮计算首付款和加上利息后的购车总费用。
	首付比例为2到9成，贷款年限为1到5年。</b></p>
	<form name="f1">
	<p>购车总价<input type="text" name="price" id="price" >元</p>
	<p>首付比例<select name="pro" id="pro">
	<option value="0.2">2</option>
	<option value="0.3">3</option>
	<option value="0.4">4</option>
	<option value="0.5">5</option>
	<option value="0.6">6</option>
	<option value="0.7">7</option>
	<option value="0.8">8</option>
	<option value="0.9">9</option>
	</select>成
	</p>
	<p>贷款年限<select name="year" id="year">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	</select>年
	</p>
	<p><input type="reset" value="重置" >
	<input type="button" value="计算" >
	</p>
	<p>首付款<input type="text" name="first" id="first">元
	购车总费用<input type="text" name="sum" id="sum">元
	</p>
	</form>
	</div>

	</body>
	</html>

网页界面截图如下：

图片预览