1.1 JavaScript的概述
1.1.1 什么是JavaScript
JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。
l JavaScript 被设计用来向 HTML 页面添加交互行为。
l JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
l JavaScript 由数行可执行计算机代码组成。
l JavaScript 通常被直接嵌入 HTML 页面。
l JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
JavaScript的组成：
1.1.1 JavaScript的作用
使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
1.1.2 JavaScript的引入
在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。对他们的具体讲解如下：
1) 内嵌式，在HTML文档中，通过<script>标签引入，如下
<script type="text/javascript">
//此处为JavaScript代码
</script>
2) 外联式，在HTML文档中，通过<script src=””>标签引入.js文件，如下：
<script src="1.js"type="text/javascript" ></script>
1.2 基本语法
1.2.1 变量
1) 在使用JavaScript时，需要遵循以下命名规范：
l 必须以字母或下划线开头，中间可以是数字、字符或下划线
l 变量名不能包含空格等符号
l 不能使用JavaScript关键字作为变量名，如：function
l JavaScript严格区分大小写。
2) 变量的声明
var 变量名; //JavaScript变量可以不赋值，直接使用。默认值：undefined
3) 变量的赋值
var 变量名= 值; //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据
1.2.2 数据类型
【基本类型】
l undefined, undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。
l null,只有一个专用值 null，表示空，一个占位符。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
n alert(null == undefined); //输出 "true"，尽管这两个值相等，但它们的含义不同。
l boolean，有两个值 true 和 false
l number，表示任意数字
l string，字符串由双引号（"）或单引号（'）声明的。JavaScript 没有字符类型
【引用类型】
l 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
l JavaScript是基于对象而不是面向对象。
l JavaScript提供众多预定义引用类型（内置对象）。
造一个对象：var obj = new Object();
造一个字符串对象：var str = new String();
造一个日期对象：var date = new Date();
l 内置函数的重要转换: 字符串转成数字
parseInt parseFloat
1.2.3 运算符
JavaScript运算符与Java运算符基本一致。
l 算术运算符
y=5;
1.1.1 算符操作
JavaScript规范规定以下操作规则（了解）
l Boolean运算
l JS中的语句
跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致， 此处不再一一阐述
1.1 函数(重要)
js的函数是js非常重要的组成部分，js最常用的函数的定义方式有两种：
1）普通函数：
function 函数名(参数列表){
js逻辑代码
}
函数调用：函数名(实际参数);
例如：求和的函数
定义函数：
function add(a,b){
alert(a+b);
}
执行函数：add(3,5);
执行结果：8
2）匿名函数：
匿名函数也就是没有名字的函数
function(参数列表){
js逻辑代码
}
但是匿名函数没有办法直接调用，一般情况下匿名函数有两种使用场景：
第一种：将匿名函数赋值给一个变量，使用变量调用函数
定义函数并赋值给变量：var fn = function(参数列表){js逻辑代码}
调用函数：fn(实际参数);
第二种：匿名函数直接作为某个函数实际参数
例如：
function xxx(数字类型参数，字符串类型的参数，函数类型的参数){
//js逻辑代码
}
调用该函数：
xxx(100,”abc”,function(){});
1.2 事件(重要)
1.2.1 事件概述
js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：
1）事件源：被监听的html元素
2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3）事件与事件源的绑定：在事件源上注册上某事件
4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
1.2.2 常用的事件
第1章 BOM对象
1.1 js的BOM概述（了解）
BOM（Browser Object Mode），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，可以通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能，让我们来学习吧。
1.1.1 js的BOM对象
1）Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
2）Window对象,Window对象表示一个浏览器窗口或一个框架。
3）Navigator对象，包含的属性描述了正在使用的浏览器
4）History对象，其实就是来保存浏览器历史记录信息。
5）Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
1.1.2 Window对象
Window对象此处学习它的三个作用：
1）弹框的方法
2）定时器
3）全局方法
1.1.3 弹框的方法（重点）
1）提示框：alert(提示信息);
2）确认框：confirm(提示信息);
3）输入框：prompt(提示信息);
1.1.4 定时器（重点）
1）执行一次的定时器：setTimeout(函数,毫秒值)
2）执行多次的定时器：setInterval(函数,毫秒值)
3）清除定时器: clearInterval(定时器返回的id值)
1.1.5 常用的全局方法（了解）
1）parseInt/parseFloat函数 ---- Integer.paseInt();
2）eval函数---特点：可以将字符串解析成js脚本
1.1.6 Location对象（重点）
重点记忆location.href可以在js中进行url访问
location.href相当于在浏览器的地址栏中输入地址 并敲回车
第2章 案例：轮播图
2.1 案例需求
第一天完成首页中，“轮播图”只提供一张图片进行显示。现需要编写程序，完成自动切换图片功能。
1.1 相关知识点：定时器setInterval
window.setInterval(code, millisec) 按照指定的周期（间隔）来执行函数或代码片段。
参数1： code 必需。执行的函数名或执行的代码字符串。
参数2：millisec 必须。时间间隔，单位：毫秒。
返回值：一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。
例如：
* 方式1：函数名 ， setInterval(show , 100);
* 方式2：函数字符串， setInterval("show()", 100);
l window对象提供都是全局函数，调用函数时window可以省略。
n window.setInterval() 等效 setInterval()
1.2 案例分析
1. 编写html页面，为页面设置加载事件onload
2. 编写事件触发函数
3. 获得轮播图图片
4. 开启定时器，2000毫秒重新设置图片的src属性
1.3 案例实现
l 步骤1：为轮播图img标签添加id属性
l 步骤2：编写js代码，页面加载触发指定函数
<script type="text/javascript">
var i = 1;
setInterval(function(){
varimgId=document.getElementById("imgId");
if(i<=3){
i++;
}else{
i=1;
}
imgId.src="img/"+i+".jpg";
},3000);
</script>
第1章 案例：定时弹广告
1.1 案例需求
在平日浏览网页时，页面一打开5秒后显示广告，然后5秒后再隐藏广告。
1.1 相关知识点
1.1.1 JavaScript定时器：setTimeout
l setTimeout() 在指定的毫秒数后调用函数或执行代码片段。
setTimeout(code,millisec)
code 必需。要调用的函数或要执行的代码字符串。
millisec必需。在执行代码前需等待的毫秒数。
l setInterval() 以指定周期执行函数或代码片段。（上一个案例已经讲解）
l clearInterval() 取消由setInterval() 设置的 timeout。
l clearTimeout() 取消由 setTimeout()方法设置的 timeout。（本案例不使用，此处一并讲解）
1.1.1 JavaScript样式获得或修改
l 获得或设置样式
obj.style.属性 ，获得指定“属性”的值。
obj.style.属性=值 ，给指定“属性”设置内容。
如果属性由多个单词使用“-”连接，需要将“-”删除，并将后一个单词首字母大写。
例如：background-color 需要改成 backgroundColor
l 实例：
<divid="adDiv" style="display: none;">
<img src="img/ad.jpg" />
</div>
<script type="text/javascript">
setTimeout(function(){
var adDiv =document.getElementById("adDiv");
adDiv.style.display="block";
setTimeout(function(){
adDiv.style.display="none";
},3000);
},3000);</script>
第2章 案例：表单验证案例
2.1 案例需求:
对用户名进行验证,要求必须填写
2.2 相关知识点
DOM操作
document.getElementById()获取页面中的标签元素
属性: value 表达元素的value属性值
属性:innerHTML 向元素体添加内容
属性:style 改变元素的样式
<script type="text/javascript">
functioncheckForm(){
varflag = true;
varusername = document.getElementById("username");
varusernameValue = username.value;
if(!usernameValue){
flag= false;
varusernameSpan = document.getElementById("usernameSpan");
usernameSpan.innerHTML="用户名必须填写";
usernameSpan.style.color="#FF0000";
//alert("用户名必须填写");
}
returnflag;
}
</script>