随笔二——JavaScript脚本语言

模块三 JavaScript脚本语言
JavaScript（简称“JS”）由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。为了确保不同的浏览器上运行的JavaScript标准一致，几个公司共同制定了JS的标准命名为ECMAScript。JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。它的出现主要用于处理网页中的前端验证，所谓的前端验证就是指检查用户输入的内容是否符合一定的规则。比如：用户名长度，密码长度，邮箱格式等。
JavaScript诞生于1995年，Netscape在最初将其脚本命名为LiveScript，在 Netscape与Sun合作后，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
本模块将介绍JavaScript的流程控制、编写JavaScript函数、JavaScript事件的处理以及使用JavaScript常用对象。通过本模块的学习，读者可以了解JavaScript脚本语言，对后续模块的学习起到一定的帮助。
任务一了解JavaScript
【任务描述】
正在学习前端的小明已经学过了HTML、Css和Css3。接下来老师布置任务让了解JavaScript，并查询质料总结JavaScript的发展历史和特点。小明应该从哪方面入手查询质料并向老师和同学介绍呢？
本任务将介绍JavaScript语言的发展，技术特点，和基本语法知识，从而使读者对JavaScript有一个全面的了解。
【任务目标】
1.充分了解JavaScript语言的特点；
2.会使用Java语言进行简单流程程序的编写；
3.养成规范化的编程习惯。
【任务实施】
1.JavaScript的发展历史
JavaScript诞生于1995年，当时，它的主要目的是处理以前由服务器端需要负责的一些没有输入验证操作。在JavaScript问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator希望通过JavaScript来解决这个问题。在人们普遍使用电话拨号上网的时代，拨号上网速度之慢导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。由此诞生了JavaScript！
JavaScript在1995年2月一经发布就获得了巨大的成功，Netscape随后在Netscape Navigator 3（网景浏览器）中发布了JavaScript 1.1版本。JavaScript发展至今不断迭代，已经取得了伟大成就；但是JavaScript是由公司开发而成的，不便于其他公司拓展和使用，同时JavaScript开发者也在丰富自己的代码和选择使用框架方式，让JavaScript运行在标准兼容的无障碍的网页中。
为了让JavaScript能够运行在标准兼容的无障碍的网页中，也就是需要解决JavaScript的兼容问题；欧洲计算机制造商协会ECMA牵头制定JavaScript标准，取名为ECMAScript，至此，JavaScript 的核心语言ECMAScript产生。ECMAScript 是一门由 ECMA TC39 委员会标准化的编程语言，其规定了JavaScript的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。其在1997年正式发布第一版，历经十数年的迭代更新，于2018年发布了ECMAScript 8，其功能空前强大，增加了更加丰富的新特性。JavaScript语言版本更迭的发展历史：
表3.1 JavaScript语言更迭的版本
年份名称描述
1997 ECMAScript1 第一个版本
1998 ECMAScript2 版本变更
1999 ECMAScript3 添加正则表达式 try/catch
ECMAScript4 没有发布
2009 ECMAScript5 添加”strict mode”，严格模式添加JSON支持
2011 ECMAScript5.1 版本变更
2015 ECMAScript6 添加类和模块
2016 ECMAScript7 增加指数运算符、Array.prototype.includs
2018 ECMAScript7 添加rest/spread属性、异步迭代、Promise.finally()、RegExp
2.JavaScript语言的特点
（1）简单性：JavaScript的简单性主要体现在：它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，对于学习Java是一种非常好的过渡。它的变量类型是采用弱类型，并未使用严格的数据类型。
（2）动态性：JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。事件驱动就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
（3）跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。
（4）安全性：JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。有效地防止数据的丢失。
（5）是一种脚本编写语言：JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
（6）基于对象的语言：JavaScript是一种基于对象的语言。它能运用自己已经创建的对象。许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3.JavaScript语言的基本语法
（1）基础原则
编写JavaScript代码时，首先要注意以下原则：
①严格区分大小写：JavaScript和html不同，html中的标签不严格区分大小写，JavaScript
中的语句都是大小写敏感。
②JavaScript中的每一条语句以(;)结尾：语句结束时以英文的分号结尾表示语句结束。不加分号，浏览器会消耗一些系统资源自动添加，有时候浏览器会加错分号，所以在开发中必须写分号。
③JavaScript中会忽略多个空格和换行，所以可以利用空格和换行对代码格式化。
④标识符：标识符中可以含有字母、数字、_、$。标识符不能以数字开头不能使用ES中的关键字或保留字。标识符一般采用驼峰命名法(首字母小写，每个单词的开头字母大写，其余字母小写)。
（2）变量和常量
变量可以用来保存常量，变量的值是可以任意改变的。在JavaScript中使用var关键字来声明变量。JavaScript变量分为基本变量和引用变量。基本类型变量有字符串类型String、数值类型Number，布尔值类型Boolean、空值Null、未定义Undefined…基本类型保存在栈中。引用类型有Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型…引用类型保存在栈内存和堆内存中。
常量是一些不可变的值，如果一个变量的值只能被赋予一次，初次赋值之后就不能改变。常量通常用全大写字母来命名，如果名字包含多个单词则用下划线隔开。
（3）JavaScript标识符
在JavaScript中所有的可以由我们自主命名的都可以称为标识符(例如：变量名、函数名、属性名)。
（4）JavaScript运算符
计算机的最基本用途之一就是执行数学运算，作为一门计算机语言，JavaScript也提供了一套丰富的运算符来操纵变量。我们可以把运算符分成以下几组：
 算术运算符：包括加（+）、减（-）、乘（）、除（/）、取余（求模%）、自加（++）和自减（–）。
 关系运算符：包括大于（>）、小于（<）、等于（==）、大于等于（>=）、小于等于（<=）和不等于（！=）。
 位运算符：包括与（&）、异或（^）、或（|）、取反（~）、左移（<<）、右移（>>）和右移补零（>>>）。
 逻辑运算符：包括逻辑与（&&）、逻辑或（||）和逻辑非（！）。
 赋值运算符：包括赋值运算符（=）、加赋值（+=）、减赋值（-=）、乘赋值（=）、除赋值（/=）、取模赋值（%=）和按位赋值。
 一元运算符：一元运算符只需要一个操作。正号(+)、负号(-)
 条件运算符：条件运算符也叫三元运算符。其语法为：条件表达式？语句1：语句2。条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。
