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

JavaScript基础一、简介

news 2025/11/2 5:32:41

文章地址

个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

Gitee：https://gitee.com/bluecusliyou/TechLearn
Github：https://github.com/bluecusliyou/TechLearn

JavaScript基础一、简介

1、简介

（1）JavaScript是什么

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

（2）JavaScript做什么

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)

（3）JavaScript的组成

ECMAScript：规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等，ECMAScript是一种语言标准，而JavaScript是对ECMAScript标准的一种实现。
Web APIs :
DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

（4）ECMAScript版本

JavaScript历史
- 在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。
- 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。
- 为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广。
ECMAScript
- 因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。
- 所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。
- 不过大多数时候，如果你遇到ECMAScript这个词，简单把它当成JavaScript就行了。
JavaScript版本
- 由于JavaScript的标准ECMAScript在不断发展，不停的迭代新的版本，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。
- 2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。ES6是继ES5之后的一次主要改进，语言规范由ES5.1时代的245页扩充至600页。ECMAScript 6之后，Ecma国际意在更频繁地发布包含小规模增量更新的新版本，新版本将按照ECMAScript+年份的形式发布。
- 你在写JavaScript的时候，要照顾一下老用户，不能一上来就用ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。

（5）参考网站

权威网站： MDN
JavaScript权威网站： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

2、初体验

（1）体验js案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验js</title><style>.pink {background-color: pink;}</style>
</head><body><button class="pink">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><script>let bts = document.querySelectorAll('button')for (let i = 0; i < bts.length; i++) {bts[i].addEventListener('click', function() {document.querySelector('.pink').className = ''this.className = 'pink'})}</script>
</body></html>

点击按钮，按钮变色

（2）注释

单行注释
- 符号：//
- 作用：//右边这一行的代码会被忽略
- **快捷键：**ctrl + /
块注释
- 符号：/* */
- **作用：*在/ 和 */ 之间的所有内容都会被忽略
- **快捷键：**shift + alt + A

案例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js注释</title>
</head><body><script>//单行注释//右边这一行的代码会被忽略//快捷键：ctrl + ///块注释/* 之间的所有内容都会被忽略快捷键：shift + alt + A */</script>
</body></html>

（3）结束符

作用： 使用英文的 ; 代表语句结束
实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置
现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

案例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js结束符</title>
</head><body><script>//要么都写分号，要么都不写//alert('你好');//alert('你好2');alert('你好')alert('你好2')</script>
</body></html>

（4）script标签位置

内部 JavaScript
- 直接写在html文件里，写在</body>上面，用script标签包住
- 注意事项：文件加载顺序
  - 浏览器会按照代码在文件中的顺序加载 HTML。
  - 如果先加载的JS再加载需要JS操作的HTML，那么它可能由于 HTML 尚未被加载而失效。
  - 因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
外部 JavaScript
- 代码写在以.js结尾的文件里，可以使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读。
- **语法：**通过script标签，引入到html页面中。
- 注意事项：script标签中间写的代码会被忽略！
内联 JavaScript
- 代码写在标签内部
- 此处作为了解即可，但是后面vue框架会用这种模式

案例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js书写位置</title>
</head><body><!-- 内部js --><script>// 页面弹出警示框alert('你好，js~')</script><!-- 外部js --><script src="./js/my.js">// 中间不要写内容</script><!-- 内联js --><button onclick="alert('你好，js')">点击我</button>
</body></html>

3、输入和输出

（1）语法是什么

人和计算机的规则约定，我们要按照这个规则写代码，计算机才能看懂
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

（2）输出语法

向body内输出内容：document.write('页面打印')
- **注意：**如果输出的内容写的是标签，也会被解析成网页元素
页面弹出警告对话框：alert('弹出内容')
控制台输出，程序员调试用：console.log('控制台打印')

（3）输入语法

**语法：**prompt(‘请输入您的姓名：’)
**作用：**显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

（4）案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输入和输出语法</title>
</head><body><script>// 1. 文档输出内容document.write('我是div标签')document.write('<h1>我是标题</h1>')// 2. 弹框提示alert('我是弹框')// 3. 控制台打印输出 给 程序员console.log('看看对不对')console.log('日志')// 4. 输入语句prompt('请输入您的年龄：')</script>
</body></html>

