第十章JavaScript的应用

🕗 发布于 2024-11-22 09:20 javascript 开发语言 ecmascript

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript 是一种轻量级的编程语言，最初由 Netscape 公司的 Brendan Eich 在1995年设计并实现。它的主要目标是为了增加网页的交互性，使网站更加生动和响应用户操作。尽管它的名字中包含“Java”，但实际上 JavaScript 与 Java 编程语言没有直接关系；这个名称主要是出于营销目的而选择的。

10.1.1.1 简单性

JavaScripl是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样JavaScript 同样是一种解释性语言，提供了一个简易的开发过程。

10.1.1.2 动态性

JavaScripl 是动态的，可以直接响应用户或客户的输入，无须经过Web服务程序，通过事动来响应用户的请求。

10.1.1.3 跨平台性

JavaScrip依赖浏览器与操作环境无关，只要能运行浏览器的计算机、支持JavaSeript的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript 是一种安全性语言，不允许访问本地的硬盘，并不能将数据存人到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

JavaScript程序不能独立运行，必须依赖HTML文件，通常将JavaScript 代码放置在script 标记内，由浏览器 JavaScript 脚本引擎来解释执行。语法:
<script type =" text/javascript" >
//(JavaScript 代码)
</script>
说明:
script标记是成对标记，以<scripl>开始，以</script>结束。type 属性说明脚本的类型属性值“texV/javaseript”意思是使用 Javascript 编写的程序是文本文件。script 标记既可以放在HIML的头部，也可以放在HTML的主体部分，只是装载的时间不同，

10.1.3 JavaScript放置的位置

JavaScript 代码一般放置在页面的 head或 body 部分。当页面载人时，会自动执行位于body 部分的 JavaScript;而位于 head 部分的 JavaSeript 只有被显式调用时才会被执行。
1.head 标记中的脚本
script标记放在头部 head 标记中，通JavaScript 代码必须定义成函数形式，并在主体body 标记内调用或通过事件触发。放在head 标记内的脚本在页面装载时同时载人，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。语法:
function functionname(参数1,参数2,……,参数n)函数体语句;
说明:
JavaScript 自定义函数必须以 function 关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号“()”，括号内可以有参数也可以无参数，多个参数之间用逗号“,”分隔。函数体语句必须放在大括号“|!”内。

10.1.3.1 head标记中的脚本

在 HTML 文档中，<head> 标记用于包含文档的元数据，这些元数据不会显示在页面内容中，但对文档的解析和渲染非常重要。在 <head> 标记中可以放置多种类型的元数据，包括标题、字符集声明、样式表链接、脚本等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>head中定义的JS函数</title>
<script type="text/javascript">
function message(){
alert("调用JS函数！sum(100,200)="+sum(100,200));
}
function sum(x,y){
return x+y;
}
</script>
</head>
<body>
<h4>head标记定义两个JS函数</h4>
<p>无返回值函数：message()</p>
<p>有返回值函数：sum(x,y)</p>
<from>
<input name="btncal" type="button" onclick="message();"value="计算并显示两个数的和"/>
</from>
</body>
</html>

10.1.3.2 body标记中的脚本

script 标记放在主体 body 标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的JavaScript脚本</title>
</head>
<body>
<p id="clk">Clicke Here</p>
<script type="text/javascript">
var demo=document.getElementById("clk");
demo.onclick=msg;
function msg(){
alert("我是body中的JavaScript脚本");
}
</script>
</body>
</html>

10.1.3.3 外部js文件中的脚本

除了将 JavaScript 代码写在 head 和 body部分以外，也可将JavaScript 函数单独写成个js文件，在 HTML 文档中引用该js文件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部js文件的javascript函数</title>
<script type="text/javascript" src="js/demo.js">
document.write("这条语句没有执行,被忽略掉了!");
</script>
</head>
<body>
<form>
<input name="btn1" type="button" onclick="message()" value="调用外部js文件的javascript函数"/>
</form>
</body>
</html>

function message()
{
alert("调用外部JS文件中的函数");
}

10.1.3.4 事件处理代码中的脚本

JavaScript 代码除了上述三种放置位置外，还可直接写在事件处理代码中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接在事件处理代码中加入JavaScript代码</title>
</head>
<body>
<form>
<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码"/>
</form>
</body>
</html>

10.2 JavaScript语法

10.2.1 语法基础

任何语言的语法学习都是枯燥、单调的，JavaScript语法也一样，但学好语法是更好地使用 JavaScript 编写程序的前提。

