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

JavaScript基础一、简介

news 2025/6/22 23:05:53

零、文章目录

文章地址

  • 个人博客-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)

image-20230224074536092

（3）JavaScript的组成

  • ECMAScript：规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等，ECMAScript是一种语言标准，而JavaScript是对ECMAScript标准的一种实现。

  • Web APIs :

  • DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

  • BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

image-20230224074748636

（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>

点击按钮，按钮变色

image-20230224075724904

（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标签位置

image-20230224075816931

  • 内部 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() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

image-20230224164411916

image-20230224164252101

image-20230224164348230

相关文章：

JavaScript基础一、简介

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

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

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

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

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

【深度学习】BERT变体—RoBERTa

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

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

java面试准备1

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

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

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

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

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

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

【蓝桥杯刷题】—— 盗版Huybery系列之手抓饼赛马&#x1f60e;&#x1f60e;&#x1f60e; 目录 &#x1f4a1;前言&#x1f31e;&#xff1a; &#x1f49b;盗版Huybery系列之手抓饼赛马题目&#x1f49b; &#x1f4aa; 解题思路的分享&#x1f4aa; &#x1f60a;题…...

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

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

需在实现列表的基础上开发 【微信小程序-原生开发】实用教程15 - 列表的排序、搜索&#xff08;含云数据库常用查询条件的使用方法&#xff0c;t-search 组件的使用&#xff09;_朝阳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&#xff08;Inverse Of Controller&#xff09;2 DI&#xff08;Dependency Injection&#xff09;3 AOP&#xff08;面向切面编程&#xff09;3.1 什么是AOP&#xff1f;3.2 AOP的作用&#xff1f;3.3 AOP的核心概念3.4 AOP常见通知类型3.5 切入点表达式4 自动配…...

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

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

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

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

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

动动发财的小手&#xff0c;点个赞吧&#xff01; 迭代是 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工业级核心板设计&#xff0c;双路千兆网口、双路CAN-bus、2路RS-232、2路RS-485、DSI、LCD、4G/5G、WiFi、CSI摄像头接口等&#xff0c;接口丰富&#xff0c;适用于工业现场应用需求&#xff0c;亦方便用户评估核心板及CPU的性能。H…...

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

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

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

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

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

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

编程日记 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实验记录

接线图片&#xff1a;双色LED实物和布线有区别&#xff1a;代码&#xff1a;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布局

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

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

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

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

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

使用nvm管理node版本

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

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

jQuery BootStrap

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

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

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/6/21 17:27:56

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/6/22 0:43:46

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/6/20 11:35:17

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/6/21 0:56:16

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/6/21 22:11:13

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/6/21 20:54:48

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/6/22 12:22:35

HTML前端开发：JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

编程新知 2025/6/16 1:29:54

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/6/21 6:30:00