#JavaScript(基础入门保姆级教程)【初级01】

<!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>
<style>
  .pink {
    background-color: pink;
  }
</style>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>

</html>

1.2，JavaScript的书写位置.

内部JavaScript

直接写在html文件里，用script标签包主

规范：script标签写在</body>上面

拓展：alert('你好，js')页面弹出警告对话框

<!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>
  <!-- 内部js -->
  <script>
    // 页面弹出警示窗
    alert('你好，js')
  </script>
</body>

</html>

为什么要把js代码放在Html文件底部

外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。

代码

<!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>
 <script src="./js/my.js"></script>
        //中间不要写内容
</body>

</html>

内联JavaScript

代码写在标签内部

语法：

1.3，JavaScript的注释.

1.4，JavaScript的结束符.

结束符： ；可以不写

1.5，输入和输出语法.

1.5.1，输出语句

<!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>
  <script>
    //文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是一级标题</h1>')
    //控制台打印输出
    console.log('调试人员用的')
    console.log('日志');
    //弹窗
    alert('hello world')
  </script>
</body>

</html>

1.5.2，输入语句

1.6，字面量.

在计算机中描述事和物

二，JavaScript变量

2.1.1，理解变量是计算器存储数据的“容器”

大白话：变量就是一个装东西的盒子。

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个装东西的纸箱子。

2.1.2，变量的基本使用

2.1.3，声明变量：

语法：

声明变量有两部分构成：声明关键字，变量名（标识）
let 即关键字（let:允许，许可，让，要）

2.1.4，变量的赋值

用 “=” 赋值

2.1.5，更新变量

2.1.6，小案例

2.1.6.1，小案例一：输入输出小案例，跳出弹窗输入数据，在浏览器打印出数据

// 1,用户输入 2，内部处理保存数据 3，打印输出

具体代码实现

<!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>
  <script>
    // 1,用户输入 2，内部处理保存数据 3，打印输出
    let uname = prompt("请输入姓名")
    document.write(uname)
  </script>
</body>

</html>

2.1.6.2，小案例二：交换变量的值

有两个变量：num1里面放的是10，num2里面放的是20

交换后 num1里面放的是20，num2里面放的是10

具体实现

<!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>
  <script>
    let num1 = 10
    let num2 = 20
    let num;
    num = 10
    num1 = 20
    num2 = 10
    console.log(num1, num2);
  </script>
</body>

</html>

2.1.7，变量的本质

内存：计算机储存数据的地方，相当于一个空间

变量本质：是程序在内存中申请的一块来存放数据的小空间（临时存储空间）

解释：在内存中开辟了一个空间空间名字叫goods/age ,存的数据为 ‘电脑’/18

2.1.8 ，变量的命名规则与规范

规则：不能用关键字

只能用下划线，字母，不能用数字开头，$

字母严格区分大小写

起变量名要规范

小驼峰： userName

2.1.9，小案例

<!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>
  <script>
    let uname = prompt("请输入您的姓名：,")
    document.write(uname)
    let age = prompt("请输入您的年龄：,")
    document.write(age)
    let gender = prompt('请输入您的性别：,')
    document.write(gender)
  </script>
</body>

</html>

2.2.0,Var 和Let关键字的区别

三，数组的基本使用

3.1.1，声明的语法

    let 数组名 = ["数据1","数据2","数据3"]

3.1.2，数组长度查询

数组.length 查数组长度

   //声明数组
    let arr = [1, 2, 3, 4]
    //使用数组
    console.log(arr.length) //4

四，常量

4.1.1，常量的声明方式

const 名字 = 赋值

常量必须给赋值，不然会报错

五，数据类型

5.1.1，JS数据类型分类

5.1.2,补充JS是弱数据类型语言

5.1.3，基本数据类型

5.1.3.1，数字类型（Number）

not a number NaN:代表一个计算错误,它是一个不正确的或者一个未定义的数学操作所得到的结果

其次NaN是有粘性的，任何对NaN的操作都会返回NaN

5.1.3.2，字符串类型（String）

反引号的位置

字符串拼接

<!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>
  <script>
    let age = 19
    document.write('我今年' + age + '岁了')
  </script>
</body>

</html>

模板字符串（必须用反引号）

语法： ·${变量名}·

<!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>
  <script>
    let age = 19
    document.write(`我今年${age}岁了`)
  </script>
</body>

</html>

5.1.3.2.1，小案例（练）

页面弹出对话框，输入名字和年龄，页面显示我叫xxx,今年xxx岁了。

<!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>
  <script>
    let age = prompt("输入年龄")
    let userName = prompt("输入姓名")
    document.write(`我叫${userName},今年${age}岁了`)

  </script>
</body>

</html>

5.1.3.3，布尔型(boolean)，未定义(undefined)，空（null）

boolean --> 真（true） or 假（false）

undefined 未定义类型未赋值的未定义的
声明一个变量未赋值

空数据类型（null）

null 和undefined 区别

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null (表示尚未创建的一个对象)

5.1.4，检测数据类型（typeof）

5.1.5，数据类型的转换

为什么转换

prompt得到的数据默认为字符串类型的

隐式转换
显示转换

补充 parseFloat

5.1.6，综合小案例

视频演示+代码

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>
    h2 {
      text-align: center;
    }

    table {
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;

    }
  </style>
</head>

<body>
  <h2>订单确认</h2>

  <script>
    let goodsName = prompt("输入商品名称")
    let price = +prompt("输入价格")
    let num = +prompt("输入商品数量")
    let total = price * num
    let address = prompt("输入收货地址")
    document.write(`
      <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>${goodsName}</td>
      <td>${price}￥</td>
      <td>${num}</td>
      <td>${total}￥</td>
      <td>${address}</td>
    </tr>
  </table>
  
    `)
  </script>
</body>

</html>