10.2.1.1 区分大小写

在JavaScript语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

10.2.1.2 变量不区分类型

JavaScript 中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明由解释器在运行时检查其数据类型，

10.2.1.3 每行代码结尾可以省略分号

在JavaScript里面每条语句结尾的分号“;”不是必要的，如果多个语句写在一行上那么语句之间的分号“;”才是必需的，最后一条语句的分号“;”可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。

10.2.1.4 注释与C、C++、Java等语言相同

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaScnipt的注释形式与C、C++、Java等语言相同，格式如下:
//单嶺冢Ⓣ亥埤䝨ㄔ榀谼【瑜卿稿點赀镡缸也萩绐乡и鼽釃饿鼠
0S08:T.0.0.TSF
/*
多行注释
*/

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下:
(1)必须使用英文字母或者下划线开头。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符
(3)不能使用JavaScript关键字与 JavaScript 保留字。
(4)不能使用JavaSeript语言内部的单词，比如 Infinity，NaN，undefined 等(5)大小写敏感，如 name 和 Name 是不同的两个标识符!
合法的标识符:Hello、-12t、sum、Dog23等不合法的标识符:if、3com、case、swilch 等

10.2.2.2 变量声明

在JavaScript语言环境中，变量是用于存储信息的容器中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScrpt语言的何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。
变量声明格式如下:
var count; //单个声明
var count ,amount ,level ; //用单个 var 关键宇声明的多个变量
var count=0,amount=100://一条语句中的变量声明和初始化

10.2.2.3 变量类型

Javascript有6种数据类型，主要的类型有Nmmber数值型、string字符型、0bject对象以及 Boolean 布尔型，其他两种类型为Null和 Undefined

(1)Number数值型。JavaScript支持整数和浮点数。整数可以为正数、0或负数;浮点数包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表示，如 3.5E15 表示 3.5x1015
(2)Sting字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来，例如:"你好!""this is string""学习语言”"。
在使用字符串的过程中，有时会遇到一种情况:在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。例如:
"热烈欢迎参加JavaScript 技术'研讨的专家";
//正确的用法
//错误的用法"学习不是一件"容易"的事件;(3)Boolean布尔型。Boolean值有true和false，这是两个特殊值，可以将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数 0。但不能用true 表示1或false 表示 0。
(4)Undefined 数据类型。JavaScript 会对未赋值变量赋值为 undefined。(5)Null数据类型。这是一个对象，但是为空。因为是对象，所以typeof null 返回“Object”，注意null是 Javascript 保留关键字。
(6)0bject类型。除了上面提到的各种常用类型外，对象类型也是JavaScript中的重要
组成鑹洙眷楞壤閤瀨鑑ぬ籁稞粨栗挚免吊萤詮鴿拋躲

10.2.3 运算符与表达式

JavaScript 运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、条件运算符、逗号运算符等。根据操作数的个数，可以将运算符分为一元运算符、二元运算符和三元运算符。
由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为“表达式”最简单的表达式可以是常量名称。

10.2.3.1 算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。JavaScript中常用算术运算符见表10-1。

10.2.3.2 关系运算符和表达式

关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式。Jvseiw中常用关系运算符见表10-2。

10.2.3.3 逻辑运算符和表达式

逻辑运算符用来执行逻辑运算，其操作数都应该是布尔型数值和表达式或者是可以转为布尔型的数值和表达式，其运算结果返回ue或false。用逻辑运算符和操作数连接起来街合规则的式子，称为逻辑表达式。JavaScript中常用逻辑运算符见表10-3。

10.2.3.4 赋值运算符和表达式

赋值运算符是 JavaScript 中使用频率最高的运算符之一。赋值运算符要求其左操作数是个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操无无数连接起来符合规则的式子，称为赋值表达式。Javaseipt中常用赋值运算符见表10-4

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。语法:
变量=表达式1?表达式2:表达式3
说明:该条件表达式表示，如果表达式1的结果为真(tmue)，则将表达式2的值赋给变量，否则将表达式3的值赋给变量。例如，变量number1、mumber2 比较大小，将较大的数赋值给变量max，代码如下:
var max= ( numberl>number2 )? numberl : number2 ;

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值例如:
var rs=(3+5,10*6); /*先计算第一个表达式3+5 的值为8,再计算第二个表达式 10*6的值为60最后将第二个表达式的值 60 赋给变量rs */

10.2.4 程序设计

10.2.4.1 条件分支语句

