JavaScript学习教程，从入门到精通，JavaScript 快速入门指南（4）

news2025/4/17 10:31:42

JavaScript 快速入门指南

在HTML中引入JavaScript

语法知识点：

  1. 内部JavaScript：使用<script>标签直接嵌入HTML中
  2. 外部JavaScript：通过<script src="file.js">引入外部文件
  3. 推荐将脚本放在<body>末尾或使用defer属性

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript引入方式</title>
    <!-- 外部引入方式 -->
    <script src="external.js" defer></script>
    
    <!-- 内部引入方式 -->
    <script>
        // 这里写JavaScript代码
        console.log("内部脚本已加载");
    </script>
</head>
<body>
    <!-- 推荐的位置 -->
    <script>
        console.log("body底部脚本");
    </script>
</body>
</html>

常用输出语句

语法知识点：

  1. console.log() - 控制台输出
  2. alert() - 弹出警告框
  3. document.write() - 直接写入HTML文档（慎用）
  4. innerHTML/textContent - 修改DOM元素内容

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>输出语句示例</title>
</head>
<body>
    <div id="output"></div>
    
    <script>
        // 1. 控制台输出
        console.log("这是一条控制台日志");
        console.error("这是一条错误信息");
        console.warn("这是一条警告信息");
        
        // 2. 弹出警告框
        alert("欢迎来到我的网站！");
        
        // 3. 写入HTML文档（会覆盖整个文档，慎用）
        document.write("<p>使用document.write写入的内容</p>");
        
        // 4. 修改DOM元素内容
        document.getElementById("output").innerHTML = "<p>使用innerHTML添加的内容</p>";
        document.getElementById("output").textContent = "使用textContent添加的纯文本";
    </script>
</body>
</html>

基础表达式

语法知识点：

  1. 变量声明：let, const, var（不推荐）
  2. 数据类型：Number, String, Boolean, Null, Undefined, Object, Symbol
  3. 运算符：算术、比较、逻辑、赋值
  4. 条件语句：if…else, switch
  5. 循环语句：for, while, do…while

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基础表达式</title>
</head>
<body>
    <script>
        // 1. 变量声明
        let name = "张三"; // 可变的
        const PI = 3.1415; // 常量
        var age = 25; // 旧方式，不推荐
        
        // 2. 数据类型
        let num = 100; // Number
        let str = "Hello"; // String
        let bool = true; // Boolean
        let empty = null; // Null
        let notDefined; // Undefined
        let obj = {key: "value"}; // Object
        
        // 3. 运算符
        let sum = 10 + 5; // 算术
        let isEqual = (10 == "10"); // 比较（true，值相等）
        let isStrictEqual = (10 === "10"); // 严格比较（false，类型不同）
        let and = (true && false); // 逻辑与
        let or = (true || false); // 逻辑或
        
        // 4. 条件语句
        let score = 85;
        if (score >= 90) {
            console.log("优秀");
        } else if (score >= 60) {
            console.log("及格");
        } else {
            console.log("不及格");
        }
        
        // switch语句
        let day = 3;
        switch(day) {
            case 1: console.log("周一"); break;
            case 2: console.log("周二"); break;
            case 3: console.log("周三"); break;
            default: console.log("其他");
        }
        
        // 5. 循环语句
        // for循环
        for (let i = 0; i < 5; i++) {
            console.log("for循环:", i);
        }
        
        // while循环
        let j = 0;
        while (j < 5) {
            console.log("while循环:", j);
            j++;
        }
        
        // do...while循环
        let k = 0;
        do {
            console.log("do...while循环:", k);
            k++;
        } while (k < 5);
    </script>
</body>
</html>

函数

