Javascript基础

一、简单了解Javascript

1.为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

1. HTML 定义了网页的内容
   
2. CSS 描述了网页的布局
   
3. JavaScript 控制了网页的行为
   

2.Javascript概述

Javascript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为Javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能

3Javascript特点

• JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
  
• *跨平台性*。JavaScript是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与Web站点和Web应用程序之间的交互。
  
• *JS是弱类型语言*，没有类型声明，它的变量不必具有一个明确的类型。
  
• *JS是脚本语言*。换句话说，能够用来编程的并且直接执行源代码的语言，就是脚本语言。
  
• JS也是*解释性语言*，代码不用直接，直接解析运行。
  
• JS是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
  

4. javascript的历史

• JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发（这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。
  

布兰登·艾奇,Javascript创始人

• 之所以将 LiveScript 更名为 JavaScript，是因为 JavaScript 是受 Java 的启发而设计的，因此在语法上它们有很多相似之处 ，JavaScript 中的许多命名规范也都借鉴自 Java，还有一个原因就是为了营销，蹭 Java 的热度。
  
• 同一时期，*微软*和 *Nombas*（一家名为 Nombas 的公司）也分别开发了 *JScript* 和 *ScriptEase* 两种脚本语言，与 *JavaScript* 形成了三足鼎立之势。它们之间没有统一的标准，不能互用。为了解决这一问题，1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，Netscape、Sun、微软、Borland（一家软件公司）组成了工作组，并以 JavaScript 为基础制定了 *ECMA-262* 标准（ECMAScript）。第二年，ISO/IEC（国际标准化组织及国际电工委员会）也采用了 ECMAScript 作为标准（即 ISO/IEC-16262）。
  

5.主要组成部分

Javascript由ECMAScript、BOM、DOM三部分组成：

• *ECMAScript*: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
  
• *BOM* (Browser Object Model): 浏览器对象模型
  
• 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。
  
• 比如： 弹出框、浏览器跳转、获取分辨率等
  
• *DOM* (Document Object Model): 文档对象模型
  
• 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。
  
• 比如： 增加个 div，减少个 div，给div 换个位置等
  

**总结****： **JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果****

6.主要用途

• 在网页中插入新的 HTML，修改现有的网页内容和网页的样式。
  
• 响应用户的行为，响应鼠标的点击或移动、键盘的敲击。
  
• 向远程服务器发送网络请求，下载或上传文件（所谓 AJAX 和 COMET 技术）。
  
• 获取或修改 cookie，向访问者提出问题、发送消息。
  
• 记住客户端的数据（本地存储）。
  

7.Javascript和Java的关系

它们的相同之处包括：

• 它们的语法和 C 语言都很相似；
  
• 它们都是面向对象的（虽然实现的方式略有不同）；
  
• JavaScript 在设计时参照了 Java 的命名规则；
  

它们的不同之处包括：

• JavaScript 是动态类型语言，而 Java 是静态类型语言；
  
• JavaScript 是弱类型的，Java 属于强类型；
  
• JavaScript 的面向对象是基于原型的（prototype-based）实现的，Java 是基于类（class-based）的；
  

综上，Javascript和Java的关系就像老婆和老婆饼、雷锋和雷峰塔、印度和印度尼西亚一样，没有半毛钱关系。

二、javascript基本使用

2.1 JS 嵌入方式

在 HTML 中使用 JS 可以用以下几种方式实现：

• 行内式
  
• 内嵌式
  
• 外部引用 js 文件
  

行内式，可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。

<input type="button" value="Click Me!" onclick="alert('Hellow World')">

内嵌式，一般用于实现比较小的功能，代码不长的情况

<script>
        alert('Hello World');
    </script>

外部JS文件，最常见的方式

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

2.2 JS 注释

// 单行注释    
    /*  多行注释 */

2.3 JS 输入输出语句

• alter/prompt/confirm来源于window对象
  

alert(msg) // 浏览器弹出框

console.log(msg) // 浏览器控制台打印输出信息

prompt(info) // 浏览器弹出输入框，用户可以输入

confirm()

2.4 JS事件

