#JavaScript(WebAPIs)【01】

已于 2023-09-07 23:51:49 修改
阅读量69 收藏 1
点赞数 1
文章标签： javascript 前端 开发语言
于 2023-09-07 00:51:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79501633/article/details/132659327
版权

目录

一，Web API基本认知

1.1,变量声明

1.2，Web API 的作用和分类 

1.3,什么是DOM

 1.4，DOM树

1.5，DOM对象（重要）

1.5.1,DOM对象

1.5.2，DOM的核心思想 演示

1.5.3，document对象

1.6，获取DOM元素

1.6.1，根据CSS选择器来获取DOM元素（重点）

1.6.2，选多个元素

1.6.3，其他获取DOM元素方法（了解）比较古老的方法了

 1.7，操作元素的内容

1.7.1，innerText

1.7.2，innerHTML

1.8，抽奖小案例

1.9,操作元素常用属性

1.9.1，小案例随机刷新图片刷新

1.9.2，操作元素样式属性 

1.9.3，随机更换背景图像案例

1.9.4，通过类名修改（修改数量较多的情况）

1.9.5，通过classList操作类控制CSS

1.9.6，随机轮播图案例（在改bug）略

1.9.7，获取表单属性

1.9.8，自定义属性

二，间歇函数（定时器）

2.1，间歇函数

2.1，用户注册倒计时

2.3，定时轮播图（略）

三，事件监听

一，Web API基本认知

1.1,变量声明

  • 变量声明有三个 var let 和const
  • 建议 const 优先，尽量使用const 
  • 有了变量先给const ，如果发现变量可变，就改为let

 const是没问题的

  <script>
    const arr = ["red", "blue"]
    arr.push('clor')
    console.log(arr);
  </script>

 const 有问题的情况

  <script>
    const arr = ["red", "blue"，'clor']
    arr = [1, 2, 3]
    console.log(arr);
  </script>

1.2，Web API 的作用和分类 

  • 作用：就是使用JS去操作Html 和浏览器
  • 分类DOM（文档对象模型），BOM（浏览器对象模型）

1.3,什么是DOM

  • DOM（Document Object Model  文档对象模型）是用来呈现以及计算任意HTML或XML文档交互的API
  • 白话文：DOM是浏览器提供的一套专门用来操作网页内部的功能
  • DOM作用

 1.4，DOM树

  • DOM树是什么
  • 作用 ：文档树直观的体现了标签与标签之间的关系

 

1.5，DOM对象（重要）

1.5.1,DOM对象

  • DOM对象：浏览器根据html标签生成的JS对象
  • 所以标签属性都可以在这个对象上找到.
  • 修改这个对象的属性会自动映射到标签身上

1.5.2，DOM的核心思想 演示

将网页内容当做对象来处理

dir()方法获得标签对象（object）

在JS中div叫DOM对象

<!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>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    //对象
    console.dir(div);
  </script>
</body>

</html>

1.5.3，document对象

  • 是DOM里提供的一个对象

  • 所以它提供的属性和方法都是用来访问和操作网页内容的 

  • 网页所有内容都在document里面

1.6，获取DOM元素

  • 根据CSS选择器获取DOM元素（重点）
  • 其他获取DOM元素方法（了解）
  • 查找元素DOM就是利用JS选择页面中标签元素

1.6.1，根据CSS选择器来获取DOM元素（重点）

语法：

  <script>
    document.querySelector('css选择器')
  </script>

参数：

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的第一个元素，一个HTMLelement

如果有匹配到，则返回空（null）

1.6.2，选多个元素

语法：

  <script>
    document.querySelectorAll('css选择器')
  </script>

演示：

<!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>
  <ul>
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    //匹配所以的li  返回的是一个列表 []
    const lis = document.querySelectorAll('ul li')
    console.log(lis);
    console.dir(lis)
  </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>
  <ul>
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <p id="nav">导航栏</p>
  <script>
    const nav = document.querySelector('#nav')
    //对象.属性 
    nav.style.color = 'red'
    //匹配所以的li  返回的是一个列表 []
    const lis = document.querySelectorAll('ul li')
    console.log(lis);
    console.dir(lis)

  </script>
