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

JavaScript 基础 - 第1天

news 2025/10/19 21:35:13

介绍

掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用

引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部方式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --><script>alert('嗨，欢迎来传智播学习前端技术！')</script>
</body>
</html>

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js">// 此处的代码会被忽略掉！！！！alert(666);  </script>
</body>
</html>

注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释document.write('嗨，欢迎来传智播学习前端技术！');</script>
</body>
</html>

多行注释

使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write('嗨，欢迎来传智播学习前端技术！')</script>
</body>
</html>

注：编辑器中单行注释的快捷键为 ctrl + /

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 结束符</title>
</head>
<body><script> alert(1);alert(2);alert(1)alert(2)</script>
</body>
</html>

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

输入和输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 输入输出</title>
</head>
<body><script> // 1. 输入的任意数字，都会以弹窗形式展示document.write('要输出的内容')alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script>
</body>
</html>

变量

理解变量是计算机存储数据的“容器”，掌握变量的声明方式

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
// 将用户输入的内容保存在 num 这个变量（容器）中num = prompt('请输入一数字!')
// 通过 num 变量（容器）将用户输入的内容输出出来alert(num)document.write(num)
</script>

声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // let 变量名// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age</script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和赋值</title>
</head>
<body><script> // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符let age// 赋值，将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>

关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body><script> let age = 18 // 正确let age1 = 18 // 正确let _age = 18 // 正确
// let 1age = 18; // 错误，不可以数字开头let $age = 18 // 正确let Age = 24 // 正确，它与小写的 age 是不同的变量// let let = 18; // 错误，let 是关键字let int = 123 // 不推荐，int 是保留字</script>
</body>
</html>

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

const PI = 3.14

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

注：通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 检测 1 是什么类型数据，结果为 numberdocument.write(typeof 1)</script>
</body>
</html>

数值类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let score = 100 // 正整数let price = 12.345 // 小数let temperature = -40 // 负数
document.write(typeof score) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.write(typeof temperature) // 结果为 number</script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

字符串类型

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> let user_name = '小明' // 使用单引号let gender = "男" // 使用双引号let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了let str1 = '' // 这种情况叫空字符串documeent.write(typeof user_name) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string</script>
</body>
</html>

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> //  pink老师帅不帅？回答 是 或 否let isCool = true // 是的，摔死了！isCool = false // 不，套马杆的汉子！
document.write(typeof isCool) // 结果为 boolean</script>
</body>
</html>

undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 数据类型</title>
</head>
<body><script> // 只声明了变量，并末赋值let tmp;document.write(typeof tmp) // 结果为 undefined</script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script> let num = 13 // 数值let num2 = '2' // 字符串
// 结果为 132// 原因是将数值 num 转换成了字符串，相当于 '13'// 然后 + 将两个字符串拼接到了一起console.log(num + num2)
// 结果为 11// 原因是将字符串 num2 转换成了数值，相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)
let a = prompt('请输入一个数字')let b = prompt('请再输入一个数字')
alert(a + b);</script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

补充介绍模板字符串的拼接的使用

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 隐式转换</title>
</head>
<body><script>let t = '12'let f = 8
// 显式将字符串 12 转换成数值 12t = Number(t)
// 检测转换后的类型// console.log(typeof t);console.log(t + f) // 结果为 20
// 并不是所有的值都可以被转成数值类型let str = 'hello'// 将 hello 转成数值是不现实的，当无法转换成// 数值时，得到的结果为 NaN （Not a Number）console.log(Number(str))</script>
</body>
</html>

JavaScript 基础 - 第1天

介绍掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用引入方式 JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式…...

编程日记 2024/2/3 17:21:02

人口增长问题 T1063

#include<bits/stdc.h> using namespace std; int main(){int n;double x;cin>>x>>n;for(int i1;i<n;i){xx*1.001;}printf("%.4lf",x);return 0; }...

编程日记 2024/2/3 17:18:59

2024年Java算法面试题

2024年Java实战面试题（北京）_java 5 年面试-CSDN博客一、波菲那契递归 System.out.println("banc " banc(10)) public static int banc(int n){if( n0 ){return 0;}else if( n1 ){return 1;}else{return banc(n-1) banc(n-2);} } 二、冒…...

编程日记 2024/2/3 17:15:56

C#——三角形面积公式

