javascript基础入门
- javascript的历史
- JavaScript 与 ECMAScript 的关系
- 如何运行 JavaScript
- JavaScript 的特点
- 注释
- - 单行注释
  - 多行注释
  - 使用注释来阻止程序执行
  - HTML注释
- 四种输出
- - 控制台输出
  - 页面输出
  - querySelector输出
  - 弹出警告框alert输出
- innerText与innerHtml
- 变量的声明与赋值
- - let 和 var
  - let与var区别
  - let 和var 重新声明
  - 全局作用域
- 数据类型
- - 常用数据类型
  - undefined 特殊数据类型
  - NaN 特殊数据类型
- for循环
- for循环遍历列表
- 多种形式遍历列表
- - forof遍历列表
  - forin遍历列表
  - forEach遍历列表
- 数组列表
- 数组新增和删除
- - 数组新增
  - 数组删除
- 截取数组
- - slice
  - splice
- 数组排序
- 随机数

javascript基础入门

JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。

JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：

HTML 用来定义网页的内容，例如标题、正文、图像等；

CSS 用来控制网页的外观，例如颜色、字体、背景等；

JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

javascript的历史

JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 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）。

JavaScript 与 ECMAScript 的关系

ECMAScript（简称“ES”）是根据 ECMA-262 标准实现的通用脚本语言，ECMA-262 标准主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分，目前 ECMAScript 的最新版是 ECMAScript6（简称“ES6”）。

至于 JavaScript，有时人们会将 JavaScript 与 ECMAScript 看作是相同的，其实不然，JavaScript 中所包含的内容远比 ECMA-262 中规定的多得多，完整的 JavaScript 是由以下三个部分组成：

核心（ECMAScript）：提供语言的语法和基本对象；
文档对象模型（DOM）：提供处理网页内容的方法和接口；
浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。

如何运行 JavaScript

作为一种脚本语言，JavaScript 代码不能独立运行，通常情况下我们需要借助浏览器来运行 JavaScript 代码，所有 Web 浏览器都支持 JavaScript。

除了可以在浏览器中执行外，也可以在服务端或者搭载了 JavaScript 引擎的设备中执行 JavaScript 代码，浏览器之所以能够运行 JavaScript 代码就是因为浏览器中都嵌入了 JavaScript 引擎，常见的 JavaScript 引擎有：

V8：Chrome 和 Opera 中的 JavaScript 引擎；
SpiderMonkey：Firefox 中的 JavaScript 引擎；
Chakra：IE 中的 JavaScript 引擎；
ChakraCore：Microsoft Edge 中的 JavaScript 引擎；
SquirrelFish：Safari 中的 JavaScript 引擎。

JavaScript 的特点

解释型脚本语言
JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
面向对象
JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
弱类型
JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
动态性
JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
跨平台
JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可

注释

注释是给开发人员看的，程序在执行时会自动忽略注释的内容，所以我们通常使用注释来为代码添加一些解释说明或描述，以提高代码的可读性。支持单行注释和多行注释两种风格。

单行注释

单行注释以双斜杠//开头，//之后的所有内容都会看作是注释的内容，对//之前的内容则不会产生影响，

注意：单行注释 // 只对所在行有效。
另外，单行注释除了可以独占一行外，也可以在代码的末尾使用

多行注释

多行注释以/开头，并以/结尾，出现在/和/之间的所有内容都会看作是注释的内容。

使用注释来阻止程序执行

使用注释除了可以为代码添加解释说明或描述外，在调试代码的时候，我们也可以将不需要运行的代码注释起来，这样在运行程序时浏览器就会忽略注释中的代码。

HTML注释

JavaScript 还能够识别 HTML 注释的开始符JavaScript 则不能识别，因此若要使用 HTML 注释来注释 JavaScript 代码，应该使用 JavaScript 的单行注释将 HTML 注释的结束符–>注释掉，例如//–>

四种输出

控制台输出

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js四种输出</title>
</head>
<body></body>
</html>
<script>window.console.log('桃李不言下自成蹊');
</script>

页面输出

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js四种输出</title>
</head>
<body></body>
</html>
<script>window.console.log('桃李不言下自成蹊');window.document.write('桃李不言下自成蹊');
</script>

querySelector输出

