第三章 客户端编程技术与开发框架
3.1.1 什么是JavaScript
JavaScript是一种解释性脚本语言，目的是在HTML网页中增加动态效果和交互功能；
JavaScript可以实现的基本功能如下：
（1）控制文档的外观和内容：用户可以通过Document对象的write方法将内容写入文档中，也可以调用Document对象的getElementById方法找到文档中的某个对象，然后动态地改变其内容和外观；
（2）验证表单输入内容：在客户端取得的表单中输入数据并进行验证，只有当数据合法时才提交给服务器，减轻了服务器的处理负荷；
（3）实现客户端的计算和处理：从表单中读取客户输入的数据进行相应的计算和处理；
（4）捕捉用户事件并相应地调整页面：根据键盘或鼠标的动作使页面的某一部分变得可编辑。
1.在HTML文档中嵌入JavaScript脚本
JavaScript脚本块可以放在HTML页面中的任何位置，但通常放在< head>标记内，这样可以保证在页面装载前脚本已经加载完成，页面可以随时调用脚本代码；若放在< body>内，则可能出现页面中调用脚本而脚本代码尚未加载的情况；
document.write()是文档对象的输出函数，它将括号中的内容输出到浏览器窗口；
alert()是窗口对象的方法，用于弹出一个对话框；
脚本是大小写敏感的；
2.在HTML文档中链接脚本文件
为了便于代码重用，开发人员可以将JavaScript代码保存到扩展名为.js的文件中，这样就可以被多个HTML文件引用；
3.在HTML标记内嵌入JavaScript代码
<body>
<button onclick="alert('警告')">这是一个按钮</button>
</body>
3.1.3使用JavaScript输入与输出信息
1. 利用document对象的write()方法输出字符串
其功能是向页面输出文本，具体格式如下：
document.write("待输出的字符串")
2. 利用警告框
警告框用于弹出一个带"确定"按钮的对话框，并显示要输出的字符串，具体格式如下：
alert（"待输出的字符串"）
当警告框出现后，用户需要单击"确定"按钮才能继续进行操作。
3.使用确定框
当需要确认或者接受某项操作时，通常用JavaScript弹出一个确认框，用户必须单击"确认"或"取消"按钮才能继续操作。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function test() {
var v1 = confirm("确定吗？");
alert("你的选择"+v1);
}
</script>
</head>
<body>
<button onclick="test()">这是一个按钮</button>
</body>
</html>
4.使用提示框输入内容
在使用程序时，有时要提醒用户输入一个值，这可以通过提示框实现，格式如下：
prompt("提示文本","默认值")
示例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function test() {
var user=prompt("请输入用户名：","Nobody");
alert("你的选择"+user);
}
</script>
</head>
<body>
<button onclick="test()">这是一个按钮</button>
</body>
</html>
3.2.1 数据类型
- string(字符串)类型：使用单引号或双引号括起来的一个或几个字符；
- number(数值)类型：可以是整数和浮点数；
- boolean(布尔)类型：值为true或者false;
- object(对象)类型：用于定义对象；
3.2.2 变量
3.2.3 运算符和表达式
3.2.4 流程控制
- if条件语句
- switch多分支语句
- while语句
- do-while语句
- for语句
- break和continue语句
3.2.5 函数
创建函数
function 函数名（形式参数列表）{
语句块；
return 返回值； //当函数无返回值时不用次语句
}
调用函数
1）语句调用
函数名（实际参数列表）
2）事件调用
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function showmessage() {
alert("这是JavaScript事件调用函数");
}
</script>
</head>
<body>
<input type="button" value="鼠标单击事件调用函数" onclick ="showmessage()" />
</body>
</html>
3.2.6 事件处理
JavaScript通过事件响应与用户交互；
(1) onLoad和onUnload事件
当用户进入页面时会触发onUnLoad事件，当退出一个页面时会触发onLoad事件。如：
</head>
<body onload ="alert('Welcome to JavaScript world!')">
//页面代码
</body>
每次进入该页面时都会自动弹出”Welcome to JavaScript world!“的消息框。
(2) onClick事件
当用户单击按钮或超链接时就触发了onClick事件，由onClick指定的事件处理程序将被调用。
示例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function test() {
var user=prompt("请输入用户名：","Nobody");
alert("你的选择"+user);
}
</script>
</head>
<body>
<button onclick="test()">这是一个按钮</button>
</body>
</html>
当用户单击该按钮时会自动调用test()函数；
(3) onFocus、onBlur和onChange事件
这3个事件通常与输入元素（text、textarea及select等）配合使用。
当某元素获得焦点时触发onFocus事件，当元素失去焦点时将触发onBlur事件，当元素失去焦点且内容被改变时将触发onChange事件。（这几个事件经常配合使用来验证表单的输入内容。）
(4)onMouseOver和onMouseOut事件
当鼠标移向某个对象时将触发onMouseOver事件，当鼠标移出某个对象时将触发onMouseOut事件，这两个事件通常用来为页面对象创建一些动态效果。
例：
<head>
<meta charset="utf-8" />
<title></title>
<script>
function mouseIn() {
div1.innerText = "鼠标来了！";
}
function mouseOut() {
div1.innerText = "鼠标走了！";
}
</script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;border:1px solid black; " οnmοuseοver=mouseIn(); οnmοuseοut=mouseOut();
</body>
(5)onSubmit事件
当提交表单时会触发onSubmit事件。用户经常要在提交表单之前验证所有输入域，以保证数据的正确性，这时就可以使用onSubmit事件。
3.3.1 常用的JavaScript对象
1. 什么是对象
- JavaScript是一种基于对象的语言，而不是面向对象的语言，因为它没有提供面向对象语言的核心特征：抽象、继承、重载。
- JavaScript使用的对象可以分为三类：
· 内置对象：由JavaScript语言本身提供；
· 宿主对象：由JavaScript的运行环境（浏览器）提供；
· 用户定义对象：用户可以创建自己的对象，或创建自己的类并实例化对象。
2. 有关对象操作的语句
- New关键词：创建新的对象
格式：
<br>var obj=new ObjectYype(Parameters)
- With语句：设置代码运行的对象
格式： With object{ } 说明：任何对变量的引用被认为是这个对象的属性。- for···in语句：
含义：用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。可以无需知道数组的元素个数或对象的属性个数，就可以安全的遍历。 例：
for(var prop in object) document.write(object[prop]);
String对象
Array对象
Data对象
Math对象
3.3.2 浏览器对象模型(Browser Object Model, BOM)
3.3.3 文档对象模型(Document Object Model, DOM)
当页面被加载时，浏览器会创建页面的文档对象模型，这通常表现为树形的结构形式，如图：
1. 在DOM中查找HTML元素
在JavaScript中为了操作某个HTML元素，必须先在DOM树中定位到该元素。通常使用页面元素的id或者name属性进行定位。
在DOM中查找HTML元素的最简单的方法是调用document对象的getElementById方法，并传递元素的id属性。
例：查找id属性为intro的元素：
var x = document.getElementById("intro");如果在文档中能够找到该元素，则返回该元素并以对象的形式保存在变量x中；如果未找到，则x将包含null值。
调用document对象的getElementsByName方法可以按名称查找HTML元素，例如：
var y=docunment.getElementsByName("tbxname");在整个文档中查找name属性为tbxname的元素，并将结果保存到变量y中。
注意：
- 根据id检索只会返回一个元素；
- 根据name检索通常会返回一组元素；
2. 动态地改变元素内容
当检索到某个元素后可以通过其innerHTML属性获取或者设置元素内容；
<h1 id="header">Old Header</h1> <script> var element = document.getElementById("header"); element.innerHTML = "new Header"; </script>
3. 动态地改变元素样式
如果要动态地改变HTML元素的显示样式，可以使用以下语法：
document.getElementById(id).style.property="属性值"；
案例;
<html> <head> <style> .redTitle{ color:red; background-color:lightcoral; } </style> <script > function changeStyle() { var title1 = document.getElementById("myheader"); //title1.style.color = "red"; //title1.style.backgroundColor = "lightblue"; //title1.style.fontSize = "12pt"; //title1.classList.add("redTitle"); title1.classList.toggle("redTitle"); } </script> </head> <body> <h1 id="myheader" >Page Title</h1> <p> <button onclick ="changeStyle()">修改样式</button> </p> </body> </html>
4. 对DOM事件作出响应
针对HTML元素可以捕获鼠标单击事件、鼠标移动事件、内容改变事件等一系列事件，并为每个事件编写处理函数。
案例：
<html> <head> <meta charset="utf-8" /> <title></title> <script > function getInput() { var input1 = document.getElementById("txt1").value; var pNode = document.getElementById("p1"); pNode.innerHTML = input1; } </script> </head> <body> <input id="txt1" type="text" /> <p id="p1"></p> <p> <button onclick="getInput()">按钮</button> </p> </body> </html>案例二：（下拉菜单更换图片）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script > function changeImg() { var input1 = document.getElementById("s1").value; var pic = document.getElementById("img1"); pic.src = input1; } </script> </head> <body> <p> <img id="img1" src="1.png" /> </p> <p style="font-size:14pt;">请选择栏目</p> <select id="s1" onchange="changeImg()"> <option value= "1.png">音乐</option> <option value= "2.png">体育</option> <option value= "3.png">财经</option> </select> </body> </html>
5. 动态地添加或删除元素
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="d1"> <p id="p1">this is a paragraph! </p> </div> </body> <script> var element1 = document.createElement("p"); var node1 = document.createTextNode("this ia a new paragraph!"); element1.appendChild(node1); var div1 = document.getElementById("d1"); div1.appendChild(element1); </script> </html>
3.4.1 jQuery框架
jQuery的定义：
- JQuery是一套精简、高效、强大的JavaScript库；
- 提供了一套易用且兼容各种浏览器的API，简化程序；
- 功能丰富、扩展性强，彻底改变了客户端编程方式；
下载：
在“浏览”中搜索“JQuery”下载安装，用的时候直接拖动即可；
使用方式：
3.4.2 使用jQuery操作HTML元素
1.获取或设置HTML元素的内容
案例：（点击按钮更换文本内容）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/jquery-3.6.1.min.js"></script> </head> <body> <p id="p1">这是一个段落</p> <button id="btn1">按钮</button> <script> $("#btn1").click(function () { $("#p1").html("this is a paragraph!"); }); </script> </body> </html>
案例二：（用表单内容替换段落内容）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/jquery-3.6.1.min.js"></script> </head> <body> <p id="p1">这是一个段落</p> <p> <input id="t1" type="text" /> </p> <button id="btn1">按钮</button> <script> $("#btn1").click(function () { // $("#p1").html("this is a paragraph!"); $("#p1").html($("#t1").val()); }); </script> </body> </html>
2. 获取或设置HTML元素的属性
案例：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/jquery-3.6.1.min.js"></script> </head> <body> <div id="d1"> <p id="p1">段落1</p> <p id="p2">段落2</p> <p id="p3">段落3</p> <p id="p4">段落4</p> </div> <input id="btn1" type="button" value="button" /> <script> var element1 = document.createElement("p"); var node1 = document.createTextNode("hello world!"); element1.appendChild(node1); $("#btn1").click(function () { /* $("#d1").append(element1);*/ //$("#p1").remove(); //$("#p1").empty(); }); </script> </body> </html>####3. 删除或设置指定的CSS值
案例：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .redTitle{ color:red; background-color:lightblue; } </style> <script src="Scripts/jquery-3.6.1.min.js"></script> </head> <body> <h1 id="header1">Page Title</h1> <p> <input id="btn1" type="button" value="button" /> </p> <script > $("#btn1").click(function () { //$("#header1").addClass("redTitle"); //$("#header1").toggleClass("redTitle"); $("#header1").css("font-size", "48pt") .css("background-color", "lightblue") .css("color", "red") .html("Hello World"); }); </script> </body> </html>
3.4.3 使用jQuery进行DOM遍历
案例：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/jquery-3.6.1.min.js"></script> </head> <body> <div id="d1"> <p id="p1">段落1</p> <p id="p2">段落2</p> <p id="p3">段落3</p> <p id="p4">段落4</p> </div> <input id="btn1" type="button" value="button" /> <div id="d2"> <p id="p5">段落1</p> <p id="p6">段落2</p> <p id="p7">段落3</p> <p id="p8">段落4</p> </div> <p>paragraph 1</p> <script> var element1 = document.createElement("p"); var node1 = document.createTextNode("hello world!"); element1.appendChild(node1); $("#btn1").click(function () { /* $("#d1").append(element1);*/ //$("#p1").remove(); //$("#p1").empty(); //$("p").first().css("font-size", "24pt"); //$("p").last().css("font-size", "24pt"); //$("div p").last().css("font-size", "24pt"); $("#d1 p").last().css("font-size", "24pt"); }); </script> </body> </html>
案例：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/jquery-3.6.1.min.js"></script> </head> <body> <div id="d1" style="border:1px solid black;width:300px;height:300px;"></div> <img id="img1" src="picture1.png" /> <p> <input id="btn1" type="button" value="button" /> </p> <script > $("#btn1").click(function () { //$("#img1").toggle(); //$("#img1").fadeToggle(); //$("#img1").slideToggle(); //$("#d1").slideToggle(); $("#d1").animate({ width: "toggle" }); }); </script> </body> </html>
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