JavaScript 代码执行顺序：

按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

JavaScript基础一、简介

零、文章目录文章地址个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…...

编程日记 2023/5/6 11:36:45

Qt音视频开发20-vlc内核动态保存录像文件（不需要重新编译源码）

一、前言在vlc默认提供的保存文件方式中，通过打开的时候传入指定的参数来保存文件，直到关闭播放生成文件，这种方式简单暴力，但是不适用大部分的场景，大部分时候需要的是提供开始录制和停止录制的功能，也就…...

编程日记 2023/5/6 11:36:43

【深度学习】BERT变体—RoBERTa

RoBERTa是的BERT的常用变体，出自Facebook的RoBERTa: A Robustly Optimized BERT Pretraining Approach。来自Facebook的作者根据BERT训练不足的缺点提出了更有效的预训练方法，并发布了具有更强鲁棒性的BERT：RoBERTa。 RoBERTa通过以下四个方面…...

编程日记 2023/5/6 11:36:41

java面试准备1

JVM、JRE和JDK的关系 JVM:Java Virtual Machine是java虚拟机，Java程序需要运行在虚拟机上，不同的平台有自己的虚拟机，因此java可以实现跨平台使用。 JRE：Java Runtion Envirement包括Java虚拟机和Java程序所需要的核心类库等。 J…...

编程日记 2023/5/6 11:36:38

buffer它到底做了个啥，源码级分析linux内核的文件系统的缓冲区

最近一直在学习linux内核源码，总结一下 https://github.com/xiaozhang8tuo/linux-kernel-0.11 自己整理过的带注释的源码。为什么要有buffer 高速缓冲区是文件系统访问块设备中数据的必经要道(PS:如果所有程序结果都不落盘，只是int a, a直接在主存…...

编程日记 2023/5/6 11:36:36

【蓝桥杯刷题】盗版Huybery系列之手抓饼赛马

【蓝桥杯刷题】—— 盗版Huybery系列之手抓饼赛马😎😎😎 目录 💡前言🌞： 💛盗版Huybery系列之手抓饼赛马题目💛 💪 解题思路的分享💪 😊题…...

编程日记 2023/5/6 11:36:34

【微信小程序-原生开发】实用教程16 - 查看详情（含页面跳转的传参方法--简单传参 vs 复杂传参）

需在实现列表的基础上开发【微信小程序-原生开发】实用教程15 - 列表的排序、搜索（含云数据库常用查询条件的使用方法，t-search 组件的使用）_朝阳39的博客-CSDN博客 https://sunshinehu.blog.csdn.net/article/details/129356909 效果预览 …...

编程日记 2023/5/6 11:36:32

论文精读：Ansor: Generating High-Performance Tensor Programs for Deep Learning

文章目录1. Abstract2. Introduction3. Background4. Design Overview5. Program Sampling5.1 Sketch Generation5.2 Random Annotation6. Performance Fine-tuning6.1 Evolutionary Search6.2 Learned Cost Model7. Task Scheduler7.1 Problem Formulation7.2 Optimizing with…...

编程日记 2023/5/6 11:36:29

SpringBoot With IoC,DI, AOP,自动配置

文章目录1 IoC（Inverse Of Controller）2 DI（Dependency Injection）3 AOP（面向切面编程）3.1 什么是AOP？3.2 AOP的作用？3.3 AOP的核心概念3.4 AOP常见通知类型3.5 切入点表达式4 自动配…...

编程日记 2023/5/6 11:36:27

ggplot2的组图拓展包（1）：patchwork（上篇）

专注系列化、高质量的R语言教程推文索引 | 联系小编 | 付费合集patchwork是ggplot绘图系统的拓展包，主要功能是将多个ggplot格式的图形组合成一幅大图，即组图。patchwork工具包十分好用，它主要利用几个类似四则运算符号的操作符进行组图&…...

编程日记 2023/5/6 11:36:25

Python 异步: 异步迭代器（15）

