JavaScript-Basic WebAPIs Day1 Notes

1、JavaScript的如下语法，是不是也是类似于在C++中 堆区开辟了一块新内存

 let obj = new Object()

在 JavaScript 中使用 let obj = new Object() 创建一个新对象时，其内存分配和 C++ 中的堆内存分配有一些相似之处，但也有一些关键的区别。下面是对两者的比较：

JavaScript 中的对象创建

1. 内存分配：当你使用 new Object() 创建一个新对象时，JavaScript 引擎会在内存中为这个新对象分配空间。这部分内存通常位于堆（heap）上，与 C++ 中的堆内存类似。

2. 引用类型：在 JavaScript 中，对象是引用类型。obj 变量实际上存储的是一个指向堆上对象的引用，而不是对象本身。

3. 垃圾回收：JavaScript 有自动垃圾回收机制，当没有变量引用某个对象时，垃圾回收器会定期释放该对象占用的内存。

4. 原型链：JavaScript 中的对象还涉及到原型链的概念，每个对象都有一个原型，原型上可以包含属性和方法，这与 C++ 中的对象模型有所不同。

C++ 中的堆内存分配

1. 手动管理：在 C++ 中，使用 new 关键字在堆上分配内存时，程序员需要手动管理内存的释放，通过 delete 操作符来避免内存泄漏。

2. 对象的创建：C++ 中的对象可以是类（class）的实例，它们可以包含成员变量和成员函数。C++ 的对象模型通常涉及到构造函数和析构函数。

3. 内存布局：C++ 中的对象可能包含非堆分配的内存，如栈上的局部变量，以及全局或静态存储期的变量。

总结

虽然 JavaScript 的 new Object() 和 C++ 中使用 new 在堆上分配内存有相似之处，如都在堆上创建了对象，但它们在内存管理、对象模型和生命周期控制方面有显著的不同。

JavaScript 的自动垃圾回收和基于原型的对象模型与 C++ 的手动内存管理和类对象模型形成了对比。

 

2、.splice()通常是用于删除掉固定位置的元素，但是有时候也能实现新增插入元素。

具体用法如下：

        let arr = ['red', 'green']
        // arr.splice(1, 1)
        // console.log(arr.splice(1, 1)) // ['red', 'pink', 'green']
        // console.log(arr)
        arr.splice(1, 0, 'pink')
        console.log(arr)
        arr.splice(1, 0, 'pink', 'hotpink')  // ['red', 'pink', 'hotpink', 'green']
        console.log(console.log(arr))

 

3、注意下如下const的作用，当const修饰数组时

 

4、JavaScript的BOM和DOM的概念理解

BOM（Browser Object Model，浏览器对象模型）

概念：BOM 是一个允许 JavaScript 与浏览器交互的 API。通过 BOM，JavaScript 可以操作浏览器的窗口、导航栏、状态栏等。

作用：

• 操作浏览器窗口，如打开新窗口、改变窗口大小等。
• 与浏览器的导航功能交互，如后退、前进等。
• 访问浏览器的历史记录和状态。

通俗解释：BOM 就像是一个桥梁，让 JavaScript 能够控制和了解浏览器的行为和状态。

举例说明：

// 打开一个新窗口
window.open('https://www.example.com', '_blank');

// 关闭当前窗口
window.close();

// 弹出警告框
alert('这是一个警告框！');

DOM（Document Object Model，文档对象模型）

概念：DOM 是 HTML 和 XML 文档的编程接口。它将文档呈现为一个由节点和对象（如元素、属性、文本等）组成的树结构，使得 JavaScript 可以很容易地访问和操作这些内容。

作用：

• 动态修改页面内容，如更改文本、添加或删除元素。
• 响应用户事件，如点击、滚动等。
• 操作元素的样式和属性。

通俗解释：DOM 就像是一个网页的蓝图，JavaScript 通过这个蓝图可以找到网页上的任何部分，并对其进行修改。

举例说明：

<div id="myDiv">这是一些文本。</div>
<script>
  // 获取元素
  var divElement = document.getElementById('myDiv');

  // 修改元素的文本内容
  divElement.textContent = '这是修改后的文本。';

  // 添加一个新的子元素
  var newElement = document.createElement('p');
  newElement.textContent = '这是一个新段落。';
  divElement.appendChild(newElement);

  // 更改样式
  divElement.style.color = 'blue';
