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

JavaScript全解:从基础到高级,掌握每一个知识点

引言:

JavaScript是一种广泛使用的脚本语言,主要用于Web浏览器,但近年来也扩展到了服务器端(Node.js)和其他领域。它允许开发者创建交互式的网页,处理数据,控制用户界面,甚至构建完整的应用程序。本文将全面解析JavaScript的基础概念、语法、核心功能及其运用,并通过小案例加深理解。

一、JavaScript基础

1. 变量与数据类型

  • 变量声明varletconst
  • 数据类型: 字符串(String), 数字(Number), 布尔(Boolean), 对象(Object), 数组(Array), 函数(Function), null, undefined

案例:

 

Javascript

1let name = "Alice";
2const age = 30;
3var isStudent = false;

2. 运算符

  • 算术运算符(+-*/%)
  • 比较运算符(=====!=!==<>)
  • 逻辑运算符(&&||!)

案例:

 

Javascript

1let x = 10;
2let y = 5;
3console.log(x + y); // 15
4console.log(x > y); // true

3. 流程控制

  • 条件语句(ifelse ifelse)
  • 循环(forwhiledo...while)

案例:

 

Javascript

1let num = 10;
2if (num > 0) {
3  console.log("Positive");
4} else if (num < 0) {
5  console.log("Negative");
6} else {
7  console.log("Zero");
8}
9
10for (let i = 0; i < 5; i++) {
11  console.log(i);
12}

4. 函数

  • 函数定义与调用
  • 参数传递
  • 返回值

案例:

 

Javascript

1function add(a, b) {
2  return a + b;
3}
4console.log(add(5, 3)); // 8

5. 数组与对象

  • 数组操作(pushpopshiftunshiftslicesplice)
  • 对象属性与方法

案例:

 

Javascript

1let arr = [1, 2, 3];
2arr.push(4);
3console.log(arr); // [1, 2, 3, 4]
4
5let obj = {name: "John", age: 25};
6console.log(obj.name); // John

二、JavaScript进阶

1. DOM操作

  • 查询元素(getElementByIdgetElementsByClassNamequerySelector)
  • 修改元素(innerHTMLtextContentsetAttribute)
  • 事件监听(addEventListener)

案例:

 

Javascript

1document.getElementById("myDiv").innerHTML = "Hello!";
2document.querySelector(".myClass").addEventListener("click", function() {
3  console.log("Clicked!");
4});

2. 异步编程

  • 回调函数
  • Promise
  • Async/Await

案例:

 

Javascript

1function loadSomething(callback) {
2  setTimeout(() => {
3    callback("Loaded!");
4  }, 2000);
5}
6
7loadSomething(function(data) {
8  console.log(data);
9});
10
11async function fetchData() {
12  let response = await fetch("https://api.example.com/data");
13  let data = await response.json();
14  console.log(data);
15}

3. 模块化

  • ES6模块(importexport)
  • Node.js模块(requiremodule.exports)

案例:

 

Javascript

1// math.js
2export function add(a, b) {
3  return a + b;
4}
5
6// main.js
7import { add } from './math.js';
8console.log(add(1, 2)); // 3

4. 面向对象

  • 类(class)
  • 继承(extends)
  • 封装、继承、多态

案例:

 

Javascript

1class Animal {
2  constructor(name) {
3    this.name = name;
4  }
5  speak() {
6    console.log(this.name + " makes a sound.");
7  }
8}
9
10class Dog extends Animal {
11  speak() {
12    console.log(this.name + " barks.");
13  }
14}
15
16let d = new Dog("Rufus");
17d.speak(); // Rufus barks.

三、实战案例

假设我们需要实现一个简单的计数器组件,可以增加、减少计数,并显示当前的计数值。

HTML:

 

Html

1<div id="counter">
2  <button id="increment">+</button>
3  <span id="value">0</span>
4  <button id="decrement">-</button>
5</div>

JavaScript:

 

Javascript

1let value = 0;
2let valueElement = document.getElementById("value");
3
4function updateValue() {
5  valueElement.textContent = value;
6}
7
8document.getElementById("increment").addEventListener("click", function() {
9  value++;
10  updateValue();
11});
12
13document.getElementById("decrement").addEventListener("click", function() {
14  value--;
15  updateValue();
16});
17
18updateValue();