动动发财的小手，点个赞吧！ 迭代是 Python 中的基本操作。我们可以迭代列表、字符串和所有其他结构。 Asyncio 允许我们开发异步迭代器。我们可以通过定义一个实现 aiter() 和 anext() 方法的对象来在 asyncio 程序中创建和使用异步迭代器。 1. 什么是异步…...

编程日记 2023/5/6 11:36:22

HD-G2L-IOT V2.0核心板MPU压力测试

1. 测试对象HD-G2L-IOT基于HD-G2L-CORE V2.0工业级核心板设计，双路千兆网口、双路CAN-bus、2路RS-232、2路RS-485、DSI、LCD、4G/5G、WiFi、CSI摄像头接口等，接口丰富，适用于工业现场应用需求，亦方便用户评估核心板及CPU的性能。H…...

编程日记 2023/5/6 11:36:20

scikit-image：遥感图像geotiff格式转mat格式

scikit-imagescikit-image 是一个专门用于图像处理的 Python 库，它可以与 Scipy 库和其他可能有助于计算的 Python 库一起使用。Github地址：https://github.com/scikit-image/scikit-image Star有5.3k首先pip安装scikit-image包，或者直接使用…...

编程日记 2023/5/6 11:36:18

吉利银河L7、长城哈弗B07、比亚迪宋Plus DM-i，自主品牌决战混动

2月23日，吉利推出全新的中高端新能源产品序列——吉利银河。当日，吉利推出了首款智能电混SUV「银河L7」，新车将在二季度交付。本月10日，长城汽车也计划举办智能新能源干货大会，其「颠覆技术」等宣传直面新一代的新能源…...

编程日记 2023/5/6 11:36:15

附录3：说一说 Ambari 视图编译相关

一、Ambari View Ambari 视图，即 Ambari Views 。其实 Ambari 视图并不是很好用，所以大部分人很自然地就把 Ambari 视图给忽略了，心里会冒出一句：“还有这东西？”。然而作为 Ambari 的一部分，今天还是要讲一下，万一有人追求 Ambari 完整性，要编译并安装汉化他们呢？ …...

编程日记 2023/5/7 2:52:56

Arduino双色LED实验记录

接线图片：双色LED实物和布线有区别：代码：int RED_LED 11; //设置红色为11 int GREEN_LED 10; //设置绿色为10 int val 0;//全局变量val void setup() {// put your setup code here, to run once:pinMode(RED_LED,OUTPUT);//引脚配置pinMo…...

编程日记 2023/5/6 11:36:13

flex布局

十分简单灵活，区区几行代码都可以实现各种页面的布局，曾经学习页面布局时候，深受float、display、position这些属性的困扰，但是学习flex布局，只需要学习几个CSS属性，就可以写出简介优雅复杂的页面布局。 F…...

编程日记 2023/5/6 11:36:11

【操作系统原理实验】命令解释器模拟实现

选择一种高级语言如C/C等，编写一类似于DOS、UNIX中的命令行解释程序。 1)设计系统命名行提示符； 2)自定义命令集（8-10个）； 3)用户输入help命令以查找命令的帮助； 4)列出命令的功能，区分内部命令…...

编程日记 2023/5/6 11:36:08

使用nvm管理node版本

下载nvm版本参考文章：https://blog.csdn.net/langmanboy/article/details/126357952下载安装选择nvm的目录为d:\nvm，nodejs的目录为d:\nodejs：v14.0.0：执行nvm install 14生成的目录v16.0.0：执行nvm install 16生成的目…...

编程日记 2023/5/6 11:36:06

jQuery BootStrap

1、jQuery的使用方式 1、下载jQuery库文件网址 2、将下载好的js文件放到项目中，并引入到需要的HTML文件中 3、使用jQuery 注意：jQuery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。 <!DOCTYPE html> <html lang"en…...

编程日记 2023/5/6 11:36:04

pam_env.so模块配置解析

在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解字段值说明模块类型auth认证类模块，负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2025/10/14 13:55:53

三体问题详解

从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...

编程新知 2025/10/19 5:14:05

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2025/10/28 17:04:41

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...

编程新知 2025/10/29 1:49:43

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/10/29 10:38:57