</script>

在这个例子中，JavaScript 使用 DOM API 来获取页面上的一个 div 元素，修改它的文本内容，添加一个新的段落元素，并改变 div 的文字颜色。

总结

• BOM 主要用于与浏览器窗口和导航等浏览器功能进行交互。
• DOM 用于操作和修改 HTML 文档的结构、样式和内容。
• 两者都是 JavaScript 与浏览器交互的重要组成部分，但它们的作用域和应用场景不同。

 

 5、为什么这里一定要写成p[0]才有效呢？

<div class="box">123</div>
    <div class="box">abc</div>
    <p id="nav">导航栏</p>
    <ul class="nav">
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li> 
    </ul> 

    <script> 
        
        // 1. 获取匹配的第一个元素
        // const box = document.querySelector('div')
        // const box = document.querySelector('.box')
        // console.log(box)
        // const nav = document.querySelector('#nav')
        // console.log(nav)
        // nav.style.color = 'red'

        // const li = document.querySelector('ul li:last-child')
        // console.log(li)
        // const lis = document.querySelectorAll('ul li')
        // // console.log(lis)

        // for(let i = 0; i < lis.length; i++){
        //     console.log(lis[i])
        // }

        const p = document.querySelectorAll('#nav')
        console.log(p)
        p[0].style.color = 'red'  # 这里

    </script>

在你提供的代码片段中，使用 document.querySelectorAll('#nav') 获取到的结果是一个 NodeList 对象，其中包含了所有匹配的元素。

在这个例子中，#nav 只匹配一个元素，即 <p id="nav">导航栏</p>，所以 NodeList 的长度为 1。

解释

• NodeList: document.querySelectorAll 返回的是一个 NodeList，它类似于数组，但并不是一个真正的数组。NodeList 可以通过索引访问其中的元素。
• 索引访问: 因为 NodeList 是一个集合，即使它只包含一个元素，你仍然需要通过索引来访问它。p 表示访问 NodeList 中的第一个元素。

如果你直接使用 p.style.color = 'red';，将会出现错误，因为 p 是一个 NodeList，而不是单个元素。只有通过 p 访问到具体的 DOM 元素后，才能对其样式进行修改。

总结

因此，必须写成 p 才有效，因为你需要访问 NodeList 中的具体元素，才能对其属性或样式进行操作。

 

6、为什么box这种变量，就需要得用const去修饰呢？ 另外，innerText和innerHTML有什么区别呢？

    <div class="box">我是文字的内容</div>
    
    <script> 
        
        const box = document.querySelector('.box')
        console.log(box.innerText)
        
        box.innerText = '<strong>我是一个盒子</strong>'
        console.log(box.innerHTML)

        box.innerHTML = '我要更换'
        console.log(box.innerHTML)
        box.innerHTML = '<strong>我要更换</strong>'
        console.log(box.innerHTML)

    </script>

在你提供的代码片段中，使用 const 修饰 box 变量是为了确保其值不会被意外修改。另外，innerText 和 innerHTML 虽然都可以用于设置或获取元素的内容，但它们之间存在一些差异。

const 的使用

• 常量声明: const 用于声明常量，即其值在声明后不能被修改。这可以防止意外更改变量的值。
• 块级作用域: const 声明的变量具有块级作用域，意味着它们只在定义它们的块（例如函数或 if 语句）内可见和可访问。
• 不可重新赋值: 使用 const 声明的变量不能被重新赋值。如果尝试这样做，将会抛出一个错误。

在你的代码中，使用 const 修饰 box 变量是为了确保它的值不会被意外修改。这样可以提高代码的可读性和可维护性。

innerText 和 innerHTML 的区别

1. HTML 解析: innerHTML 将输入的字符串视为 HTML 代码并解析它。这意味着如果字符串包含有效的 HTML 标签，它们将被渲染为相应的元素。相反，innerText 将输入视为纯文本，不会解析 HTML 标签。
2. 空白处理: innerText 会忽略元素内部的空白字符（空格、换行符等），而 innerHTML 会保留它们。
3. 性能: 使用 innerHTML 时，浏览器需要解析 HTML 字符串并构建 DOM 树。这可能会降低性能，特别是在处理大量 HTML 内容时。innerText 通常更快，因为它只需要设置文本内容。
4. 安全性: 使用 innerHTML 时需要小心，因为它可能会导致跨站脚本（XSS）攻击。如果用户输入的内容没有经过适当的过滤和转义，恶意脚本可能会被注入到页面中。innerText 不会解释 HTML 标签，因此不会引入这种安全风险。