四、总结

以上就是JavaScript的全面解析,从基础概念到高级主题,涵盖了大部分常用的功能。掌握了这些知识,你将能够更加熟练地使用JavaScript进行Web开发,无论是客户端还是服务器端的应用。继续深入学习,挑战更复杂的项目,你的编程技能将不断进步!

感谢你的点赞!关注!收藏!

相关文章:

JavaScript全解:从基础到高级,掌握每一个知识点

引言&#xff1a; JavaScript是一种广泛使用的脚本语言&#xff0c;主要用于Web浏览器&#xff0c;但近年来也扩展到了服务器端&#xff08;Node.js&#xff09;和其他领域。它允许开发者创建交互式的网页&#xff0c;处理数据&#xff0c;控制用户界面&#xff0c;甚至构建完…...

RabbitMQ的Direct交换机

Direct交换机 BindingKey 在Fanout模式中&#xff0c;一条消息&#xff0c;会被所有订阅的队列都消费。但是&#xff0c;在某些场景下&#xff0c;我们希望不同的消息被不同的队列消费。这时就要用到Direct类型的Exchange。 在Direct模型下&#xff1a; 队列与交换机的绑定&a…...

2024.6.26 待学习知识点

OOALV https://www.cnblogs.com/BruceKing/p/11447499.html " 取工单的组件 lt_aufnr CORRESPONDING #( lt_out MAPPING aufnr aufnr EXCEPT * ). ABAP POPUP_TO_CONFIRM 弹出框函数 CLASS-EVENTS CLASS-METHODS main. CLASS-METHODS raise_event_EXIT_COMMAND IMPOR…...

【LeetCode】每日一题:相交链表

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&am…...

6.26.1 残差卷积变压器编码器的混合工作流程用于数字x线乳房x光片乳腺癌分类

基于残差卷积网络和多层感知器变压器编码器(MLP)的优势&#xff0c;提出了一种新型的混合深度学习乳腺病变计算机辅助诊断(CAD)系统。利用骨干残差深度学习网络创建深度特征&#xff0c;利用Transformer根据自注意力机制对乳腺癌进行分类。所提出的CAD系统具有识别两种情况乳腺…...