已知三角形的三个边，求面积，可以使用海伦公式。因此，可以执行得到三角形面积公式的计算方法代码如下： /** / <summary>* / 三角形面积公式* / </summary>* / <param name"a">边长a</param>*…...

编程日记 2024/2/3 17:14:55

tcpdump在手机上的使用

首先手机得root才可以，主要分析手机与手机的通信协议我使用的是一加9pro， root方法参考一加全能盒子、一加全能工具箱官方网站——大侠阿木 (daxiaamu.com)https://optool.daxiaamu.com/index.php tcpdump，要安装在/data/local/tmp下要arm6…...

编程日记 2024/2/3 17:13:54

Unity 输出html5_mob649e8157aaee的技术博客_51CTO博客 Unity打包WebGL报Unable to parse Build/*.framework.js.gz This can happen if build compression was......._unable to load file build/out.framework.js.gz! che-CSDN博客...

编程日记 2024/2/3 17:11:52

认识 SYN Flood 攻击

文章目录 1.什么是 SYN Flood 攻击？2.半连接与全连接队列3.如何防范 SYN Flood 攻击？增大半连接队列开启 SYN Cookie减少 SYNACK 重传次数参考文献 1.什么是 SYN Flood 攻击？ SYN Flood 是互联网上最原始、最经典的 DDoS（Distri…...

编程日记 2024/2/3 17:08:50

Node需要了解的知识

Node能执行javascript的原因。浏览器之所以能执行Javascript代码，因为内部含有v8引擎。Node.js基于v8引擎封装，因此可以执行javascript代码。Node.js环境没有DOM和BOM。DOM能访问HTML所有的节点对象，BOM是浏览器对象。但是node中提供了cons…...

编程日记 2024/2/3 17:06:48

网络服务综合实验项目

目录实验要求运行环境基础配置业务需求实验步骤一、基础配置 1.1、配置静态IP 1.1.1、在192.168.159.130中配置 1.1.2、在192.168.159.131中配置编辑 1.2、修改主机名及hosts映射 1.2.1、在192.168.159.130中配置 1.2.2、编辑配置hosts文件 1.2.3、重启…...

编程日记 2024/2/3 17:05:47

工厂模式与抽象工厂模式

如有错误或有补充，以及任何的改进意见，请在评论区留下您的高见工厂模式工厂模式是一种创建型设计模式。在工厂模式中，类的实例化过程通常是通过一个专门的工厂类来完成的，而不是直接在客户端代码中进行的。这样可以提供更好的…...

编程日记 2024/2/3 17:03:45

Springboot整合Websocket实现ws和wss连接

1. 引入pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.10</version> </dependency>2. 新建websocket配置文件 import org.springf…...

编程日记 2024/2/3 17:02:44

CSC联合培养博士申请亲历|联系外导的详细过程

在CSC申报的各环节中，联系外导获得邀请函是关键步骤。这位联培博士同学的这篇文章，非常详细且真实地记录了申请过程、心理感受，并提出有益的建议，小编特推荐给大家参考。 2024年国家留学基金委公派留学项目即将开始，其…...

编程日记 2024/2/3 17:00:42

没有外网Nginx如何配置如何开启https

判断是否支持open-ssl 在服务器执行如下命令 openssl version没有则安装open-ssl，由于服务器没有外网，可以离线安装openssl-3.0.1.tar.gz，我是在有网的服务器直接下载的，然后再上传到这台无网的服务器上 wget https://www.open…...

编程日记 2024/2/3 16:56:39

【Docker篇】Linux安装Docker、docker安装mysql、redis、rabbitmq

1.Linux安装docker 官方帮助文档：Install Docker Engine on CentOS | Docker Docs 1.1安装命令 # 1. 卸载之前的dockersudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate…...

编程日记 2024/2/3 16:55:38

WPF应用程序(.Net Framework 4.8) 国际化

1、新建两个资源字典文件zh-CN.xaml和en-US.xaml，分别存储中文模板和英文模板 (1) zh-CN.xaml <ResourceDictionary xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml&q…...

编程日记 2024/2/3 16:53:36

Elasticsearch：Geoshape query

Geoshape 查询可以用于过滤使用 geo_shape 或 geo_point 类型索引的文档。 geo_shape 查询使用与 geo_shape 或 geo_point 映射相同的索引来查找具有与查询形状相关的形状的文档，并使用指定的空间关系：相交（intersect）、包含(con…...

编程日记 2024/2/3 16:51:34

安装配置sqoop

一、了解Sqoop 1、Sqoop产生的原因 A. 多数使用hadoop技术的处理大数据业务的企业，有大量的数据存储在关系型数据中。 B. 由于没有工具支持，对hadoop和关系型数据库之间数据传输是一个很困难的事。以上是sqoop产生的主要原因，也因此Sqoop主要用于hadoop与关系型数据库之…...

编程日记 2024/2/3 16:47:29

数据结构——实验01-线性表的链式存储和操作

一、实验内容二、算法思想与算法实现 1、解题思想 （1）逆序创建链表La就是使用头插法创建一个链表，所谓头插法就是在创建链表时始终将新元素插入到头结点之后，而正序创建链表Lb就是使用尾插法创建一个链表，所谓尾插法…...

编程日记 2024/2/3 16:46:28

十分钟上手vue！

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。一 vue.js的导入及使用 vue安装…...

编程日记 2024/2/3 16:45:27

day37WEB攻防-通用漏洞XSS跨站权限维持钓鱼捆绑浏览器漏洞

目录 XSS-后台植入 Cookie&表单劫持（权限维持） 案例演示 XSS-Flash 钓鱼配合 MSF 捆绑上线 1、生成后门 2、下载官方文件-保证安装正常 3、压缩捆绑文件-解压提取运行 4、MSF 配置监听状态 5、诱使受害者访问 URL-语言要适当 XSS-浏览器网马…...

编程日记 2024/2/3 16:44:26

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2025/10/18 6:13:41

无法与IP建立连接，未能下载VSCode服务器

如题，在远程连接服务器的时候突然遇到了这个提示。查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/10/18 14:48:29

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

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

编程新知 2025/10/4 15:39:53

数据库分批入库

今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/10/18 11:08:51

C++.OpenGL （20/64）混合（Blending）

混合（Blending）透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径，但是vite中默认不可以。如何实现： vite中提供了resolve.alias：通过别名在指向一个具体的路径在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/10/17 2:32:49

沙箱虚拟化技术虚拟机容器之间的关系详解

问题沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...

编程新知 2025/10/14 5:51:31

从物理机到云原生：全面解析计算虚拟化技术的演进与应用

前言：我的虚拟化技术探索之旅我最早接触"虚拟机"的概念是从Java开始的——JVM（Java Virtual Machine）让"一次编写，到处运行"成为可能。这个软件层面的虚拟化让我着迷，但直到后来接触VMware和Doc…...

编程新知 2025/10/10 7:54:54

介绍