• 标签的事件属性
  

<buttononclick = "alert('123')">点我</button>
    <buttononclick = "a();">点我</button>
    a()====>函数
    function a(){
    }
    onclick         // 鼠标点击左键
    ondbclick       // 鼠标双击
    oncontextmenu   // 鼠标点击右键
    mousedown       // 鼠标按键被按下
    mouseup         // 松开鼠标按键
    onselect        // 文本被选中
    oncopy          // 元素内容被复制
    onmouseenter    // 鼠标移动到事件监听的元素内（不区分子元素）
    onmouseover     // 鼠标移动到有事件监听的元素或它的子元素内
    onmouseleave    // 鼠标离开元素外（不区分子元素）
    onmouseout      // 鼠标离开元素，或它的子元素外
    onfocus         // 获得鼠标焦点(点击input输入框)
    onblur          // 失去鼠标焦点（进入其他input输入框）
    onmousemove     // 鼠标移动
    onmouseup       // 鼠标弹起
    onmousedown     // 鼠标按下

2.5 查找 HTML DOM 元素

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。在 DOM 中，所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作，改变 HTML 元素的内容。

• getElementById()
  

因为 id 元素是唯一的，就是为了在 js 中通过元素 id 来查找元素，document 是页面文档对象，getElementById 是 document 的方法，通过传递的参数（id字符串），是一个标签的id值。可以返回的该元素对象

<div id="new">This is new Element</div>
    <script>
        // 页面文档从上往下加载，需要将 script 代码写在下边
        var dom = document.getElementById('new');
        // 显示id为new的对象中内容
        console.log(dom);
        // 可以打印我们返回的元素对象，更好的查看里边的属性和方法
        console.dir(dom);  
    </script>

三、ECMAScript

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。

• 语法
  
• 类型
  
• 语句
  
• 关键字
  
• 保留字
  
• 运算符
  
• 对象
  

3.1 变量

3.1.1 定义

变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。

3.1.2 声明变量

Js 是一种弱类型或者说动态语言，不用提前声明变量的类型，变量的类型会自动判断。即使赋值之后，变量的类型根据重新赋值的数据类型同样进行改变。

var age; // 声明一个名称为age的变量

age = 12; // 给age这个变量赋值为12

通常声明与赋值一起使用：

var age = 12;

3.1.3 初始化变量

var age = 12
    var name = 'Tom'
    name = 'OO'  // 再次给相同变量赋值则不用 var 进行初始化
    var a = 10, b = 20, c = 30;  // 可以同时声明多个变量

3.1.4 输入存储变量

var name = prompt('请输入你的名字')

alert(name)

3.1.5 变量的命名规范

• 由字母、数字、下划线、$符号组成，不能以数字开头
  
• 不能是关键字和保留字，例如：for,while,this,name
  
• 区分大小写
  
• 变量名必须有意义
  
• 小驼峰命名法，如：myName
  
• 建议不要用$作为变量名
  

3.1.6 查看变量

alert(变量名) // 弹出框显示

console.log(变量名) // 控制台显示

document.write(变量名) // HTML 页面上显示

3.2 数据类型

3.2.1 数字型[number]

3  // 十进制
    010  // 八进制
    0xa  // 十六进制
    3.14  // 小数
    NaN  // 非数字 Not a Number
数字型范围：
    console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
    console.log(Number.MIN_VALUE);  // 5e-324

3.2.2 字符串型[string]

var str1 = '这是个字符串';
字符串转义符：
    \n  // 换行
    \r  // 回车
    \\
    \'
    \"
    \t
    \b  // 空格
    \xnn  // 16进制字符，如 \x41 代表 'A'
    \unnn  // 16进制 unicode 字符， 如 \u03a3 代表∑
字符串长度：
用 变量.length 可以得到字符串长度，如：
    var str1 = 'hello world'
    console.log(str1);  
    // 输出结果：11
字符串拼接：
    var str = str1 + str2;
    var str = '字符串' + 123;  // 输出字符串123，字符串拼接其他类型会自动转换为字符串
    var str = 'My age is' + age + 'years old';  // 字符串+变量拼接