</body>

</html>

 document.querySelectAll() 获取的是一个伪数组

 哪怕只有一个元素，通过querySelectall()获取过来的也是一个伪数组，里面只有一个元素而已

<!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>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <p id="nav">导航栏</p>
  <script>
    //获取元素
    const lis = document.querySelectorAll('.nav li')
    //得到的是一个伪数组
    //注意：
    //哪怕只有一个元素，通过querySelectall()获取过来的也是一个伪数组，里面只有一个元素而已
    console.log(lis);
    //遍历每一个li对象
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i]);
    }
    //操作一个
    const p = document.querySelectorAll('#nav')
    p[0].style.color = 'red'
  </script>
</body>

</html>

 小结：

1.6.3，其他获取DOM元素方法（了解）比较古老的方法了

 1.7，操作元素的内容

  • 对象.innerText属性
  • 对象.innerHTML 属性

1.7.1，innerText

<!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>
  <div class="box">我是文字内容</div>


  <script>
    const box = document.querySelector('.box')
    //对象.innerText 属性
    //获取文字内容
    console.log(box.innerText)
    //修改文字内容
    box.innerText = '我是一个盒子'
    //<strong>我是一个盒子</strong> innerText  不解析标签
    box.innerText = '<strong>我是一个盒子</strong>'
  </script>

</body>

</html>

1.7.2，innerHTML

<!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>
  <div class="box">我是文字内容</div>


  <script>
    const box = document.querySelector('.box')
    //对象.innerText 属性
    //获取文字内容
    console.log(box.innerText)
    //修改文字内容
    // box.innerText = '我是一个盒子'
    //<strong>我是一个盒子</strong> innerText  不解析标签
    // box.innerText = '<strong>我是一个盒子</strong>'innerHeighth

    //innerHTML 解析标签
    console.log(box.innerHTML);
    //box.innerHTML = '我要更换'
    box.innerHTML = '<strong>我要更换</strong>'
  </script>

</body>

</html>

1.8，抽奖小案例

视频演示：

代码：

<!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>
    .wrapper {
      width: 840px;
      height: 420px;
      padding: 100px 250px;
      box-sizing: border-box;
      background-color: url(./imag/Background.jpg) no-repeat center / cover;
    }
  </style>
</head>

<body>
  <div>
    <strong></strong>
    <h1>一等奖:<span id="one"> </span></h1>
    <h3>二等奖:<span id="two"> </span></h3>
    <h5>三等奖:<span id="three"> </span></h5>
    <script>
      //声明数组
      const personArr = ['小明', '小红', '小兰', '小黑', '小黑子']
      //先做一等奖
      const random = Math.floor(Math.random() * personArr.length)
      console.log(personArr[random]);
      //获取one元素
      const one = document.querySelector('#one')
      //随机抽一个人 为一等奖
      one.innerHTML = personArr[random]
      //删除被抽中的那个人
      personArr.splice(random, 1)
      console.log(personArr);

      //再做二等奖
      const random2 = Math.floor(Math.random() * personArr.length)
      console.log(personArr[random2]);
      //获取two元素
      const two = document.querySelector('#two')
      //随机抽一个人 为二等奖
      two.innerHTML = personArr[random2]
      //删除被抽中的那个人
      personArr.splice(random2, 1)
      console.log(personArr);

      //再做三等奖
      const random3 = Math.floor(Math.random() * personArr.length)
      console.log(personArr[random3]);
      //获取three元素
      const three = document.querySelector('#three')
      //随机抽一个人 为三等奖
      three.innerHTML = personArr[random3]
      //删除被抽中的那个人
      personArr.splice(random3, 1)
      console.log(personArr);
    </script>
  </div>

</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>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      padding: 100px 250px;
      box-sizing: border-box;
      background-color: url(./imag/Background.jpg) no-repeat center / cover;
    }
  </style>
</head>

