当前位置: 首页 > 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;要先观察分页的规…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...