只要与字符串做加法运算都会被转换成字符串

字符串中的双引号和单引号：

var str = "他是'程序猿'";

3.2.3 布尔型

布尔型 Boolean 只有两个值，一个是 true， 一个是 false

console.log(1 + true); // 在运算中，true代表1

console.log(1+ false); // false 代表0

console.log('t' + true); // 在字符串拼接，会直接以字符串形式拼接 ttrue

3.2.4 null 空值

console.log(null+ 'pp'); // 会拼接字符串 nullpp

console.log(null + true); // 会输出 1

null表示"没有对象"，即该处不应该有值。

• 作为函数的参数，表示该函数的参数不是对象。
  
• 作为对象原型链的终点。
  

3.2.5 undefined 未定义

一个声明后没有被赋值的变量会有一个默认值 undefined

console.log(undefined + 'pp');  // 会拼接字符串 undefinedpp
    console.log(undefined + true);  // 会输出 NaN
    console.log(undefined + 1);  // 会输出 NaN

• 变量被声明了，但没有赋值时，就等于undefined。
  
• 调用函数时，应该提供的参数没有提供，该参数等于undefined。
  
• 对象没有赋值的属性，该属性的值为undefined。
  
• 函数没有返回值时，默认返回undefined。
  

undefined 和 null 的区别

只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

• undefined和null在if语句中，都会被自动转为false
  

3.2.6 其他类型

• 数组
  
• 对象
  

3.2.7 数据类型转换

3.2.7.1 typeof() 查看数据类型

var num = 1;
    console.log(typeof num);
    console.log(typeof(num));  // 也可以使用参数的形式查看

null 返回的是 object

3.2.7.2 转换为字符串

var num = 1;
    alert(num.toString());  // 无法用 .toString() 方法转换 undefined 和 null
    alert(String(num));  // 可以转换 undefined 和 null
    alert(num + '');

3.2.7.3 转换为数字型

// 转换为整型
    parseInt(num);
    parseInt('3.14');  // 取整为3
    parseInt('90px');  // 去掉单位（只取int遇到字符串自动中断）
    parseInt('rem120px')  // 字符串转换后变为 NaN
    parseInt(undefined)  // undefined 转换后变为 NaN
    parseInt(null)  // 转换后为0
    parseInt(true)  // 布尔型转换后变为 1 或 0 
    // 转换为浮点型
    parseFloat(num);
    parseFloat(3);  // 还是输出3，不会自带小数点，3.0也是一样
    // 强制转换
    Number(num);
    // 隐式转换，可以用 - * / （加号正能用作正负值将字符串转为数字型，如果用在变量后边则变为拼接字符串）
    console.log(+'100')
    console.log('123' - 120);
    console.log('t' - 120);  // 输出 NaN

3.2.7.4 转换为布尔型

代表空、否定的值都会被转换为 false，如：0，''，NaN，null，undefined其余值都会被转换为 true

Boolen('abc'); // 返回 True

Boolean(0); // 返回 False

3.3 运算符

表达式：任何能代表值的式子

var a = 10, b=20;

var c = a + b; // a + b 就是表达式

3.3.1 算数运算符

+ - * / %

浮点数运算精度问题，尽量避免用浮点数直接进行运算

console.log(0.1 + 0.2);  // 0.30000000000000004
    console.log(0.07 * 100);  // 7.000000000000001
    var num = 0.1 + 0.2;
    console.log(num == 0.3); // false

3.3.2 递增递减运算符

++i;  // 前置递增（先自加后返回）
    --i;  // 前置递减
    var i = 1;
    console.log(++i + 10);  // 11 （先自加，然后参与运算）
    i++;  // 后置递增（先返回值，后自增）
    i--;  // 后置递减
    var i = 1;
    console.log(i++ + 10);  // 20 （先运算，后自加）
    console.log(i);  // 2
前置后置递增进阶：
    var e = 10;
    var f = e++ + ++e;
    consolo.log(f);  // 22（e++ 返回 10，然后e自增为11，++e 返回12）

3.3.3 比较运算符

比较运算符，是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为运算结果。

