JavaScript基础---JS简介、JS的编写位置、JS的基本语法、强制数据转换---9.21

JavaScript简介

什么是语言？（了解即可）

JavaScript 是一门编程语言，那么什么是语言？

• 计算机就是一个由人来控制的机器，人让它干嘛它就得干嘛。
• 我们要学习的语言就是人和计算机交流的工具，人类通过语言来控制、操作计算机。
• 编程语言和我们说的中文、英文本质上没有区别，只是语法比较特殊。

语言的发展：纸袋机（机器语言）—— 汇编语言（符号语言）—— 现代语言（高级语言）

计算机组成

游览器执行JS简介

游览器分成两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身井不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JavaScript 的起源

• JavaScript 诞生于1995年，它的出现主要是用于处理网页中的前端验证。
• 所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。
• 比如：用户名的长度，密码的长度，邮箱的格式等。

JavaScript 的简史

• JavaScript 是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为JavaScript。
• 1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。
• 于是在市面上存在两个版本的JavaScript，网景公司的JavaScript和微软的JScript。
• 为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript（简称ES）。

 JavaScript 的实现

我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思。但是实际上JavaScript的含义却要更大一些。

• 一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript、DOM、BOM。

JavaScript 的特点

• 解释型语言
• 类似于C和Java的语法结构
• 动态语言
• 基于原型的面向对象

---

---

JS的编写位置

script标签：可以将js代码编写到script标签中，js代码是按照从上往下的代码顺序来执行

<script type="text/javascript">
// 控制浏览器弹出警告框
   alert("这是我的第一行JS代码");
// 让计算机在页面中输出一个内容
// document.write()可以向body中输出一个内容
   document.write("看我出不出来~~~~");
// 向控制台输出一个内容
   console.log("你猜我在哪");
</script>

标签的属性：虽然可以写在标签的属性中，但是他们属于结构与行为耦合。不方便维护，不推荐使用。

<!-- 可以将js代码编写到标签的onclick属性中 -->
<!-- 当点击按钮时，代码才会执行 -->
   <button onclick="alert('讨厌，你点我干嘛！');">点我一下</button>
<!-- 可以将js代码写在超链接的href属性中 -->
<!-- 点击超链接时，会执行代码 -->
   <a href="javascript:alert('让你点你就点？');">你也点我一下</a>
   <a href="javascript:;">你也点我一下</a>

外部js文件：可以将js代码写到外部js文件中，通过script标签引入。写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制。推荐使用。

 <script type="text/javascript" src="js/script.js"> </script>
//script标签一旦用于引入外部文件，就不能在编写代码了，即使编写了浏览器也会忽路
//如果需要则可以在创建一个新的script标签用于编写内部代码
   <script type="text/javascript">
        alert("内部js代码");
   </script>

---

---

JS的基本语法

基本语法

/*
 * 多行注释
 * xxxxx
 */

//单行注释

• JS中严格区分大小写
• JS语句以英文(；)结尾，如果不写分号，游览器会自动添加，但是会消耗一些系统资源。

输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

字面量和变量

字面量：一些不可改变的值。可以直接使用，但是一般不会直接使用。 比如：1 2 3。

变量：用于存放数据的容器。我们通过变量名获取数据，变量的值是可以任意改变的，所以开发中都是通过变量去保存一个字面量。声明一个变量并赋值，我们称之为变量的初始化。

<script type="text/javascript">
   var a;// 声明变量:在js中使用var关键字来声明一个变量
   a = 123;// 为变量赋值
   // 声明和赋值同时进行，也可以通过变量对字面量进行描述
   var age = 21;
   console.log(age);
</script>

标识符

在JS中所有可以由我们自主命名的都可以称为是标识符。例如：变量名、函数名、属性名。命名时需要遵守以下规则：

1. 标识符中可以含有字母、数字、_ 、$。（不能含有@、#等其他特殊字符）
2. 标识符不能以数字开头。
3. 标识符不能是ES中的关键字或保留字符。
4. 一般都是采用驼峰命名法（首字母小写，每个单词的开头字母大写，其余字母小写）。
5. JS底层保存标识符时实际上是采用的Unicode编码（UTF-8），所以理论上讲，所有的UTF-8中含有的内容都可以作为标识符。

关键字（了解）

break	do	instanceof	typeof	case	else	new	var
catch	finally	continue	void	return	for	switch	whille
default	if	throw	delete	function	try	in	this
with	false	debugger	true	null

保留字符（了解）

class	enum	import	implements	let	yield
super	extends	private	interface	static	package
const	export	public	protected

数据类型

数据类型指的是字面量的类型。在js中一共有六种数据类型。js的变量数据类型只有程序在运行过程中，根据等号右边的值来确定的。

• String 字符串

在JS中字符串需要使用引号引起来，单双引号都可以，但不要混着用

var str='hello';
console.log(str);

在字符串中我们可以使用\作为转义字符

