JavaScript 前端开发：从入门到精通的奇幻之旅

目录

一、引言

二、JavaScript 基础

（一）变量与数据类型

（二）运算符

（三）控制结构

三、函数

（一）函数定义与调用

（二）函数作用域

（三）闭包

四、DOM 操作

（一）DOM 简介

（二）获取元素

（三）修改元素属性

（四）添加和删除元素

五、事件处理

（一）事件简介

（二）添加事件处理程序

（三）常见事件类型

一、引言

在当今的互联网世界中，前端开发扮演着至关重要的角色。而 JavaScript 无疑是前端开发领域的核心技术之一。它就像一把神奇的钥匙，打开了创建交互式网页的大门。无论是炫酷的动画效果、动态的数据更新，还是复杂的用户交互逻辑，JavaScript 都能轻松应对。从简单的网页表单验证到构建大型的单页面应用程序（SPA），JavaScript 的应用场景无处不在。在这篇博客中，我们将深入探讨 JavaScript 前端开发的各个方面，带领大家踏上从入门到精通的精彩旅程。

二、JavaScript 基础

（一）变量与数据类型

  1. 变量声明
    在 JavaScript 中，我们可以使用 var、let 和 const 来声明变量。var 是早期的变量声明方式，它存在变量提升的问题。例如： 
    console.log(a); // 输出 undefined
var a = 5;

    let 和 const 是 ES6 引入的新方式。let 声明的变量不存在变量提升，且不允许在相同作用域内重复声明。const 用于声明常量，一旦赋值就不能再修改。

    console.log(b); // 报错：b is not defined
let b = 10;
const c = 20;
c = 30; // 报错：Assignment to constant variable.
  2. 数据类型
    JavaScript 有多种数据类型，包括基本数据类型和复杂数据类型。基本数据类型有：
    • Number：用于表示数字，包括整数和浮点数。例如：let num = 42; 或 let floatNum = 3.14;。
    • String：用于表示文本。可以使用单引号或双引号来创建字符串。例如：let str = 'Hello, JavaScript!'; 或 let anotherStr = "This is also a string."。
    • Boolean：只有两个值 true 和 false，用于表示逻辑值。例如：let isTrue = true;。
    • Null：表示一个空值。例如：let emptyValue = null;。
    • Undefined：当一个变量声明但未赋值时，其值为 undefined。例如：let undef; console.log(undef); // 输出 undefined。
      复杂数据类型主要有：
    • Object：这是 JavaScript 中最复杂的数据类型。对象可以包含多个属性和方法。例如： 
      let person = {name: 'John',age: 30,sayHello: function() {console.log('Hello!');}
};
    • Array：用于存储一组有序的值。例如：let fruits = ['apple', 'banana', 'cherry'];。

（二）运算符

  1. 算术运算符
    JavaScript 中的算术运算符包括加（+）、减（-）、乘（*）、除（/）和取模（%）。需要注意的是，加法运算符在处理字符串时会进行字符串拼接。例如： 
    let num1 = 5;
let num2 = 3;
console.log(num1 + num2); // 8
let str1 = 'Hello, ';
let str2 = 'world!';
console.log(str1 + str2); // Hello, world!
  2. 比较运算符
    比较运算符用于比较两个值，返回一个布尔值。包括等于（==）、不等于（!=）、全等（===）、不全等（!==）、大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。全等运算符会比较值和数据类型，而等于运算符只比较值。例如： 
    console.log(5 == '5'); // true
console.log(5 === '5'); // false
  3. 逻辑运算符
    逻辑运算符包括与（&&）、或（||）和非（!）。&& 运算符当两个操作数都为真时返回真，|| 运算符当至少一个操作数为真时返回真，! 运算符用于取反。例如： 
    let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

（三）控制结构

  1. 条件语句（if - else）
    if - else 语句用于根据条件执行不同的代码块。例如： 
    let score = 80;
if (score >= 90) {console.log('优秀');
} else if (score >= 80) {console.log('良好');
} else if (score >= 60) {console.log('及格');
} else {console.log('不及格');
}
  2. 循环语句（for、while、do - while）
    • for 循环：常用于已知循环次数的情况。例如： 
      for (let i = 0; i < 5; i++) {console.log(i);
}

    • 循环语句（for、while、do - while）
      • for 循环：常用于已知循环次数的情况。例如： 
        for (let i = 0; i < 5; i++) {console.log(i);
}
      • while 循环：在条件为真时持续执行代码块。例如： 
        let j = 0;