[leetcode]avoid-flood-in-the-city 避免洪水泛滥

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> avoidFlood(vector<int>& rains) {vector<int> ans(rains.size(), 1);set<int> st;unordered_map<int, int> mp;for (int i 0; i < rains.size(); i) {i…...

Pytorch基础

文章目录 零、tensorboard0.1基本使用案例 一、数据结构&#xff1a;Tensor1.1数据类型1.2Tensor的创建方式1.3张量的基本运算1.4张量的属性 二、数据集加载器DataLoaders2.0前置知识2.0.1torch.scatter()、torch.scatter_() 2.1官方案例2.1.1从TorchVision加载数据集2.1.2迭代…...

嵌入技术Embedding

嵌入&#xff08;Embedding&#xff09;是一种将高维数据映射到低维空间的技术&#xff0c;广泛应用于自然语言处理&#xff08;NLP&#xff09;、计算机视觉和推荐系统等领域。嵌入技术的核心思想是将复杂的数据表示为低维向量&#xff0c;使其在这个低维空间中保留尽可能多的…...

Pandas中的数据转换[细节]

今天我们看一下Pandas中的数据转换&#xff0c;话不多说直接开始&#x1f387; 目录 一、⭐️apply函数应用 apply是一个自由度很高的函数 对于Series&#xff0c;它可以迭代每一列的值操作&#xff1a; 二、⭐️矢量化字符串 为什么要用str属性 替换和分割 提取子串 …...

vue2面试题——路由

1. 路由的模式和区别 路由的模式&#xff1a;history&#xff0c;hash 区别&#xff1a; 1. 表象不同 history路由&#xff1a;以/为结尾&#xff0c;localhost:8080——>localhost:8080/about hash路由&#xff1a;会多个#&#xff0c;localhost:8080/#/——>localhost:…...

【AI应用探讨】—朴素贝叶斯应用场景

目录 文本分类 推荐系统 信息检索 生物信息学 金融领域 医疗诊断 其他领域 文本分类 垃圾邮件过滤&#xff1a;朴素贝叶斯被广泛用于垃圾邮件过滤任务&#xff0c;通过邮件中的文本内容来识别是否为垃圾邮件。例如&#xff0c;它可以基于邮件中出现的单词或短语的概率来…...

使用matlab的大坑,复数向量转置!!!!!变量区“转置变量“功能(共轭转置)、矩阵转置(默认也是共轭转置)、点转置

近期用verilog去做FFT相关的项目&#xff0c;需要用到matlab进行仿真然后和verilog出来的结果来做对比&#xff0c;然后计算误差。近期使用matlab犯了一个错误&#xff0c;极大的拖慢了项目进展&#xff0c;给我人都整emo了&#xff0c;因为怎么做仿真结果都不对&#xff0c;还…...

昇思25天学习打卡营第8天|保存与加载

1. 学习内容复盘 1.1 保存与加载 上一章节主要介绍了如何调整超参数&#xff0c;并进行网络模型训练。在训练网络模型的过程中&#xff0c;实际上我们希望保存中间和最后的结果&#xff0c;用于微调&#xff08;fine-tune&#xff09;和后续的模型推理与部署&#xff0c;本章…...

【vueUse库Animation模块各函数简介及使用方法】

vueUse库是一个专门为Vue打造的工具库,提供了丰富的功能,包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数,以下是这些函数的简介和使用方法: vueUse库Sensors模块各函数简介及使用方法 vueUseAnimation函数1. useInter…...

汇川H5u小型PLC作modbusRTU从站设置及测试

目录 新建工程COM通讯参数配置协议选择协议配置 查看手册Modbus地址对应关系仿真测试 新建工程 新建一个H5U工程&#xff0c;不使用临时工程 系列选择H5U即可 COM通讯参数配置 协议选择 选择ModbusRTU从站 协议配置 端口号默认不可选择 波特率这里使用9600 数据长度&…...

基于Java的多元化智能选课系统-计算机毕业设计源码040909

摘 要 多元化智能选课系统使用Java语言的Springboot框架&#xff0c;采用MVVM模式进行开发&#xff0c;数据方面主要采用的是微软的Mysql关系型数据库来作为数据存储媒介&#xff0c;配合前台技术完成系统的开发。 论文主要论述了如何使用JAVA语言开发一个多元化智能选课系统&a…...

idea使用maven打包报错GBK不可映射字符

方法一&#xff1a;设置环境变量 打开“控制面板” > “系统和安全” > “系统”。点击“高级系统设置”。在“系统属性”窗口中&#xff0c;点击“环境变量”。在“系统变量”部分&#xff0c;点击“新建”&#xff0c;创建一个新的变量&#xff1a; 变量名&#xff1a;…...

解决Linux系统Root不能远程SSH登录

问题描述 在使用Linux主机或者开发板的时候远程SSH一直登录不上Root账户&#xff0c;只能登录其他账户。 问题解决 使用文本编辑器修改SSH的配置文件sshd_config。这个文件通常位于/etc/ssh/目录下。 sudo nano /etc/ssh/sshd_config在sshd_config文件中&#xff0c;找到Pe…...

【java】【控制台】【javaSE】 初级java家教管理系统控制台命令行程序项目

更多项目点击&#x1f446;&#x1f446;&#x1f446;完整项目成品专栏 【java】【控制台】【javaSE】 初级java家教管理系统控制台命令行程序项目 获取源码方式项目说明&#xff1a;功能点数据库涉及到&#xff1a; 项目文件包含&#xff1a;项目运行环境 &#xff1a;截图其…...

(2024)豆瓣电影TOP250爬虫详细讲解和代码

&#xff08;2024&#xff09;豆瓣电影TOP250爬虫详细讲解和代码 爬虫目的 获取 https://movie.douban.com/top250 电影列表的所有电影的属性。并存储起来。说起来很简单就两步。 第一步爬取数据第二步存储 爬虫思路 总体流程图 由于是分页的&#xff0c;要先观察分页的规…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...