querySelector查询选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js四种输出</title>
</head>
<body><span id="slogan">我爱你中国</span>
</body>
</html>
<script>window.console.log('桃李不言下自成蹊');window.document.write('桃李不言下自成蹊');             window.document.querySelector('#slogan').innerText='亲爱的母亲';
</script>

写入存文本后覆盖了之前的文本

弹出警告框alert输出

alert输出执行顺序优先于其他种输出

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js四种输出</title>
</head>
<body><span id="slogan">我爱你中国</span>
</body>
</html>
<script>window.console.log('桃李不言下自成蹊');window.document.write('桃李不言下自成蹊');             window.document.querySelector('#slogan').innerText='亲爱的母亲';window.alert('最是人间留不住，朱颜辞镜花辞树');
</script>

innerText与innerHtml

innerText 原样输出字符串
innerHTML 内容标签输出

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>innerText与innerHtml</title>
</head><body><span id="textContent">文本内容</span><br><span id="htmlContent">标签内容</span>
</body></html>
<script>let content = '<a href="https://www.baidu.com/">百度</a>'window.document.querySelector('#textContent').innerText = content;window.document.querySelector('#htmlContent').innerHTML = content;
</script>

变量的声明与赋值

let 和 var

在ES6之前，都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

ES6开始使用let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

let与var区别

let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

let 和var 重新声明

var允许在同一作用域中声明同名的变量，而let不可以

全局作用域

var 和 let 声明的变量在全局作用域中被定义时，两者非常相似
但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以

let aa = "let";
var bb = "var";
console.log(window.aa);
console.log(window.bb);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量</title>
</head>
<body>
</body>
</html>
<script>//  var (variable 变量) 有变量提升的风险var a = 10;// let 作用域相对安全let b = 20;a = 30;b = 40;window.console.log(a);window.console.log(b);
</script>

控制台输出

数据类型

常用数据类型

数值型 number（包括整数型和浮点型）
布尔型 boolean（1相当于true 0相当于false）
字符串 string（单引号或双引号）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型</title>
</head>
<body>
</body>
</html>
<script>// 数值型 布尔型 字符串// 特殊的数据类型 undefinedlet a = 20;let b = "桃李不言下自成蹊";let c = true// numberwindow.console.log(typeof(a));// stringwindow.console.log(typeof(b));// booleanwindow.console.log(typeof(c));let d = a + c;// 1相当于true 0相当于false 结果是21window.console.log(d);let e = a + b;// 字符串拼接 结果是20桃李不言下自成蹊window.console.log(e);
</script>

undefined 特殊数据类型

undefined 未定义（值的类型没有定义）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量</title>
</head>
<body></body>
</html>
<script>//  var (variable 变量) 有变量提升的风险var a = 10;// 作用域相对安全let b = 20;a = 30;b = 40;window.console.log(a);window.console.log(b);let e;window.console.log(e);
</script>

NaN 特殊数据类型

NaN: Not an Number

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型</title>
</head>
<body><input type="text" name="" value="桃李不言下自成蹊" id="account">
</body>
</html>
<script>// 数值型 布尔型 字符串// 特殊的数据类型 undefinedlet a = 20;let b = "桃李不言下自成蹊";let c = true// numberwindow.console.log(typeof(a));// stringwindow.console.log(typeof(b));// booleanwindow.console.log(typeof(c));let d = a + c;// 1相当于true 0相当于false 结果是21window.console.log(d);let e = a + b;// 字符串拼接 结果是20桃李不言下自成蹊window.console.log(e);// NaN Not an Numberlet account = window.document.querySelector('#account').value;window.console.log(++account);</script>

for循环

for循环遍历输出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循环</title>
</head>
<body></body>
</html>
<script>for (let index = 0; index < 10; index++) {window.console.log(index);}
</script>

for循环遍历输出数值中的偶数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循环</title>
</head>
<body></body>
</html>
<script>for (let index = 0; index < 10; index++) {if (index % 2 ==0) {window.console.log(index);}}
</script>

for循环遍历列表

javascript中使用const修饰常量（Java中使用final修饰常量）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body></body>
</html>
<script>let array = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]for (let index = 0; index < array.length; index++) {const element = array[index];window.console.log(element);}
</script>

