JavaScript学习笔记（一）--- 变量

JavaScript学习笔记（一）— 变量

一、初识JavaScript？

1、JavaScript是什么？

​ JavaScript由布兰登.艾奇设计，是一种运行在客户端的脚本语言，无需编译，运行过程中由浏览器的js解释器（js引擎）逐行来进行解释并执行，现在可以用于实现网页业务逻辑和页面控制，例如：表单内容动态校验、密码强度检测、网页特效、游戏开发等等，也可以基于Node.js技术进行服务器端编程。

2、浏览器引擎

​ 浏览器引擎分为两部分：渲染引擎 和 JS 引擎。

​ 渲染引擎是用来解析HTML和CSS代码的，俗称内核，例如谷歌浏览器的 blink 内核。

​ JS 引擎 也称为JS解释器，用来识别读取网页中的 JavaScript 代码，并对其进行解释，转换成机器语言，交由计算机执行，例如谷歌浏览器的 V8 引擎。执行 JS 代码时，是逐行解释，逐行执行，即解释一句，执行一句，执行结束后再解释下一句。

3、JavaScript的组成

​ JavaScript 由 ECMAScript、DOM 、 BOM 三部分组成。

​ ECMAScript 即 JS 语法，由ECMA国际协会规定了 JS 的编程与法和基础核心知识，所有浏览器共同遵守。ECMAScript又分为两种，网景公司的 JavaScript 以及 微软公司的JScript， 我们学的是JavaScript。

​ DOM 是指文档对象模型（Document Object Model），通过DOM提供的接口可以对页面上的各种元素进行操作。可以理解为页面上的每个元素都是一个DOM。

​ BOM 是指浏览器对象模型（Browser Object Mode），提供了独立于内容、可以与浏览器窗口进行互动的对象结构。例如操作浏览器窗口跳转、弹出框等等。

二、JavaScript部分语法

1、JS 代码的书写位置

​ JavaScript 有三种书写位置，分别为 行内式、内嵌式 和 引用外部js文件。

​ 行内式： 很少使用，由于可读性差，容易出错，所以只适用于书写少量的 js 代码。

<input type="button" value="点我试试" onclick="alert('Hello World')" />

内嵌式： 即将 JS代码写到 HTML 页面的 script 标签中，script 标签可以放在 head标签内，也可以放到 body 标签内。优点是结构清晰，与页面联系紧密，容易排查错误，学习时经常使用。缺点是 将 JS 代码写到了HTML页面中，容易被获取和攻击。

<script>
    alert('Hello  World~!');
script>

​ 引用外部js文件： 将 js 代码写到独立的 js 文件中 ，再在需要的HTML页面中用 < script> 进行引用，是页面结构更清晰，是程序员工作时经常使用的方式。但是要注意，引用外部文件的 script 标签中间不能填写任何内容。

<script src="my.js">script>

2、JS 注释的写法

​ JS 的注释分为单行注释和多行注释两种。

​ 单行注释的注释方式为： / /

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来	

​ 多行注释的注释方式为： / * * /

/*
  获取用户年龄和姓名
  并通过提示框显示出来
*/

3、JS 的输入输出语句

​ 输入语句：promot(info)，浏览器弹出输入框，用户可以输入。

​ 控制台输出： console.log(“msg”) ，浏览器控制台打印输出信息，一般是用于提供给程序员看的运行信息。

​ 页面输出： alert(‘msg’) ，浏览器弹出警示框输出信息，主要用于显示信息给用户。

4、JS的变量

​ 声明变量： var age ; 声明一个名称为 age 的变量，JavaScript是一种弱类型的语言，不论是什么类型的变量，声明时都是用 var 。声明后计算机会自动为变量分配内存空间，然后通过变量明来对分配的内存空间进行访问。

​ 变量赋值： age = 10 ; 也可以在声明的变量的同时进行赋值，例如： var age = 18;

​ 可同时声明多个变量：var age = 10, name = ‘zs’, sex = 2; 中间用逗号进行分隔即可。

​ 还有一种特殊情况：JS 中的变量可以不声明，直接进行赋值使用：age = 10; console.log (age); 虽然可以正常运行，但是并不提倡这种行为。

​ 命名规范：

​ ①只能由由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成。

​ ②严格区分大小写。

​ ③不能 以数字开头。

​ ④不能以关键字、保留字命名。

​ ⑤变量名要有意义，最好使用英文单词，让人见名知意，知道这个变量的用途。

​ ⑥遵守驼峰命名法，首字母小写，后面单词的首字母需要大写。

三、JavaScript变量数据类型

1、变量的数据类型

