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>