当前位置： 首页 > news >正文

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

news 来源：原创 2025/6/11 6:02:17

 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 代码写在标签内，例如：
<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函数可以返回变量的数据类型，例如：

var a = 10;

console.log(typeof a); // number

var b = 'hello';

console.log(typeof b); // string

var c = true;

console.log(typeof c); // boolean

var d;

console.log(typeof d); // undefined

var e = null;

console.log(typeof e); // object（这是JavaScript的一个设计缺陷，null的类型被误判为object）

2.3 运算符

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

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

例如：

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 个元素。

例如：

var arr = [1, 2, 'haha', false];

// 读取数组

console.log(arr[0]); // 1

// 添加数组元素

arr[4] = "add"

console.log(arr[4]); // add

console.log(arr.length); // 5，获取数组的长度

// 修改数组元素

arr[4] = "update"

console.log(arr[4]); // update

// 删除数组元素

arr.splice(4,1); // 第一个参数表示从下标为4的位置开始删除，第二个参数表示要删除的元素

console.log(arr[4]); // undefined 元素已经删除，如果元素不存在，结果为undefined

console.log(arr.length); // 4，获取数组的长度

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

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];

arr = '小猫凯迪';

// 此时arr不再是数组，而是一个字符串

3.2 函数

3.2.1 语法格式

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

// 创建函数/函数声明/函数定义

function 函数名(形参列表) {

函数体

return 返回值;

}

// 函数调用

函数名(实参列表) // 不考虑返回值

返回值 = 函数名(实参列表) // 考虑返回值

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

3.2.2 关于参数个数

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

3.2.3 函数表达式

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

var add = function() {

var sum = 0;

for (var i = 0; i < arguments.length; i++) {

sum += arguments[i];

}

return sum;

}

console.log(add(10, 20)); // 30

console.log(add(1, 2, 3, 4)); // 10

console.log(typeof add); // function

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

3.3 对象

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

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

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

var a = {}; // 创建了一个空的对象

var student = {

    name: '蔡徐坤',

    height: 175,

    weight: 170,

    sayHello: function() {

    console.log("hello");

    }

};

使用对象的属性和方法：

// 1. 使用. 成员访问运算符来访问属性 `.` 可以理解成 "的"

console.log(student.name);

// 2. 使用 [ ] 访问属性，此时属性需要加上引号

console.log(student['height']);

// 3. 调用方法，别忘记加上 ()

student.sayHello();
3.3.2 使用 new Object 创建对象
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关键字。

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

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 引入，例如：

<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 代码，例如：

$(document).ready(function(){

// jQuery functions go here

});

简洁写法为：

$(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)

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

$("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()方法用于设置或返回被选元素的一个或多个样式属性：

<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()删除被选元素的子元素

例如：

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

<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 之间的数字的大小关系，并给出相应提示。点击 “重新开始一局游戏” 按钮可以重置游戏。

<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 表白墙

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

  1. 首先准备好 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>
  1. 然后通过 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("");
    });
});

六、总结

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

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

相关文章：

  • 如何使用useContext进行全局状态管理？
  • Polardb开发者大会
  • 深度解读 Chinese CLIP 论文：开启中文视觉对比语言预训练
  • 数据库事务的基本要素（ACID）
  • Spring Cloud之注册中心之Nacos的使用
  • 【问题记录】Go项目Docker中的consul访问主机8080端口被拒绝
  • 【前端基础】Day 4 CSS盒子模型
  • Spring IoC容器：原理与实现机制深度解析
  • 自动化设备对接MES系统找DeepSeek问方案
  • 二十三种设计模式
  • Pycharm使用matplotlib出现的问题(1、不能弹出图表 2、图表标题中文不显示)
  • MySQL 事务笔记
  • vue3 echarts使用datazoom,鼠标绘制实现放大与缩小（还原）
  • Redis 持久化方式：RDB（Redis Database）和 AOF（Append Only File）
  • MYSQL学习笔记(十)：约束介绍(如：非空、唯一、主键、外键、级联、默认、检查约束)
  • 2025年前端高频面试题（含答案）
  • JavaScript知识点4
  • MySQL--索引的优化--LIKE模糊查询
  • LeetCode 1206.设计跳表：算法详解
  • 计算机毕业设计SpringBoot+Vue.js大创管理系统(源码+文档+PPT+讲解)
  • 网站建设 响应式 北京/手机网站制作
  • 平面设计素材包/四川seo排名
  • 深圳做网站排名哪家专业/7个湖北seo网站推广策略
  • 网站建站啥意思/哈尔滨seo优化软件
  • 网站建设大横幅尺寸/网站开发报价方案
  • 如何做网站的教程二维码/百度推广官方电话