JavaScript 指南：从入门到实战开发

HTML CSS JS

30分钟从零开始入门拿下 HTML_html教程-CSDN博客

30 分钟从零开始入门 CSS-CSDN博客

JavaScript 指南：从入门到实战开发-CSDN博客

前言

hello 兄弟们，这里是网页三件套的最后一个剑客了。这会也是复习补录之前欠你们的哈哈哈哈,js 是这里边最难的一个(当然弱语言也不会很难) ,但内容会很多.

JavaScript 基础与实践

在当今的 Web 开发领域，JavaScript 堪称一门极为关键的编程语言。它不仅赋予网页交互性与动态性，还在众多非浏览器环境中发挥着重要作用。无论是初涉编程领域的新手，还是经验丰富的开发者，深入了解 JavaScript 的基础知识与实际应用，都能为其技术能力的提升带来新的启发。

一、初识 JavaScript

1.1 JavaScript 是什么

JavaScript（简称 JS）属于脚本语言，是解释型或即时编译型的编程语言。它最初因作为开发 Web 页面的脚本语言而被大众熟知，如今已广泛应用于 Node.js 服务器端开发、桌面应用开发、移动应用开发等众多非浏览器环境。

JavaScript 的诞生颇具传奇色彩。1995 年，网景公司为了让浏览器具备与访问者互动的能力，决定开发一门新语言。布兰登・艾奇（Brendan Eich）临危受命，仅用 10 天时间就设计出了最初的 JavaScript。起初它被命名为 LiveScript，后来为了借助当时流行的 Java 的影响力，改名为 JavaScript。但实际上，Java 和 JavaScript 的语法风格大相径庭。

在 Web 开发中，JavaScript 与 HTML、CSS 紧密协作，共同构成了 Web 的基石。HTML 负责搭建网页的结构（如同人的骨架），CSS 负责定义网页的外观样式（类似于人可以有各种外貌），而 JavaScript 则负责赋予网页交互行为（就像让人具备各种行为），为网页增添动态效果和交互性。

1.2 JavaScript 快速上手

想要快速体验 JavaScript 的魅力，只需在 HTML 文件中添加以下代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>alert("Hello JavaScript!")</script></body></html>

运行浏览器后，一个显示 “Hello JavaScript!” 的弹出框就会出现，这便是 JavaScript 的简单应用示例，通过这个示例，我们能直观感受到 JavaScript 为网页带来的交互性。

1.3 引入方式

在项目中使用 JavaScript，有三种常见的引入方式：

行内样式：直接将 JavaScript 代码嵌入 html 元素内部，例如：<input type="button" value="点我一下" οnclick="alert('haha')">，这种方式简单直接，但仅适用于简单的交互逻辑，代码维护性较差。

内部样式：在 HTML 文件中定义<script>标签，将 JavaScript 代码写在标签内，例如：
javascript>javascript"><script>alert("haha");</script>
该方式适合少量的 JavaScript 代码，但随着代码量增加，会导致 HTML 文件结构混乱，不利于代码的模块化和复用。

外部样式：定义<script>标签，通过 src 属性引入外部 js 文件，例如：<script src="hello.js"></script>。这种方式实现了 HTML 和 JavaScript 的分离，使代码结构更清晰，便于维护和管理，是企业开发中常用的方式。

二、基础语法

JavaScript 的基础语法在某些方面与 Java 有相似之处，但也展现出自身独特的特点。

2.1 变量

在 JavaScript 中，声明变量有三种方式：

var：早期用于声明变量的关键字，其作用域在包含该语句的函数内，例如：var name = 'zhangsan';，由于其作用域特性，在复杂逻辑中可能会导致变量提升等问题。

let：ES6 引入的声明变量关键字，作用域为该语句所在的代码块内，例如：let name = 'zhangsan';，有效解决了var带来的一些作用域问题，使代码逻辑更清晰。

const：用于声明常量，一旦声明，其值不可修改，例如：const name = 'zhangsan'; ，常用于定义程序中不会改变的常量，提升代码的可读性和可维护性。

需要注意的是，JavaScript 是动态弱类型语言，变量可以存放不同类型的值，并且在程序运行过程中，变量的类型可能会发生改变。变量名的命名规则为：可由字母、数字、下划线（_）或美元符号（$）组成，但数字不能开头，建议采用驼峰命名法，以提高代码的可读性。此外，“+” 在 JavaScript 中，既可以进行加法运算，也可以用于字符串拼接；“\n” 表示换行。

2.2 数据类型

JavaScript 的数据类型分为原始类型和引用类型，具体如下：

number：数字类型，不区分整数和小数，例如：1、3.14 。

string：字符串类型，字符串字面值需用引号引起来，单引号双引号均可，例如：'hello'、"world"。

