JavaWebDay09
课程大纲
1、ECMAScript 特殊语法、流程控制、常用对象
2、简单的DOM入门
3、BOM浏览器对象模型
第一章 ECMAScript 的特殊语法、流程控制、常用对象
1、特殊语法（了解）
A.不加分号的情况
在一行当中如果不加上分号，在这一行后面没有语句的情况下，不会报错，但是不建议。
B.定义变量不加var关键字（建议加上 var 关键字）
a.不加 var 关键字是 全局变量,在<script>标签当中都可以使用
b.加上 var 关键字是 局部变量,只能在当前的大括号里面使用
2、流程控制语句
A.常见的流程控制语句有:（语法格式和Java语法格式是一模一样的）
if ... else
switch
for 循环
while 循环
do... while 循环
B.不同点:
对于 switch 语句而言,在 Java 当中 小括号里面的取值有 数据类型的限定。在 JavaScript 没有数据类型限定。任何数据类型，都可以写在 switch 语句的小括号当中。
练习题：九九乘法表
<style>
td{
border: 1px solid #FF0000;
width: 100px;
background-color: #feffb0;
padding: 5px 5px 5px 5px;
}
font{
color: #ff39f8;
size: 20px;
}
</style>
<script>
document.write("<table align='center'>");
//外层for循环，控制行数
for(var i=1;i<=9;i++){
document.write("<tr>");
//内层for循环，控制列数
for(var j=1;j<=i;j++){
document.write("<td><center><font>");
document.write(j+"*"+i+"="+(i*j)+" ");
document.write("</font></center></td>");
}
//需要换行
document.write("</tr>");
}
document.write("</table>");
</script>
3、function对象
A.function对象的含义（如何理解）
我们可以把 function 对象看做 Java 当中的"方法"。站在Java方法的角度去理解他
B.function对象的定义和使用格式
a.定义和使用格式1:
//定义格式
function 方法名称(参数列表){
方法体;
return 返回值;
}
//使用格式
var 返回值 = 方法名称(参数值1,参数值2,参数值3);
b.定义和使用格式2:
//定义格式
var 方法名称 = function(参数列表){
方法体;
return 返回值;
}
//使用格式
var 返回值 = 方法名称(参数值1,参数值2,参数值3);
C.function对象的注意事项
a.方法名称（名称相同,前面方法失效）
在JavaScript当中,没有方法的重载，相同名称的方法，后面的会覆盖掉前面的方法。
b.返回值类型
在方法定义的时候，不需要定义返回值类型(所有类型都是var，可以省略)
如果有返回值类型,直接在方法体当中加上 return 返回值;
c.参数列表
形式参数的个数和实际参数的个数，可以不匹配。
如果 形式参数的个数>实际参数的个数。多余的形式参数，赋值是 undefined
如果 实际参数的个数>形式参数的个数。赋值给一个数组，数组的名称叫做 arguments （可变参数）
4、Array数组对象
A.Array数组对象的理解
可以把数组对象 Array 看做 Java当中 ArrayList集合
B.定义数组对象的方式（三种定义）
a. var arr1 = new Array(元素1,元素2,元素3,元素4); // var arr1 = new Array(11,4,true,'ab');
b. var arr2 = new Array(数组长度); // var arr2 = new Array(5); 表示数组的长度是5
c. var arr3 = [元素1,元素2,元素3]; // var arr1 = [11,4,true,'ab']; （推荐使用）
C.数组的特点:(两个可变)
a.数组的长度可变
b.数组的元素类型可变
D.介绍了两个方法
a.join(参数) 根据指定的分隔符,拼接数组内容.作为字符串返回. arr1.join("-"); //11-4-true-ab
b.push(参数) 在数组的末尾添加一个或者多个元素。相当于集合当中的 add()方法
5、Date对象
A.创建对象
var mDate = new Date();
B.两个方法
a.获取当前的时间 mDate.toLocaleString() 根据系统时间获取的
b.获取当前的毫秒数 mDate.getTime() 获取的是从 1970-1-1 到现在的毫秒值
6、Math对象
A.创建对象
Math 不需要创建对象,可以直接采用 Math.方法名称 或者 Math.属性名称
B.常用方法和属性
a.属性:
Math.PI 获取圆周率 3.14159265...
b.方法:
Math.random() //获取随机数,随机数的范围在 0~1 之间,包括0,不包括1的小数
Math.ceil(数据) //向上取整
Math.floor(数据) //向下取整
Math.round(数据) //四舍五入
7、正则对象
A.作用:
主要用于做表单校验.例如:判断用户名密码验证码等等是否正确
B.常见的正则表达式
a.查看API文档
b.查看川哥CHM格式笔记"A开篇说明 -> 03附录 -> 03常见正则表达式"
c.网络搜索常见正则表达式
C.使用方式
a.创建对象
方式1: var reg = new RegExp("正则表达式");
方式2: var reg = /正则表达式/;
b.调用函数
reg.test(参数); //如果匹配成功,返回true。匹配失败,返回false
8、全局对象
A.编码和解码（了解）
a.编码 encode()
b.解码 decode()
B.转换为数字类型的方法
parseInt(数据)
逐一判断前面的是否是数字，直到不是数字为止，将前面的转换为数字
例如: var number = parseInt("2019年1月"); //最终的 number = 2019
如果刚开始的时候,第一个不是数字,变成 NaN
C.将字符串作为js脚本运行
eval("字符串作为js脚本运行")
第二章 简单的DOM入门
1、获取标签的对象
var html标签对象 = document.getElementById("html标签的id");
2、设置属性和内容的方法
A.设置属性的方法
html标签对象.src = "路径"; //设置路径
html标签对象.width = 10; //设置宽度
html标签对象.height = 10; //设置高度
B.修改HTML里面的内容
html标签对象.innerHTML = "需要修改的内容";
课堂案例
<body>
<!-- 定义的HTML标签 -->
<a href="http://www.baidu.com" target="_blank" id="aid"> 点我,跳转到百度首页 </a>
</body>
<script>
//弹出对话框
alert("对话框,消失之后.会重置内容")
//[1]可以获取上面的标签对象,通过id获取
var biaoqianA = document.getElementById("aid");
//[2]修改,设置 相关的内容信息
// 修改原始的属性值
biaoqianA.href = "http://www.itcast.cn";
// 修改HTML 网站当中的内容
biaoqianA.innerHTML = "传智官方网站";
</script>
3、事件的简单学习
事件的绑定方式
a.方式1:
//在HTML代码当中
<img src="路径" id="xx" onclick="函数名称(参数)"/>
//在JS代码当中
function 函数名称(参数){
.......
}
b.方式2（推荐使用）
//在HTML代码当中
<img src="路径" id="xx"/>
//在JS代码当中
function 函数名称(参数){
.......
}
var HTML的标签 = document.getElementById("xx");
HTML的标签.onclick = 函数名称;
第三章 BOM浏览器对象模型
1、BOM概述
A.含义:
BOM浏览器对象模型
B.组成部分
a.Window：窗口对象
b.Naigator：浏览器对象(了解即可)
c.Sceen：显示器屏幕对象(了解即可)
d.Hitory：历史记录对象
e.Loation：地址栏对象
2、Window 窗口对象
A.弹出的方法
a. alter("警告框"); //警告框
b. confirm(); //确认取消框(掌握)
c. prompt(); //输入框 参数:提示语,返回值:输入框的内容
B.打开关闭窗口的方法
a.打开窗口
var 新窗口的对象 = open("要开启的网址");
b.关闭窗口
新窗口的对象.close(); //如果不写新窗口的对象,关闭的是自己
3、定时器
A.一次性定时器
a.开启方式
var id值 = setTimeout(函数名称,毫秒值);
b.取消方式
clearTimeout(id值);
B.循环定时器
a.开启方式
var id值 = setInterval(函数名称,毫秒值);
b.取消方式
clearInterval(id值);
定时器案例（画鸭子）
<body>
<img src="../img/1.png" id="huayazi"/> <br>
<font size="5" id="zi">运行10次之后停下来</font>
<script>
//定义计数器
var count = 0;
//定义定时器的ID
var dingshiqiID;
//[1]通过id获取到img的对象
var yazi = document.getElementById("huayazi");
var shuzi = document.getElementById("zi");
//[2]定义脚标值,1,2,3,4,5...
var index = 0;
//[3]定义函数,准备赋值给定时器,循环执行
function startGame() {
//计数器累加
count++;
//A.累加的操作
index++;
//B.判断是否达到了最大值5.超过5要回来
if (index > 5) {
index = 1;
}
//C.重新设置图片img
yazi.src = "../img/" + index + ".png";
shuzi.innerHTML = "当前的次数是:" + count;
//当次数达到10次的时候,停下来
if (count >= 10) {
//取消定时器
clearInterval(dingshiqiID);
shuzi.innerHTML = "BOOM~~~~~~";
}
}
//[4]开启循环定时器
dingshiqiID = setInterval(startGame, 200);
</script>
</body>
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
