网页设计与制作-项目8

JavaScript基础知识

1.JavaScript简介

        说起 JavaScript，其实大家并不陌生，大家浏览的网页中或多或少都有 JavaScript 的影子。例如，淘宝网中的焦点图，每隔一段时间焦点图就会自动切换。再如，单击网站导航时会弹出一个列表菜单。这些都可以使用JavaSeript来实现。

a.JavaScript的起源

       JavaScript 是一种被广泛用于 Web开发的脚本语言。JavaSoript 的前身是 LiveScript，是由网景 ( Netscape)公司开发的脚本语言。后来在 Sun 公司推出著名的 Java 之后，网景公司和 Sun 公司于 1995年一起重新设计了LiveScript，并把它改名为 JavaSricpt。

          在概念和设计方面，Java 和JavaScript 是防种完全不同的语言。Java 是面向对象的程序设计语言，用于十发企业应用程序；而JavaSeript 则是在测览器中执行，用于开发客户端浏览器的应用程序，能够实现用户与测览器的动态交互。

b.JavaScript的特点

         JavaScript 是一种基于对象（Object ）和事件驱动（Event-Driven）并具有安全性的脚本语言，它具有以下几个主要特点：

• 解释性
• 基于对象
• 事件驱动
• 跨平台性
• 安全性

c.JavaScript的应用

          JavaSoript 功能十分强大，其最主流的应用是创建网页特效。使用 JavaSeript 实现的具有动态交互效果的贝自在网页上随处可见。下面将介绍 JavaScript 的儿种常见应用。
①验证用户输人的内容：使用 JavaSeript 可以在客户端对用户输人的内容进行验证。

②添加图片动画特效：在浏览网页时，经常会看到一些图片动画特效，让页面看起来更炫酷。使用
JavaSoript 也可以实现图片动画特效。

③弹出广告窗口：在打开网页时，经常会弹出一些广告窗口，这些广告窗口是网站最主要的盈利手段。

④添加文字动画特效：使用JavaScript可以给文字添加多种动画特效。

2.JavaScript引入方式

        JavaScript的引入方式与CSS类似

（1）行内式

（2）嵌入式

（3）外链式

3.JavaScript基本语法

·（1）代码执行顺序

（2）字母书写要求

（3）结尾分号要求

①（ ；）作为语句结束标签

（4）注释使用技巧

①单行注释使用双斜线“//”，放在开头

②多行注释  " /* "开始   “ */ ”结尾

变量

1.变量的声明

       在JavaScript 中使用“var“关键字声明变量，这种直接使用“var’” 关键结明变量的方法，称为“显式声明变量”。”let""var"声明变量。

注意事项：

1. 必须以字母、美元符号（＄)或下画线开头，中间可以是数字美元符号或下画线。
2. 变量名不能包含空格、加号、减号等符号。
3. 不能使用JavaScript 中的关键宇作为变量名，如var、int。
4. 变量名严格区分大小写。

2.变量的赋值

可以在声明变量的同时为变量赋值，也可以在声明后为变量赋值。

1.var unit,room;              //声明变量
2.var unit=3;                 //为变量赋值
3.var room=1001;              //为变量赋值
4.var fname='Tom',age=12;       //声明变量的同时赋值

数据类型和运算符

1.数据类型

（1）数值型

（2）字符串型

（3）布尔型

（4）特殊数据类型

①转义字符

②未定义值：注意，Null和Undefined与空字符串（“）和0都不等于。

③空值：注意，Null不等于空字符串（“ ”）和0。

Null与Undefined的区别是，Null表示一个变量被赋予了一个空值，而Undefined则表示该变量尚未被赋值。

2.运算符

（1）算术运算符：（+）加，（-）减，（*）乘，（/）除

（2）比较运算符：

（3）逻辑运算符：

（4）赋值运算符：

流程控制语句

1.条件语句

（1）if条件语句：通过“false"或”true“，来确定是否运行执行语句。

①单向判断