运算符的优先级如下所视：
 .、【】、new
 ()
 ++、–
 !、~、+(单目)、-(单目)、typeof、void、delete
 %、、/
 +(双目)、-(单目)
 <<、>>、>>>
 <、<=、>、>=
 、!、===
 &
 ^
 |
 &&
 ||
 ?:
 =、+=、-=、=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
（5）JavaScript控制流程
JavaScript的代码可分为顺序结构、分支结构和循环结构三种。分支结构又叫选择结构，可以分为if结构和switch结构两种。if结构可以分为单分支结构、双分支结构和多分支结构。
单分支结构：
【例3.1】
if(条件表达式)
{
语句
if语句在执行时，会对条件表达式进行求值的判断
//如果条件表达式的值为true，则执行if后的语句
//如果条件表达式的值为false，则不会执行if后的语句
}
双分支结构：
【例3.2】
//if语句在执行时，会对条件表达式进行求值的判断
if(条件表达式)
{
语句1
//如果条件表达式的值为true，则执行if后的语句
}else{
语句2
//如果条件表达式的值为false，则不会执行if后的语句
}
多分支结构：
【例3.3】
if(条件表达式1)
{
语句1
}else if(条件表达式2){
语句2
}else if(条件表达式3){
语句3
}else if(条件表达式4){
语句4
}
//当该语句执行时，会从上往下依次对条件表达式进行求值判断
//如果值为true，则执行当前语句
//如果结果为flase，则继续向下判断
switch结构如下所示：
【例3.4】
switch(条件表达式)
{
case 表达式：
语句1
break;
case 表达式：
语句2
break;
case 表达式：
语句3
break;
default:
语句4
break;
}
//执行流程：
//switch…case…语句
//在执行时会一次将case后的表达式的值和switch后的条件式全等比较
//如果比较结果为true，则从当前的case处开始执行代码。
//如果比较结果为false，则继续向下比较
循环结构可以分为for循环、while循环和do-while循环三类。for循环用于循环次数确定的情况，while循环用于现行条件判断的循环，do-while循环用于至少循环一次的循环。
while 循环：
【例3.5】
while(条件表达式){
语句…
}
//while语句在执行时
//先对条件表达式判断
//如果值为true，则执行循环体
//循环体执行完毕继续对条件表达式进行判断
for 循环：
【例3.6】
for(初始化值，条件表达式，更新表达式)
{
语句
}
//for循环的执行流程：
//执行初始化表达式，初始化变量
//执行条件表达式，判断是否执行循环
//如果为true，则执行循环
//如果为false，则终止循环
do-while 循环：
【例3.7】
定义变量，初始化
do
{
语句
}while(条件表达式);
（6）数组（Array）
数组也是一个对象，它和我们普通对象功能类似，也是用来储存一些值的，不同的是普通对象是使用字符串作为属性名的而数组是使用数字来作为索引操作元素(从0开始的整数就是索引)数组的储存性能比普通对象要好，在开发中我们经常使用数组来储存一些数据。
var arr=new Array(10);
数组的四个方法：
①push ()该方法可以向数组的末尾添加一个或多个元素，并返回数组的长度。
②pop()该方法可以删除数组的最后一个元素
③unshift()该方法向数组开头添加一个或多个元素，并返回新的数组长度
④shift()该方法可以删除第一个元素，并将被删除的元素作为返回值返回
（7）继承
①原型链继承
重点：让新实例的原型等于父类的实例。
特点：实例可继承的属性：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）
缺点：新实例无法向父类构造函数传参、继承单一、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）
②借用构造函数继承
重点：用.call()和.apply()将父类构造函数引入子类函数。（在子类函数中做了父类函数的自执行。（复制））
特点：只继承了父类构造函数的属性，没有继承父类原型的属性。解决了原型链继承缺点1、2、3、可以继承多个构造函数属性（call多个）、在子实例中可向父实例传参。
缺点：只能继承父类构造函数的属性、无法实现构造函数的复用。（每次用每次都要重新调用）、每个新实例都有父类构造函数的副本。
③组合继承（组合原型链继承和借用构造函数继承）（常用）
重点：结合了两种模式的优点，传参和复用。
特点：可以继承父类原型上的属性，可以传参，可复用、每个新实例引入的构造函数属性是私有的。
缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。
④寄生式继承
重点：给原型式继承外面套了个壳子。
优点：没有创建自定义类型，套了个壳子返回对象，使函数成了创建的新对象。
缺点：没用到原型，无法复用。
⑤寄生组合式继承（常用）
寄生：在函数内返回对象然后调用。
组合：函数的原型等于另一个实例、在函数中用apply或者call引入另一个构造函数，可传参。
重点：修复了组合继承的问题。
（8）对象：JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。
（9）函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法，函数就是包裹在花括号中的代码块，前面使用关键词 function：当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
（10）事件：JavaScript与HTML之间的交互是通过事件实现的。事件是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种模型使用了我们的观察者模式，支持页面的行为（JS代码）与页面的外观（HTML，CSS）之间的松散耦合。
任务二第一个JavaScript程序
【任务描述】
小明已经了解了JavaScript的特点和历史，接下来就要进行JavaScript程序的编写。老师让其一天的时间编写第一个JavaScript程序，小明应该从何入手呢？
本任务将编写第一个JavaScript程序，从而使读者慢慢的了解JavaScript程序。
【任务目标】
1.了解JavaScript的编写和运行；
2.知道JavaScript代码编写的几种位置；
3.知道JavaScript输出的几种方式；
4.第一个JavaScript程序。
【任务实施】
1.JavaScript的编写和运行
（1）编写JavaScript所需要的文本编辑器
可以用任何文本编辑器来编写JavaScript代码。推荐以下几种文档编辑器：
 Visual Stusdio Code
