javaScript学习 - 技术栈

1.组成：

JavaScript包括ECMAScript（基础语法）和Web APIs

Web APIs包括DOM，BOM

2.MDN网站搜索各种属性知识点

3.案例，点击按钮变色

html 复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>联系</title>
  <style>
    .pink {
      background-color: pink;
    }
  </style>
</head>

<body>
  <button class="pink">b1</button>
  <button>b1</button>
  <button>b1</button>
  <button>b1</button>
  <script>
    let btns = document.querySelectorAll('button')

    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'

      })
    }
  </script>
</body>

</html>

4.JavaScript书写位置

内部位置：写在body里面，<script>里面。通常写在页面底部

外部：/body上方，<script src=''myjs.js''></script>

内联位置：写在标签内部<button οnclick="alert('xxxx')">点击我</button>

5.注释

单行：ctrl+/

多行 shift+alt+a

6.结束符

分号可写可不写

7.输入输出语法

输出：

document.write（'输出内容'），里面可以直接写标签

alert（'输出内容'）

控制台打印输出：console.log（'xxxx'）

输入：

prompt（'请输入你的年龄'）显示一个对话框，提示用户输入文字

8.代码执行顺序

按照html文档流顺序执行JavaScript代码

alert（）和prompt（）会跳过页面渲染先被执行

9.字面量

描述的事/物

数字/字符串/数组/对象字面量

10.常量

const声明，里面的值不会改变

声明的时候必须赋值

11.数据类型

基本数据类型：数字型，字符串，布尔，未定义型，空类型null

引用数据类型：对象object

NaN进行任何操作都是NaN（不是一个数字）

12.字符串

单引号双引号反引号包括的都是字符串

字符串拼接：+

模版字符串：不需要用加号拼接了，`我今年${age}岁了`（用反引号）

13.检测数据类型

type x

14.类型转换

隐式转换：1+'2' (字符串) 2-'2' (数字0) +12（数字12） +'123'（数字123 ）

显示转换：Number（str） parseInt（数据）只保留整数，parseFloat（数据）可以保留小数

html 复制代码

<body>


  <script>
    let num1 = +prompt('输入第一个数')
    let num2 = +prompt('输入第二个数')

    alert(`计算的结果是：${num1 + num2}`)

  </script>
</body>

案例：提示输入制作表格

html 复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>练习</title>
  <style>
    h3 {
      text-align: center;
    }

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

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

    th {
      padding: 3px 30px;
    }
  </style>
</head>

<body>

  <script>
    let price = +prompt('请输入商品价格')
    let num = +prompt('请输入商品数量')
    let add = prompt('请输入收货地址')
    let total = price * num
    document.write(`
      <h3>订单确认</h3>
      <table>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米手机qijian</td>
          <td>${price}元</td>
          <td>${num}</td>
          <td>${total}元</td>
          <td>${add}</td>

        </tr>
      </table>

    `)
  </script>


</body>

</html>