在你的代码中，当使用 innerText 时，即使输入字符串包含 HTML 标签，它们也不会被渲染为元素。相反，当使用 innerHTML 时，HTML 标签将被解析并渲染为相应的元素。

总之，const 用于声明不可修改的变量，而 innerText 和 innerHTML 虽然都可以设置或获取元素的内容，但在 HTML 解析、空白处理、性能和安全性方面存在差异。根据具体需求选择合适的属性。

 

7、为什么如下代码显示不出图片？ 【之后深究下】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: url(https://druidz.se/wp-content/uploads/2024/02/aed6f5e1-d79d-4f7b-9357-f4de6561159e.png) no-repeat top center/cover;
    }
  </style>
</head>
  
<body>
  <script>
    // console.log(document.body)
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    // 随机数
    const random = getRandom(1, 10)
    // 修正JavaScript代码，赋值正确的背景图片
    document.body.style.backgroundImage = "url('https://druidz.se/wp-content/uploads/2024/02/aed6f5e1-d79d-4f7b-9357-f4de6561159e.png')";
  </script>
</body>

</html>

 

8、HTML中哪些是常见的单标签，哪些是双标签。

在HTML中，标签可以分为单标签（自闭合标签）和双标签。以下是常见的单标签和双标签的分类：

常见的单标签（自闭合标签）

单标签不需要结束标签，通常用于不包含内容的元素。

• <br>：换行
• <img>：图片
• <hr>：水平线
• <input>：输入框
• <meta>：元数据
• <link>：链接外部资源
• <area>：定义图像映射中的可点击区域
• <base>：指定文档的基本URL
• <col>：为表格中的列定义属性
• <embed>：嵌入外部内容（如视频、音频）
• <source>：为媒体元素（如<video> 和 <audio>）指定媒体资源
• <track>：为媒体元素提供字幕文件
• <wbr>：建议换行位置

常见的双标签

双标签由开始标签和结束标签组成，包含内容。

• <div></div>：块级容器
• <span></span>：行内容器
• <p></p>：段落
• <a></a>：超链接
• <h1></h1>（<h2></h2>，<h3></h3> 等）：标题
• <ul></ul>：无序列表
• <ol></ol>：有序列表
• <li></li>：列表项
• <table></table>：表格
• <tr></tr>：表格行
• <td></td>：表格单元格
• <th></th>：表头单元格
• <form></form>：表单
• <textarea></textarea>：多行文本输入
• <button></button>：按钮
• <label></label>：标签
• <select></select>：下拉列表
• <option></option>：下拉列表中的选项
• <script></script>：JavaScript代码
• <style></style>：CSS样式

总结

• 单标签：主要用于不包含内容的元素，通常在标签后面加上斜杠/>来标记标签的结束（在HTML5中不强制要求）。
• 双标签：用于包裹内容的元素，必须有相应的结束标签。

这些标签共同构成了HTML文档的结构和内容。

 

 9、对于class的类别，slider, slider-wrapper, slider-footer以及slider-indicator，toggle，prev, next这些。这些标签的名字是不是特定的，还是说自己随便取的标签名都行。

    <div class="slider">
        <div class="slider-wrapper">
            <img src="./2.web APIs/web APIs第一天/04-code/images/slider01.jpg" alt="">
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
        </div>
        <ul class="slider-indicator">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

在HTML中，class 属性的值是可以自定义的，通常用于为元素指定CSS样式或JavaScript行为。

你提到的类名，如 slider, slider-wrapper, slider-footer, slider-indicator, toggle, prev, next，并不是特定的、内置的HTML类名，而是开发者为了某种特定功能或样式而定义的。

你可以随意命名这些类名，只要它们能清晰地表达你想要实现的功能或样式。

具体解释：

1. slider, slider-wrapper, slider-footer, slider-indicator:

   • 这些类名通常用于构建轮播图或滑动组件。slider 可能是整个轮播组件的容器，slider-wrapper 包含实际滑动的内容如图片，slider-footer 可能包含标题或描述，slider-indicator 则用于显示轮播图的页码或导航点。
   • 这些名字虽然常见，但不是HTML或CSS中的保留字，你可以根据你的项目需求命名为任何你喜欢的名字。