// 普通比较运算符
    <
    >
    >=
    <=
    ==  // 不会比较数据类型 (18 == '18' 为真)
    === // 会比较数据类型
    !=
    !== // 全不等（包括数据类型）

比较运算符两侧表达式先转为布尔型再进行比较 '0' 用 Boolen() 做判断的时候是 true，但是用 == 比较运算符和布尔值比较的时候 '0' 是 false，但 '0' == 0 是真 undefined 和 null 在 Boolen() 做判断的时候是 flase，但是用 == 比较的时候他们不等于 false NaN 和任何值都不相等，包括它本身，即 NaN == NaN 为假

3.3.4 逻辑运算符

• 如果只是普通逻辑运算（两侧都是布尔型），返回的还是布尔型
  
• 与 undefined, null 做 && 运算返回 undefined, null
  
• !1 返回 false
  

3.3.5 逻辑运算短路

逻辑与运算短路

// 当表达式1和2为真时，返回表达式2

console.log(123 && 456); // 返回456

// 当表达式1为假时，直接返回表达式1

console.log(0 && 456); // 返回0

逻辑或运算短路

// 当表达式1为真，则返回表达式1

// 当表达式1为假，则返回表达式2

var num = 1;

console.log(123 || num++);

console.log(num); // 1

3.3.6 赋值运算符

num += 2;  // 相当于 num = num + 2
    num -= 1;
    num *= 1;
    num /= 1;

3.3.7 运算符优先级

任何写这种式子的人都是神经病：

var s = 4 >= 6 || 'a' != 'b' && !(12 * 2 == 144) && true

console.log(s) // true

• 赋值运算符优先级最低，先不用看它
  
• 然后是逻辑运算符 || 和 &&，从左到右开始
  
• 4 >= 6 为 false，所以看右侧返回值
  
• 右侧的三个 && 返回的都是 true，最后表达式返回 true
  

如果最右侧表达式是数值的话，则返回数值

3.4 流程控制

3.4.1 顺序结构

A -> B -> C

3.4.2 选择结构

3.4.2.1 if 分支结构

单分支结构

if (条件表达式) {

// 执行语句

}

// 其他代码

• 当条件表达式为真时，程序进入分支，执行完毕后，继续执行其他代码
  
• 当条件表达式为假时，程序直接跳过条件分支，执行其他代码
  

双向分支

if (条件表达式) {

// 执行语句

} else {

// 执行语句

}

// 其他代码

• 当条件表达式为真时，程序进入分支，执行完毕后，继续执行其他代码
  
• 当条件表达式为假时，程序执行 else 代码块中的代码，执行完毕后再执行其他代码
  

多分支结构

if (条件表达式1) {

// 执行语句1

} else if (条件表达式2) {

// 执行语句2

} else {

// 执行语句3

}

// 其他代码

• 如果满足条件表达式1，则执行执行语句1，直接跳出
  
• 如果不满足，则判断条件表达式2，为真则执行语句2，不为真则去执行 else
  

多分支语句只是多选一，最后只有一个语句执行

例：判断分数

var score = promot('请输入分数：')
    if (score >= 90) {
        alert('优')
    } else if (score >= 80) {
        alert('良')
    } else if (score >= 60) {
        alert('中')
    } else {
        alert('差')
    }

3.4.2.2 三元运算符

如果条件表达式结果为真，则返回表达式1,的值，否则返回表达式2的值

条件表达式 ? 表达式1 : 表达式2
    //输入一个 0~59 数字，如果小于10，则在数字前边补0
    var time = prompt('请输入一个0~59的数字');
    console.log(time<10 ? '0' + time : time);

3.4.2.3 Switch

switch(表达式){
        case value1:
            // 执行语句1
            break;
        case value2:
            // 执行语句2
            break;
        default:
            // 如果无条件满足，最终执行语句
    }

开发中表达式通常写为变量，变量值需要和 case 的 value 值全匹配，值和数据必须完全一致

Switch 与 IF 区别

1. switch...case 语句通常处理 case 为比较确定值的情况，if...else语句通常用于范围判断（大于、小于）
   