微软出的Visual Studio Code，可以看做迷你版Visual Studio，免费！跨平台！内置JavaScript支持，强烈推荐使用！
 Sublime
TextSublime Text是一个好用的文本编辑器，免费，但不注册会不定时弹出提示框。
 Notepad++
Notepad++也是免费的文本编辑器，但仅限Windows下使用。
 Hbuilder
HBuilder 是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。HBuilder的最大优势是快。
注意：不可以用Word或写字板编写JavaScript或HTNL，带格式的文本保存后不是纯文本文件，无法被浏览器正常读取。也尽量不要用记事本，它会在保存UTF-8格式文件时添加BOM头。
（2）如何运行JavaScript
要让浏览器运行JavaScript，必须有一个HTML页面，在HTML页面引入JavaScrit让浏览
器加载该HTML页面，执行JavaScript代码。
在硬盘上创建好HTML和JavaScript文件，用浏览器打开。（由于浏览器的安全
限制，以file://开头的地址无法执行，如联网等JavaScript代码，最终，需要架设一个Web服务器。以http://开头的地址来正常执行所有JavaScript代码。）

2.JavaScript代码编写的位置
（1）可以将JS代码编写到标签onlick的属性中。（属于结果与行为耦合，不方便维护，不推荐使用）
你点我一下
（2）可以将JS代码编写在超链接的href属性中，在点击超链接时，会执行JavaScript代码。(属于结果与行为耦合，不方便维护，不推荐使用)
你点我一下
你点我一下
（3）可以将JS代码写在script标签中。

（4）可以将JS代码编写到外部JS文件中，通过script标签引入

3.JavaScript的输出方式
（1） alert();
在浏览器中弹出一个对话框，把要输出的内容显示出来。
【例3.8】

图3-1 alert();代码结果
（2）console.log();
在控制台输出内容，需要浏览器支持控制台输出。(打开网页，按Ctrl+Shift+c 或按F12调出网页检查页面，按console看到控制台输出的内容)
【例3.9】

图3-2 console.log();代码结果
（3）document.write();
直接在网页的页面中输出内容。
【例3.10】

图3-3 document.write();代码结果
4.第一个JavaScript程序
【例3.11】

