Javascript基础-阿里云开发者社区

一、简单了解Javascript

1.为什么学习 JavaScript?

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

HTML 定义了网页的内容
CSS 描述了网页的布局
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	构成了JS的核心语法
BOM	Browser Object Model【浏览器对象模型】，用来操作浏览器上的对象
DOM	Document Object Model【文档对象模型】，用来操作网页中的元素

*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 运算符优先级

运算符	结合性	优先级
.、[ ]、( )	从左到右	最高
++、--、-、！、new、typeof	从右到左
*、/、%	从左到右
+、-	从左到右
＜、＜=、＞、＞=、in、instanceof	从左到右
==、!=、===、!==	从左到右
&&	从左到右
II	从左到右
?:	从右到左
=、*=、/=、％=、+=、-=、&=、^=、!=	从右到左
,	从左到右	最低

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

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 区别

switch...case 语句通常处理 case 为比较确定值的情况，if...else语句通常用于范围判断（大于、小于）
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);  // 链式作用域，找父集中的变量，如果没有再找上级
        }
    }

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

Javascript基础

一、简单了解Javascript

1.为什么学习 JavaScript?

2.Javascript概述

3Javascript特点

4. javascript的历史

5.主要组成部分

6.主要用途

7.Javascript和Java的关系

二、javascript基本使用

2.1 JS 嵌入方式

2.2 JS 注释

2.3 JS 输入输出语句

2.4 JS事件

2.5 查找 HTML DOM 元素

三、ECMAScript

3.1 变量

3.1.1 定义

3.1.2 声明变量

3.1.3 初始化变量

3.1.4 输入存储变量

3.1.5 变量的命名规范

3.1.6 查看变量

3.2 数据类型

3.2.1 数字型[number]

3.2.2 字符串型[string]

3.2.3 布尔型

3.2.4 null 空值

3.2.5 undefined 未定义

3.2.6 其他类型

3.2.7 数据类型转换

3.2.7.1 typeof() 查看数据类型

3.2.7.2 转换为字符串

3.2.7.3 转换为数字型

3.2.7.4 转换为布尔型

3.3 运算符

3.3.1 算数运算符

3.3.2 递增递减运算符

3.3.3 比较运算符

3.3.4 逻辑运算符

3.3.5 逻辑运算短路

3.3.6 赋值运算符

3.3.7 运算符优先级

3.4 流程控制

3.4.1 顺序结构

3.4.2 选择结构

3.4.2.1 if 分支结构

3.4.2.2 三元运算符

3.4.2.3 Switch

3.5 循环结构

3.5.1 for 循环

3.5.2 嵌套循环

3.5.3 while 循环

3.5.4 do while 循环

3.5.5 continue 和 break

3.6 数组

3.6.1 创建数组

3.6.2 访问数组元素

3.6.3 遍历数组

3.6.4 数组长度属性 length

3.6.5冒泡排序

3.7 函数

3.7.1 声明函数

3.8 作用域