if(执行条件）{
        执行语句
}

②双向判断语句

if(执行条件){
  执行语句1
}else{
执行语句2
}

③多项判断语句

if(执行条件1){
  执行语句1
}else  if(执行条件2){
  执行语句2
}
else  if(执行条件3){
  执行语句3
}
.....

(2)switch条件语句

            switch条件语句功能与if条件语句类似。不同的是switch条件语句只能针对某个表达式的值作出判断，从而决定执行哪一段代码。相比于if条件语句，使用switch条件语句的代码更加清晰简洁、便于阅读。

switch (表达式){
	case 目标值1:
		执行语句1
		break;
	case 目标值2:
		执行语句2
		break;
	．．．
	case 目标值n:
		执行语句n
		break;
	default:
		执行语句n+1
		break;

2.循环语句

（1）while循环语句:是最基本的循环语句。

while(循环条件){
执行语句
...
}

（2）do....while循环语句:也称为后测试循环语句，它也是利用一个条件来控制是否要继续执行该语句。

do {
执行语句
...
} while(循环条件);

（3）for循环语句:也称为计次循环语句，一般在循环次数已知的情况会使用该循环语句。

for（初始化表达式; 循环条件; 操作表达式）{
        执行语句
	...
}

3.跳转语句

（1）break语句:可应用在switch和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句。

（2）continue语句:continue语句的作用是终止本次循环，执行下一次循环。

   注意:continue语句只是结束本次循环，而不是终止整个循环语句的执行。而break语句则是结束整个循环过程，不再判断执行循环的条件是否成立。

函数

1.函数的定义

函数由 “function”“函数名”“参数”和“函数体”这 4 个部分组成，对它们的解释如下：

• function：在声明函数时必须使用的关键字。
• 函数名：创建函数的名称，使用者自行定义，函数名是唯一的
• 参数：外界传递给函数的值。参数是可选的，因此可以为空。当有多个参数时，各参数用英文逗号分开。
• 函数体：函数定义的主体，用于实现特定的功能。

2.函数的调用

           函数定义后并不会自动执行，而是需要在特定的位置调用函数后，才能执行该函数。函数的调用非常简单，只需引用函数名，并传入相应的参数即可。

3.函数中变量的作用域

全局变量：定义在所有函数之外，作用于整个程序的变量

局部变量：定义在函数体之内，作用于函数体的变量

对象

1.认识对象

         在计算机世界中，不仅包括来自于客观世界的对象，还包含为解决问题而引入的抽象对象。

2.创建对象和删除对象属性

（1）创建对象

            在JavaScript中，使用new运算符可以创建对象，将新建的对象赋值给一个变量后，就可以通过这个变量访问对象的属性和方法。

变量名=new 对象名（）

（2）删除对象属性

              delete可以删除对象的属性，它的操作数应为一个属性访问表达式。需要注意的是，内置对象的属性及方法多数不能使用delete删除，对象继承于原型的属性和方法也不能使用delete删除，同时delete只是断开属性和对象之间的联系，从而使对象不再能操作属性。

3.内置对象

①Date对象：

①Date对象：

        要使用Date对象，必须先使用new关键字创建该对象。创建Date对象的常见方式有以下3种：

1.不带参数

2.创建一个指定日期的Date对象

3.创建一个指定时间的Date对象

②Math对象：

③String对象：

数组

       数组是JavaScript中最常用的数据类型之一，一个数组类型的变量可以保存一批数据，并且数据可以是任意类型，例如字符串、数字、数组或对象等。利用数组可以很方便地对数据进行分类和批量处理。

1.初识数组

         数组是一组数据有序排列的集合，使用数组将50人的信息保存起来只需定义一个变量，并且数组可以进行循环遍历，能够十分便捷地获取保存的数据。

结论：JavaScript数组是无类型的，也就是说数组元素可以是任意类型，并且同一个数组中的不同元素也可以有不同的类型，甚至可以是对象或其他数组。

2.创建数组

（1）使用Array对象创建数组

             Array对象创建数组是通过new关键字实现。

// 元素值类型为字符型
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array();  // 或    var arr2 = new Array;

（2）使用“[]”创建数组

         使用“[]”创建数组的方式与使用Array()对象创建数组的方式类似，只需将new Array()替换为[]即可。

var weather = ['wind', 'fine',];    // 相当于：new Array('wind', 'fine',)
var empty = [];                          // 相当于：new Array
var mood = ['sad', , , ,'happy'];   // 控制台输出mood：(5) ["sad", empty × 3, "happy"]

两种创建数组方式的区别： 直接使用“[]”创建数组可以创建含有空存储位置的数组；使用Array对象创建数组则不可以。

3.数组的常用属性和方法

                     数组是一组有序排列的数据对象的集合，也包含属性和方法。

（1）length属性

               数组的length属性是数组最常用的属性，该属性的值代表了数组中元素的个数。另外，由于数组索引值是从0开始的，因此length属性值会比数组中最大的索引值大1。

（2）toString()方法

              toString()方法用于返回一个字符串，该字符串包含数组中的所有元素，各元素间使用逗号隔开。

多学一招：使用for...in循环完成数组

javaScript中数组是一种特殊的对象，因此还可以使用for...in循环，像枚举对象属性一样枚举数组索引。而且使用for...in循环遍历数组，可以不需要获取数组的length属性。

for(var i in arr){
	sum = sum + arr[i];
}

4.二维数组

           对于复杂的业务逻辑，有时简单的一维数组不能够满足需求，需要使用二维数组。当数组中的元素也是数组时，就形成了二维数组。

BOM对象与DOM对象

          BOM对象和DOM对象是JavaScript的重要组成部分。其中，BOM对象主要用于操纵浏览器窗口的行为和特征。DOM是处理HTML文档的标准技术，允许JavaScript程序动态访问、更新浏览页面的内容、结构和样式。

1.BOM

1.核心对象：windows

2.Window子对象：

①screen：可获取与屏幕相关的数据，例如屏幕的分辨率，坐标信息等

②location：用于获取当前浏览器中URL地址栏内的相关数据

③history:主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能

④document：也称为DOM对象，是HTML页面当前窗体的内容，同时它也是JavaScript重要组成部分之一

⑤navigator:用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。

(1)window对象

window对象表示整个浏览器窗口，用于获取浏览器窗口的大小、位置，或设置定时器等。

• 打开和关闭窗口
• setTimeout()定时器的使用
• setInterval()定时器的使用

（2）screen对象

       screen对象用于获取用户计算机的屏幕信息。例如，屏幕分辨率、颜色位数等。

（3）location对象

                   location对象用于获取和设置当前网页的URL地址。

（4）history对象

         history对象最初的设计和浏览器的历史记录有关，但出于隐私方面的考虑，该对象不再允许获取用户访问过的URL历史。history对象主要的作用是控制浏览器的前进和后退。

（5）document对象

document对象用于处理网页文档，通过该对象可以访问文档中所有的元素。

2.DOM

             DOM（Document Object Model）被称为文档对象模型，可以用于控制HTML文档、CSS文档。例如，改变盒子的大小、标签栏的切换等。DOM对象将网页中文档的对象关系规划为节点层级，构成它们之间的等级关系，这种各对象间的层次结构被称为节点树。

节点分类：

1.根节点：每个节点树有一个根节点

2.父节点：某个节点的上一级节点，统称为父节点

3.子节点：某个节点的下一级节点，统称为子节点。

4.兄弟节点：具有相同父节点的两个节点，被称为兄弟节点。

（1）节点的访问

        在DOM中，每个节点都是一个对象，因此每个节点对象都具有一系列的属性、方法。JavaScript通过使用节点的属性和方法可以访问指定元素和相关元素，从而得到文档中的各个元素对象。

• 访问指定元素节点
• 访问相关元素

（2）元素对象的操作

           由于DOM将HTML文档表示为一棵DOM对象节点树，每个节点对象表示文档的特定部分，因此通过修改这些对象，就可以动态改变页面元素的属性。

（3）元素属性和 内容操作

          元素对象除了节点操作，还具有一些属性和内容的操作

（4）元素样式操作

        在操作元素属性时，style属性可以修改元素的样式，className属性可以修改元素的类名，通过这两种方法即可完成元素的样式操作。

①style属性:每个元素对象都有一个style属性，使用这个属性可以动态调整元素的内嵌样式，从而获得所需要的效果。例如：

test.style.width = "200px";    
//设置样式，相当于：#test{width:200px; }

②className属性：元素对象的className属性用于切换元素的类名，或为元素追加类名。例如：

test.className = "aa";  
 //添加样式，执行后：<div id="test" class="aa">

事件处理

        事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript代码执行相关的操作。

1.事件和事件调用

          事件是指可以被JavaScript侦测到的交互行为。例如，在网页中滑动鼠标、单击鼠标、滚动屏幕、单击键盘等。当发生事件以后，可以利用JavaScript来执行一些特定的代码，从而实现网页的交互效果。

2. 常用的JavaScript事件

（1）鼠标事件

                 鼠标事件是指通过鼠标动作触发的事件。

（2）键盘事件

                    键盘事件是指用户在使用键盘时触发的事件。

（3）表单事件

               表单事件指的是对Web表单操作时发生的事件。

（4）页面事件

       页面事件可以改变JavaScript代码的执行时间。