（8）for…in循环 JavaScript还支持另一种循环模式，for…in循环。这一类循环将对象属性作为参数变量来实现循环。语法： for(variablename in object){ statement } 任务四编写JavaScript函数【任务描述】小明学习过流程控制后即将进入JavaScript函数的学习，JavaScript属于JavaScript比较难的一点，为了更好的学习，老师让小明提前了解一下JavaScript函数，小明应该从何入手呢? 本任务将编写一下简单的JavaScript函数，使读者更好的了解JavaScript函数。【任务目标】 1.认识JavaScript函数； 2.自定义函数和内置函数。【任务实施】 1.认识JavaScript函数（1）JavaScript函数简介函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法，函数就是包裹在花括号中的代码块，前面使用了关键词 function：当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。这样就无需一次又一次编写相同的代码。它可以帮助程序员编写模块化代码。函数使程序员可以将一个大型程序划分为许多小的和可管理的函数。（2）背景知识 JavaScript的函数具有两个主要特征： ①函数是第一对象(first-class object)。 ②第二个是函数作用域支持。函数是对象：  可以在程序执行时动态创建函数。  可以将函数赋值给变量，可以将函数的引用拷贝至另一个变量，可以扩充函数，除了某些特殊场景外均可被删除。  可以将函数作为参数传入另一个函数，也可以被当作返回值返回。  函数可以包含自己的属性和方法。有可能会有这样的情况：一个函数A，它也是一个对象，拥有属性和方法，其中某个属性是另一个函数B，B可以接受函数作为参数，假设这个函数参数为函数C，当执行B的时候，返回另一个函数D。乍一看这里有一大堆互相关联的函数，但当你开始习惯函数的许多用法时，你就会惊叹原来函数是如此灵活、强大且富有表现力。通常来说，一说到JavaScript的函数，我们首先认为它是一个对象，具有一个可以”执行”的特征，也就是说我们可以”调用”这个函数。（3）函数的注意事项 ①Js中可以先调用在定义，不分前后，不分顺序。 ②Js中没有方法重载，如果有相同命名的方法名，直接调用最后一个同名方法，所有的程序都是从上往下读取并执行，会覆盖前面的。 ③调用方法，可以不管定义中有没有形参，可以给也可以不给。 ④Js提供arguments对象来对参数进行管理。 ⑤Js的函数定义是可以嵌套使用的。 2.自定义函数和内置函数函数可以分为自定义函数和内置函数（1）自定义函数基本语法： function 函数名(){ //语句 } 如果函数没有函数名就是匿名函数，需要设置一个变量，将匿名函数赋值给变量。此时函数后面最好加”;” var fun=function (){ //语句 }; 如果函数自己调用自己就是立即执行函数。立即执行函数在函数定义完立即被调用，立即执行函数往往只能执行一次。 (function(){ //语句 })(); （2）内置函数 JavaScript内置函数一共可分为五类: 常规函数、数组函数、日期函数、数学函数\字符串函数 ①常规函数 JavaScript函数中常规函数包括一下9个函数.  alert函数：显示一个警告对话框，包括一个OK按钮。 alert("alert();");

图3-4 alert();
 confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
confirm(“consirm()”);

图3-5 consirm();
 escape函数：将字符转换成Unicode码。
console.log(escape(“escape()”));

图3-6 escape()；
 eval函数：计算表达式结果。
var a=1;
var b=2;
console.log(eval(a+b));

图3-7 eval();
 isNaN函数：测试是(true)否(false)不是一个数字。
console.log(isNaN(“1”));

图 3-8
 parseFloat函数：将字符串转换成浮点数字类型。
console.log(parseFloat(“123”));

图 3-9 parseFloat();
 parseInt函数：将字符串转换成整数数字类型。(可指定几进制)

图 3-10 parseInt();
 prompt函数：显示一个输入对话框，提示等待用户输入。
prompt(“请输入用户名”);

图3-11 prompt函数运行结果
 unescape函数：解码由escape函数编码的字符。
console.log(escape(“escape()”));
console.log(unescape(escape(“escape()”)));

图 3-12 unescape();
②数组函数
JavaScript数组函数包括一下4个函数：
 join函数：转换并连接数组中的所有元素为一个字符串。
【例3.21】
function JoinDemo()
{
var a， b;
a = new Array(0，1，2，3，4);
b = a.join("-");//分隔符
return(b);//返回的b==“0-1-2-3-4”
}
 length函数：返回数组的长度。
【例3.22】
function LengthDemo()
{
var a， l;
a = new Array(0，1，2，3，4);
l = a.length;
return(l);//l==5
}
 reverse函数：将数组元素顺序颠倒。
【例3.23】
function ReverseDemo()
{
var a， l;
a = new Array(0，1，2，3，4);
l = a.reverse();
return(l);
}
 sort函数：将数组元素重新排序。
【例3.24】
function SortDemo()
{
var a， l;
a = new Array(“X” ，“y” ，“d”， “Z”， “v”，“m”，“r”);
l = a.sort();
return(l);
}
③日期函数
JavaScript日期函数包括一下20个函数：
 getDate函数：返回日期的”日”部分，值为1~31.
【例3.25】
function DateDemo()
{
var d， s = "Today’s date is: ";
d = new Date();
s += (d.getMonth() + 1) + “/”;
s += d.getDate() + “/”;
s += d.getYear();
return(s);
}
 getDay函数：返回星期几，值为0~6，其中0表示星期日，1表示星期一，…，6表示
星期六。
【例3.26】
function DateDemo()
{
var d， day， x， s = "Today is: ";
var x = new Array(“Sunday”， “Monday”， “Tuesday”);
var x = x.concat(“Wednesday”，“Thursdasy”， “Friday”);
var x = x.concat(“Saturday”);
d = new Date();
day = d.getDay();
return(s += x[day]);
}
 getHours函数：返回日期的”小时”部分，值为0~23。
 getMinutes函数：返回日期的”分钟”部分，值为0~59。
 getMonth函数：返回日期的”月”部分，值为0~11.其中0表示一月，2表示三月，…，11
表示十二月。
 getSeconds函数：返回日期的”秒”部分，值为0~59。
 getTime函数：返回系统时间。
【例3.27】
function TimeDemo()
{
var d， s = "The current local time is: ";
var c = “:”;
d = new Date();
s += d.getHours() + c;
s += d.getMinutes() + c;
s += d.getSeconds() + c;
s += d.getMilliseconds();
return(s);
}
 getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区
时差)，单位为分钟。
【例3.28】
function TZDemo()
{
var d， tz， s = “The current local time is “;
d = new Date();
tz = d.getTimezoneOffset();
If (tz < 0)
s += tz / 60 + " hours before GMT”;
else if (tz == 0)
s += “GMT”;
else
s += tz / 60 + " hours after GMT”;
return(s);
}
 getYear函数：返回日期的”年”部分。返回值以1900年为基数，例如1999年为99。
 parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