<body>
  <div>
    <strong></strong>
    <h1>一等奖:<span id="one"> </span></h1>
    <h3>二等奖:<span id="two"> </span></h3>
    <h5>三等奖:<span id="three"> </span></h5>
    <script>
      //声明数组
      const personArr = ['小明', '小红', '小兰', '小黑', '小黑子']
      //先做一等奖
      const random = Math.floor(Math.random() * personArr.length)
      console.log(personArr[random]);
      //获取one元素
      const one = document.querySelector('#one')
      //随机抽一个人 为一等奖
      one.innerHTML = personArr[random]
      //删除被抽中的那个人
      personArr.splice(random, 1)
      console.log(personArr);

      //再做二等奖
      const random2 = Math.floor(Math.random() * personArr.length)
      console.log(personArr[random2]);
      //获取two元素
      const two = document.querySelector('#two')
      //随机抽一个人 为二等奖
      two.innerHTML = personArr[random2]
      //删除被抽中的那个人
      personArr.splice(random2, 1)
      console.log(personArr);

      //再做三等奖
      const random3 = Math.floor(Math.random() * personArr.length)
      console.log(personArr[random3]);
      //获取three元素
      const three = document.querySelector('#three')
      //随机抽一个人 为三等奖
      three.innerHTML = personArr[random3]
      //删除被抽中的那个人
      personArr.splice(random3, 1)
      console.log(personArr);
    </script>
  </div>

</body>

</html>

1.9,操作元素常用属性

  • 通过JS，设置/修改标签元素属性，比如通过src更换图片
  • 最常见的属性比如：href,title,src等
  • 语法   对象.属性 = 值

目录：

举例代码：

<!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>
  <img src="./imag/Background.jpg" alt="">

</body>
<script>
  //获取图片元素
  const img = document.querySelector('img')
  //修改图片对象的属性
  //对象.属性 = 值
  img.src = './imag/focus3.jpg'
  img.title = '替换的照片'
</script>

</html>

1.9.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>
  <img src="./imag/pic1.jpg" alt="">

</body>
<script>
  //获取图片元素
  const img = document.querySelector('img')
  //修改图片对象的属性
  //对象.属性 = 值
  //建立储存随机图片的数组
  const pics = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg',]
  //生成随机数
  const random = Math.floor(Math.random() * pics.length)
  console.log(random);
  //更换路径 刷新生成随机照片
  img.src = `./imag/${pics[random]}`
  img.title = '替换的照片'
</script>

</html>

1.9.2，操作元素样式属性 

  • 通过style属性操作CSS
  • 操作类名（className）操作CSS
  • 通过classList操作类控制CSS

1.9.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>
  <style>
    body {
      background: url(./imag/pic1.jpg) no-repeat top center;

    }
  </style>
</head>

<body>
  <script>
    //随机数函数 取N-M
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //生成随机数
    const random = getRandom(1, 4)
    document.body.style.backgroundImage = `url(./imag/pic${random}.jpg)`
  </script>

</body>

1.9.4，通过类名修改（修改数量较多的情况）

<!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>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;


    }

    .nav {
      color: red;

    }
  </style>
</head>

<body>
  <!-- //className覆盖div的类名 -->
  <div class="nav">123</div>
  <script>
    //获取元素
    const div = document.querySelector('div')
    //添加类名 class是关键字 我们用className
    //用nav box
    div.className = 'nav box'

  </script>

</body>

</html>

1.9.5，通过classList操作类控制CSS

  • 为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
  • 语法:

元素.classList.add('类名')

元素.classList.remove('类名')

元素.classList.toggle('类名')