多种形式遍历列表

forof遍历列表

forof遍历列表直接获取元素的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body></body>
</html>
<script>let array = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]// forof 直接获取元素的值for (const element of array) {window.console.log(element);}window.console.log('------------------------');// forin 获取列表下标索引值for (const index in array) {const element = array[index];window.console.log(element);}
</script>

forin遍历列表

forin 遍历列表获取列表下标索引值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body></body>
</html>
<script>let array = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]// forin 获取列表下标索引值for (const index in array) {const element = array[index];window.console.log(element);}
</script>

forEach遍历列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body></body>
</html>
<script>let array = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]/*  array   被遍历的数组element array里面每一个元素的值=>      箭头函数*/array.forEach(element => {window.console.log(element);});
</script>

数组列表

数组列表的两种声明方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组</title>
</head>
<body></body>
</html>
<script>let arr0 = [0,1,2,3,4];window.console.log(arr0);let arr1 = new Array(0,1,2,3,4);window.console.log(arr1);// new Array(5) 是指数组长度是5let arr2 = new Array(5);window.console.log(arr2);
</script>

数组新增和删除

数组新增

push() 追加元素到数组中
unshift()在数组起始位置插入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组新增和删除</title>
</head>
<body>
</body>
</html>
<script>let arr0 = ['java', 'c++'];window.console.log(arr0);// push 追加元素到数组中let a = arr0.push('python');window.console.log(a);window.console.log(arr0);// unshift 在数组起始位置插入let b = arr0.unshift('php');window.console.log(b);window.console.log(arr0);
</script>

数组删除

pop()以弹栈的方式获取数组最后最大下标位置上的元素
shift()以弹栈的方式获取数组最前最小下标位置上的元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组新增和删除</title>
</head>
<body>
</body>
</html>
<script>let arr0 = ['java', 'c++'];window.console.log(arr0);// 以弹栈的方式获取数组最后最大下标位置上的元素let c = arr0.pop();window.console.log(c);window.console.log(arr0);// 以弹栈的方式获取数组最前最小下标位置上的元素let d = arr0.shift();window.console.log(d);window.console.log(arr0);
</script>

截取数组

slice

slice截取数组 (起始index，结束index) 注意不包含结束index位置上的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组的截取</title>
</head>
<body></body>
</html>
<script>let array = [0,1,2,3,4,5,6,7,8,9];window.console.log(array);// slice (起始index，结束index) 注意不包含结束index位置上的元素let newArr = array.slice(3,7);window.console.log(newArr);window.console.log(array);
</script>

splice

splice (起始index，截取长度) 截取后注意原数组的长度为截取后的数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组的截取</title>
</head>
<body></body>
</html>
<script>let array = [0,1,2,3,4,5,6,7,8,9];window.console.log(array);// splice (起始index，截取长度) 注意原数组的长度为截取后的新数组let newArr = array.splice(3,5);window.console.log(newArr);window.console.log(array);
</script>

截取长度后添加元素是修改
截取长度后不添加元素是删除

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组的截取</title>
</head>
<body></body>
</html>
<script>let array = [0,1,2,3,4,5,6,7,8,9];window.console.log(array);// splice (起始index，截取长度) let newArr = array.splice(3,2,'aa','bb');window.console.log(newArr);window.console.log(array);
</script>

splice截取长度为0时添加元素是按位置添加

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组的截取</title>
</head>
<body></body>
</html>
<script>let array = [0,1,2,3,4,5,6,7,8,9];window.console.log(array);// splice (起始index，截取长度) let newArr = array.splice(3,0,'aa','bb');window.console.log(newArr);window.console.log(array);
</script>

数组排序

array.sort()方法：升序
array.reverse()方法：降序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组排序</title>
</head>
<body></body>
</html>
<script>let array = [4,6,5,3,2,1,0,8,7,9];array.sort();window.console.log(array);array.reverse();window.console.log(array);
</script>

随机数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机输出所有人的名字</title>
</head>
<body></body>
</html>
<script>let names = ['小王','小李','小张','小吴'];let count = names.length;for (let index = 0; index < count; index++) {// 生成随机数let n = Math.floor(Math.random()*names.length)window.console.log(names[n])names.splice(n,1);}
</script>