while (j < 3) {console.log(j);j++;
}
      • do - while 循环：与 while 循环类似，但会先执行一次代码块再检查条件。例如： 
        let k = 0;
do {console.log(k);k++;
} while (k < 2);

三、函数

（一）函数定义与调用

函数是 JavaScript 中的重要组成部分，可以将一段可重复使用的代码封装起来。函数可以使用函数声明或函数表达式来定义。

  1. 函数声明 
    function add(num1, num2) {return num1 + num2;
}
console.log(add(3, 5)); // 8
  2. 函数表达式 
    let multiply = function(num1, num2) {return num1 * num2;
};
console.log(multiply(2, 4)); // 8

    函数可以有参数和返回值。参数是函数接收外部传入的值，返回值是函数执行后返回的结果。

（二）函数作用域

JavaScript 中的函数有自己的作用域。在函数内部定义的变量在函数外部是不可访问的，而在函数外部定义的变量在函数内部如果没有同名变量则可以访问。例如：

let globalVar = 10;
function testScope() {let localVar = 20;console.log(globalVar); // 10
}
testScope();
console.log(localVar); // 报错：localVar is not defined

（三）闭包

闭包是 JavaScript 中一个比较高级但非常重要的概念。它允许函数访问其定义时所在的词法作用域，即使在函数在其词法作用域之外被执行时。例如：

function outerFunction() {let count = 0;return function() {count++;console.log(count);};
}
let inner = outerFunction();
inner(); // 1
inner(); // 2

在这个例子中，inner 函数形成了一个闭包，它可以访问并修改 outerFunction 中定义的 count 变量。

四、DOM 操作

（一）DOM 简介

DOM（Document Object Model）是文档对象模型，它将 HTML 文档表示为一个树形结构。在 JavaScript 中，我们可以通过 DOM API 来操作 HTML 元素，如获取元素、修改元素属性、添加或删除元素等。

（二）获取元素

  1. 通过 ID 获取元素
    可以使用 document.getElementById 方法来获取具有特定 ID 的元素。例如： 
    <!DOCTYPE html>
<html>
<body><div id="myDiv">这是一个 div 元素</div><script>let myDiv = document.getElementById('myDiv');console.log(myDiv.innerHTML); // 这是一个 div 元素
</script>
</body>
</html>
  2. 通过标签名获取元素
    使用 document.getElementsByTagName 方法可以获取指定标签名的所有元素。例如： 
    <!DOCTYPE html>
<html>
<body><p>段落 1</p>
<p>段落 2</p><script>let paragraphs = document.getElementsByTagName('p');for (let i = 0; i < paragraphs.length; i++) {console.log(paragraphs[i].innerHTML);}
</script>
</body>
</html>
  3. 通过类名获取元素
    document.getElementsByClassName 方法用于获取具有特定类名的所有元素。例如： 
    <!DOCTYPE html>
<html>
<body><div class="myClass">类名为 myClass 的 div 1</div>
<div class="myClass">类名为 myClass 的 div 2</div><script>let myClassElements = document.getElementsByClassName('myClass');for (let i = 0; i < myClassElements.length; i++) {console.log(myClassElements[i].innerHTML);}
</script>
</body>
</html>

（三）修改元素属性

可以通过 JavaScript 来修改元素的各种属性，如修改元素的样式、内容等。

  1. 修改样式
    可以直接修改元素的 style 属性来改变其样式。例如： 
    <!DOCTYPE html>
<html>
<body><div id="myDiv" style="width: 100px; height: 100px; background-color: red;">原始 div</div><script>let myDiv = document.getElementById('myDiv');myDiv.style.backgroundColor = 'blue';myDiv.style.width = '200px';
</script>
</body>
</html>
  2. 修改内容
    可以使用 innerHTML 属性来修改元素的内容。例如： 
    <!DOCTYPE html>
<html>
<body><div id="myDiv">原始内容</div><script>let myDiv = document.getElementById('myDiv');myDiv.innerHTML = '新内容';
</script>
</body>
</html>