语法知识点：

  1. 函数声明：function name() {}
  2. 函数表达式：const name = function() {}
  3. 箭头函数：const name = () => {}
  4. 参数和返回值
  5. 作用域和闭包

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>函数示例</title>
</head>
<body>
    <script>
        // 1. 函数声明
        function greet(name) {
            return "Hello, " + name + "!";
        }
        console.log(greet("张三"));
        
        // 2. 函数表达式
        const add = function(a, b) {
            return a + b;
        };
        console.log("5 + 3 =", add(5, 3));
        
        // 3. 箭头函数
        const multiply = (a, b) => a * b;
        console.log("5 * 3 =", multiply(5, 3));
        
        // 4. 默认参数
        function createUser(name, age = 18) {
            console.log(`${name}, ${age}岁`);
        }
        createUser("李四"); // 使用默认年龄
        createUser("王五", 25);
        
        // 5. 作用域
        let globalVar = "全局变量";
        
        function scopeTest() {
            let localVar = "局部变量";
            console.log(globalVar); // 可以访问
            console.log(localVar); // 可以访问
        }
        scopeTest();
        // console.log(localVar); // 报错，无法访问局部变量
        
        // 6. 闭包
        function createCounter() {
            let count = 0;
            return function() {
                count++;
                return count;
            };
        }
        const counter = createCounter();
        console.log(counter()); // 1
        console.log(counter()); // 2
    </script>
</body>
</html>

事件

语法知识点：

  1. 常见事件：click, mouseover, mouseout, keydown, load, submit
  2. 事件处理方式：
    • HTML属性：onclick="handler()"
    • DOM属性：element.onclick = handler
    • 事件监听：element.addEventListener('click', handler)
  3. 事件对象：包含事件相关信息
  4. 事件冒泡和捕获

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
            padding: 20px;
        }
        #inner {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <!-- 1. HTML属性方式 -->
    <button onclick="alert('按钮被点击了！')">点击我</button>
    
    <!-- 2. DOM属性方式 -->
    <button id="btn1">按钮1</button>
    
    <!-- 3. 事件监听方式 -->
    <button id="btn2">按钮2</button>
    
    <!-- 事件冒泡示例 -->
    <div id="box">
        外层div
        <div id="inner">内层div</div>
    </div>
    
    <script>
        // 2. DOM属性方式
        document.getElementById("btn1").onclick = function() {
            console.log("按钮1被点击了");
        };
        
        // 3. 事件监听方式（推荐）
        document.getElementById("btn2").addEventListener("click", function(e) {
            console.log("按钮2被点击了", e); // e是事件对象
        });
        
        // 事件对象
        document.addEventListener("keydown", function(event) {
            console.log(`按下了${event.key}键，键码:${event.keyCode}`);
        });
        
        // 事件冒泡
        document.getElementById("box").addEventListener("click", function() {
            console.log("外层div被点击");
        });
        
        document.getElementById("inner").addEventListener("click", function(e) {
            console.log("内层div被点击");
            // e.stopPropagation(); // 阻止冒泡
        });
        
        // 页面加载事件
        window.addEventListener("load", function() {
            console.log("页面已完全加载");
        });
    </script>
</body>
</html>

