JavaScript基础语法

最新推荐文章于 2025-12-03 13:04:04 发布
原创 最新推荐文章于 2025-12-03 13:04:04 发布 · 188 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言

本文介绍了JavaScript的发展历程，核心概念，代码位置，注释方法，数据类型与运算，以及变量管理和基本操作。深入浅出地讲解了如何书写外链式JS代码，以及关键的注释和数据转换技巧。

目录

JavaScript基础语法

一、JavaScript发展历史（JS）

JavaScript能干什么

JavaScript的三大核心

二、JavaScript代码的书写位置

行内式 JS 代码（不推荐）

内嵌式 JS 代码

外链式 JS 代码（推荐）

三、JS 中的注释

单行注释

多行注释

四、JS 中的输出方式

五、变量（重点）

定义变量及赋值

变量的命名规则和命名规范

关键字、保留字

六、数据类型（重点）

基本数据类型

复杂数据类型

判断数据类型

判断一个变量是不是数字

数据类型转换

其他数据类型转成数值

其他数据类型转成字符串

其他数据类型转成布尔

七、运算符

数学运算符

赋值运算符

比较运算符

逻辑运算符

自增自减运算符（一元运算符）

八、交换两个变量

JavaScript基础语法

  • HTML ：骨架 标记语言

  • css ：外观 层叠样式表

  • JavaScript ： 编程语言

一、JavaScript发展历史（JS）

1.布兰登·艾奇（Brendan Eich，1961年～）1995年在网景公司，用了十天左右的时间就发明了JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，为了蹭热点，就改名为JavaScript。同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript完败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
2.JavaScript和ECMAScript的关系
ECMAScript是一种由ECMA也就是前身为欧洲计算机制造商协会，制定的标准。JavaScript是由公司开发而成的，公司开发而成的东西在某些情况是有一些问题的，不便于其他的公司拓展和使用。所以欧洲这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。
3.javascript的发展因此改变了前端的命运
2003年之前，JavaScript被认为“牛皮鲜”，主要用来制作网页上面的小广告。
2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
2007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

JavaScript能干什么

1. 常见的网页效果【表单验证，轮播图。。。】
2. 与H5配合实现游戏
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. 。。。

JavaScript的三大核心

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型
  - 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型
  - 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等

总结： JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

二、JavaScript代码的书写位置

  • 和 css 一样，我们的 js 也可以有多种方式书写在页面上让其生效

  • js 也有多种方式书写，分为 行内式， 内嵌式，外链式

行内式 JS 代码（不推荐）

  • 写在标签上的 js 代码需要依靠事件（行为）来触发

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
​
<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
​
<!-- 
    注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

内嵌式 JS 代码

  • 内嵌式的 js 代码会在页面打开的时候直接触发

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script>
    alert('我是一个弹出层')
</script>
​
<!-- 
    注：script 标签可以放在 head 里面也可以放在 body 里面
-->

外链式 JS 代码（推荐）

  • 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发

  • 新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

// 我是 index.js 文件
alert('我是一个弹出层')
<!-- 我是一个 html 文件 -->
​
<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>
​
<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

三、JS 中的注释

  • 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的

  • 写好一个注释，有利于我们以后阅读代码

单行注释

  • 一般就是用来描述下面一行代码的作用

  • 可以直接写/// ，也可以按 ctrl + /

// 我是一个单行注释
​
// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')

多行注释

  • 一般用来写一大段话，或者注释一段代码

  • 可以直接写 /**/ 然后在两个星号中间写注释，也可以按 shift + alt + a

/*
    我是一个多行注释
*/
​
/*
    注释的代码不会执行
    alert('我是一个弹出层')
    alert('我是一个弹出层')
*/
alert('我是一个弹出层')

四、JS 中的输出方式

// 1.window.alert() 浏览器弹出一个弹窗 
// 2.console.log()  控制台打印
// 3.document.write()  在页面上书写

五、变量（重点）

  • 变量指的是在程序中保存数据的一个容器

  • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

  • 也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他

  • 语法： var 变量名 = 值

定义变量及赋值