i……else语句完成了程序流程块中分支功能:如果其中的条件成立，则程序执行紧接着条件的语句或语句块;否则;程序执行 else 中的语句或语句块

10.2.4.2 循环语句

循环语句是编程中用于重复执行一段代码直到满足某个条件为止的结构。不同的编程语言提供了多种类型的循环语句，但大多数语言都支持以下几种基本形式：for 循环、while 循环和 do-while 循环。下面以 JavaScript 为例，详细介绍这些循环语句的使用方法

10.2.5 函数

函数是程序设计中的基本构建块，它们使代码更加模块化、可重用和易于维护。通过合理地定义和使用函数，可以显著提高代码的质量和可读性。希望上述示例和说明能帮助你更好地理解和使用函数。如果你有其他编程语言的具体需求，也可以告诉我，我可以提供相应的指导。

10.2.5.1 定义函数

定义函数是编程中的基本技能之一。函数允许你将代码组织成可重用的模块，提高代码的可读性和可维护性。下面以 JavaScript 为例，介绍几种定义函数的方法，并提供一些示例

10.2.5.2 函数返回值

函数返回值是函数执行完毕后返回给调用者的结果。通过返回值，函数可以将计算结果、状态信息或其他数据传递回调用它的代码。在不同的编程语言中，返回值的处理方式可能有所不同，但基本概念是相同的。下面以 JavaScript 为例，详细介绍如何在函数中使用返回值。

10.2.5.3 函数调用

函数调用是编程中的基本操作之一，它允许你执行已经定义好的函数，并获取其返回值。在不同的编程语言中，函数调用的语法和行为可能有所不同，但基本概念是相似的。下面以 JavaScript 为例，详细介绍如何调用函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
function sayHello(){
alert("Hello Word");
}
</script>
</head>
<body>
<button onclick="sayHello()">单击这里</button>
</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

JavaScript 中的对象是一种数据结构，用于存储键值对（key-value pairs）。对象可以包含属性（properties）和方法（methods）。属性是关联到对象的值，方法是关联到对象的函数。

1.本地对象

在 JavaScript 中，本地对象（也称为内置对象或原生对象）是由 JavaScript 引擎提供的预定义对象。这些对象提供了许多常用的功能，如数学运算、日期处理、字符串操作等。了解这些本地对象及其方法可以帮助你更高效地编写代码。

2.Browser对象

10.3.1.2 属性

对象的属性可以是任何数据类型，包括其他对象和函数。属性可以通过点符号或方括号符号访问。

编号8

10.3.1.3 方法

对象的方法是关联到对象的函数。方法可以通过点符号调用。

10.3.2 常用对象

10.3.2.1 window对象

window 对象代表浏览器窗口，是浏览器的全局对象。所有全局变量和函数都是 window 对象的属性和方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动窗口</title>
<script type="text/javascript">
function moveWin(){
myWindow.moveTo(50,50);
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow = window.open(",",width=200,height=100)
myWindow.document.write("This is'myWindow'");
</script>
<input type="button" value="More 'myWindow'" onclick="moveWin()"/>
</body>
</html>

confirm()对话框；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm()的使用</title>
</head>
<body>
<script type="text/javascript">
var urseChoice = window.confirm("请选择 “确定”或“取消”");
if( urseChoice == true){
document.write("OK!");
}
if( urseChoice == false){
document.write("Cancel!");
}
</script>
</body>
</html>

prompt()对话框；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prompt()的使用</title>
</head>
<body>
<script type="text/javascript">
var hobby = prompt('请问你的爱好？','请输入');
document.write("你的爱好是---" +hobby);
</script>
</body>
</html>

10.3.2.2 document对象

document 对象代表当前加载的 HTML 文档，提供了访问和操作文档的方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document属性</title>
</head>
<body>
<img src="img/1.bmp"" BORDER="0" alt=""/><br />
<script type="text/javascript">
document.write("文件地址:" + document.location+"<br/>")
document.write("文件标题:" + document.title+"<br/>");
document.write("图片路径:" + document.images[0].src+"<br/>");
</script>
</body>
</html>

10.3.2.3 location对象

location 对象提供了有关当前 URL 的信息，并允许改变当前页面的 URL。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象的使用</title>
<script type="text/javascript">
function currLocation(){alert(window.location)}
function newLoccation(){window.location="10.html"}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的URL"/>
<input type="button" onclick="newLoccation()"" value="改变URL"/>
</body>
</html>

10.3.2.4 navigator对象

navigator 对象提供了有关浏览器的信息。

10.3.2.5 screen对象