（四）添加和删除元素

  1. 添加元素
    可以使用 document.createElement 创建新元素，然后使用 appendChild 方法将其添加到父元素中。例如： 
    <!DOCTYPE html>
<html>
<body><div id="parentDiv"></div><script>let parentDiv = document.getElementById('parentDiv');let newDiv = document.createElement('div');newDiv.innerHTML = '新创建的 div';parentDiv.appendChild(newDiv);
</script>
</body>
</html>
  2. 删除元素
    可以使用 parentNode.removeChild 方法来删除一个元素。例如： 
    <!DOCTYPE html>
<html>
<body><div id="parentDiv"><div id="childDiv">要删除的 div</div>
</div><script>let childDiv = document.getElementById('childDiv');let parentDiv = document.getElementById('parentDiv');parentDiv.removeChild(childDiv);
</script>
</body>
</html>

五、事件处理

（一）事件简介

事件是用户与网页交互时产生的动作，如点击、鼠标移动、键盘按键等。JavaScript 可以通过事件处理程序来响应这些事件。

（二）添加事件处理程序

  1. 内联方式
    可以在 HTML 元素的属性中直接添加事件处理程序。例如： 
    <button onclick="alert('你点击了按钮');">点击我</button>

    不过这种方式将 JavaScript 代码与 HTML 代码混合，不利于维护，一般不推荐使用。
    2. 脚本方式
    可以使用 JavaScript 在脚本中为元素添加事件处理程序。例如：

    <!DOCTYPE html>
<html>
<body><button id="myButton">点击我</button><script>let myButton = document.getElementById('myButton');myButton.addEventListener('click', function() {console.log('按钮被点击了');});
</script>
</body>
</html>

    这里使用了 addEventListener 方法，它可以为元素添加多个相同类型的事件处理程序，并且可以更好地控制事件的传播。

（三）常见事件类型

  1. 鼠标事件
    常见的鼠标事件包括 click（点击）、mouseover（鼠标移到元素上）、mouseout（鼠标移出元素）等。例如： 
    <!DOCTYPE html>
<html>
<body><div id="myDiv" style="width: 100px; height: 100px; background-color: red;">鼠标悬停测试</div><script>let myDiv = document.getElementById('myDiv');myDiv.addEventListener('mouseover', function() {this.style.backgroundColor = 'blue';});myDiv.addEventListener('mouseout', function() {this.style.backgroundColor = 'red';});
</script>
</body>
</html>
  2. 键盘事件
    键盘事件有 keydown（键盘按键按下）、keyup（键盘按键松开）等。例如： 
    <!DOCTYPE html>
<html>
<body><input type="text" id="myInput"><script>let myInput = document.getElementById('myInput');myInput.addEventListener('keydown', function(event) {console.log('按下的键码:', event.keyCode);});
</script>
</body>
</html>
  3. 表单事件
    对于表单元素，有 submit（表单提交）、change（表单元素值改变）等事件。例如： 
    <!DOCTYPE html>
<html>
<body><form id="myForm"><input type="text" id="myInput"><input type="submit" value="提交">
</form><script>let myForm = document.getElementById('myForm');myForm.addEventListener('submit', function(event) {event.preventDefault();console.log('表单提交');});let myInput = document.getElementById('myInput');myInput.addEventListener('change', function() {console.log('输入框内容改变');});
</script>
</body>
</html>

    这里在表单的 submit 事件处理程序中使用了 event.preventDefault 方法来阻止表单的默认提交行为。

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

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

相关文章

安装Fcitx5输入框架和输入法自动部署脚本(来自Mark24)-Ubuntu通用

安装Fcitx5输入框架和输入法自动部署脚本(来自Mark24)-Ubuntu通用

在Ubuntu22.04上安装rime中文输入法的基本教程 上述文章接近废弃。 使用新逻辑配置基本的Fcitx5的输入法。 安装 第一步&#xff0c;下载相关组件 sudo nala install vim sudo nala install ruby sudo nala install fcitx5-rime第二步&#xff0c;设置语言为Fcitx5 而非 默认…
阅读更多...
【FAQ】使用Node.js 镜像 构建本地项目