// 定义一个变量
var num;
​
// 给一个变量赋值
num = 100;
​
// 定义一个变量的同时给其赋值
var num2 = 200;

  • 注意：

    1. 一个变量名只能存储一个值

    2. 当再次给一个变量赋值的时候，前面一次的值就没有了

    3. 变量名称区分大小写（JS 区分大小写）

变量的命名规则和命名规范

  • 规则： 必须遵守的，不遵守就是错

    1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成

    2. 严格区分大小写

    3. 不能由数字开头，不要使用中文汉字命名

    4. 不能是 保留字 或者 关键字

    5. 不要出现空格

  • 规范： 建议遵守的（开发者默认），不遵守不会报错

    1. 变量名尽量有意义（语义化）

    2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

关键字、保留字

1、关键字：就是具有某种功能的一个词。

比如：

break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

2、保留字：实际上就是预留的“关键字”，意思是现在虽然现在还不是关键字（也就是本身还不具备特殊含义的）但是未来可能会成为关键字的。

下列的单词，叫做保留字，就是说不允许当做变量名，不用记：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

###

六、数据类型（重点）

  • 是指我们存储在内存中的数据的类型

  • 我们通常分为两大类 基本数据类型 和 复杂数据类型

基本数据类型

1. 数值类型（number）

  • 一切数字都是数值类型（包括二进制，十进制，十六进制等）
  • NaN（not a number），一个非数字

2. 字符串类型（string）

  • 被引号包裹的所有内容（可以是单引号也可以是双引号）

3. 布尔类型（boolean）

  • 只有两个（true 或者 false）

4. null类型（null）

  • 只有一个，就是 null，表示空的意思

5. undefined类型（undefined）

  • 只有一个，就是 undefined，表示没有值的意思

复杂数据类型

  1. 对象类型（object）

判断数据类型

  • 既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据

  • 使用 typeof 关键字来进行判断

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
​
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

判断一个变量是不是数字

  • 可以使用 isNaN 这个方法来判断一个变量是不是数字

  • isNaN ：is not a number

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false
​
// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

数据类型转换

  • 数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

其他数据类型转成数值

  1. Number(变量)

    • 可以把一个变量强制转换成数值类型

    • 可以转换小数，会保留小数

    • 可以转换布尔值

    • 遇到不可转换的都会返回 NaN

  2. parseInt(变量)

    • 从第一位开始检查，是数字就转换，知道一个不是数字的内容

    • 开头就不是数字，那么直接返回 NaN

    • 不认识小数点，只能保留整数

  3. parseFloat(变量)

    • 从第一位开始检查，是数字就转换，知道一个不是数字的内容

    • 开头就不是数字，那么直接返回 NaN

    • 认识一次小数点

  4. 除了加法以外的数学运算

    • 运算符两边都是可运算数字才行

    • 如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN

    • 加法不可以用

其他数据类型转成字符串

  1. 变量.toString()

    • 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

  2. String(变量)

    • 所有数据类型都可以

  3. 使用加法运算

    • 在 JS 里面，+ 由两个含义

    • 字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接

    • 加法运算：只有 + 两边都是数字的时候，才会进行数学运算

其他数据类型转成布尔

1.Boolean(变量)

  • 在 js 中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true

七、运算符

  • 就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式

数学运算符

  1. +

    • 只有符号两边都是数字的时候才会进行加法运算

    • 只要符号任意一边是字符串类型，就会进行字符串拼接

  2. -

    • 会执行减法运算

    • 会自动把两边都转换成数字进行运算

  3. *

    • 会执行乘法运算

    • 会自动把两边都转换成数字进行运算

  4. /

    • 会执行除法运算

    • 会自动把两边都转换成数字进行运算

  5. %

    • 会执行取余运算

    • 会自动把两边都转换成数字进行运算

赋值运算符

  1. =

    • 就是把 = 右边的赋值给等号左边的变量名

    • var num = 100

    • 就是把 100 赋值给 num 变量

    • 那么 num 变量的值就是 100

  2. +=

    var a = 10;
a += 10;
console.log(a); //=> 20

    • a += 10 等价于 a = a + 10

  3. -=

    var a = 10;
