前端 - JavaScript(基础语法)

JavaScript

初识 JavaScript

JavaScript 是什么

JavaScript (简称 JS)

是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行

主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了.
当前 JavaScript 已经成为了一个通用的编程语言

JavaScript 的能做的事情:

网页开发(更复杂的特效和用户交互) 网页游戏开发

服务器开发(node.js)

桌面程序开发(Electron, VSCode 就是这么来的) 手机 app 开发

JavaScript 和 HTML 和 CSS 之间的关系

• HTML: 网页的结构(骨)
• CSS: 网页的表现(皮)
• JavaScript: 网页的行为(魂)

JavaScript 运行过程

• 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
• 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向:硬盘 => 内存)
• 浏览器会解析用户编写的代码, 把代码翻译成二进制的,能让计算机识别的指令(解释器的工作)
• 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

浏览器分成渲染引擎 + JS 引擎.

• 渲染引擎: 解析 html + CSS, 俗称 “内核”
• JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8

JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行.

JavaScript 的组成

• ECMAScript(简称 ES): JavaScript 语法
• DOM: 页面文档对象模型, 对页面中的元素进行操作
• BOM: 浏览器对象模型, 对浏览器窗口进行操作

光有 JS 语法, 只能写一些基础的逻辑流程.

但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么久需要 DOM API 和 BOM API.

这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js的 API, 就不太需要关注 DOM 和 BOM

重要概念: ECMAScript

这是一套 “标准”, 无论是啥样的 JS 引擎都要遵守这个标准来实现.

啥叫标准? 车同轨, 书同文. 秦始皇最大的贡献之一, 就是制定了一套标准. 三流公司做产品, 一流公司做标准.

前置知识

第一个程序

<script>
   alert("你好!");
</script>

JavaScript 代码可以嵌入到 HTML 的 script 标签中.

JavaScript 的书写形式

1. 行内式

直接嵌入到 html 元素内部

<input type="button" value="点我一下" onclick="alert('haha')">

注意, JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.

HTML 中推荐使用双引号, JS 中推荐使用单引号.

2. 内嵌式

写到 script 标签中

<script>
   alert("haha");
</script>

3. 外部式

写到单独的 .js 文件中

<script src="hello.js"></script>

alert("hehe"); 

注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).

适合代码多的情况.

注释

单行注释 // [建议使用]

多行注释 /* */

// 我是单行注释
/*
  我是多行注释
  我是多行注释
  我是多行注释
*/

使用 ctrl + / 切换注释.

多行注释不能嵌套. 形如这种代码就会报错

/*
/*
  我是多行注释
  我是多行注释
  我是多行注释
*/
*/

输入输出

输入: prompt

弹出一个输入框

// 弹出一个输入框
prompt("请输入您的姓名:");

输出: alert

弹出一个警示对话框, 输出结果

// 弹出一个输出框
alert("hello");

输出: console.log

在控制台打印一个日志(供程序员看)

// 向控制台输出日志
console.log("这是一条日志");

注意: 在 VSCode 中直接输入 “log” 再按 tab 键, 就可以快速输入 console.log

需要打开浏览器的开发者工具(F12) => Console 标签页 才能看到结果.

这样的输出一般不是给普通用户看的, 而是程序员来看的.

重要概念: 日志

日志是程序员调试程序的重要手段

去医院看病, 医生会让患者做各种检查, 血常规, 尿常规, B超, CT等… 此时得到一堆检测结果. 这些 结果普通人看不懂,
但是医生能看懂, 并且医生要通过这些信息来诊断病情.

这些检测结果就是医生的 “日志”

PS: 相比于医生来说, 程序猿多一个终极大招, “重启下试试”.

重要概念: .

• console 是一个 js 中的 “对象”
• . 表示取对象中的某个属性或者方法. 可以直观理解成 “的” console.log 就可以理解成:
• 使用 “控制台” 对象 “的” log 方法.

语法概览

JavaScript 虽然一些设计理念和 Java 相去甚远,
但是在基础语法层面上还是有一些相似之处的. 有了 Java 的基础很容易理解 JavaScript的一些基本语法.

变量的使用

基本用法

创建变量(变量定义/变量声明/变量初始化)

var name = 'zhangsan';
var age = 20;

var 是 JS 中的关键字, 表示这是一个变量.

= 在 JS 中表示 “赋值”, 相当于把数据放到内存的盒子中. = 两侧建议有一个空格 每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.

注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点. 初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来.

初始化的值如果是数字, 那么直接赋值即可.

使用变量

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

为啥动漫中的角色都是要先喊出技能名字再真正释放技能?

就是因为变量要先声明才能使用.

代码示例: 弹框提示用户输入信息, 再弹框显示.

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name);
alert("您的年龄是: " + age);
alert("您的分数是: " + score);

也可以把三个输出内容合并成一次弹框

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " +
score + "\n");

+ 表示字符串拼接,也就是把两个字符串首尾相接变成一个字符串.
\n 表示换行

JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似. 用法上的差异此处暂时不讨论.

理解 动态类型

1. JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)

var a = 10;     // 数字
var b = "hehe"; // 字符串

2. 随着程序运行, 变量的类型可能会发生改变.

var a = 10;    // 数字
a = "hehe";    // 字符串

这一点和 C Java 这种静态类型语言差异较大.

C, C++, Java, Go 等语言是静态类型语言. 一个变量在创建的时候类型就确定了, 不能在运行时发生 改变.

如果尝试改变, 就会直接编译报错.

基本数据类型

JS 中内置的几种类型

• number: 数字. 不区分整数和小数.
• boolean: true 真, false 假.
• string: 字符串类型.
• undefined: 只有唯一的值 undefined. 表示未定义的值.
• null: 只有唯一的值 null.表示空值.

number 数字类型

JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示.

数字进制表示

计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字.

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

注意:

• 一个八进制数字对应三个二进制数字
• 一个十六进制数字对应四个二进制数字.(两个十六进制数字就是一个字节)

各种进制之间的转换, 不需要手工计算, 直接使用计算器即可.

特殊的数字值

• Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
• -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
• NaN:表示当前的结果不是一个数字.
  

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

注意:

1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity

2. ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.

3. 可以使用 isNaN 函数判定是不是一个非数字.

javascript console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // true

string 字符串类型

基本规则

字符串字面值需要使用引号引起来, 单引号双引号均可.

var a = "haha";
var b = 'hehe';
var c = hehe;    // 运行出错

如果字符串中本来已经包含引号咋办?

var msg = "My name is "zhangsan"";    // 出错
var msg = "My name is \"zhangsan\"";  // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
var msg = "My name is 'zhangsan'";    // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';    // 正确, 搭配使用单双引号

转义字符

有些字符不方便直接输入, 于是要通过一些特殊方式来表示.

\n

\\

\'

\"

\t

求长度

使用 String 的 length 属性即可