JavaScript 基础语法 01

搬水泥的小匠
479 阅读8分钟

学习任务

学完JavaScript 基础语法内容后，我们可以完成下面的交互效果，可以实现如下4个功能。

image.png

计算机组成

软件

  • 应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
  • 系统软件：Windows、Linux、mac OSX

硬件

  • 三大件：CPU、内存、硬盘 -- 主板
  • 输入设备：鼠标、键盘、手写板、摄像头等
  • 输出设备：显示器、打印机、投影仪等

image.png

网页、网站和应用程序

  • 网页：单独的一个页面
  • 网站：一些列相关的页面组成到一起
  • 应用程序：可以和用户产生交互，并实现某种功能。

什么是编程

编程：让计算机根据你设定好的流程去做事。

例如：你可以通过指令的方式让计算机去做事情

play 真的爱你.mp3;

这个时候计算会去播放歌曲真的爱你。但是计算机并不认识上面的英文单词和汉字。

计算机在执行指令之前会把指令转换成二进制的形式，例如下面的形式：

01000010110100110000110001100

我们不可能直接去拿二进制去编写指令(程序)，这样太痛苦了，所以在和计算机进行交互的时候，我们可以通过一些高级语言，这些语言非常接近人类的语言。

前端开发必备的编程语言是 JavaScript，JavaScript 是由浏览器加载和执行的。

VSCode 插件

  • 汉化：Chinese (Simplified) Language Pack for Visual Studio Code
  • 不同类型的文件图标：Material Icon Theme
  • 路径的只能提示：Path Intellisense
  • 自动重命名结束标签：Auto Rename Tag
  • 测试用 Web 服务器：Live Server

JavaScript 介绍

为什么要学习 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 实现.
  1. 网站/Web 应用
  2. 服务端开发(Node.js)
  1. 命令行工具(Node.js)
  2. 桌面程序(Electron)
  1. App(Cordova)
  2. 控制硬件-物联网(Ruff)
  1. 游戏开发(cocos2d-js)

JavaScript 应用演示

以下需要科学上网

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()、让用户输入内容的弹出框。

image.png 下面我们一起来学习几个常用的输入输出方法。

输出方法

alert()

  • 作用：这个方法用于在浏览器上弹出消息提示框
  • 用法：
alert("提示消息");
// or
alert('提示消息');

注意：这里的“消息提示”，既可以用英文状态下的单引号也可以用双引号。

console.log()

  • 作用：可以在浏览器的开发者工具(F12打开)的控制台中输出消息，这样做的目的是为了将来方便调试程序，未来我们会经常用 console.log()。
  • 在开发者工具的控制台还可以直接书写 JavaScript 代码看输出的结果。

JavaScript 基础语法 01

  • 用法：
console.log('输出消息')

输入方法

confirm()

  • 作用：在浏览器里弹出一个确认框，比如删除提示

image.png

  • 用法：
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);

数据如何在内存中存储的

下面我们来了解是如何通过变量名称找到内存中对应的数据的。

image.png

image.png

变量的命名规则和规范

  • 规则 - 必须遵守的，不遵守会报错
    • 由字母、数字、下划线、$符号组成，不能以数字开头
    • 不能是关键字和保留字，例如：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 在一开始的时候就保留了部分单词，以便将来把保留的单词作为关键字

案例

\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 中的数据类型

avatar
文章
阅读
粉丝