a -= 10;
console.log(a); //=> 0

    • a -= 10 等价于 a = a - 10

  4. *=

    var a = 10;
a *= 10;
console.log(a); //=> 100

    • a *= 10 等价于 a = a * 10

  5. /+

    var a = 10;
a /= 10;
console.log(a); //=> 1

    • a /= 10 等价于 a = a / 10

  6. %=

    var a = 10;
a %= 10;
console.log(a); //=> 0

    • a %= 10 等价于 a = a % 10

比较运算符

  1. ==

    • 比较符号两边的值是否相等，不管数据类型

    • 1 == '1'

    • 两个的值是一样的，所以得到 true

  2. ===

    • 比较符号两边的值和数据类型是否都相等

    • 1 === '1'

    • 两个值虽然一样，但是因为数据类型不一样，所以得到 false

  3. !=

    • 比较符号两边的值是否不等

    • 1 != '1'

    • 因为两边的值是相等的，所以比较他们不等的时候得到 false

  4. !==

    • 比较符号两边的数据类型和值是否不等

    • 1 !== '1'

    • 因为两边的数据类型确实不一样，所以得到 true

  5. >=

    • 比较左边的值是否 大于或等于 右边的值

    • 1 >= 1 true

    • 1 >= 0 true

    • 1 >= 2 false

  6. <=

    • 比较左边的值是否 小于或等于 右边的值

    • 1 <= 2 true

    • 1 <= 1 true

    • 1 <= 0 false

  7. >

    • 比较左边的值是否 大于 右边的值

    • 1 > 0 true

    • 1 > 1 false

    • 1 > 2 false

  8. <

    • 比较左边的值是否 小于 右边的值

    • 1 < 2 true

    • 1 < 1 false

    • 1 < 0 false

逻辑运算符

  1. &&

    • 进行 且 的运算

    • 符号左边必须为 true 并且右边也是 true，才会返回 true

    • 只要有一边不是 true，那么就会返回 false

    • true && true true

    • true && false false

    • false && true false

    • false && false false

  2. ||

    • 进行 或 的运算

    • 符号的左边为 true 或者右边为 true，都会返回 true

    • 只有两边都是 false 的时候才会返回 false

    • true || true true

    • true || false true

    • false || true true

    • false || false false

  3. !

    • 进行 取反 运算

    • 本身是 true 的，会变成 false

    • 本身是 false 的，会变成 true

    • !true false

    • !false true

自增自减运算符（一元运算符）

  1. ++

    • 进行自增运算

    • 分成两种，前置++ 和 后置++

    • 前置++，会先把值自动 +1，在返回

      var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

    • 后置++，会先把值返回，在自动+1

      var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

  2. --

    • 进行自减运算

    • 分成两种，前置-- 和 后置--

    • 和 ++ 运算符道理一样

八、交换两个变量

var  a = 10 b = 20
var  temp = a
     a  = b
     b  = temp

