【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> 标签。

javascript 复制代码

<script> 
    alert("我的第一个 JavaScript"); 
</script>

2、<body>中的JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

javascript 复制代码

<!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 文件：

javascript 复制代码

<!DOCTYPE html> 
<html> 
    <body> 
        <script src="myScript.js"></script> 
    </body> 
</html>

可以将脚本放置于<head>或者<body>中，

放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。

myScript.js 文件代码如下：

javascript 复制代码

function myFunction() { 
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; 
}

三、JavaScript输出

JavaScript 没有任何打印或者输出的函数。

但是JavaScript 可以通过以下不同的方式来输出数据：

使用 window.alert( ) 弹出警告框。
使用 document.write( ) 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log( ) 写入到浏览器的控制台。

例如使用window.alert( )，你可以弹出警告框来显示数据：

javascript 复制代码

<!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" 字符串，且不区分大小写：

javascript 复制代码

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);

输出结果为：

javascript 复制代码

1.2 search( )方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

例如，检索字符串中 "Runoob" 的子串：

javascript 复制代码

var str = "Visit Runoob!"; 
var n = str.search("Runoob");

1.3 replace( )方法使用正则表达式

replace() 方法将接收字符串作为参数：

javascript 复制代码

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

1.4 replace( ) 方法使用字符串

replace() 方法将接收字符串作为参数：

javascript 复制代码

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

注意到了吗？

正则表达式参数可用在以上方法中 (替代字符串参数)。

正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

2、使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

2.1 使用 test( )

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

javascript 复制代码

var patt = /e/;
patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

javascript 复制代码

true

你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：

/e/.test("The best things in life are free!")

2.2 使用 exec( )

exec( ) 方法是一个正则表达式方法。

exec( ) 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

javascript 复制代码

/e/.exec("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为:

javascript 复制代码

六、JavaScript 表单

1、avaScript 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

JavaScript 实例

javascript 复制代码

function validateForm() { 
    var x = document.forms["myForm"]["fname"].value; 
    if (x == null || x == "") { 
        alert("需要输入名字。"); 
        return false; 
    } 
}

以上 JavaScript 代码可以通过 HTML 代码来调用：

HTML 表单实例

html 复制代码

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>

完整案例

html 复制代码

<!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 常用于对输入数字的验证：

完整案例

html 复制代码

<!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 10
                if (isNaN(x) || x < 1 || x > 10) {
                    text = "输入错误";
                } else {
                    text = "输入正确";
                }
                document.getElementById("demo").innerHTML = text;
            }
        </script>

    </body>
</html>

3、HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

html 复制代码

<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>

E N D