【例3.29】
function GetTimeTest(testdate)
{
var d， s， t;
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
d = new Date();
t = Date.parse(testdate);
s = "There are "
s += Math.round(Math.abs(t / DyMilli)) + " days "
s += “between " + testdate + " and 1/1/70”;
return(s);
}
 setDate函数：设置日期的”日”部分，值为0~31。
 setHours函数：设置日期的”小时”部分，值为0~23。
 setMinutes函数：设置日期的”分钟”部分，值为0~59。
 setMonth函数：设置日期的”月”部分，值为0~11。其中0表示1月，…，11表示12月。
 setSeconds函数：设置日期的””部分，值为0~59。
 setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
 setYear函数：设置日期的”年”部分。
 toGMTString函数：转换日期成为字符串，为GMT格林威治时间。
 setLocaleString函数：转换日期成为字符串，为当地时间。
 UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准间。
③数学函数
JavaScript数学函数其实就是Math对象，它包括属性和函数(或称方法)两部分。其中，属性主要有下列内容。
Math.e:e(自然对数)、Math.LN2(2的自然对数)、Math.LN10(10的自然对数)、Math.LOG2E(e的对数，底数为2)、Math.LOG10E(e的对数，底数为10)、Math.PI(Π)、Math.SQPT1_2(1/2的平方根值)、Math.SQRT2(2的平方根值)。
函数有一下18个：
 abs函数：即Math.abs，返回一个数字的绝对值
 acos函数：即Math.acos，返回一个数字的反余弦值，结果为0~Π弧度(radians)。
 asin函数：即Math.asin，返回一个数字的反正弦值，结果为-Π/2~Π/2弧度。
 atan函数：即Math.atan，返回一个数字的反正切值，结果为-Π/2~Π/2弧度。
 atan2函数：即Math.atan2，返回一个坐标的极坐标角度值。
 ceil函数：即Math.ceil，返回一个数字的最小整数值(大于或等于)。
 cos函数：即Math.cos，返回一个数字的余弦值，结果为-1~1。
 exp函数：即Math.exp，返回e(自然对数)的乘方值。
 floor函数：即Math.floor返回一个数字的最大整数值(小于或等于)。
 log函数：即Math.log，自然对数函数返回一个数字的自然对数(e)值。
 max函数：即Math.max，两个数的最大值
 min函数：即Math.min，返回两个数的最小值。
 pow函数：即Math.pow，返回一个数字的乘方值。
 random函数：即Math.random，返回一个0~1的随机数值。
 round函数：即Math.round，返回一个数字的四舍五入值，类型时整数。
 sin函数：即Math.sin，返回一个数字的正弦值，结果为-1~1.
 sqrt函数：即Math.sqrt返回一个数字的平方根值。
 tan函数：即Math.tan返回一个数字的正切值。
④字符串函数：
JavaScript字符串函数完成对字符串的字体大小、颜色、长度和查找等工作，共包括20
个函数：
 anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定

设置该属性的css属性
【例3.31】
window.onload = function(){
var div = document.getElementById(“div1”);
div.style.backgroudColor = “#C67171”;
}
（8）声明单击事件(onclick)
【例3.32】

项目一项目二项目三

div1

div2

div3