精选资源
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javascript基础语法
03-31
### JavaScript基础语法详解 #### 一、JavaScript简介 JavaScript是一种广泛使用的编程语言，主要用于Web开发。ECMAScript标准定义了JavaScript的核心语法。 ##### 1.1 JavaScript书写位置 JavaScript可以在HTML...
蓝易云 - JavaScript加密与解密技术：Hook技术应用案例分析
高性价比服务器就选：蓝易云
10-08 446
JavaScript中的加密与解密技术是网络安全领域的重要组成部分，它们确保了数据传输的安全性和数据隐私。在Web开发中，经常需要对敏感信息进行加密处理，以防止在客户端与服务器之间传输过程中被第三方截获和篡改。为了实现这一点，并且不影响现有代码结构，在发送请求前“钩住”网络请求函数（如XMLHttpRequest对象或Fetch API）可能是一个有效策略。Hook技术是一种常见的编程模式，它允许我们“钩住”程序执行流程中特定点上的函数调用或事件，并注入自定义代码来改变或扩展原有功能。
JavaScript学习（第一天—基础语法）
ZeroEQ的博客
07-27 200
JavaScript基础语法 HTML ：标记语言 JavaScript ：编程语言 序言 JavaScript发展历史（JS） 1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。 liveScript ==> javaScript ==> E
JavaScript基础语法详解
ning的博客
12-17 2001
函数是一段可以重复使用的代码块。在 JavaScript 中，可以使用functionJavaScript 是一种功能强大的语言，它通过基础语法提供了丰富的功能，使得网页能够实现动态交互和复杂的逻辑处理。掌握这些基础语法是学习 JavaScript 的第一步，也是成为一名优秀前端开发者的基础。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章JavaScript语法基础（超详细，看这一篇就够了）-优快云博客清华大学出版社-图书详情-《JavaScript 基础语法详解》
JavaScript 基础语法指南
2501_92963994的博客
09-10 1161
本文介绍了JavaScript的基础语法知识，包括JavaScript简介、运行过程、书写形式、注释、输入输出、变量使用、数据类型、运算符、条件语句、循环语句、数组、函数、作用域和对象等核心概念。JavaScript是一种动态类型的脚本语言，广泛应用于Web开发。文章详细讲解了JavaScript的变量声明、数据类型转换、各种运算符的使用方法，以及条件判断、循环控制等流程控制结构。此外，还介绍了数组的基本操作、函数的定义与调用方式、作用域规则以及对象的创建方法。这些基础知识是学习JavaScript编程的重
JavaScript基础语法入门
trong_ 的烂笔头
02-28 3889
介绍JavaScript的基础语法, 包含变量, 运算符, 数据类型, 数组, 函数,对象等内容, 主要是基于Java/C基础进行的扫盲学习.
JavaScript语法基础
2301_80208072的博客
11-03 7612
JavaScript语法基础，详细教程
JavaScript基础语法-函数
m0_74343097的博客
10-29 1085
函数调用、实参、形参、arguments、递归调用
学习笔记 JavaScript基础语法（全）
热门推荐
weixin_63676550的博客
01-15 1万+
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript的基础语法
m0_72161237的博客
05-09 3501
对于 JavaScript 认知： 1️⃣是世界上最流行的编程语言之一 2️⃣是一个脚本，通过解释器运行 3️⃣主要在客户端（浏览器）上运行，现在也可以基于 node.js 在服务器端运行 那么JavaScript 能做哪些事情呢？ 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务器开发(node.js) 桌面程序开发(Electron, VSCode 就是这么来的) 手机 app 开发
精选资源
JavaScript基础语法（ppt）
05-31
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
JavaScript基础语法 自学笔记
10-20
在JavaScript基础语法中，以下几个关键概念是学习者必须掌握的： 1. **变量（Variables）**：在JavaScript中，变量用于存储数据。声明变量使用`var`、`let`或`const`关键字。`var`是老式用法，而`let`和`const`是...
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 597
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
Next.js 零基础开发博客后台管理系统教程（一）：环境搭建与项目初始化
祈澈菇凉
12-02 540
✅ 确定了使用 Next.js 的理由。✅ 检查并准备了开发环境。✅ 初始化了一个基于 App Router 和 TypeScript 的 Next.js 项目。✅ 初步了解了项目结构并成功运行了应用。在下一篇教程中，我们将开始构建后台管理界面的基础布局，并集成一个常用的 UI 组件库（例如 Ant Design 或继续使用 Tailwind CSS），为我们的管理系统打造一个漂亮、实用的侧边栏和顶部导航栏。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 421
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
【免费云平台部署指南】按场景选型+全维度对比（附直达地址）
最新发布
分享技术干货，聚焦AI前沿科技
12-03 553
免费云平台已能覆盖从静态网站到AI模型部署的大部分场景，核心是根据项目类型（静态/后端/AI）、访问地区（国内/国外）和功能需求（数据库/容器/GPU）选择适配平台。新手建议从简单场景入手（如GitHub Pages部署博客、Hugging Face Spaces部署AI Demo），熟悉后再尝试全栈或容器化部署。
js考古之seajs.use、layui.use是啥 以及来源？
weixin_52236586的博客
11-29 495
Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对卦卦上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值