JavaScript入门到精通全套资料，以及核心进阶ES6语法，API，js高级等基础知识和实战教程

1.JavaScript的介绍

JavaScript是什么，作用，组成部分有哪些？

是一种运行在客户端（浏览器）的编程语言，可以实现人机交互效果。

作用是做网页特效（轮播图等），表单验证（对表单数据的合理化进行判断），数据交互（获取后台数据给前端）服务端编程（node.js）。

ECMAScript:JavaScript语言基础

Web APls:DOM 操作文档，比如对页面元素进行移动，大小，添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等等

另外分享一个JavaScript的权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

与html，css，js，3个一起配合才能做出想要的交互效果

1.2 JavaScript书写位置

目标：知道如何向添加页面JavaScript

顺序：行内样式>内部样式=外部样式（与CSS一样）

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>                     <body>
  <!-- 内部js -->             <!--通过外部引入js文件,通过script标签引入HTML页面中-->
  <script>                    <script>
    alert('你好，js~')           <script src="my.js"></script>
  </script>                   
</body>                     </body>

</html>                     </html>

                            设文件夹里外部文件：
                              alert('我是外部的 js文件')

补充:alert('~'),相当于是javascript自带的""小弹窗工具，注意不是函数，是javascript的一个内置对象方法。

注意事项：书写位置尽量写到文档末尾/body前面,外部js标签中间不要写代码会被忽略

1.2.1书写位置练习

用外部和内部两种JavaScript书写方式，页面发表弹出：健康，快乐。

时间：五分钟

1.3 JavaScript注释和结束符

单行注释：// 快捷键：ctrl+/

多行注释：/* */ 快捷键：shift+alt+a

结束符就是；加不加都可以，javascript引擎可以自动识别

1.4. JavaScript输出输入语法

一共4个输出语法：

1.Document.write('文档输入内容')

2.alert('页面弹出警示框')

3.console.log('控制台输入内容')

4.prompt('显示一个对话框，框内包含文字信息，可用于提示用户输入信息'

补充：alert和prompt会跳过页面渲染先被执行

1.4.1 输出练习（5分钟）

浏览器中弹出对话框：你好 js~

页面中打印输出：JavaScript 我来了！

页面控制台输出：能不能看见我呀？)

2. 变量（计算机用于存储数据的容器）

2.1. 变量基本使用

目标：声明一个变量并且赋值操作

1.声明一个变量要用let

javascript 复制代码

声明并且赋值一个变量（变量初始化）
let age=18

2.1.1 变量练习 5分钟

1.声明一个变量，用于存放用户购买的商品数量（num）为20件

2.声明一个变量，用于存放用户的姓名（uname）为小李

javascript 复制代码

<body>
  <script>
    let num = 20
    let uname = '小李'
    console.log(num)
    console.log(uname)
  </script>
</body>

补充：let num = 20，uname = '小李'
（也可以写成这种形式但是不推荐）

2.2 变量更新

javascript 复制代码

let age=18
    age=19

注意:let声明只有一次，不允许重复声明
不可以
let age=18
let age=19，这样写会报错

2.2.1 变量练习1-弹出名字

javascript 复制代码

<script>
    let uname = prompt('请输入你的名字')
    document.write(uname)
    console.log(uname)
  </script>

变量练习2-交换变量的值

javascript 复制代码

<script>
    let temp
    let num1 = 10
    let num2 = 20
    temp = num1
    num1 = num2
    num2 = temp
    document.write(num1)
    document.write(num2)
  </script>
注意：编程语言里面都是把右边给左边，临时变量不用加会自动销毁

2.3 变量的命名规则

规则：不能用关键字，只能用下划线，字母，数字，$组成，并且数字不能开头，字母严格区分大小写。

3. 数组（Array）-变量拓展------一种将一组数据存储在单个变量名下的优雅方式

区别：变量一次只能存储一个数据，数组一次可以存储一组数据。

声明语法：let 数组名=[数据1,数据2,···,数据n]

3.1 数组取值练习

需求：定义一个数组，里面存放星期一，星期二······星期日共7天，在控制台输出：星期日

javascript 复制代码

<script>
    let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    console.log(arr[6])
  </script>

术语：数组中保存的每个数据叫数组元素，下标为数组中数据的编号，长度为数组中元素的个数。

4. 常量

声明语法：const 常量名=值

常量使用时的注意事项:1.常量不允许更改值。 2.常量声明的时候必须负责。

其他和变量一样

5. 数据类型

5.1 数据类型的检测

语句：typeof x 或者 type(x)

javascript 复制代码

 <script>
    let age = 18
    let uname = '小朱'
    let flag = false
    let buy
    let obj = null
    console.log(typeof age)
    console.log(typeof uname)
    console.log(typeof flag)
    console.log(typeof buy)
    console.log(typeof obj)
  </script>

运行结果:

5.2 补充类型之间的隐式转换和显示转换

隐式转换规则：

+号两边只要有一个是字符串，就会把另外一个转成字符串；

+号作为正号解析可以转换成数字类型；

除了+号外的算术运算符都会把数据转为数字类型

javascript 复制代码