2. switch 语句进行条件判断直接跳转到case，效率更高，if 语句是顺序判断，效率低
   

3.5 循环结构

3.5.1 for 循环

for(初始化变量; 条件表达式; 操作表达式){

// 循环体

}

// 初始化变量： 用 var 声明的一个普通变量，通常用于计数器使用

// 条件表达式： 用来判断每一次循环是否继续执行，是终止的条件

// 操作表达式： 是每次循环最后执行的代码，经常用于计数器变量的更新（递增或递减）

例：输出一百句你好
    for(var i = 1; i<=100; i++){
        console.log('你好');
    }
例：从0加到100
    var sum =0;
    for(var i = 1; i<=100; i++){
        sum+=i;
    }

3.5.2 嵌套循环

for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){

for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){

// 循环代码

}

}

外层循环一次，内层循环执行全部

例：输出 5x5 的 *

var str = "";
    for (var i = 1; i <= 5; i++) {
        for (var j = 1; j <= 5; j++) {
            str = str + "*";
        }
        str = str + "\n";
    }
    console.log(str);

3.5.3 while 循环

while(条件表达式){

// 循环体

}

例：用 while 实现从1加到100

var num=1;
    while(num<=100){
        console.log(num);
        num++;
    }

while 循环一般需要配一个计数器，然后再循环体内设置一个终止循环，否则会陷入死循环

3.5.4 do while 循环

do {

// 循环体

} while(条件表达式)

和 while 循环比，do while 循环至少需要执行一次，然后进行判断是否终止循环。

3.5.5 continue 和 break

• break 关键字用于直接跳出循环
  
• continue 关键字用于立即跳出本次循环，进入下一次循环
  

3.6 数组

数组可以把一组相关的数据一起存放，并提供方便的访问方式。

3.6.1 创建数组

// 利用对象创建数组
    var arr = new Array();
    // 利用 [] 快捷创建数组
    var arr = [];
    var arr = [1, 2, 3, 'Pink', True];

3.6.2 访问数组元素

数组可以通过索引来访问、设置、修改对应的数组元素，可以通过 “数组名[索引]“ 的方式来获取数组中的元素。

var arr1 = ['张三', '李四', '王五', '淑芬'];
    // 索引号：   0       1      2      3
    console.log(arr1);  // 输出整个数组所有元素
    console.log(arr1[0]);  // 使用 数组名[索引号] 获取数组数组内指定元素的值

3.6.3 遍历数组

arr= ['a', 'b', 'c', 'd'];
    for (var i = 0; i <= 3; i++) {
        console.log(arr[i]);
    }

3.6.4 数组长度属性 length

arr= ['a', 'b', 'c', 'd'];

console.log(arr.length); // 输出4

利用 length 添加新的数组元素

arr = ["a", "b", "c", "d"];
    arr[arr.length] = 'e';
    console.log(arr[arr.length - 1]);
    // 输出结果
    e

3.6.5冒泡排序

var arr = [5, 4, 3, 2, 1];
    for (var i = 0; i < arr.length - 1; i++) { // 外层循环
        for (var j = 0; j <= arr.length - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);

3.7 函数

3.7.1 声明函数

// 声明函数

function 函数名(){

// 函数内部代码，又称为函数体

}

// 调用函数

函数名();

例：将1~100 累加封装成函数
    function sum(){
        var sum = 0;
        for(var i=1; i<=100; i++){
            sum = sum+i;
        }
        console.log(sum);
    }
    sum();

3.8 作用域

全局变量：

• 变量在标签之内，或者是一个单独js文件
  
• 如果在函数内部没有声明的变量也属于全局变量（即在函数内部可以使用外部的变量）
  
• 浏览器关闭才会销毁
  

局部变量：

• 变量声明在函数内部
  
• 函数的形参也可以看做是局部变量
  
• 函数执行完毕就会销毁
  

链式作用域：

• 函数内部可以调用父集中的变量
  

varnum=10;
    functionfn(){
        varnum=20;
        functionfun(){
            console.log(num);  // 链式作用域，找父集中的变量，如果没有再找上级
        }
    }