<!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>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;


    }

    .nav {
      color: red;

    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <!-- //className覆盖div的类名 -->
  <div class="box">123</div>
  <script>
    // 通过classList添加
    const box = document.querySelector('.box')
    //修改样式 add（） 类名不点
    box.classList.add('active')
  </script>

</body>

</html>

classList.remove()

<!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>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;


    }

    .nav {
      color: red;

    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <!-- //className覆盖div的类名 -->
  <div class="box">123</div>
  <script>
    // 通过classList添加
    const box = document.querySelector('.box')
    //修改样式 add（） 类名不点
    // box.classList.add('active')
    box.classList.remove('box')
  </script>

</body>

</html>

classList.toggle()  切换一个类 有就删掉 无就添加

<!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>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;


    }

    .nav {
      color: red;

    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <!-- //className覆盖div的类名 -->
  <div class="box">123</div>
  <script>
    // 通过classList添加
    const box = document.querySelector('.box')
    //修改样式 add（） 类名不点
    // box.classList.add('active')
    // box.classList.remove('box')
    box.classList.toggle('active')
  </script>

</body>

</html>

className和classList的区别是什么

1.9.6，随机轮播图案例（在改bug）略

1.9.7，获取表单属性

  • 表单.value = '用户名'
  • 表单.type = 'password'
<!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>
  <input type="text" value="电脑">
  <script>
    //获取元素
    const uname = document.querySelector('input')
    //获取值 获取表单里面的值用到是  表单.value
    // console.log(uname.value);
    // console.log(uname.innerHTML);innerHTML 得不到表单的内容
    uname.value = '我要买电脑'
    console.log(uname.type);
    uname.type = 'password'
  </script>
</body>

</html>
  • disabled ,checked,selected
  • 布尔值
<!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>
  <input type="checkbox" name="" id="">
  <script>
    //获取
    const ipt = document.querySelector('input')
    // 字符串只有一种情况为false ‘’  ，其他都为true
    ipt.checked = true

  </script>
</body>

</html>

 disabled:

<!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>
  <input type="checkbox" name="" id="">
  <button disabled>点击</button>
  <script>
    //获取
    const ipt = document.querySelector('input')
    // 字符串只有一种情况为false ‘’  ，其他都为true
    ipt.checked = true
    //获取
    const button = document.querySelector('button')
    //disabled 是禁用吗的意思 true是禁用 false 是不禁用
    button.disabled = true
  </script>
</body>

</html>

1.9.8，自定义属性

  • 在标签上一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取
<!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>
  <div data-id="1" data-name="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id);
    console.log(one.dataset.name);
    
  </script>
</body>

</html>

二，间歇函数（定时器）

2.1，间歇函数

  • 函数名不需要加括号
  • 定时器的返回值是一个id数字
<!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>
    function fn() {
      console.log('一秒执行一次');
    }

    setInterval(fn, 1000) //一秒执行一次函数
    //调用 写函数名 不要加小括号
  </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>
    function fn() {
      console.log('一秒执行一次');
    }
    //一千毫秒 = 一秒
    let n = setInterval(fn, 1000) //一秒执行一次函数
    //调用 写函数名 不要加小括号
    console.log(n)
    let m = setInterval(fn,3000)
    //关闭定时器
    clearInterval(n)

  </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 i = 0
    setInterval(function () {
      i++;
      document.write(`${i}<br>`)
    }, 200)


  </script>
</body>

</html>

2.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>
  <button class="btn" disabled>我以阅读用户协议（60）</button>
  <script>
    //获取元素
    const btn = document.querySelector('.btn')
    console.log(btn.innerHTML);
    //倒计时
    let i = 5
    //开启定时器
    let n = setInterval(function () {
      i--
      btn.innerHTML = `我以阅读用户协议${i}`
      if (i === 0) {
        clearInterval(n)
        //定时器停了，就可以打开按钮了
        btn.disabled = false
        btn.innerHTML = '同意'
      }
    }, 1000)
  </script>
</body>

</html>

2.3，定时轮播图（略）

三，事件监听

  • 事件监听
  • 事件监听版本
  • 事件：事件是在编程时系统内发生的动作或者发生的事情
  • 比如：用户在网页上单击一个按钮

什么是事件监听：

语法：

  <script>
    元素对象.addEvenListener('事件类型',要执行的函数)
  </script>

 事件监听三要素：

  • 事件源：那个DOM元素被事件触发了，要获取DOM元素
  • 事件类型 ：用什么方式触发，比如鼠标单击click,鼠标经过mouseover等
  • 事件调用函数：要做什么事
<!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>点击</button>
  <script>
    //  元素对象.addEvenListener('事件类型',要执行的函数)
    //需求： 点击了按钮，弹出一个对话框
    //1，事件源 按钮
    //2，事件类型 点击了按钮 字符串'click'
    //3，事件处理程序 弹出一个对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert("sbjs")
    })
  </script>