• \"表示"       
• \'表示'
• \n表示换行
• \t表示制表符 = tab键
• \\表示\

alert（"str"）；和 alert（str）；的区别

alert（"str"）；输出字面量 字符串str

alert（str）；输出变量str

var str = "hello"；给str赋值为hello

str = "你好"；修改str的值为：你好

检测获取字符串的长度length 

var fan = "my love is ting";
console.log(fan.length);//15

• Number 数值

 在JS中所有的数值都是Number类型，包括整数和浮点数（小数）。 

var a = 123;//数字123
var b = "123"//字符串123

可以使用一个运算符typeof来检查一个变量的类型

//typeof 变量
console.log(typeof a);

JS中可以表示数字的最大值：Number.MAX_VALUE。如果使用Number表示的数字超过了最大值，则会返回Infinity值，表示正无穷。（-Infinity负无穷）

console.log(Number.MAX_VALUE);// 1.7976931348623157e+308
console.log(Number.MIN_VALUE);// 5e-324(大于0的最小值)

NaN是一个特殊的数字，表示Not a Number。

var c = 123 + 456;
console.log(c);//789
var d = 0.1 + 0.2;
//在JS中整数的运算基本精确，进行浮点元素可能得到一个不精确的结果
console.log(d);//0.3000000004

• ​​​​​​Boolean 布尔值

// Boolean 布尔值只有两个值   true 和 false
   var bool = true;
   console.log(bool);
   console.log(typeof bool);

• Null 空值

// Null类型的值只有一个null，专门用来表示一个为空的对象
// 使用typeof检查null值时，会返回object
   var a = null;
   console.log(typeof a);//object

• Undefined 未定义：声明了但未赋值

// Undefined类型的值也只有一个
// 当声明一个变量，但是不给变量赋值时，它的值就是Undefined
   var b;
   console.log(typeof b);//Undefined

• Object 对象 （引用数据类型，前五种均为基本数据类型）

---

---

---

强制数据转换：

将一个数据强制转换为其他的数据类型（String、Number、Boolean）

将其他的数据类型转换为String：

方法一：调用被转换数据类型的toString（）方法，该方法不会影响到原变量。但是注意：null和undefined这两个值没有toString()方法，调用会报错。

var a = 123;
a = a.toString();
console.log(typeof a);
console.log(a);

方法二：调用String（）函数，并将被转换的数据作为参数传递给函数。对于Number和Boolean：实际上就是调用的toString()方法，但是对于Null和Undefined，就不会调用toString()方法。因为它会将字面量null（undefined）直接转换为字符串"null"（"undefined"）。

var a = 123;
a = String(a);
console.log(typeof a);

方法三：加号拼接字符串。（隐式转换）

var num = 1;
console.log(num + '');

将其他的数据类型转换为Number：

方法一：使用Number（）函数，用法与String（）相同。

• 字符串转为数字时，如果是纯数字则直接将其转换为数字。如果字符串中有非数字的内容，则转换为NaN。如果字符串是一个空串或者是均为空格的字符串，则转换为0。
• 布尔转为数字时，true转成1，false转为0。
• 空值转为数字时，Null转为0。
• Undefined转为数字时，undefined转为NaN。

var a = 123;
a = Number(a);
console.log(a);
console.log(typeof a);

方法二：专门用来对付字符串。如果对非string使用parseInt()或parseFloat()，它会先将其转换为String，然后在操作。

parseInt（）函数把一个字符串转换为一个整数。可以将一个字符串中的有效的整数提取出来，转换为Number。

var b = "12a3333abc";
// b = Number(b);
b = parseInt(b);
console.log(b);//12
console.log(typeof b);

parseFloat（）函数把一个字符串转换为一个浮点数。提取有效的小数。 

var c = "2223.33abc";
console.log(parseFloat(c));//2223.33

方法三：算数运算（隐式运算）：利用 -  *  /  

console.log('12');//12
console.log('12' - 0);//12
console.log('123' - '120');//3
console.log('123' * 1);//123

将其他的数据类型转换为Boolean：

使用Boolean（）函数。

var e = 123;
//数字转布尔，除了0和NaN，其余都是true
e = -123;//true
e = 0;//false
e = NaN;//false
e = Infinity;//true

//字符串转布尔，除了空串，其余的都是true
e = "false";//true
e = "";//false
e = " ";//true

//null和undefined都会转换为false
e = null;//false
e = undefined;//false

//对象也会转换为true

e = Boolean(e);
console.log(typeof e);
console.log(e);

---

其他进制的数字（了解）

在JS中，可以在parseInt()中传递一个第二个参数，来指定数字的进制 a = parseInt(a,10)；

1. 如果需要表示16进制的数字，则需要以0x开头。比如0x10=16，0xff=255。
2. 如果需要表示8进制的数字，则需要以0开头。
3. 如果要要表示2进制的数字，则需要以0b开头。但不是所有的浏览器都支持。