boolean：布尔类型，只有true（真）和false（假）两个值。

undefined：表示变量未初始化，仅有唯一值undefined。

null：表示空值，在判断对象是否为空时常用。

使用typeof函数可以返回变量的数据类型，例如：

javascript>javascript">var a = 10;console.log(typeof a); // numbervar b = 'hello';console.log(typeof b); // stringvar c = true;console.log(typeof c); // booleanvar d;console.log(typeof d); // undefinedvar e = null;console.log(typeof e); // object（这是JavaScript的一个设计缺陷，null的类型被误判为object）

2.3 运算符

JavaScript 的运算符与 Java 用法基本一致，包括：

运算符类型	运算符
算术运算符	`+`、`-`、`*`、`/`、`%`
自增自减运算符	`++`、`--`
赋值运算符	`=`、`+=`、`-=`、`*=`、`/=`、`%=`
比较运算符	`<`、`>`、`<=`、`>=`、`!=`、`!==`、`==`（会进行隐式类型转换）、`===`（不会进行隐式类型转换）
逻辑运算符	`&&`、`		`、` !`
位运算符	`&`（按位与）、`	`（按位或）、`~`（按位取反）、`^`（按位异或）
移位运算符	`<<`（左移）、`>>`（有符号右移）、`>>>`（无符号右移）
三元运算符	`条件表达式 ? true_value : false_value`

例如：

javascript>javascript">var age = 20;var age1 = "20";var age2 = 20;console.log(age == age1); // true，比较值，会进行类型转换console.log(age === age1); // false，类型不一样，严格比较console.log(age == age2); // true，值和类型都一样

三、JavaScript 对象

3.1 数组

3.1.1 数组定义

在 JavaScript 中创建数组有两种方式：

使用new关键字创建，例如：var arr = new Array(); （注意Array的首字母A要大写），这种方式较为传统。

使用字面量方式创建（常用），例如：var arr = []; var arr2 = [1, 2, 'haha', false]; （数组中保存的内容称为 “元素”），字面量方式更简洁直观。

JavaScript 的数组与 C、C++、Java 等静态类型语言不同，它不要求元素是相同类型，这一特性与 Python、PHP 等动态类型语言类似，使得数组的使用更加灵活。

3.1.2 数组操作

对数组的常见操作包括：

读：使用下标的方式访问数组元素（从 0 开始），例如：arr[0]获取数组arr的第一个元素。

增：通过下标新增元素，如arr[4] = "new element"; ，或者使用push方法进行追加元素，arr.push("new element"); 。

改：通过下标修改元素，如arr[0] = "updated element"; 。

删：使用splice方法删除元素，arr.splice(2, 1); 表示从下标为 2 的位置开始删除 1 个元素。

例如：

javascript>javascript">var arr = [1, 2, 'haha', false];// 读取数组console.log(arr[0]); // 1// 添加数组元素arr[4] = "add"console.log(arr[4]); // addconsole.log(arr.length); // 5，获取数组的长度// 修改数组元素arr[4] = "update"console.log(arr[4]); // update// 删除数组元素arr.splice(4,1); // 第一个参数表示从下标为4的位置开始删除，第二个参数表示要删除的元素console.log(arr[4]); // undefined 元素已经删除，如果元素不存在，结果为undefinedconsole.log(arr.length); // 4，获取数组的长度

需注意，如果下标超出范围读取元素，结果为undefined；不要给数组名直接赋值，否则数组中的所有元素都会丢失，例如：

javascript>javascript">var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];arr = '小猫凯迪';// 此时arr不再是数组，而是一个字符串

3.2 函数

3.2.1 语法格式

定义函数的语法格式如下：

javascript>javascript">// 创建函数/函数声明/函数定义function 函数名(形参列表) {函数体return 返回值;}// 函数调用函数名(实参列表) // 不考虑返回值返回值 = 函数名(实参列表) // 考虑返回值

函数定义时并不会执行函数体内容，必须通过调用才会执行，调用几次就会执行几次。函数调用时进入函数内部执行，函数结束后回到调用位置继续执行，可以借助调试器来观察函数的执行过程。函数的定义和调用的先后顺序没有要求，这一点与变量不同，变量必须先定义再使用。

3.2.2 关于参数个数

在 JavaScript 中，实参和形参的个数可以不匹配，但实际开发中一般建议两者个数匹配。如果实参个数比形参个数多，多出的参数不参与函数运算；如果实参个数比形参个数少，多出来的形参值为undefined。

3.2.3 函数表达式

另一种函数的定义方式是函数表达式：

javascript>javascript">var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); // function

这种方式中，function() { }定义了一个匿名函数，然后将其用变量add表示，后续就可以通过add变量来调用函数。在 JavaScript 中，函数是一等公民，可以用变量保存，也可以作为其他函数的参数或者返回值，这为函数式编程提供了便利。