【FAQ】使用Node.js 镜像 构建本地项目

在nodejs官方并没有提供使用node.js构建本地项目的方法&#xff0c;但是通过阅读官方文档&#xff0c;可以发现&#xff0c;官方在包管理器界面提供了如下语句 所以node.js容器是可以执行语句的 下面通过docker 的 -w 、-v 参数设置容器工作目录和目录映射&#xff08;实现本…
阅读更多...
C/C++语言基础--C++智能指针(unique_ptr、shared_ptr、week_ptr)

C/C++语言基础--C++智能指针(unique_ptr、shared_ptr、week_ptr)

本专栏目的 更新C/C的基础语法&#xff0c;包括C的一些新特性 前言 在C、C语言中&#xff0c;最经典的特性就是指针&#xff0c;他和内存相关&#xff0c;但是我们常常申请内存后忘记释放而导致内存泄漏&#xff0c;C提供了智能指针去解决这个内存泄漏问题&#xff1b;C语言…
阅读更多...
Nature Methods | 人工智能在生物与医学研究中的应用

Nature Methods | 人工智能在生物与医学研究中的应用

Nature Methods | 人工智能在生物与医学研究中的应用 生物研究中的深度学习 随着人工智能&#xff08;AI&#xff09;技术的迅速发展&#xff0c;尤其是深度学习和大规模预训练模型的出现&#xff0c;AI在生物学研究中的应用正在经历一场革命。从基因组学、单细胞组学到癌症生…
阅读更多...
队列-链式描述（C++）

队列-链式描述（C++）

定义 使用链表描述队列时&#xff0c;通常包含以下几个基本要素&#xff1a; 队头指针&#xff08;Front Pointer&#xff09;&#xff1a;指向队列中第一个&#xff08;即最早进入队列的&#xff09;元素的节点。队尾指针&#xff08;Rear Pointer&#xff09;&#xff1a;指…
阅读更多...
Flutter 之 InheritedWidget

Flutter 之 InheritedWidget

InheritedWidget 是 Flutter 框架中的一个重要类&#xff0c;用于在 Widget 树中共享数据。它是 Flutter 中数据传递和状态管理的基础之一。通过 InheritedWidget&#xff0c;你可以让子 Widget 在不需要显式传递数据的情况下&#xff0c;访问祖先 Widget 中的数据。这种机制对…
阅读更多...
Python 深度学习框架介绍

Python 深度学习框架介绍

Python 是深度学习领域的主流编程语言&#xff0c;拥有许多强大的深度学习框架&#xff0c;广泛用于学术研究、工业应用和生产环境中。以下是一些最流行的 Python 深度学习框架&#xff0c;它们各自具有独特的功能和特点&#xff1a; 1. TensorFlow 开发公司&#xff1a;Google…
阅读更多...
MySQL技巧之跨服务器数据查询：进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中

MySQL技巧之跨服务器数据查询：进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中

MySQL技巧之跨服务器数据查询&#xff1a;进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中 基础篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MyS…
阅读更多...
Flutter 指纹识别

Flutter 指纹识别

在这篇博客中&#xff0c;我们将介绍如何使用 Flutter 的 local_auth 插件在 Android 和 iOS 设备上实现指纹识别功能。通过这一步一步的实现&#xff0c;我们将学习如何检查设备是否支持生物识别、如何触发指纹验证&#xff0c;并处理可能出现的错误。 效果图&#xff08;因为…
阅读更多...
CentOS 9 配置静态IP

CentOS 9 配置静态IP

文章目录 1_问题原因2_nmcli 配置静态IP3_使用配置文件固定IP4_重启后存在的问题5_nmcli 补充 1_问题原因 CentOS 7 于 2014年6月发布&#xff0c;基于 RHEL 7&#xff0c;并在 2024年6月30日 结束维护。 CentOS 9 作为目前的最新版本&#xff0c;今天闲来闲来无事下载下来后…
阅读更多...
数据结构(三)——双向链表的介绍以及实现

数据结构(三)——双向链表的介绍以及实现

