JavaScript Web API 初日のメモ

ここに画像の説明を挿入します

レビュー：

splice() メソッドは、配列に要素を追加または配列から削除するために使用されます。

**注意:** このメソッドは元の配列を変更します。

配列を削除します。

スプライス(開始位置、削除数)

例: 1

let arr = ['red', 'green', 'blue']
arr.splice(1,1) // 删除green元素
console.log(arr) // ['red, 'blue']

要素の追加

スプライス(開始位置、番号削除、配列要素追加)

let arr = ['red', 'green', 'blue']
//arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink
//console.log(arr) // ['red', 'pink', 'green', 'blue']
arr.splice(1, 0, 'pink', 'hotpink') // 在索引号是1的位置添加 pink  hotpink
console.log(arr) // ['red', 'pink', 'hotpink', 'green', 'blue']

Web API - 1 日目のメモ

DOMの構造と基本操作を理解し、開発におけるDOMの役割を体験する

ECMAScript と JavaScript の関係を理解する
DOM の関連概念を理解し、DOM の本質はオブジェクトであることを理解する
ノードを見つける基本的な方法をマスターする
ノード属性とテキストの操作をマスターする
断続的な機能を使用してスケジュールされたタスクを作成する機能

導入

ECMAScript と JavaScript の関係を理解すると、Web API はブラウザ拡張機能です。

厳密に言うと、JavaScript 段階で学習する知識のほとんどは ECMAScript の知識体系に属しており、ECMAScript は ES と呼ばれ、変数、データ型、式、ステートメント、関数などの一連の言語標準仕様を提供します。その他の文法規則 ECMAScript によって指定されます。ブラウザは ECMAScript 仕様の大部分を実装し、これに基づいていくつかの実用的な機能を拡張しており、これらの拡張コンテンツは Web API と呼ばれます。

外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが備わっている可能性があります。画像を保存して直接アップロードすることをお勧めします。

ECMAScript は、ブラウザ内で実行され、Web API と組み合わされる実際の JavaScript です。Web API の中心となるのは DOM と BOM です。

詳細: ECMAScript 仕様は常に更新されており、さまざまなバージョンが存在します。初期のバージョン番号は、ECMAScript3 や ECMAScript5 のように数字で番号付けされていました。その後、更新速度が速かったため、年がバージョン番号として使用されるようになりました。 ECMAScript2017、ECMAScript2018 など。この形式の ECMAScript6 は 2015 年にリリースされ、EMCAScript2015 と呼ばれることがよくあります。

JavaScript の歴史についてさらに詳しく読む。

DOM に関連する概念を理解し、DOM の予備的な理解を確立し、DOM の基本操作を学習し、DOM の役割を理解します。

DOM (Document Object Model) は、HTML 文書全体の各タグ要素をオブジェクトとして扱い、このオブジェクトには多くのプロパティとメソッドが含まれており、これらのプロパティを操作したりメソッドを呼び出すことで、HTML を動的に更新することができます。特殊効果とユーザーインタラクションに関する技術サポートを提供します。

つまり、DOM は、Web ページの特殊効果やユーザーインタラクションを開発する目的で、HTML を動的に変更するために使用されます。

小さな例を見てください。

上の例では、ユーザーがそれぞれ [開始] ボタンまたは [終了] ボタンをクリックすると、右側のデバッグウィンドウから、HTML タグの内容が常に変化していることがわかります。これは DOM を通じて実現されます。

コンセプト

DOM ツリー

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标题</title>
</head>
<body>
  文本
  <a href="">链接名</a>
  <div id="" class="">文本</div>
</body>
</html>

HTML文書は、下図に示すように、タグ間の関係を直感的に反映したツリー構造（ドキュメントツリーまたはDOMツリーと呼ばれます）で表現されます。

DOMノード

ノードはドキュメントツリーのコンポーネントであり、各ノードは DOM オブジェクトであり、主に要素ノード、属性ノード、テキストノードなどに分かれます。

[要素ノード]は実際にはHTMLタグであり、上図のようにhead、、divなどbodyはすべて要素ノードに属します。
a[属性ノード]とは、上図のタグの属性hrefやdivタグの属性など、HTMLタグ内の属性を指しますclass。
title[テキストノード]とは、タグ内のテキストなど、HTMLタグのテキストコンテンツを指します。
[ルートノード] は特にhtmlラベルを指します。
他の…

書類

documentこれは DOM に特別に使用される組み込み JavaScript オブジェクトであり、このオブジェクトにはいくつかのプロパティとメソッドが含まれており、documentDOM 学習の中核となります。

<script>
  // document 是内置的对象
  // console.log(typeof document);

  // 1. 通过 document 获取根节点
  console.log(document.documentElement); // 对应 html 标签

  // 2. 通过 document 节取 body 节点
  console.log(document.body); // 对应 body 标签

  // 3. 通过 document.write 方法向网页输出内容
  document.write('Hello World!');
</script>

上記はdocumentオブジェクトのプロパティとメソッドの一部をリストしたものですが、まずdocument全体を理解しましょう。

DOMオブジェクトを取得する