表 3.2 JavaScript事件 JavaScript事件列表事件解说一般事件 onclick 鼠标单击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后松开鼠标触发此事件 onmouseover 当鼠标移动到某对象范围的上面时触发此事件 onmousemove 鼠标移动时触发此事件 onmouseout 当鼠标离开某对象范围时触发此事件 onkeypress 当键盘上的某个按键被按下并且释放时触发此事件 onkeydown 当键盘上某个按键被按下时触发此事件 onkeyup 当键盘上某个按键被按放开时触发此事件页面相关事件 onabort 图片在下载时被用户中断 onbeforeunload 当前页面的内容将要被改变时触发此事件 onerror 出现错误时触发此事件 onload 页面内容完成时触发此事件 onmove 浏览器的窗口被移动时触发此事件 onresize 当浏览器的窗口大小被改变时触发该事件 onscroll 浏览器的滚动条位置发生变化时触发此事件 onstop 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 oncontextmenu 当弹出右键上下文菜单时发生 onmuload 当前页面被改变时触发此事件表单相关事件 onblur 当前元素失去焦点时触发此事件 onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件 onfocus 当某个元素获得焦点时触发此事件 onreset 当表单中RESET的属性被激发时触发此事件 onsubmit 一个表单被递交时触发此事件事件所存在的问题、解决方案及缺陷问题一：每个事件只能注册一个函数。 var oDiv = document.getElementById("oDiv"); oDiv.onclick = fn1; oDiv.onclick =fn2; function fn1() {alert("我被覆盖了！")} function fn2() {alert("只有我被执行到！")} 解决方案一： obj.onclick = function() { fn1(); fn2(); fn3(); }; 缺陷一：需要将所有函数一次添加进去，不能在运行时添加。缺陷二：在事件处理函数中this将指向window，而不是obj。解决方案二： function addEvent(fn， evtype， obj) { //obj是要添加事件的HTML元素对象 //evtype是事件名字，不包含on前缀，因为每个都有on，所以写个on是多余的 //fn是事件处理函数 var oldFn; if(obj["on" + evtype] instanceof Function) { oldFn = obj["on" + evtype]; //当添加函数时，如果已注册过了，则将其保存起来 } obj["on" + evtype] = function() { if(oldFn) { oldFn.call(this); } fn.call(this); //使用call方法，使事件处理函数中的this仍指向obj }; } 解决方案二的修改版：先将事件存储起来，存储在对象的_EventHandles属性里面。 eventHandlesCounter = 1; //计数器，将统计所有添加进去的函数的个数，0位预留作//其它用 function addEvent(fn， evtype， obj) { if(!fn.__EventID) { //__EventID是给函数加的一个标识，见下面给函数添加标识的//部分 fn.__EventID = eventHandlesCounter++; //使用一个自动增长的计数器作为函数的//标识以保证不会重复 } if(!obj.__EventHandles) { obj.__EventHandles = []; //当不存在，也就是第一次执行时，创建一个，并且是数//组 } if(!obj.__EventHandles[evtype]) { //将所有事件处理函数按事件类型分类存放 obj.__EventHandles[evtype] = []; //当不存在时也创建一个数组 if(obj["on" + evtype] instanceof Function) { //查看是否已经注册过其它函数 //如果已经注册过，则将以前的事件处理函数添加到数组下标为0的预留的位置 obj.__EventHandles[evtype][0] = obj["on" + evtype]; obj["on" + evtype] = handleEvents; //使用handleEvents集中处理所有的函数 } } obj.__EventHandles[evtype][fn.__EventID] = fn; //如果函数是第一次注册为事件处理函数，那么它将被添加到数组中，函数的标识作为下标 //如果函数已经注册过相同对象的相同事件了，那么将覆盖原来的而不会被添加两次 function handleEvents() { var fns = obj.__EventHandles[evtype]; for(var i = 0; i < fns.length; i++) { fns[i].call(this); } } } 3.事件对象——Event 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！（1）访问事件对象：W3C DOM方法与IE专用方法 //W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 document.onclick = function (evt) {//这样，事件对象只能在对应的事件处理函数//内部可以访问到 alert(evt); }; //IE将事件对象作为window对象的一个属性（相当于全局变量） //貌似全局对象，但是只有是事件发生时才能够访问 alert(window.event);//null window.onload = function () { alert(window.event); }; （2）事件对象的属性及方法: 表3.3 事件对象的属性及方法属性名值类型读/写描述 button Integer R 对于特定的鼠标事件，表示按下的鼠标按钮，该属性仅可以在mouseup与mousedown事件中访问。W3C 规定：0表示按下了左键，1表示按下了中键，2表示按下了右键，相当于对于鼠标键从左到右进行的编号，而编号从0开始；而IE有另外一套规定：0表示没有任何键按下，1表示左键，2表示右键，4表示中键，而其它按键的组合则只要将键码相加即可，如：同时按下左右键时button值为3

clientX Integer R 事件发生时，鼠标在客户端区域的X坐标，客户端区域是指页面可视区域
clientY Integer R 事件发生时，鼠标在客户端区域的Y坐标
screenX Integer R 相对于屏幕的鼠标X坐标
screenY Integer R 相对于屏幕的鼠标Y坐标
x(仅IE) Integer R 鼠标相对于引起事件的元素的父元素的X坐标
y(仅IE) Integer R 鼠标相对于引起事件的元素的父元素的Y坐标
offset仅IE)layerX(仅W3C) Integer R 鼠标相对于引起事件的对象的X坐标
offset仅IE)layerY(仅W3C) Integer R 鼠标相对于引起事件的对象的Y坐标
pageX(仅W3C) Integer R 鼠标相对于页面的X坐标
pageY(仅W3C) Integer R 鼠标相对于页面的Y坐标
altKey Boolean R true表示按下了ALT键；false表示没有按下
ctrlKey Boolean R true表示按下了CTROL，false表示没有
shiftKey Boolean R true表示按下了shift，false表示没有
keyCode Integer R/W(IE)R(W3C) 对于keypress事件，表示按下按钮的Unicode字符；对于keydown/keyup事件，表示按下按钮的数字代号
charCode(仅W3C) Integer R 在keypress事件中所按键的字符Unicode编码，如果不是字符键，则该属性为0，并且，当CapsLock打开与关闭时charCode的值也对应着大小写字母
srcElement(IE)target(W3C) Element R 引起事件的元素
fromElement(仅IE) Element R 某些鼠标事件中(mouseover与mouseout)，鼠标所离开的元素
toElement(仅IE) Element R 某些鼠标事件中(mouseover与mouseout)，鼠标所进入的元素
relatedTarget(仅W3C) Element R 某些鼠标事件中(mouseover与mouseout)，返回与事件的目标节点相关的节点。
repeat(仅IE) Boolean R 如果不断触发keydown事件，则为true，否则为false
returnValue(仅IE) Boolean R/W 将其设为false表示以取消事件的默认动作
preventDefault(仅W3C) Function R 执行方法以取消事件的默认动作
type String R 事件的名称，不带on前缀
cancelable(仅W3C ) Boolean R 当为true表示事件的默认动作可以被取消（用preventDefault方法取消）
cancelBubble(仅IE) Boolean R/W 将其设置为true将取消事件冒泡
stopPropagation(仅W3C) Function R 执行方法取消事件冒泡
bubbles(仅W3C) Boolean R 返回true表示事件是冒泡类型
eventPhase(仅W3C) Integer R 返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段、在目标对象上时和起泡阶段：

