Java Script基础语法

引言

JavaScript (简称 JS)

• 是世界上最流行的编程语言之一;
• 是一个脚本语言, 通过解释器运行;
• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行;
  Node.js这是一个js 的运行平台.(对标的是浏览器)浏览器是运行在客户的.Node.js 既可以运行在客户端,也可以运行在服务器上(单独的执行程序).就可以给js赋予客户端开发/服务器开发的能力.

JavaScript 的能做的事情:

• 网页开发(更复杂的特效和用户交互)
• 网页游戏开发
• 服务器开发(node.js)
• 桌面程序开发(Electron, VSCode 就是这么来的)
• 手机 app 开发

JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)

JavaScript 和 HTML 和 CSS 之间的关系:

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

JavaScript 运行过程:

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

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

JavaScript 的组成:
ECMAScript(简称 ES): JavaScript 语法;
DOM: 页面文档对象模型, 对页面中的元素进行操作;浏览器提供的一组，操作页面元素的API；
BOM: 浏览器对象模型, 对浏览器窗口进行操作;浏览器提供的一组，操作浏览器窗口的API；

但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么就需要 DOM API 和 BOM API.这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API,就不太需要关注 DOM 和 BOM.

一、JavaScript 的书写形式

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

1.1行内式

直接嵌入到 html 元素内部：

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

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

1.2 内嵌式

写到 script 标签中:

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

1.3 外部式

写到单独的 .js 文件中:

然后到另一个文件中对其进行引用：

<script src="app.js">

关于注释：

• JS的注释//
• HTML的注释：<!-- -->
• CSS的注释：/* */

二、输入输出

2.1 输入: prompt

弹出一个输入框：

 prompt("请输入名字：");

2.2 输出: alert

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

alert("hello");

2.3 输出: console.log

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

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

三、语法概览

3.1 变量的使用

定义一个变量:

var变量名=初始值;

		 // 创建变量
        let num = 10;//创建一个名为num的，数字类型的变量
        var s = 'hello';//创建了一个名字为s的，字符串类型的变量.
        var arr = [];//创建了一个名字为arr的，数组类型的变量.

现在更倾向于使用let来代替var .var是旧版本(早期的设计),有很多地方其实是违背直觉.

使用变量:读取+修改：

在变量的修改的时候,有个小问题：如果本来num是一个数字类型,在赋值的时候可以给它赋一个数字类型,也可以赋一个字符串类型,也可以赋任意类型，这个时候num变量的类型,也就随之发生改变了。

 		num = 20;
   //变量的类型可以在运行的过程中随着赋值的改变而发生改变---‘动态类型’
        num = 'hello';
        console.log(num)

变量的类型可以在运行的过程中随着赋值的改变而发生改变，称为“动态类型”。(Python,PHP,Ruby…)
像Java这样的语言,不支持这种运行时类型发生改变.这种行为,称为"静态类型"。（C，C++,Java,Go,Rust…）

3.2 基本数据类型

JS 中内置的几种类型：

1. number: 数字. 不区分整数和小数.

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);
//和Java类似,如果把字符串和数字相加，那么就会得到一个“字符串拼接”的效果.
console.log('hehe' - 10);//hehe10

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

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

2. boolean: true 真, false 假.

Boolean 参与运算时当做 1 和 0 来看待：

console.log(true + 1);//2
console.log(false + 1)//1

这样的操作其实是不科学的. 实际开发中不应该这么写.

3. string: 字符串类型.

如果字符串里本身就包含了引号,这个时候就可以通过单双引号灵活搭配的形式,来避免使用转义字符:

		let s1 = "my name is 'zhang'";
        console.log(s1);
        let s2 = 'my "name" is zhang ';
        console.log(s2);
        let s3 = "My name is \"zhangsan\"";
        console.log(s3);

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

\n
\\
\&