黑马程序员-JavaScrip-day01

发布于：2024-09-18 ⋅ 阅读:(62) ⋅ 点赞:(0)

文章目录

JavaScript简介和体验

JavaScript:是一种运行在客户端（浏览器）的编程语言；
组成：ECMAScript（基础语法）web APIs（DOM、BOM）

<!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>
    .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>

在这里插入图片描述
在这里插入图片描述

01-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>
  <link rel="stylesheet" href="./1.js">
</head>

<body>

  <script>
    alert('努力，奋斗')
  </script>
</body>

</html>

在这里插入图片描述

外部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>

  <script src="./1.js"></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>

  <button onclick="alert('逗你玩~~~')"></button>
</body>

</html>

在这里插入图片描述

02-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>

  <button onclick="alert('逗你玩~~~')"></button>
</body>
<script>
  // kcmdk
  /* kmckc
  */
  alert('1')
  alert('2')
</script>

</html>

在这里插入图片描述
在这里插入图片描述

03-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>
  <script>
    alert('nihao JS')
    document.write('JS 我来了')
    console.log('他会魔法吧')
    prompt('请输入年龄')
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

04-变量的声明与复制

在这里插入图片描述

<!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 num = 20
    let unname = '张三'
    console.log(num)
    console.log(unname)

  </script>
</body>

</html>

在这里插入图片描述

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

<!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 = 18
    age = 19
    document.write(age)

    let name = prompt('请输入名字')
    document.write(name)
  </script>
</body>

</html>

在这里插入图片描述

06-交换变量

<!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 = "王铮亮"
    let num2 = "石凯"
    let temp
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1, num2)
  </script>
</body>

</html>

在这里插入图片描述

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

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

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

08-数组的基本使用

<!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 names = ['张三', 'lisi', 'wangwu']
    console.log(names[0]);

  </script>
</body>

</html>

在这里插入图片描述

09-常量

<!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>
    const PI = 3.14
    console.log(PI);

  </script>
</body>

</html>

在这里插入图片描述

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>
    const PI = 3.14
    let r = prompt('请输入圆的半径')
    console.log(PI * r * r);


  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

11-字符串类型

<!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 str = '12345678'
    console.log(str)
    console.log('str')
    console.log(1 + 1)
    console.log('pink' + '老师')

    let age = 18
    document.write('今年我' + age + '岁了')




  </script>
</body>

</html>

在这里插入图片描述

12-模板字符串

<!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 name = prompt('请输入您的名字')
    let age = prompt('请输入您的年龄')
    document.write(`大家好，我叫${name},我今年${age}岁了`)
  </script>
</body>

</html>

在这里插入图片描述

13-bool、null、undefine

<!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 isBool = true
    console.log(isBool)
    console.log(3 > 4);

    let num
    console.log(num)

    // let odj = null
    // console.log(obj);

    console.log(undefined + 1)
    console.log(null + 1)
  </script>
</body>

</html>

在这里插入图片描述
去掉注释符号：
在这里插入图片描述

14-数据类型

<!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 num = 10
    console.log(typeof num)

    let str = '122'
    console.log(typeof str)

    let isBool = true
    console.log(typeof isBool)

    let name
    console.log(typeof name)

    let obj = null
    console.log(typeof obj)



  </script>

</body>

</html>

在这里插入图片描述

15-隐式转换、显示转换

在这里插入图片描述
在这里插入图片描述

NaN也是数字类型，代表非数字

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

综合案例-交互表格

<!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 {
      height: 80px;
      margin: 0 auto;
      text-align: center;
      border-collapse: collapse;
    }
    th {
      padding: 5px 30px;
    }
    table,
    th,
    td {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <h2>订单确认</h2>
  <script>
    let price = +prompt('请输入价格')
    let num = +prompt('请输入购买数量')
    let address = prompt('请输入地址')

    document.write(`
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>总价</th>
              <th>收货地址</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>小米</td>
              <td>${price}元</td>
              <td>${num}个</td>
              <td>${price * num}</td>
              <td>${address}</td>
            </tr>
          </tbody>
        </table>
    `)
  </script>
</body>

</html>

在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布