JavaScript学习之基础语法(一)
为什么要学习 JavaScript
HTML 和 CSS能做的是页面的静态效果，如果想实现页面上的一些功能或者交换效果，比如轮播图、数据格式验证等，就要用到 JavaScript。简而言之：
- HTML - 页面的结构
- CSS - 页面的样式
- JavaScript - 页面的行为
什么是 JavaScript
- JavaScript 是一种运行在浏览器的编程语言。
- 编程语言就是跟计算机交流的语言，通过编程语言指挥计算机完成某件事情。常见的编程语言: java、c、c#、php。
- 跟其它编程语言不同的是 JavaScript 运行在浏览器
- 编程语言最终都会被某种翻译器转换成 CPU 能够执行的指令
JavaScript 的组成
- ECMAScript - 简称 ES，用来规范 JavaScript 的语法的，具有多个版本：
- DOM - 文档对象模型，用来操作页面上的标签的
- BOM - 浏览器对象模型，用来操作浏览器的部分功能的
JavaScript 能做什么
JavaScript 发展到现在几乎无所不能。
- 网站/Web 应用
- 服务端开发(Node.js)
- 命令行工具(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
JavaScript 初体验
JavaScript 和 CSS 一样，也有三种书写位置：
⏰ 内嵌式
创建一个 HTML 文件，例如：index.html
在 HTML 文件的末尾，body 标签结束之前
<html> <body> <script> alert('Hello World'); </script> </body> </html>
在浏览器中运行 HTML 文件即可看到效果
⏰ 外链式
创建一个 HTML 文件，例如：index.html
创建一个以 .js 结尾的文件，例如：index.js
在 HTML 文件中引用刚刚创建好的 js 文件
<script src="index.js"></script>
在新建的 js 文件中输入以下代码
alert('Hello World');
在浏览器中运行 HTML 文件
⚠️ 注意：引用外部 js 文件的 script 标签中不可以写JavaScript代码
⏰ 行内式
<input type="button" value="点我" onclick="alert('Hello World')">
总结
实际工作/项目中都会使用外链式
前期学习 JavaScript 为了方便会使用内嵌式
行内式了解，以后见到内嵌式的代码能看懂
输入输出方法
在初体验中我们使用了 alert() 方法弹出一个消息提示，在 JavaScript 中，有多个可以弹出/输出消息的方法，在我们的仿 siri 项目中会用到其中的一些，比如：alert()、让用户输入内容的弹出框。
输出方法
⏰ alert()
- 作用：这个方法用于在浏览器上弹出消息提示框
- 用法：
alert("提示消息"); // or alert('提示消息');
注意：这里的“消息提示”，既可以用英文状态下的单引号也可以用双引号。
⏰ console.log()
- 作用：可以在浏览器的开发者工具(F12打开)的控制台中输出消息，这样做的目的是为了将来方便调试程序，未来我们会经常用 console.log()。
-
在开发者工具的控制台还可以直接书写 JavaScript 代码看输出的结果。
![]()
- 用法：
console.log('输出消息')
输入方法
⏰ confirm()
-
作用：在浏览器里弹出一个确认框，比如删除提示
![]()
- 用法：
confirm('确认删除？');
⏰ prompt()
- 作用：在浏览器里弹出一个输入框，让用户输入内容
- 用法：
prompt('请输入你要查看的对象');
变量和常量
变量
如果我们使用 prompt() 方法让用户输入了数据，我们又想要把用户输入的数据保存起来，怎么办呢？
⏰ 什么是变量？
- 一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。
- 变量是计算机内存中存储数据的标识符，根据变量名称可以获取或修改内存中存储的数据
⏰ 怎么定义变量？
- 语法
var 变量名称 = 数据; // or let 变量名称 = 数据;
定义变量有两个关键词 var/let，var 是过去定义变量的方式，let 是现在定义变量的方式。它们之间的区别需要学习完作用域之后再来解释。
使用 var/let 关键字，告诉浏览器，我们要定义一个变量，使用=号告诉浏览器，我们要把左边的数据存储到变量里面，当我们想使用这个数据的时候，就可以直接使用这个变量代替这个实际数据。
// 案例1： var userName = prompt('请输入你的姓名'); console.log(userName); // 案例2： var num1 = 10; var num2 = 20; // 计算两个数字的和 console.log(num1 + num2);
定义变量可以分为两个过程：变量声明和变量赋值：
// 变量声明 var num; // or let num; // 变量赋值 num = 10; // or num = 10;
变量是变化的量，我们可以重新给变量赋值：
let num = 20; num = 100; console.log(num);
变量可以一次定义多个并同时赋值
var a = 10, b = 20, c; console.log(a, b, c); // or let a = 10, b = 20, c; console.log(a, b, c);
⏰ 数据如何在内存中存储的
下面我们来了解是如何通过变量名称找到内存中对应的数据的。
⏰ 变量的命名规则和规范
- 规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、while。
- 区分大小写
- 使用 let 定义的变量名不能重复会冲突，使用 var 定义的变量名可以重复。
- 规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword
- 下面哪些变量名不合法
a 1 age18 18age name $name _sex &sex theworld theWorld
// 变量名字是区分大小写的 var a = 10; console.log(a);// 正常输出 console.log(A);// 在控制台中报错：Uncaught ReferenceError: A is not defined // ReferenceError - 引用错误 // not defined - 未定义 // 意思是 A 这个变量我们没有定义就使用了，可见a和A是不一样的，不是同一个变量
⏰ 关键字
关键字是在JavaScript语法中，具有特殊意义的单词，比如我们学习过的用于声明变量的var
// 变量名字不能使用关键字 var var = 20; // 会在控制台中报错： Uncaught SyntaxError: Unexpected token var // token - 标记，记号，在编程中我们翻译成 '标识符' // 意思是这行有一个语法错误，出现了一个意料之外的标识符 var
⏰ 保留字
JavaScript 是不断发展的，以前的功能用了以前的关键字，将来要加入新的功能的时候，可能要用到新的关键字，所有 JavaScript 在一开始的时候就保留了部分单词，以便将来把保留的单词作为关键字
arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
常量
常量跟变量非常相似，也是通过一个标识符来访问内容中的数据，但是跟变量不同的是常量中的数据是不可以修改的。
常量用来存储不可修改的数据，例如：数据中的 π。
// 计算圆的面积 // π 是常量不可被修改 const PI = 3.1415926; // 半径 let r = 5; // 圆的面积 let area = PI * r * r;
如果在某个位置 PI 的值被别人修改了，未来圆的面积会计算错误。
使用 const 定义的常量是不能被修改的，我们可以尝试一下：
PI = 5; // 未捕获的类型错误：赋值给常量 // Uncaught TypeError: Assignment to constant variable.
☘️： 常量的命名一般都大写，代表常量。
浙公网安备 33010602011771号