impress.js（JavaScript 基础语法 01）
学习任务
学完JavaScript 基础语法内容后，我们可以完成下面的交互效果，可以实现如下4个功能。
计算机组成软件
应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word系统软件：Windows、Linux、mac OSX硬件
三大件：CPU、内存、硬盘 -- 主板输入设备：鼠标、键盘、手写板、摄像头等输出设备：显示器、打印机、投影仪等
网页、网站和应用程序
网页：单独的一个页面网站：一些列相关的页面组成到一起应用程序：可以和用户产生交互，并实现某种功能。什么是编程
编程：让计算机根据你设定好的流程去做事。
例如：你可以通过指令的方式让计算机去做事情
play 真的爱你.mp3;
这个时候计算会去播放歌曲真的爱你。但是计算机并不认识上面的英文单词和汉字。
计算机在执行指令之前会把指令转换成二进制的形式，例如下面的形式：
01000010110100110000110001100
我们不可能直接去拿二进制去编写指令(程序)，这样太痛苦了，所以在和计算机进行交互的时候，我们可以通过一些高级语言，这些语言非常接近人类的语言。
前端开发必备的编程语言是 JavaScript，JavaScript 是由浏览器加载和执行的。
VSCode 插件
汉化：Chinese (Simplified) Language Pack for Visual Studio Code不同类型的文件图标：Material Icon Theme路径的只能提示：Path Intellisense自动重命名结束标签：Auto Rename Tag测试用 Web 服务器：Live ServerJavaScript 介绍为什么要学习 JavaScript
我们在之前已经学习了 HTML 和 CSS 这两个技术，这两个技术能做的是页面的静态效果，如果想实现页面上的一些功能或者交换效果，比如轮播图、数据格式验证等，就要用到 JavaScript。简而言之：
HTML - 页面的结构CSS - 页面的样式JavaScript - 页面的行为什么是 JavaScript
JavaScript 是一种运行在浏览器的编程语言。编程语言就是跟计算机交流的语言，通过编程语言指挥计算机完成某件事情。常见的编程语言: java、c、c#、php。跟其它编程语言不同的是 JavaScript 运行在浏览器编程语言最终都会被某种翻译器转换成 CPU 能够执行的指令扩展阅读：JavaScript的历史、JavaScript 20年
JavaScript 的组成
ECMAScript - 简称 ES，用来规范 JavaScript 的语法的，具有多个版本：ECMAScript 1.0（1997年6月）ECMAScript 2.0（1998年6月）ECMAScript 3.0（1999年12月）ECMAScript 4（ECMAScript 5）2008年7月发布前被废弃ECMAScript 5.1（ES5，2009年12月）该版本力求澄清第3版中的歧义，并添加了新的功能。新功能包括：原生JSON对象、继承的方法、高级属性的定义以及引入严格模式。ECMAScript 2015（ES6，2015年6月）此后按照年号每年更新一个版本DOM - 文档对象模型，用来操作页面上的标签的BOM - 浏览器对象模型，用来操作浏览器的部分功能的
JavaScript 能做什么
JavaScript 发展到现在几乎无所不能。
Atwood 定律：
any application that can be written in JavaScript, willeventually be written in JavaScript.任何能被 JavaScript 实现的应用最终都会由 JavaScript 实现.
网站/Web 应用服务端开发(Node.js)命令行工具(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)
JavaScript 应用演示
http://impress.github.io/impress.js/http://naotu.baidu.com/https://codecombat.com/https://ide.codemao.cn/
以下需要科学上网
https://developers.google.com/blockly/https://blockly-games.appspot.com blockly迷宫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')">
点击按钮，就会执行 js 代码
总结实际工作/项目中都会使用外链式前期学习 JavaScript 为了方便会使用内嵌式行内式了解，以后见到内嵌式的代码能看懂输入输出方法
在初体验中我们使用了 alert() 方法弹出一个消息提示，在 JavaScript 中，有多个可以弹出/输出消息的方法，在我们的仿 siri 项目中会用到其中的一些，比如：alert()、让用户输入内容的弹出框。
下面我们一起来学习几个常用的输入输出方法。
输出方法alert()作用：这个方法用于在浏览器上弹出消息提示框用法：alert("提示消息");// oralert('提示消息');
注意：这里的“消息提示”，既可以用英文状态下的单引号也可以用双引号。
console.log()作用：可以在浏览器的开发者工具(F12打开)的控制台中输出消息，这样做的目的是为了将来方便调试程序，未来我们会经常用 console.log()。在开发者工具的控制台还可以直接书写 JavaScript 代码看输出的结果。
用法：console.log('输出消息')输入方法confirm()作用：在浏览器里弹出一个确认框，比如删除提示
用法：confirm('确认删除？');prompt()作用：在浏览器里弹出一个输入框，让用户输入内容用法：prompt('请输入你要查看的对象');变量和常量变量
如果我们使用 prompt() 方法让用户输入了数据，我们又想要把用户输入的数据保存起来，怎么办呢？
什么是变量
一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。
变量是计算机内存中存储数据的标识符，根据变量名称可以获取或修改内存中存储的数据
定义变量语法var 变量名称 = 数据;// orlet 变量名称 = 数据;
定义变量有两个关键词 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;// orlet num;// 变量赋值num = 10;// ornum = 10;
变量是变化的量，我们可以重新给变量赋值：
let num = 20;num = 100;console.log(num);
变量可以一次定义多个并同时赋值
var a = 10, b = 20, c;console.log(a, b, c);// orlet a = 10, b = 20, c;console.log(a, b, c);
数据如何在内存中存储的
下面我们来了解是如何通过变量名称找到内存中对应的数据的。
变量的命名规则和规范
规则 - 必须遵守的，不遵守会报错由字母、数字、下划线、$符号组成，不能以数字开头不能是关键字和保留字，例如：for、while。区分大小写使用 let 定义的变量名不能重复会冲突，使用 var 定义的变量名可以重复。规范 - 建议遵守的，不遵守不会报错变量名必须有意义遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword下面哪些变量名不合法
a 1age1818agename$name_sex&sextheworld 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 在一开始的时候就保留了部分单词，以便将来把保留的单词作为关键字
案例
1. 交换两个变量的值
2. 不使用临时变量，交换两个数值变量的值
常量
常量跟变量非常相似，也是通过一个标识符来访问内容中的数据，但是跟变量不同的是常量中的数据是不可以修改的。
常量用来存储不可修改的数据，例如：数据中的 π。
// 计算圆的面积// π 是常量不可被修改const PI = 3.1415926;// 半径let r = 5;// 圆的面积let area = PI * r * r;
如果在某个位置 PI 的值被别人修改了，未来圆的面积会计算错误。
使用 const 定义的常量是不能被修改的，我们可以尝试一下：
PI = 5;// 未捕获的类型错误：赋值给常量// Uncaught TypeError: Assignment to constant variable.
常量的命名一般都大写，代表常量。
关于变量和常量我们先说到这里，下一小节，我们再来介绍 JavaScript 中的数据类型
- 发表于 2022-10-30 14:57:03
- 阅读 ( 129 )
- 分类：科技
656 篇文章