JavaScript 基础

1. JavaScript 介绍

1. JavaScript 最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
2. JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
3. JavaScript 是一种运行在客户端的脚本语言。运行过程由 JS 引擎 来逐行解析并执行。

2. JavaScript 组成

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

ECMAScript

ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

DOM

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口等等。

3. 使用

1.  行内式

// 写在标签中的 Js
<div onclick="alert('你好!')"> 点击 </div>

2.  内嵌式

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

 3.  外链式

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

4. 基本语句

// 输入框
prompt('输入框，用户可以输入');
 
// 输出框
alert('输出框');
 
// 确定取消框
confirm('确定取消框');
 
// 控制台信息
console.log('控制台信息');

5. 变量

变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

名命变量关键字 var （在ES6新增两个名命变量关键字 let 和 const）
 
语法：
var 变量名 = 值
var num = 10
 
注意：新手开始学习 javaScript 的时候，使用 名命变量关键字 var

 命名规范：

1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、$ 组成，如：usrAge, num01, _name。

2. 严格区分大小写。var app; 和 var App; 是两个变量。

3. 不能 以数字开头。 18age 是错误的。

4. 不能 是关键字、保留字。例如：var、for、while。

6. 数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。在 JavaScript 中数据类型分两类，分别是 简单数据类型 和 复杂数据类型。

简单数据类型

1. Number（ 数字 ）

该变量 的数据类型就为 Number
var num = 10

2. String（ 字符串 ）

变量 str 与 strs 都为 字符串
var str = 'hi!'  
var strs = "你好!"

3. Boolean （ 布尔 ）

在 Boolean 中， 值只有 true 与 false，值的意思表示 正确和错误。
var num = true
var num = false

4. undefined

undefined 表示声明的变量，但是没给赋值。
var num
console.log(num) // 控制台打印结果为 undefined

5. null

null 表示 空，无，没有。
console.log(num)  // 控制台 打印结果 报错。表示没有这个 num

复杂数据类型

1. Array（数组）

数组用于在单一变量中存储多个值。
var arr = [1,2,3]

2. Object（对象）

对象以键值对的方式进行存储，是一组无序的相关属性和函数方法的集合，可以通过键（属性名）访问这些值。在 JavaScript 中 所有东西都是对象。
var obj = {
  num: 10,
  str: '10',
  bo: false,
  arr: [1, 2, 3]
}
console.log(obj.num) // 10
 
注意：如果访问一个对象没有的属性，结果为undefined。

3. Function（函数/方法）

就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。  
function add (num, val) {
  return num + val
}
console.log(add(1, 2)) // 3

6.1 判断数据类型

关键字 typeof ，可以使用 typeof 来判断 变量是什么数据类型。
var num = 10
console.log(typeof num) // number

6.2 Number 的其他值

在 Number 中还有 一些比较特殊的值 NaN，Infinity，-Infinity。分别表示 运算错误，无穷大，无穷小。

6.3 字符串的转义符

\n 换行
\t 缩进
 
var str = '1\n23\t456'
console.log(str)
// 1
// 23	456t

6.4 数据类型转换

转为字符串

// String() 方法
var str = 10 
String(str)
console.log(String(str)) // '10'
 
// 字符串拼接
console.log('' + str) // '10'

转为数字

// Number 方法
var num = '10'
console.log(Number(num)) // 10
 
// 隐式转换 (在 变量前后添加 加减 等运算符号,一般是使用 + 号)
console.log( +num) // 10

转换布尔

// Boolean() 方法
var num = 10 
console.log(Boolean(num))

7. 运算符

算数运算符

加	+	1+1
减	-	1-1
乘	*	1*1
除	/	1/1
取余（取两个数字之间除不尽剩余的数）	%	3%2=1

注意：可以使用算数运算符去进去 隐式转换。

递增递减运算符

反复给数字进行加减操作。
 
var num = 10
console.log(++num) // 11

前置递增递减

var  num = 10;
console.log(++num + 10)  // 21
 
++num 前置递增，先做 num+1 操作，在做 num+10 的操作。先自加，后返回值

后置递增递减

var num = 10;
console.log(10 + num++); // 20
 
num++ 后置递增，先返回num等于10的变量，在num+10的操作。先返回原值，后自加 

比较运算符

比较运算符 = = 和 = = =
 
= = 及，判断操作，判断值是否相等，不会判断数据类型，如果数据类型不等，会进行隐式转换。
= = = 及，全等，值和数据类型都会判断。

逻辑运算符

逻辑与 &&

在进行运算多个值时，其中一个不对就终止运算。
 
var num = 10 
var str = '10'
 
console.log(num == str && num === str) // false

逻辑或 ||  

在进行运算多个值时，只要有一个值是正确的，就返回正确的。
 
var num = 10 
var str = '10'
 
console.log(num == str && num === str) // true

逻辑非 ！

取反，取一个相反的变量。
 
var bo = true
console.log(!bo) // false

逻辑中断

当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

赋值运算符

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

位非运算

~ 的作用是返回数值的补码，补码有以下几个操作：
+ 先把十进制转成2进制
+ 然后进行反码
+ 再将反码值+1（ 通俗讲就是 当前数值取反 - 1 ）

// ~
console.log(~1); // -2

8. 判断语句

if 语句

 

if 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}
 
if else语句 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}
 
// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
    语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

switch 语句

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break; 
        // break 条件成立，结束执行，返回结果
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

三元表达式

// 结果表达式1 ，如果符合 条件表达式 就返回，否则返回结果表达式2
条件表达式 ? 结果表达式1 : 结果表达式2

9. 循环语句

for 循环

for(初始化变量; 条件表达式; 操作表达式 ){
    // 循环体
}
 
初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
 
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
 
操作表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
 
for(var i = 0; i<10; i++){
    console.log(i) // 0 到 9 
}

双重 for 循环

for(var i = 0; i < 10; i++ ){
    for(var j = 0;j < 10; j++){
        console.log(1) // 100 个 1
    }
}

while 循环

while (条件表达式) {
    // 循环体代码 
    break;
}
 
注意：在while循环中，一定要有退出循环的条件，否则是变成死循环。

do-while 循环

do {
    // 循环体代码
} while(条件表达式);
 
注意：在 do while 循环中，至少会执行一个 循环体代码。

continue、break 关键字

continue ： 用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。 : 立即跳出整个循环（循环结束）。
 
for (var i = 0; i < 10; i++) {
  if (i == 9) {
    continue
  }
  console.log(i);
}
 
break : 立即跳出整个循环（循环结束）。
 
for (var i = 0; i < 10; i++) {
  console.log(i) // 只能打印 0 
  break
}