2. toggle, prev, next:

   • toggle 类名通常用于可切换显示状态的按钮或开关。prev 和 next 则多用于表示前一项和后一项的导航按钮，比如轮播图中的“上一张”和“下一张”按钮。
   • 同样，这些名称是根据功能来定义的，开发者可以选择其他名字，只要能表明元素的作用即可。

结论：

这些类名是开发者自定义的，目的是为了方便标识HTML元素并为其应用特定的样式或行为。在使用这些类名时，关键是确保命名清晰、易懂，并且与你的项目或团队的命名规范保持一致。你可以根据自己的需求和偏好任意命名这些类名。

 

 10、这个one.dataset, 这个dataset是什么属性？怎么one就自带这个属性呢？

  <div data-id="1" data-spm="不知道">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.spm)
    
  </script>

dataset 是 HTML 元素的一个属性，用于访问以 data- 前缀命名的自定义数据属性。

HTML 中以 data- 开头的属性可以存储开发者定义的自定义数据，然后通过 JavaScript 使用 dataset 进行访问。

在你的示例代码中：

one 是通过 document.querySelector('div') 获取的第一个 <div> 元素，它包含了 data-id 和 data-spm 这两个自定义属性。

one.dataset 返回一个 DOMStringMap 对象，它包含所有以 data- 开头的属性。你可以通过 one.dataset.id 和 one.dataset.spm 来获取对应属性的值。

关键点：

• dataset 属性是一个只读对象，包含了所有以 data- 开头的自定义数据属性。
• data- 后面的部分在 dataset 中会自动转换为驼峰命名法。比如，data-my-value 会变成 dataset.myValue。
• 你可以通过 dataset 来读取和设置这些自定义属性的值。

因此，one.dataset.id 返回的是 data-id 属性的值，而 one.dataset.spm 返回的是 data-spm 属性的值。

 

 11、如下代码如何获取特定id的按钮？

<body>
    <button id="test1">点击</button>
    <button id="test2">上传</button>
    <script>

    const btn = document.querySelector('button #test1') # 只需要去掉 button, 改为 '#test1'即可
    let fn = function (){
        alert('你早呀~')
    }

    btn.addEventListener('click', fn)

    </script>

</body>

 

 12、这种加*的写法是什么意思？

<style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

在 CSS 中，* 是一个通配符选择器，表示选择页面中的所有元素。将 * 用于选择器时，可以对页面中的所有元素应用相同的样式规则。

在你提供的代码中：

这段 CSS 的作用是将页面中所有元素的外边距 (margin) 和内边距 (padding) 设置为 0。

通常，这种做法用于重置浏览器默认的样式，以便开发者可以从一个一致的、可控的基准开始设计布局。

这被称为“CSS 重置”或“全局样式重置”。通过将所有元素的 margin 和 padding 归零，可以减少浏览器之间的样式差异，从而更容易实现一致的布局效果。

 

 13、想让这个h2标题，上下左右移动一些举例，CSS代码应该怎么改呢？

        h2 {
            text-align: center;
        }

要让 h2 标题在页面上移动，可以通过调整其外边距 (margin) 或使用相对定位 (position: relative) 来实现。下面是一些示例：

使用 margin 移动标题

通过调整 margin 来移动标题。正值会将元素往下或右移动，负值则会将元素往上或左移动。

h2 {
    text-align: center; /* 水平居中 */
    margin-top: 20px;   /* 向下移动 20px */
    margin-left: -10px; /* 向左移动 10px */
}

使用 position: relative 移动标题

通过设置 position: relative 和 top, bottom, left, right 属性来移动标题。正值会将元素往下或右移动，负值则会将元素往上或左移动。

h2 {
    text-align: center; /* 水平居中 */
    position: relative; /* 相对定位 */
    top: 10px;          /* 向下移动 10px */
    left: -15px;        /* 向左移动 15px */
}

示例解释：

• margin-top: 20px; 将 h2 元素向下移动 20 像素。
• margin-left: -10px; 将 h2 元素向左移动 10 像素。
• position: relative; 定位方式相对于元素的正常位置。
• top: 10px; 将 h2 元素向下移动 10 像素。
• left: -15px; 将 h2 元素向左移动 15 像素。

你可以根据需要调整这些数值，以实现所需的移动效果。