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>
相关推荐
烛阴31 分钟前
Mix
前端·webgl
代码续发44 分钟前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_1 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen2 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
超浪的晨2 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
hui函数2 小时前
掌握JavaScript函数封装与作用域
前端·javascript