querySelector 条件を満たす最初の要素
querySelectorAll は、条件を満たす要素の擬似配列を返します。
他の方法について学ぶ
1. getElementById
2. getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - 查找节点</title>
</head>
<body>
  <h3>查找元素类型节点</h3>
  <p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
  <ul>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
  </ul>
  <script>
  	const p = document.querySelector('p')  // 获取第一个p元素
  	const lis = document.querySelectorAll('li')  // 获取第一个p元素
  </script>
</body>
</html>

要約:

document.getElementById は、具体的には要素タイプのノードを取得し、タグのid属性に基づいて検索します。
すべての DOM オブジェクトには、ノードタイプの検出に使用される nodeType 属性が含まれています。

要素のコンテンツを操作する

DOM のテキストコンテンツを変更することで、Web ページのコンテンツを動的に変更します。

innerTextテキストコンテンツを任意のタグ位置に追加/更新します。テキストに含まれるタグは解析されません。

<script>
  // innerText 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  // intro.innerText = '嗨~ 我叫李雷！'
  // intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>

innerHTML任意のタグ位置にテキストコンテンツを追加/更新すると、テキストに含まれるタグが解析されます。

<script>
  // innerHTML 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  intro.innerHTML = '嗨~ 我叫韩梅梅！'
  intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>

概要:テキストコンテンツにタグが含まれる場合はhtmlタグを使用することをお勧めします。それ以外の場合は属性innerHTMLを使用することをお勧めします。innerText

##要素の属性を操作する

属性を変更するには 3 つの方法があります。

一般的な属性の変更

最も簡潔な構文である属性名を使用して直接変更できます。

<script>
  // 1. 获取 img 对应的 DOM 元素
  const pic = document.querySelector('.pic')
	// 2. 修改属性
  pic.src = './images/lion.webp'
  pic.width = 400;
  pic.alt = '图片不见了...'
</script>

コントロールスタイルのプロパティ

[スタイルの変更]を適用すると、インラインスタイルの属性を変更してstyle動的にスタイルを変更できます。

要素ノードを通じて取得されるstyle属性自体のデータ型もオブジェクトでありbox.style.color、例えば要素ノードの CSS スタイルのとのbox.style.width値をそれぞれ取得するために使用されます。colorwidth

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.style.color = 'red'
    box.style.width = '300px'
    // css 属性的 - 连接符与 JavaScript 的 减运算符
    // 冲突，所以要改成驼峰法
    box.style.backgroundColor = 'pink'
  </script>
</body>
</html>

どのタグにもstyle属性があり、styleWeb ページタグのスタイルは属性を通じて動的に変更できます。属性に文字が含まれている場合はcss、それを削除し、それに続く文字を大文字に変更する必要-があります。-background-colorbox.style.backgroundColor

クラス名(className)の操作 CSSの操作

変更するスタイルが多数ある場合、style 属性を使用して直接変更するのは面倒ですが、CSS クラス名を使用できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
      
      
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.className = 'pink'
  </script>
</body>
</html>

知らせ：

1. class はキーワードであるため、代わりに className を使用します。

2.className は古い値を新しい値に置き換えるためのもので、クラスを追加する必要がある場合は、以前のクラス名を保持する必要があります。

classList 操作クラスを通じて CSS を制御する

className が以前のクラス名を簡単に上書きしてしまうという問題を解決するために、classList を通じてクラス名を追加および削除できます。


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

        .active {
      
      
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

フォーム要素の属性を操作する

多くの場合、フォームのプロパティも変更する必要があります。たとえば、目をクリックするとパスワードが表示されます。本質的には、フォームタイプをテキストボックスに変換することです。

通常の属性と値は他のタグ属性と変わりません。

取得: DOM オブジェクト.属性名

設定: DOM オブジェクト.プロパティ名 = 新しい値


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

</head>

<body>
    <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" id="" class="agree">
    <script>
        // 1. 获取元素
        let input = document.querySelector('input')
        // 2. 取值或者设置值  得到input里面的值可以用 value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'

        // 2. 启用按钮
        let btn = document.querySelector('button')
        // disabled 不可用   =  false  这样可以让按钮启用
        btn.disabled = false
        // 3. 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = false
    </script>
</body>

</html>

カスタムプロパティ

標準属性: タグはクラス ID タイトルなどの属性で生成されます。無効、チェック、選択などのドット構文操作を直接使用できます。

カスタムプロパティ:

特別なデータカスタム属性が HTML5 に導入されました

タグは常にデータで始まります。

すべての DOM オブジェクトはデータセットオブジェクトとして取得されます。

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

</head>

<body>
   <div data-id="1"> 自定义属性 </div>
    <script>
        // 1. 获取元素
        let div = document.querySelector('div')
        // 2. 获取自定义属性值
         console.log(div.dataset.id)
      
    </script>
</body>

</html>

間欠機能

断続的な機能の役割を理解し、断続的な機能を使用してスケジュールされたタスクを作成します。

setIntervalJavaScriptの組み込み関数で、一定間隔で別の関数を自動的に繰り返し実行する機能で、タイマー関数とも呼ばれます。

<script>
  // 1. 定义一个普通函数
  function repeat() {
      
      
    console.log('不知疲倦的执行下去....')
  }

  // 2. 使用 setInterval 调用 repeat 函数
  // 间隔 1000 毫秒，重复调用 repeat
  setInterval(repeat, 1000)
</script>

今日の単語

言葉	説明する	説明する
セット間隔	タイマー	setInterval(繰り返し, 1000)