前言 前面两期数据结构的文章我们介绍了顺序表和单向链表&#xff0c;那么本篇博文我们将来了解双向链表&#xff0c;作为最好用的一种链表&#xff0c;双向链表有什么特殊之处呢&#xff0c;接下来就让我们一起了解一下吧。 下面是前两篇数据结构的文章&#xff1a; 数据结…
阅读更多...
Oracle--表空间Tablespace

Oracle--表空间Tablespace

在 Oracle 数据库中&#xff0c;表空间&#xff08;Tablespace&#xff09; 是一种逻辑存储结构&#xff0c;用于组织和管理数据库中物理存储数据文件的方式。以下是表空间相关操作的详细介绍&#xff0c;包括创建、修改、删除、查询以及常见问题处理。 1. 表空间的作用 提供逻…
阅读更多...
cmake一些常用指令

cmake一些常用指令

cmake常用的一些命令 推荐网址&#xff1a;CMake 保姆级教程&#xff08;上&#xff09; | 爱编程的大丙 cmake_minimum_required(VERSION 3.0) project(CALC) # 增加-stdc11 set(CMAKE_CXX_STANDARD 11) # 指定输出的路径 set(HOME ${CMAKE_CURRENT_SOURCE_DIR}) # 可执行文…
阅读更多...
面阵相机的使用和注意事项

面阵相机的使用和注意事项

引言 面阵相机&#xff08;Area Scan Camera&#xff09;是一种广泛应用于工业视觉、医学成像、安防监控以及科研领域的图像采集设备。与线扫相机不同&#xff0c;面阵相机的传感器包含多行像素&#xff08;例如1280x1024、1920x1080等&#xff09;&#xff0c;能够在一个曝光…
阅读更多...
损失函数分类

损失函数分类

1. NLLLoss&#xff08;负对数似然损失&#xff09; 定义&#xff1a; 直接对预测的概率 p(yi) 的负对数求平均。通常配合 Softmax 使用&#xff0c;输入为对数概率。 优点&#xff1a; 对离散分类问题效果良好。更灵活&#xff0c;用户可以自行计算 Softmax。 缺点&#x…
阅读更多...
python冒号是什么意思

python冒号是什么意思

例如&#xff1a; user: User User.objects.filter(iddata.get(uid)).first() 变量名后面的冒号是&#xff1a;类型注解&#xff0c;3.6以后加入的&#xff0c;冒号右边是类型&#xff0c;仅仅是注释&#xff0c;有些鸡肋。 变量注释的语法&#xff1a;注释变量类型,明确指出…
阅读更多...
ESLint v9.0.0 新纪元：探索 eslint.config.js 的奥秘 （4）

ESLint v9.0.0 新纪元：探索 eslint.config.js 的奥秘 （4）

从 v9.0.0 开始&#xff0c;官方推荐的配置文件格式是 eslint.config.js&#xff0c;并且支持 ESM 模块化风格&#xff0c;可以通过 export default 来导出配置内容。 // eslint.config.js export default [{rules: {semi: "error","prefer-const": "…
阅读更多...
【Vue3】【Naive UI】＜ a ＞标签

【Vue3】【Naive UI】＜ a ＞标签

【Vue3】【Naive UI】< a >标签 超链接及相关属性其他属性 【VUE3】【Naive UI】&#xff1c;NCard&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c;n-button&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c;a&#xff1e; 标签 <a> 标签HTML中的一个锚&…
阅读更多...
打字指法和键盘按键功能简介

打字指法和键盘按键功能简介

打字指法和键盘按键功能简介 一、打字指法简介&#xff08;附视频演示&#xff09; 基本要领和练习步骤&#xff1a; 手指位置&#xff1a;正常情况下&#xff0c;大拇指放在空格键上&#xff0c;其余四个手指分别放在 ASDF 和 JKL; 键上。 打字姿势&#xff1a;打字时手指…
阅读更多...
H3C ACL实验

H3C ACL实验

实验拓扑 实验需求 按照图示配置 IP 地址全网路由互通在 SERVER1 上配置开启 TELNET 和 FTP 服务配置 ACL 实现如下效果 192.168.1.0/24网段不允许访问 192.168.2.0/24 网段&#xff0c;要求使用基本 ACL 实现 PC1 可以访问 SERVER1 的 TELNET 服务&#xff0c;但不能访问 FTP…
阅读更多...
最新文章

Copyright @ 2022~2023