3.3 对象

在 JavaScript 中，字符串、数值、数组、函数都可看作对象，每个对象包含若干属性和方法。属性用于描述事物的特征，方法用于表示事物的行为。JavaScript 的对象与 Java 的对象概念基本一致，但语法表现形式差异较大。

3.3.1 使用字面量创建对象（常用）

使用{ }创建对象，例如：

javascript>javascript">var a = {}; // 创建了一个空的对象var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}};

使用对象的属性和方法：

javascript>javascript">// 1. 使用. 成员访问运算符来访问属性 `.` 可以理解成 "的"console.log(student.name);// 2. 使用 [ ] 访问属性，此时属性需要加上引号console.log(student['height']);// 3. 调用方法，别忘记加上 ()student.sayHello();

3.3.2 使用 new Object 创建对象

javascript>javascript">var student = new Object(); // 和创建数组类似student.name = "蔡徐坤";student.height = 175;student['weight'] = 170;student.sayHello = function () {console.log("hello");}console.log(student.name);console.log(student['weight']);student.sayHello();

需注意，使用{ }创建的对象也能随时使用student.name = "蔡徐坤";这样的方式新增属性。

3.3.3 使用构造函数创建对象

在构造函数内部，this关键字表示当前正在构建的对象，构造函数的函数名首字母一般大写，且通常为名词，构造函数不需要return语句，创建对象时必须使用new关键字。

例如，使用构造函数创建猫咪对象：

javascript>javascript">function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound);}}var mimi = new Cat('咪咪', '中华田园喵', '喵');var xiaohei = new Cat('小黑', '波斯喵', '猫呜');var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');console.log(mimi);mimi.miao();

四、JQuery

W3C 标准提供了一系列函数，可用于操作网页内容、结构和样式，但原生 JavaScript 提供的 API 在操作 DOM 元素时，代码较为繁琐、冗长。为了简化操作，我们可以使用 JQuery。

4.1 引入依赖

使用 JQuery 需先引入对应的库，可以通过 CDN 引入，例如：

javascript>javascript"><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

也可从官网下载其他版本的 JQuery，Jquery 官方提供了 4 种类型的 JQuery 库：

uncompressed：非压缩版本（代码易读，但文件较大，传输速度慢）。

minified：压缩版（代码不易读，但文件小，性能高，开发中推荐使用）。

slim：精简瘦身版，没有 Ajax 和一些特效。

slim minified：slim 的压缩版。

开发时，建议将 JQuery 库下载到本地，放置在当前项目中，以避免因外部地址无法访问而导致的问题。

4.2 JQuery 语法

jQuery 语法通过选取 HTML 元素，并对选取的元素执行某些操作，基础语法为：$(selector).action()。其中，$()是一个函数，是 jQuery 提供的全局函数，用于选择和操作 HTML 元素；Selector是选择器，用于 “查询” 和 “查找” HTML 元素；action是操作，执行对元素的操作。

JQuery 的代码通常写在document ready函数中，以防止文档在完全加载（就绪）之前运行 jQuery 代码，例如：

javascript>javascript">$(document).ready(function(){// jQuery functions go here});

简洁写法为：

javascript>javascript">$(function(){// jQuery functions go here});

4.3 JQuery 选择器

JQuery 选择器基于已有的 CSS 选择器，并在此基础上增加了一些自定义的选择器。jQuery 中所有选择器都以$开头：$()。例如：

$("*")：选取所有元素。

$(this)：选取当前 HTML 元素。

$("p")：选取所有<p>元素。

$("p:first")：选取第一个<p>元素。

$("p:last")：选取最后一个<p>元素。

$(".box")：选取所有class="box"的元素。

$("#box")：选取id="box"的元素。

4.4 JQuery 事件

在 JavaScript 中构建动态页面，需要感知用户的行为。用户对页面的操作（如点击、选择、修改等）会在浏览器中产生一个个事件，这些事件被 JavaScript 获取，从而实现更复杂的交互操作。

事件由三部分组成：事件源（哪个元素触发的）、事件类型（是点击、选中，还是修改等）和事件处理程序（进一步如何处理，通常是一个回调函数）。

事件	代码
文档就绪事件（完成加载）	`$(document).ready(function)`
点击事件	`$(selector).click(function)`
双击事件	`$(selector).dblclick(function)`
元素的值发生改变	`$(selector).change(function)`
鼠标悬停事件	`$(selector).mouseover(function)`

例如，为某个元素添加点击事件：

javascript>javascript">$("p").click(function(){// 动作发生后执行的代码
});

4.5 操作元素

4.5.1 获取 / 设置元素内容

jQuery 提供了三个简单的方法来获取和设置元素内容：