</body>

</html>

bestwishesn
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript核心Web APIs
weixin_58997863的博客
08-23 589
前端学习之 JavaScript核心WebAPIs 学完JavaScript基础，就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，本文会讲解如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。 还会讲解移动端如何制作网页特效，带你进入JavaScript的实际开发应用。
webapis-playground:Web APIs Playground 是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 可帮助为许多低级任务提供包装函数
07-24
Web APIs Playground是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 为许多低级任务提供包装函数，例如， 设备硬件交互 客户端存储交互 3D 图形，WebGL 通知 音频视频 还有很多...
JavaScript——Web APIs
蟹黄堡
05-22 256
JS的组成 JavaScript由ECMAScript（JavaScript基础）、DOM和BOM（Web APIs）组成。 其中，JavaScript基础是ECMAScript标准规定的基本语法；而Web APIs是W3C组织的标准。 API和Web API API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
JavaScript Web APIs
weixin_51062389的博客
07-02 120
Web APIS Web APIs和JS关联性 JS基础：ECMAscript基本语法 Web APIs阶段：DOM+BOM//页面交互功能 API和Web API API（应用程序编程接口）：是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制和的细节。 简单理解:API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM\DOM） ...
JavaScript Web APIs2
2401_84152911的博客
05-12 702
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript核心之Web APIs实用案例
技术专家
12-22 311
JavaScript核心之Web APIs实用案例
JavaScript阶段二之Web APIs
yy
08-11 4115
目录 前言 API WebAPI DOM 获取页面元素 事件 前言 在之前我们已经了解js的组成：https://blog.csdn.net/qq_44159028/article/details/119454230 之前，我们学的是js的基础语法，即ECMAscript标准规定的基本语法，要求我们掌渥Js 基础语法。但是只学习基本语法，做不了常用的网页交互效果，所以需要学习Web APIs。 web APIs是w3c组织的标准。web APIs 我们主要学习DOM和BOM。w.
Web APIs
chinusyan的专栏
05-04 699
Web APIs 主要学习 DOM 和 BOM Web APIs are typically used with JavaScript, although this doesn’t always have to be the case. 一、Web API API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可
JavaScript+Web APIs
weixin_44921664的博客
12-07 101
JavaScript+Web APIs 一、JavaScript 1、JavaScript 是什么 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 2、JavaScript的作用 表单动态校验（密码强度检测） （ JS 产生最初的目的 ） 网页特效 服务端开发(Node.js) 桌面程序(Electr
01-Web APIs简介
qq_45599475的博客
06-06 73
总结： JS基础学习ECMAScript基础语法为后面做铺垫，Web APIs是 JS 的应用，大量使用 JS 基础语法做交互效果。
Web ApIs 和 JS 基础关联性 JavaScript
2202_75549187的博客
04-02 76
Web ApIs 和 JS 基础关联性
tizen-tv-webapis
05-17
script type =" text/javascript " src =" $WEBAPIS/webapis/webapis.js " > </ script > // js const avinfo = require ( 'tizen-tv-webapis' ) ; const { getVersion , getDolbyDigitalCompMode , ...
04-WebApis-CodeQuiz
03-09
04-WebApis-CodeQuiz
WebAPIs基础笔记
07-07
WebAPIs笔记
html5-apis:HTML5 Web API
05-22
HTML5 Web API 您可能不知道的有关HTML5 Web API的示例！例子参考Web组件
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
webapis学生报名系统代码步骤
11-25
设计一个webapis学生报名系统的代码步骤如下： 1. 数据库设计：首先确定需要存储的数据，例如学生的基本信息，课程信息等。根据需求设计数据库表结构，并创建相应的表。 2. 后端接口设计：根据系统需求，设计后端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值