【web站点安全开发】任务4：JavaScript与HTML/CSS的完美协作指南
JavaScript是前端开发人员必须的三大语言之一：HTML定义页面内容、CSS描述页面的布局、JavaScript控制页面的行为。
本篇是关于JS以及介绍如何JS如何和HTML、CSS一起工作的。
一、JavaScrip简介
JavaScrip是一个轻量级的编程语言，与Java具有本质上的区别，是可以插入到HTML页面的编程代码。
以下是 JavaScript（JS）和 Java 的主要区别，以表格形式呈现：
| 对比维度 | JavaScript（JS） | Java |
|---|---|---|
| 语言类型 | 解释型语言，属于脚本语言，主要在运行时逐行解释执行（现代 JS 引擎会编译优化）。 | 编译型语言，需要先通过编译器编译为字节码（.class 文件），再由 JVM 解释执行。 |
| 运行环境 | 主要在浏览器中运行，也可通过 Node.js 在服务器端运行。 | 可在任何安装了 JVM（Java 虚拟机）的设备上运行，包括服务器、桌面、移动设备等。 |
| 类型系统 | 动态类型，变量类型在运行时确定，无需提前声明。 | 静态类型，变量类型必须在编译时声明，编译期会进行类型检查。 |
| 面向对象 | 基于原型（Prototype）的面向对象，没有类的概念（ES6 后引入 class 语法糖，本质仍是原型）。 | 基于类（Class）的面向对象，通过类定义对象，支持封装、继承、多态。 |
| 执行方式 | 代码直接嵌入 HTML 或作为单独文件，由浏览器解析执行。 | 代码需先编译为字节码，再由 JVM 解释执行（部分可被 JIT 编译器编译为机器码加速）。 |
| 应用场景 | 主要用于前端开发（网页交互、DOM 操作等），也可通过 Node.js 用于后端开发。 | 广泛用于后端开发（如服务器程序、企业级应用）、Android 应用开发、大数据处理等。 |
| 语法风格 | 语法受 C 语言和 Java 影响，但更灵活，分号可省略（根据自动分号插入规则）。 | 语法严格，分号不可省略，代码结构需符合规范（如类必须放在包中）。 |
| 内存管理 | 自动垃圾回收，由 JS 引擎（如 V8）负责，开发者无需手动管理。 | 自动垃圾回收，由 JVM 负责，通过垃圾回收器回收不再使用的对象。 |
| 变量声明 | 使用 var、let、const 声明变量，存在变量提升现象。 | 使用特定类型（如 int、String、Object 等）声明变量，无变量提升。 |
总结来说，JavaScript 和 Java 虽名称相似，但本质是两种不同的语言，在设计理念、应用场景和语法特性上均有显著差异。
二、JavaScript的用法
在HTML中JavaScript的脚本代码就必须位于标签<script>和</script>之间；JavaScript脚本可以放置在HTML页面的标签<body>和</body>之间。
1、<script>标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 之间的代码行包含了 JavaScript:
<script> alert("我的第一个 JavaScript");
</script><script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
2、<body>中的JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
<!DOCTYPE html>
<html><body><h1>我的 Web 页面</h1><p id="demo">一个段落</p><button type="button" onclick="myFunction()">尝试一下</button><script>function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}</script></body>
</html>上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
3、<head>中的JavaScript函数
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
4、外部的JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<!DOCTYPE html>
<html> <body> <script src="myScript.js"></script> </body>
</html>可以将脚本放置于<head>或者<body>中，
放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。
myScript.js 文件代码如下：
function myFunction() {
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}三、JavaScript输出
JavaScript 没有任何打印或者输出的函数。
但是JavaScript 可以通过以下不同的方式来输出数据：
使用 window.alert( ) 弹出警告框。
使用 document.write( ) 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log( ) 写入到浏览器的控制台。
例如使用window.alert( )，你可以弹出警告框来显示数据：
<!DOCTYPE html>
<html><body><h1>我的第一个页面</h1><p>我的第一个段落。</p><script>window.alert(5 + 6);</script></body>
</html>四、JavaScript语法
以下是 JavaScript（JS）和 Java 在语法方面的主要区别表格，涵盖变量声明、数据类型、类与对象、函数、控制流等关键方面：
| 语法类别 | JavaScript（JS） | Java |
|---|---|---|
| 变量声明 | 使用var、let、const声明变量，弱类型（变量类型可动态改变）。例： let x = 10; x = "hello"; | 使用int、String等强类型声明，类型不可变。例： int x = 10; String y = "hello"; |
| 数据类型 | 基本类型：number、string、boolean、null、undefined、symbol、bigint；引用类型：对象、数组等。 | 基本类型：int、double、char等；引用类型：String、Object、数组及自定义类对象。 |
| 类与对象 | ES6 后支持class语法，但本质是原型继承。例： class Person { constructor(name) { this.name = name; } }let p = new Person("Tom"); | 纯面向对象，必须通过class定义类，对象通过new实例化。例： public class Person { String name; public Person(String name) { this.name = name; } }Person p = new Person("Tom"); |
| 继承 | 基于原型链，使用extends关键字。例： class Student extends Person { ... } | 基于类的继承，使用extends，需调用super()访问父类构造器。例： public class Student extends Person { ... } |
| 函数定义 | 函数声明：function add(a, b) { return a + b; }；箭头函数：(a, b) => a + b。 | 必须定义在类中（方法），有访问修饰符（public、private等）。例： public int add(int a, int b) { return a + b; } |
| 入口函数 | 无强制入口，代码可直接执行（浏览器 / Node 环境）。 | 必须包含main方法作为入口：public static void main(String[] args) { ... } |
| 分号 | 可省略（自动分号插入机制），但推荐使用。 | 必须使用分号结束语句。 |
| 注释 | 单行：// 注释；多行：/* 注释 */（与 Java 一致）。 | 单行：// 注释；多行：/* 注释 */；文档注释：/** 注释 */（可生成文档）。 |
| 控制流 | if-else、switch、for、while、do-while与 Java 类似，但for可遍历数组（for...of）。 | if-else、switch、for、while、do-while，for可结合foreach遍历集合。 |
| 异常处理 | 使用try...catch...finally，可抛出任意类型异常（throw "error"）。 | 使用try...catch...finally，异常需是Throwable子类，需声明受检异常（throws）。 |
| 数组 | 动态数组，无需指定长度，可直接修改。 例： let arr = [1, 2, 3]; arr.push(4); | 静态数组（长度固定），或使用ArrayList等动态集合。例： int[] arr = new int[3]; arr[0] = 1; |
| 类型转换 | 隐式转换灵活（如"5" + 3结果为"53"），可通过Number()、String()显式转换。 | 隐式转换严格（如int转double），需通过Integer.parseInt()等显式转换。 |
补充说明：
JavaScript 是弱类型、解释型语言，主要用于前端和 Node.js 后端；Java 是强类型、编译型语言，需编译为字节码运行在 JVM 上。
语法差异本质源于设计目标：JS 注重动态性和脚本执行，Java 注重类型安全和跨平台性。
五、JavaScript正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
1、使用字符串的方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。
1.1 search( )方法使用正则表达式
使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);输出结果为：
61.2 search( )方法使用字符串
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
例如，检索字符串中 "Runoob" 的子串：
var str = "Visit Runoob!";
var n = str.search("Runoob");1.3 replace( )方法使用正则表达式
replace() 方法将接收字符串作为参数：
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");1.4 replace( ) 方法使用字符串
replace() 方法将接收字符串作为参数：
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");注意到了吗？
正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。
2、使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
2.1 使用 test( )
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 "e"：
var patt = /e/;
patt.test("The best things in life are free!");字符串中含有 "e"，所以该实例输出为：
true你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
/e/.test("The best things in life are free!")
2.2 使用 exec( )
exec( ) 方法是一个正则表达式方法。
exec( ) 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 "e":
/e/.exec("The best things in life are free!");字符串中含有 "e"，所以该实例输出为:
e六、JavaScript 表单
1、avaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
JavaScript 实例
function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; }
}以上 JavaScript 代码可以通过 HTML 代码来调用：
HTML 表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>完整案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script>function validateForm() {var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") {alert("需要输入名字。");return false;}}</script></head><body><form name="myForm" action="demo_form.php"onsubmit="return validateForm()" method="post">名字: <input type="text" name="fname"><input type="submit" value="提交"></form></body>
</html>2、JavaScript 验证输入的数字
JavaScript 常用于对输入数字的验证：
完整案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><h1>JavaScript 验证输入</h1><p>请输入 1 到 10 之间的数字：</p><input id="numb"><button type="button" onclick="myFunction()">提交</button><p id="demo"></p><script>function myFunction() {var x, text;// 获取 id="numb" 的值x = document.getElementById("numb").value;// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10if (isNaN(x) || x < 1 || x > 10) {text = "输入错误";} else {text = "输入正确";}document.getElementById("demo").innerHTML = text;}</script></body>
</html>3、HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>E N D