jQuery 方法	说明
`text()`	设置或返回所选元素的文本内容
`html()`	设置或返回所选元素的内容（包括 HTML 标签）
`val()`	设置或返回表单字段的值

以下是获取和设置元素内容的示例：

<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script>$(document).ready(function () {// 获取元素内容var html = $("#test").html();console.log("html内容为:" + html);var text = $("#test").text();console.log("文本内容为:" + text);var inputVal = $("input").val();console.log(inputVal);// 设置元素内容$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");});
</script>

4.5.2 获取 / 设置元素属性

使用attr()方法可以获取和设置元素属性。例如：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>
<script>
$(function () {// 获取元素属性var href = $("p a").attr("href");console.log(href);// 设置元素属性$("p a").attr("href", "baidu.com");console.log($("p a").attr("href"));
});
</script>

4.5.3 获取 / 返回 css 属性

css()方法用于设置或返回被选元素的一个或多个样式属性：

javascript>javascript"><div style="font-size: 36px;">我是一个文本</div>
<script>
$(function () {// 获取元素属性var fontSize = $("div").css("font-size");console.log(fontSize);// 设置元素属性$("div").css("font-size", "24px");
});
</script>

4.5.4 添加元素

添加 HTML 内容有以下几种方法：

方法	描述
`append()`	在被选元素的结尾插入内容
`prepend()`	在被选元素的开头插入内容
`after()`	在被选元素之后插入内容
`before()`	在被选元素之前插入内容

代码示例如下：

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("图片前插入");$("img").after("图片后插入");
});
</script>

4.5.5 删除元素

删除元素和内容常用以下两个方法：

方法	描述
`remove()`	删除被选元素（及其子元素）
`empty()`	删除被选元素的子元素

例如：

javascript>javascript"><div id="div1">我是一个div</div>
<button>删除 div 元素</button>
<script>
$(function () {$('button').click(function () {$('#div1').remove();});
});
</script>

javascript>javascript"><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
$(function () {$('button').click(function () {$('ol').empty();});
});
</script>

五、综合案例

5.1 猜数字

这个案例实现了一个简单的猜数字游戏。用户输入数字，点击 “猜” 按钮后，程序会判断用户输入的数字与随机生成的 1 到 100 之间的数字的大小关系，并给出相应提示。点击 “重新开始一局游戏” 按钮可以重置游戏。

javascript>javascript"><button type="button" id="reset">重新开始一局游戏</button><br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button><br>
已经猜的次数：<span id="count">0</span><br>
结果：<span id="result"></span>
<script>
$(function () {// 随机生成一个1 - 100的数字var guessNumber = Math.floor(Math.random() * 100) + 1;var count = 0;$("#button").click(function () {count++;$("#count").text(count);var userGuess = parseInt($("#number").val());if (userGuess == guessNumber) {$("#result").text("猜对了");$("#result").css("color", "gray");} else if (userGuess < guessNumber) {$("#result").text("猜小了");$("#result").css("color", "blue");} else {$("#result").text("猜大了");$("#result").css("color", "red");}});$("#reset").click(function () {guessNumber = Math.floor(Math.random() * 100) + 1;count = 0;$("#count").text(count);$("#result").text("");$("#number").val("");});
});
</script>

5.2 表白墙

表白墙案例允许用户在文本框中输入 “谁”“对谁”“说什么” 的内容，点击提交按钮后，输入的内容会显示在页面下方。

首先准备好 HTML 和 CSS 代码，构建页面结构和样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>
</body>
</html>

然后通过 JavaScript 实现提交功能：

javascript>javascript">$(function () {$(".submit").click(function () {// 获取到编辑框内容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val();console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 构造html元素var html = '<div class="row">' + from + '对' + to + '说: ' + message + '</div>';// 把构造好的元素添加进去$('.container').append(html);// 同时清理之前输入框的内容$(":text").val("");});
});

六、总结

HTML：一种超文本标记语言，主要用于页面内容的显示和排版。若要实现更美观的样式展示和页面效果，需搭配 CSS 和 JavaScript。学习 HTML 重点在于了解标签的基本语法，虽然其标签众多，但掌握常用的即可。
CSS：重点在于学习 CSS 选择器的使用，它能让网页的样式更加丰富多样，控制页面元素的外观显示。
JavaScript：作为一种脚本语言，与 Java 并无直接关系。它赋予网页交互性，能实现各种动态效果。而 JQuery 作为 JavaScript 框架，极大地简化了 HTML 元素的选择和操作，显著提高开发效率。
前端开发：对于后端开发人员而言，虽然不是核心重点，但达到能够借助网络阅读前端代码的水平，有助于更好地理解前后端交互，提升整体开发能力。

希望通过这篇博客，你能对 JavaScript 从基础语法到实际应用有一个全面且深入的理解，开启你的前端开发精彩之旅！