<script>
    console.log(11 + 11)              22
    console.log('11' + 11)            1111
    console.log(11 - 11)              0
    console.log('11' - 11)            0
    console.log(1 * 1)                1
    console.log('1' * 1)              1
    console.log(typeof '123')         string
    console.log(typeof +'123')        number
    console.log(+'11' + 11)           22
  </script>

显示转换规则：

有3种转换形式1.Number(数据)；2.parseint(数据)；3.parsefloat(数据)；

转为数字类型转换结果保留整数转换结果可以保留小数

补充：Number转时如果字符串内容中有非数字，转换失败结果为NaN(也是number类型的数据代表非数字)

javascript 复制代码

<script>
    // number显示转换
    let str = '123'
    console.log(Number(str))
    console.log(Number('yangyu'))
    // parseint转换
    console.log(parseInt('12.34'))
    console.log(parseInt('abc12'))
    console.log(parseInt('12px'))
    // parsefloaat
    console.log(parseFloat('abc12.34px'))
    console.log(parseFloat('12.99'))
    console.log(parseFloat('12.52px'))
  </script>

或者：+放最前面也可以进行转换
      例如：let num1=+prompt('请输入数字')

代码结果

6.1 赋值，自增，逻辑，比较运算符

赋值与自增运算符与C语言一样，我在C语言入门专栏中写过

比较运算符中要补充：

= 是赋值

== 是判断

=== 是全等开发中判断是否相等强烈推荐用===

6.1.2 掌握运算符优先顺序

优先顺序从上到下，从左到右

（）

++ -- ！

先*/%后+-

> >= < <=

== != === !==

先&&后||

=

，

7. 语句

7.1 if分支语句

if（判断式）{

执行的内容

}

else if（条件2）{

条件2成立执行的内容

}

else {

不满足条件执行的内容

}

判断式有两个结果：turn执行 false不执行。

另外除了0以外的所有数字都为真； 0为假。

另外除了空字符串以外的字符都为真；空字符串为假。

7.2 switch分支语句

switch(){

case 1：

执行的内容

break

case 2：

执行的内容

break

case 3：

执行的内容

break

}

7.3 while循环语句

while（循环条件）{

要重复执行的代码（循环体）

}

例如

let i=1

while（i<=3）{

document.write('我会循环3次<br>')

i++

}

退出循环：break continue的区别：与C语言一样可以去看我写的C语言专栏

7.4 for循环语句（明确次数时用for）

for(变量初始值；终止条件；变量变化量){

循环体

}

for的最大价值：循环遍历数组

7.4.1 练习遍历数组：

需求：请将数组['马超','赵云','妲己','关羽','黄忠']依次打印出来

javascript 复制代码

<script>
    let arr = ['马超', '赵云', '妲己', '关羽', '黄忠']
    let num = 0
    for (let num = 0; num < 5; num++) {
      document.write(arr[num])
    }
  </script>

补充假如遍历途中不需要遍历'妲己'，则需要用到continue

javascript 复制代码

let arr = ['马超', '赵云', '妲己', '关羽', '黄忠']
    let num = 0
    for (let num = 0; num < 5; num++) {
      if (num === 2) {
        continue
      }
      document.write(arr[num])
    }

7.4.2 循环嵌套99乘法表练习：

代码如下：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px rgb(255, 192, 203, .4);
      background-color: rgb(255, 192, 203, .4);
      color: hotpink;
    }
  </style>
</head>

<body>
  <script>
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        let num = i * j
        document.write(`<span>${i}*${j}=${num}</span>`)
      }
      document.write(`<br>`)
    }
  </script>
</body>

</html>

7.5 无限循环：

while(true)

for(;;)

这两种形式可以构成无限循环，并且都需要break退出循环

7.5.1三元运算符

条件？满足条件时执行的代码：不满足条件时执行的代码

7.6 断点调试

作用：可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试工具：1.按F12打开开发者工具2.点到源代码一栏3.选择代码文件

JavaScript入门到精通全套资料，以及核心进阶ES6语法，API，js高级等基础知识和实战教程

1.JavaScript的介绍

1.2 JavaScript书写位置

1.2.1书写位置练习

1.3 JavaScript注释和结束符

1.4. JavaScript输出输入语法

1.4.1 输出练习 （5分钟）

2. 变量（计算机用于存储数据的容器）

2.1. 变量基本使用

2.1.1 变量练习 5分钟

2.2 变量更新

2.2.1 变量练习1-弹出名字

变量练习2-交换变量的值

2.3 变量的命名规则

3. 数组（Array）-变量拓展------一种将一组数据存储在单个变量名下的优雅方式

3.1 数组取值练习

4. 常量

5. 数据类型

5.1 数据类型的检测

5.2 补充类型之间的隐式转换和显示转换

隐式转换规则：

6.1 赋值，自增，逻辑，比较运算符

6.1.2 掌握运算符优先顺序

7. 语句

7.1 if分支语句

7.2 switch分支语句

7.3 while循环语句

7.4 for循环语句（明确次数时用for）

7.4.1 练习遍历数组：

7.4.2 循环嵌套99乘法表练习：

7.5 无限循环：

7.5.1三元运算符

7.6 断点调试

1.4.1 输出练习（5分钟）