示例：改变网页文字颜色

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>改变文字颜色</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        #content {
            padding: 20px;
            border: 1px solid #ddd;
            margin-bottom: 20px;
        }
        button {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="content">
        <h1>欢迎来到我的网站</h1>
        <p>这是一个演示如何用JavaScript改变文字颜色的示例。</p>
        <p>点击下方按钮可以改变这段文字的颜色。</p>
    </div>
    
    <button id="redBtn">红色</button>
    <button id="blueBtn">蓝色</button>
    <button id="greenBtn">绿色</button>
    <button id="randomBtn">随机颜色</button>
    
    <script>
        // 获取DOM元素
        const content = document.getElementById("content");
        const redBtn = document.getElementById("redBtn");
        const blueBtn = document.getElementById("blueBtn");
        const greenBtn = document.getElementById("greenBtn");
        const randomBtn = document.getElementById("randomBtn");
        
        // 改变颜色函数
        function changeColor(color) {
            content.style.color = color;
        }
        
        // 生成随机颜色
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        
        // 事件监听
        redBtn.addEventListener("click", function() {
            changeColor("red");
        });
        
        blueBtn.addEventListener("click", function() {
            changeColor("blue");
        });
        
        greenBtn.addEventListener("click", function() {
            changeColor("green");
        });
        
        randomBtn.addEventListener("click", function() {
            changeColor(getRandomColor());
        });
    </script>
</body>
</html>

综合案例：用户登录验证

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录验证</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .login-container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 350px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        .success {
            color: green;
            text-align: center;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>用户登录</h1>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名">
                <div id="usernameError" class="error">用户名不能为空</div>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码">
                <div id="passwordError" class="error">密码不能少于6位</div>
            </div>
            
            <button type="submit">登录</button>
            
            <div id="successMessage" class="success">登录成功！</div>
        </form>
    </div>
    
    <script>
        // 获取DOM元素
        const loginForm = document.getElementById("loginForm");
        const usernameInput = document.getElementById("username");
        const passwordInput = document.getElementById("password");
        const usernameError = document.getElementById("usernameError");
        const passwordError = document.getElementById("passwordError");
        const successMessage = document.getElementById("successMessage");
        
        // 验证用户名
        function validateUsername() {
            const username = usernameInput.value.trim();
            if (username === "") {
                usernameError.style.display = "block";
                return false;
            } else {
                usernameError.style.display = "none";
                return true;
            }
        }
        
        // 验证密码
        function validatePassword() {
            const password = passwordInput.value;
            if (password.length < 6) {
                passwordError.style.display = "block";
                return false;
            } else {
                passwordError.style.display = "none";
                return true;
            }
        }
        
        // 表单提交处理
        loginForm.addEventListener("submit", function(event) {
            // 阻止表单默认提交行为
            event.preventDefault();
            
            // 验证输入
            const isUsernameValid = validateUsername();
            const isPasswordValid = validatePassword();
            
            // 如果验证通过
            if (isUsernameValid && isPasswordValid) {
                // 模拟登录成功
                successMessage.style.display = "block";
                loginForm.style.display = "none";
                
                // 3秒后重定向（模拟）
                setTimeout(function() {
                    alert("即将跳转到主页...");
                    // window.location.href = "home.html"; // 实际项目中跳转到主页
                }, 3000);
            }
        });
        
        // 实时验证
        usernameInput.addEventListener("input", validateUsername);
        passwordInput.addEventListener("input", validatePassword);
    </script>
</body>
</html>

这个综合案例包含了：

  1. 表单元素获取
  2. 输入验证逻辑
  3. 事件处理（表单提交、输入事件）
  4. DOM操作（显示/隐藏元素）
  5. 定时器使用
  6. 样式和交互效果

所有代码都有详细注释，可以帮助理解JavaScript的各个基础知识点在实际项目中的应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2330668.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux网络】网络套接字socket

【Linux网络】网络套接字socket

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/qinjh_/category_12891150.html 目录 Socket 编程预备 理解源 IP 地址和目的 IP 地址 认识端口号 端口号范围划分…
阅读更多...
tomcat的负载均衡和会话保持

tomcat的负载均衡和会话保持

写你的想写的东西&#xff0c;写在tomcat的默认发布目录中 这里写了一个jsp的文件 访问成功 可以用nginx实现反向代理 tomcat负载均衡实现&#xff1a; 这里使用的算法是根据cookie值进行哈希&#xff0c;根据ip地址哈希会有问题.如果是同一台主机再怎么访问都是同一个ip。 t…
阅读更多...
c++项目 网络聊天服务器 实现；QPS测试

c++项目 网络聊天服务器 实现；QPS测试

源码 https://github.com/DBWGLX/SZU_system_programming 文章目录 技术设计编码JSON的替换Protobuf 网络线程池更高效率网络字节序的考虑send可能无法一次性发送全部数据&#xff01;EPOLLHUP , EPOLLERR 的正确处理 IO数据库操作的更高性能 开发日志2025.3a.粘包问题 2025.4b…
阅读更多...
rnn的音频降噪背后技术原理

rnn的音频降噪背后技术原理

rnniose: 这个演示展示了 RNNoise 项目&#xff0c;说明了如何将深度学习应用于噪声抑制。其核心理念是将经典的信号处理方法与深度学习结合&#xff0c;打造一个小巧、快速的实时噪声抑制算法。它不需要昂贵的 GPU —— 在树莓派上就能轻松运行。 相比传统的噪声抑制系统&…
阅读更多...
ubuntu 配置固定ip

ubuntu 配置固定ip

在装服务器系统的时候&#xff0c;DHCP自动获取ip时&#xff0c;路由可能会重新分配ip&#xff0c;为避免产生影响&#xff0c;可以关闭DHCP将主机设置为静态ip。 系统环境 Ubuntu 22.04-Desktop 配置方式 一、如果是装的Ubuntu图形化&#xff08;就是可以用鼠标操作点击应用…
阅读更多...
基于Coze平台实现工程项目管理SaaS软件的在线化客户服务

基于Coze平台实现工程项目管理SaaS软件的在线化客户服务

一、引言 在数字化转型浪潮下&#xff0c;SaaS&#xff08;软件即服务&#xff09;模式已成为企业级软件的主流交付方式。然而&#xff0c;随着用户规模的增长&#xff0c;传统人工客服模式面临响应速度慢、人力成本高、知识库更新滞后等痛点。如何利用AI技术实现客户服务的智…
阅读更多...
批量图片文本识别重命名，批量ocr识别图片重命名，基于WPF和腾讯OCR云部署实，现批量对图片局部提取文字后重命名的操作详细步骤

批量图片文本识别重命名，批量ocr识别图片重命名，基于WPF和腾讯OCR云部署实，现批量对图片局部提取文字后重命名的操作详细步骤

​​1. 项目背景​​ 在日常工作中，我们经常需要处理大量图片文件，这些图片可能包含重要的文字信息。为了提高工作效率，我们需要一种自动化的方式，从图片中提取文字，并根据提取的文字对图片进行重命名。 本项目基于 ​​WPF​​ 框架开发桌面应用程序，结合 ​​腾讯 OCR…
阅读更多...
Linux——冯 • 诺依曼体系结构操作系统初识

Linux——冯 • 诺依曼体系结构操作系统初识

目录 1. 冯 • 诺依曼体系结构 1.1 冯•诺依曼体系结构推导 1.2 内存提高冯•诺依曼体系结构效率的方法 1.3 理解数据流动 2. 初步认识操作系统 2.1 操作系统的概念 2.2 设计OS的目的 3. 操作系统的管理精髓 1. 冯 • 诺依曼体系结构 1.1 冯•诺依曼体系结构推导 计算…
阅读更多...
Vue3 实现进度条组件

Vue3 实现进度条组件

样式如下&#xff0c;代码如下 <script setup> import { computed, defineEmits, defineProps, onMounted, ref, watch } from vue// 定义 props const props defineProps({// 初始百分比initialPercentage: {type: Number,default: 0,}, })// 定义 emits const emits…
阅读更多...
35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图

35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图

for循环中监听函数中打印变量 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…
阅读更多...
【蓝桥杯】十五届省赛B组c++

【蓝桥杯】十五届省赛B组c++

目录 前言 握手问题 分析 排列组合写法 枚举 小球反弹 分析 代码 好数 分析 代码 R 格式 分析 代码 宝石组合 分析 代码 数字接龙 分析 代码 拔河 分析 代码 总结 前言 主播这两天做了一套蓝桥杯的省赛题目&#xff08;切实感受到了自己有多菜&#x…
阅读更多...
[Linux系统编程]多线程

[Linux系统编程]多线程

多线程 1. 线程1.1 线程的概念1.2 进程与线程对比1.3 轻量级进程 2. Linux线程控制2.1 POSIX 线程&#xff08;pthread&#xff09;2.2 线程ID、pthread_t、和进程地址空间的关系2.2.1 pthread_self2.2.2 pthread_create2.2.3 pthread_join2.2.4 线程终止的三种方式2.2.5 pthre…
阅读更多...
IntelliJ IDEA下开发FPGA——FPGA开发体验提升__下

IntelliJ IDEA下开发FPGA——FPGA开发体验提升__下

前言 由于Quartus写代码比较费劲&#xff0c;虽然新版已经有了代码补全&#xff0c;但体验上还有所欠缺。于是使用VS Code开发&#xff0c;效果如下所示&#xff0c;代码样式和基本的代码补全已经可以满足开发&#xff0c;其余工作则交由Quartus完成 但VS Code的自带的git功能&…
阅读更多...
odo18实施——销售-仓库-采购-制造-制造外包-整个流程自动化单据功能的演示教程

odo18实施——销售-仓库-采购-制造-制造外包-整个流程自动化单据功能的演示教程

安装模块 安装销售 、库存、采购、制造模块 2.开启外包功能 在进入制造应用点击 配置—>设置 勾选外包&#xff0c;点击保存 添加信息 一、添加客户信息 点击到销售应用 点击订单—>客户 点击新建 创建客户1&#xff0c;及其他客户相关信息&#xff0c;点…
阅读更多...
微信小程序生成某个具体页面的二维码

微信小程序生成某个具体页面的二维码

微信小程序&#xff0c;如果要生成某个具体页面&#xff0c;而非首页的二维码&#xff0c;体验和正式的生成方法如下&#xff1a; 1、体验版二维码&#xff1a; 管理---版本管理---修改页面路径&#xff0c;输入具体页面的路径以及参数&#xff0c;生成的是二维码 2、正式小程…
阅读更多...
鸿蒙开发_ARKTS快速入门_语法说明_组件声明_组件手册查看---纯血鸿蒙HarmonyOS5.0工作笔记010

鸿蒙开发_ARKTS快速入门_语法说明_组件声明_组件手册查看---纯血鸿蒙HarmonyOS5.0工作笔记010

然后我们来看如何使用组件 可以看到组件的组成 可以看到我们使用的组件 然后看一下组件的语法.组件中可以使用子组件. 然后组件中可以有参数,来修改组件的样式等 可以看到{},这种方式可以设置组件参数,当然在下面. 的方式也可以的 然后再来
阅读更多...
接口异常数组基础题

接口异常数组基础题

题目描述 设想你正在构建一个智能家居控制系统。这个系统可以连接多种不同类型的智能设备&#xff0c;如智能灯泡、智能空调和智能门锁。每种设备都有其独特的功能&#xff0c;不过它们也有一些通用的操作&#xff0c;像开启、关闭和获取设备状态等。系统需要提供一个方法来控…
阅读更多...
rustdesk折腾手记

rustdesk折腾手记

背景 我的工作环境&#xff1a;主力电脑是macPro, 另外一台ThinkPad W530作为开发机&#xff0c;装的是LinuxMint&#xff0c;还有一台ThinkPad P15作为服务器。平常显示器接到macPro&#xff0c;在macOS上通过微软的远程桌面连接到另外两台Linux。基本访问比较流畅&#xff0…
阅读更多...
使用el-tab 实现两个tab切换

使用el-tab 实现两个tab切换

1、主页面 index.vue 2、tab1&#xff1a;school.vue 3、tab2&#xff1a;parent.vue 具体代码如下&#xff1a; <template><div class"app-container"><!-- 使用el-tabs 实现两个组件的切换 --><el-tabs v-model"activeName" typ…
阅读更多...
使用Pholcus编写Go爬虫示例

使用Pholcus编写Go爬虫示例

想用Pholcus库来写一个Go的爬虫程序。首先&#xff0c;我得确认Pholcus的当前状态&#xff0c;因为之前听说过它可能已经不再维护了。不过用户可能还是需要基于这个库的示例&#xff0c;所以得先提供一个基本的框架。 首先&#xff0c;我应该回忆一下Pholcus的基本用法。Pholc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023