【知识拓展】
任务六使用JavaScript常用对象
【任务描述】
JavaScript的函数和事件都是JavaScript对象，再学习过JavaScrit函数和对象后老师觉得小明能自己了解JavaScript对象，让小明查询质料总结一些JavaScript常用对象。
本任务将总结一些JavaScript常用对象，梳理JavaScript对象，使读者更好的使用JavaScript常用对象。
【任务目标】
1.认识JavaScript对象；
2.JavaScript常用对象。
【任务实施】
1.认识JavaScript对象
（1）对象的创建方式
使用new操作符后跟Object构造函数
【例3.37】
//创建对象
var person = new Object();
//给对象添加name和age属性
person.name = ‘jack’; person.age = 28;
//给对象添加fav的方法
person.fav = function(){ console.log(‘吃饭’);
}
使用对象字面量表示法。对象字面量是对象定义的一种简写形式，目的在于简
化创建包含大量属性的对象的过程。
【例3.38】
var person = {
name : ‘jack’;
age : 28，
fav : function(){
console.log(‘吃饭’);
}
}
2.JavaScript常用对象
（1）String对象
创建方式：
var str = new String(“hello”);
var str = “hello”;
创建方法：
 valueof()
返回指定对象的原始值，在比较两个字符串内容的时候直接比较会返回false，需要调用valueOf()方法来比较。
 charAt(index)
返回字符串中指定索引处的字符。
 lastIndexof(string)
返回参数中字符串最后一次出现的索引。
 indexof(string)
返回参数中字符串第一次出现的索引。
 fontcolor(“color”)
给字符串设置颜色。
 substring(start， end)
截取指定区间内的字符串。
 substr(start ， length)
指定起始位置截取指定长度的字符串。
（2）Array对象
创建方式：
var arr = new Array();
var arr = new Array(3);
var arr = new Array(“hello”， 100， true， ‘a’);
var arr = [10， “hello”， false， ‘a’];
属性：
length:返回当前数组的长度。
遍历：

方法：
 Jion():将数组中的元素用参数中的内容进行拼接，返回一个新的字符串。
【例3.39】

 reverse():将数组中的元素进行反转。
【例3.40】

