javascript基础

javascript

01-javascript介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>
<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>

以上代码实现点击哪个按钮，哪个按钮的颜色变为粉色

02-javascript书写位置

01-内部js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 内部js-->
    <script>
        // 页面弹出警示框
        alert('hello, js')
    </script>
</body>
</html>

02-外部js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

03-内联js

03-javascript注释和结束符

04-js 输入和输出语句和字面量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    // 1.文档输出内容
    document.write("hello, this is a output");
    document.write('<h1> hello, js</h1>')
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    // 1.文档输出内容
    document.write("hello, this is a output");
    document.write('<h1> hello, js</h1>');
    console.log("控制台输出！");
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    // 1.文档输出内容
    document.write("hello, this is a output");
    document.write('<h1> hello, js</h1>')
    console.log("控制台输出！")
    // 输入语句
    prompt("请输入您的喜好：")
  </script>
</body>
</html>

js 书写位置：标签内联， script 标签内部， script 标签引用外部js 文件

05-变量的声明和赋值

06-变量的更新以及输入用户名案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let uname = prompt("请输入姓名");
      document.write(uname);
  </script>
</body>
</html>

07-交互两个变量案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let num1 = 10;
      let num2 = 20;
      let temp = num1;
      num1 = num2;
      num2 = temp;
      console.log(num1, num2);
  </script>
</body>
</html>

08-变量的本质和命名规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let username = prompt("please input your name");
      let age = prompt("please input your age");
      let gender = prompt("please input your gender");
      document.write(username);
      document.write(age);
      document.write(gender);
  </script>
</body>
</html>

09-var 和 let 区别

10-数组的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let arr = ['嘿嘿', "哈哈", "啦啦"];
      document.write(arr[1]);
  </script>
</body>
</html>

11.常量

12.数字数据类型和算术运算符

13.字符串数据类型及拼接

14.模版字符串

15.布尔型、null、undefined、类型检测

16.隐式转换和显示转换

17.小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center {
            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 class="center">订单确认</h2>

  <script>
      // 用户输入
      let price = +prompt('请输入商品价格：')
      let num = +prompt('请输入商品数量：')
      let address = prompt('请输入收获地址:')
      // 计算总额
      let total = price * num
      // 页面打印渲染
      document.write(`
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收获地址</th>
            </tr>
            <tr>
                <td>xx手机</td>
                <td>${price}元</td>
                <td>${num}</td>
                <td>${total}元</td>
                <td>${address}</td>
            </tr>
        </table>
      `)
  </script>
</body>
</html>