​ 变量是用来存储数据的，它拥有名字和数据类型。变量的数据类型决定了这些数据的存储。在计算机中，不同的数据所需占用的存储空间是不同的。JavaScript是一种弱类型的语言，意味着不用提前声明变量的数据类型，在代码运行过程中，变量的数据类型会由JS 引擎根据 等号右边数据的类型进行判断确定。而且同一个变量可以在不同时期存储不同的数据类型。

2、JS 数据类型的分类

​ JS 把数据类型分为两类： 简单数据类型（Number,String,Boolean,Undefined,Null） 以及 复杂数据类型 （object)。

3、简单数据类型

Number（数字型）：

​ 包含整数型和浮点型，即可以保存整数，也可以保存小数，默认值为 0；除了保存常见的十进制，还可以保存二进制、八进制以及十六进制。在JS中保存八进制要在数字前面加0，十六进制要在数字前面加 0x。

var age = 21;       // 整数
var Age = 21.3747;  // 小数     
  // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;   

JS 中数值有最大值和最小值：

​ 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308；

​ 最小值：Number.MIN_VALUE，这个值为：5e-32

JS 还有三个特殊值：

​ Infinity ，代表无穷大，大于任何数值

​ -Infinity ，代表无穷小，小于任何数值

​ NaN （Not a number），代表一个非数值

JS 还有一个特殊的函数 isNaN(x)：

​ 用来判断一个变量 x 是否为非数字类型，如果 x 是数字，返回 false；如果 x 不是数字 ，返回true。

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);          // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一个非数字

​

String(字符串类型)：

​ 用单引号 ‘ ’ 或者 双引号 “ ” 包裹的任意文本。 JS 我们更习惯使用 单引号。

var strMsg = "我爱北京~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱酱肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

字符串引号嵌套：

​ 可以在双引号里包含单引号，也可以在单引号里包含双引号。但是不可以单引号包含单引号，双引号包含双引号 (外双内单，外单内双) 。

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

转义符：

​ 转义符都是以 \ 开头的，常用的有： 换行符 \ n 、斜杠 \ \ 、单引号 \ ’ 、双引号 \ " 、tab缩进 \ t 、空格 \ b。

获取字符串长度：

​ 可以通过字符串的length 属性来获取字符串的长度。

​

var strMsg = '我是菜鸟联盟盟主!';
alert(strMsg.length); // 显示 9

字符串拼接：

​ 字符串之间可以通过 +号 进行拼接 ，而且一个字符串与**其他任何类型（变量除外）**的数据进行拼接时，系统会在拼接前会把与字符串相加的任何类型数据转成字符串，然后载得到拼接后的字符串。

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112 
//1.4 字符串 + 变量
var age = 18;
console.log('pink老师' + age);         // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦

Boolean(布尔型)：

​ 布尔类型有两个值： true(真) 和 false(假)；而且当布尔型数据与数字型数据相加时， true 的值为 1 ，false 的值为 0。

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

Undefined(默认类型)和 null(空类型)：

​ 如果一个变量声明后没有进行赋值，那此时它的值就是 Undefined。给一个变量赋值为 null ，此时它的值就是 空 null。

//Undefined(默认类型)
var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN
//null(空类型)
var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

4、获取变量的数据类型

​ 通过 typeof 可以来获取变量的数据类型。 不同的数据类型会有不同的返回值。

var num = 18;
console.log(typeof num);// 结果 number   
var str = 'aaa';
console.log(typeof str); //结果 string 
var a = true;
console.log(typeof a); //结果 boolean 
var b; 
console.log(typeof b); //结果 undefined
var c = null;
console.log(typeof c) //结果 object 

5、数据类型转换

​ 在页面中使用表单和输入框 prompt 获取的数据 默认为字符串类型，如果是数字 ，那此时不能直接进行算术运算，需要将其进行类型转换。常用的有三种类型转换： 转换为字符串型 、 转化为数字型、转换为布尔型。

转换为字符串：

//方法一：toString()
var a = 1;
alert(a.toString());

//方法二：String()强制转换
var b = 1;
alert(String(b));

//方法三：隐式转换，即+ 加号拼接字符串，与字符串拼接，结果为字符串
var c = c;
alert(c + '我是一个字符串');

转换为数字型：

//方法一：parseInt(string) 将string类型转换成整数型
var a = '11';
alert(parseInt(a));

//方法二：parseFloat(string) 将string类型转换成浮点数型
var b = '11.11';
alert(parseFloat(b));

//方法三：Number() 强制转换 将string类型转换成数值型
var c = '22';
alert(Number(c));

//方法四：隐式转换，即 - * / 利用算术运算（除了加）隐式转换为数值型
alert('11'-0 * '2');

​

转换为布尔型：

​ 代表空 和 否定 的值 会被转换为 false ，如 ‘’、0、NaN、null、undefined。

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true