（3）Number对象
创建方式：
var num1 = new Number(100)；
var num1 = 100；
（4）Boolean对象
创建方式：
var b = new Boolean(true)；
var b = true;
（5）Math对象
方法：
 ceil(number)：取整。
 floor(number):四舍五入。
 round(number)：求一个与参数最接近的整数。
 random():获取介于0和1之间的一个伪随机数。
 max(…):获取参数中最大的一个数，参数可以为任意个。
（6）Date对象
创建：
var date = new Date() ;
方法：
 getFullYear():获取年。
 getMonth():获取月份，计数从0开始。
 getDate()：获取日。
 getHours():获取小时。
 getMinutes():获取分钟。
 getSecongs():获取秒。
（7）window对象
表示浏览器窗口对象。Window对象因为经常调用所以window可以省略不写。
方法：
 setInterval(“function”，time)：每经过多少毫秒执行一次方法，返回值是定时器id值。
 setTimeout(“function”，time)：经过多少毫秒后只执行一次方法，返回值是定时器id
值。
 clearInterval(iIntervalID)：取消setInterval操作，参数中需要给一个定时器的id值。
 clearTimeout(timeoutId);取消setTimeout操作，参数中需要给一个定时器的id值。
 open(URL，name，features，replace):打开一个页面。
 alert(“提示框”) ：弹框。
 confirm(“消息对话框”)：有确认和取消按钮的提示框，返回一个布尔值用来表示点
击的按钮。
 prompt(“提示对话框”) ：含有一条提醒，一个输入框，和确认，取消按钮。返回值
为布尔值。
（8）location对象
Window对象的一部分，可以通过window.location调用。
属性：
href：可以设置或返回当前页面的URL，可以用来作为页面跳转。
方法：
 reload()：刷新当前页面，可以添加参数。
 true：参数为true时每次调用都从服务器下载网页
 false：为false时会优先从缓存加载，服务器如果更新了内容才从服务器下载，和
浏览器的刷新功能相同。
（9）history对象
Window的一部分通过window.history调用。
方法：
 forward()：载入历史列表的下一个，和浏览器中的前进一样
 back()：载入历史列表上一个，和浏览器中的后退一样
 go(number|URL)：参数为URl时跳转到指定的URL页面，参数为数字时则跳转到
历史列表的相对位置。
 go(-1)：相当于back()。
 go(1)：相当于forward()。
 go(0)：相当于刷新reload()。
（10）screen对象
获取工作区域的宽高。
属性：
availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。
Height：返回显示屏幕的高度。
Width：返回显示屏幕的宽度。
思考与练习
1.熟练运用函数，自主写一些工具类。
2.尝试完成京东淘宝等网页中的JavaScript的功能。

随笔二——JavaScript脚本语言相关推荐

JavaScript脚本语言的使用
JavaScript脚本语言一.了解JavaScript 1.什么是JavaScript:一种基于对象和事件驱动并具有安全性能的解释型脚本语言,在Web应用开发中非常广泛的应用.它不需要编译,直接嵌 ...
Java前端学习（一）JavaScript脚本语言基础
JavaScript脚本语言基础前言一.JavaScript简介 1.应用 2.特点 3.示例 4.补充二.语法基础 1.数据类型 2.表达式和运算符 3.流程控制语句 4.函数三.对话框 1 ...
document 文挡对象 - JavaScript脚本语言描述
document 文挡对象 - JavaScript脚本语言描述 ------------------------------------------------------------------- ...
c 运行js脚本语言,Javascript脚本语言
Javascript脚本语言本教程不对Javascript详细讲解,与WebGL相关的会进行简单总结.Javascript语言可以开发前端,可以开发网站后端,也可以和Python.C语言一样开发客户 ...
javascript脚本语言_10分钟快速掌握Javascript核心特性
JavaScript的历史版本其中ES5个人认为是使用时间最长也是最稳定的版本.基于该版本衍生出来的很多经典框架诸如ext,propertype.js,jquery,easyUI都是这个时代的杰作. ...
JavaScript脚本语言介绍并实现第一个Hello World程序
1.JavaScript是Web页面中的一种脚本编程语言,也是一种通用的.跨平台的.基于对象和事件驱动并具有安全性的脚本语言,具有与Java类似的语法.它不需要进行编译,而是直接嵌入在HTML页面 ...
js是运行在服务器端的脚本语言,JavaScript脚本语言
JavaScript脚本语言 JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行.下文为大家分享的是JavaScript ...
JavaScript脚本语言基础（三）
导读: 数学对象(Math) 数组对象(Array) 字符串对象(String) 日期对象(Date) js对象是属性和方法的集合.JavaScript中的所有事物都是对象,如:字符串.数值.数组.函 ...
JavaScript脚本语言 - 入门介绍与基本语法
文章目录 JavaScript简介初识JavaScript JavaScript历史 JavaScript是什么 JavaScript的作用 HTML/CSS/JS 的关系浏览器执行JS简介渲染 ...

随笔二——JavaScript脚本语言

随笔二——JavaScript脚本语言相关推荐

最新文章

热门文章