JavaScript入門20日目

26406 ワード
JavaScript WeCode 上のコード テキストリンク
引越しを控えて、思ったより準備しなければならないことが多いです.今の暇な時間の中で、処理したいことが多くて、時間と体は想像していたより少ないです.それも最善を尽くして

📝 JavaScriptフォントの操作


JavaScriptを使用してフォントを操作する方法を以下の表に示します.
属性説明オブジェクト.textContentで入力した文字列を元の場所に入れます.オブジェクト.InnerHTMLで入力した文字列をHTML形式で挿入します.
このように表だけを見ていると、直接入れるのとHTMLで入れるのとではどのような違いがあるのか分かりにくいです.コードで理解してみます.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            
        })
    </script>
</head>
<body>
    <h1 id="textContent">문자열</h1>
    <h1 id="innerHTML">문자열</h1>
    //두 개를 비교하며 알아보기 위해 h1 태그 2개를 만들었다.
    //그 뒤에 h1 태그에 id를 각각 'textContent' 와 'innerHTML' 을 주었다.
</body>
</html>
まず、上記の2つの方法を比較するために、h 1タスクid「textContent」と「innerHTML」をそれぞれ2つ与える.
上のコードを印刷して、下のスクリーンショットと同じようにしなければなりません.

ここで、上のテキストの内容は「textContent文字列」であり、下のinnerHTMLは「innerHTML文字列」に変更されます.次のコードを見てください.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const header1 = document.querySelector('#textContent')
            const header2 = document.querySelector('#innerHTML')
            //어제 배운 querySelector 를 활용하여 id 선택자로 선택

            header1.textContent = 'textContent 문자열'
            //textContent 는 'textContent 문자열' 로 변경
            header2.innerHTML = 'innerHTML 문자열'
            //innerHTML은 'innerHTML 문자열' 로 변경
        })
    </script>
</head>
<body>
    <h1 id="textContent">문자열</h1>
    <h1 id="innerHTML">문자열</h1>
    //위 두개의 h1 태그를 직접 수정하지 않는다.
</body>
</html>
下の「h 1」マーク部分を直接修正するのではなく、昨日勉強した「document」です.querySelector()'を使用して各idを選択し、置換する文字列を入力します.結果は以下の通りです.

次の「h 1」タグを直接変更するのではなく、2つの文字列を変更しました.
この2つの方法で文字操作が可能です.しかし、重要なのは両者の違いだ.
次のコードでtextContentとinnerHTMLの違いを理解します.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const header1 = document.querySelector('#textContent')
            const header2 = document.querySelector('#innerHTML')

            header1.textContent = 'textContent<br>문자열'
            //위의 예시와 차이라면 가운데 줄바꿈의 <br> 태그를 넣었다.
            header2.innerHTML = 'innerHTML<br>문자열'
            //동일하게 <br> 태그를 넣었다.
        })
    </script>
</head>
<body>
    <h1 id="textContent">문자열</h1>
    <h1 id="innerHTML">문자열</h1>
</body>
</html>

𘥪「textContent」と「innerHTML」の比較


ここで、比較のために、上で修正した文字列の間に改行文字「
」を加えます.このコードの結果から両者の違いを明確に理解できる.

「結果は上と同じです」InnerHTMLでは
が操作されていますが、「textContent」にはありません.理由は上の表を見れば分かります.
表に示すように、「innerHTML」は入力した文字列を「HTMLフォーマット」に挿入します.したがって、
ラベルは正常に動作します.
ただし、「textContent」は文字通り入力する場合、
タグは機能せず、テキストとして直接入力するだけです.
講座では通常「textContent」が使用され、「innerHTML」はセキュリティ上問題が発生する可能性があるため、使用頻度が低い.

🧩 JavaScriptプロパティの操作


以前は「h 1」と表記していましたが、今回は「img」属性を作成し、画像を空にするように修正しました.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const img = document.querySelector('img')

            img.setAttribute('src','https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA66LG%2FbtqQ3gkqry4%2Fhw8Wj3OTq6h0w2tW9ThnOk%2Fimg.gif')
            //값를 넣어주는 것 (속성 이름, 값) 을 넣어준다.
      
            console.log(img.getAttribute('src'))
            //값을 추출하는 것 (속성 이름) 만 넣어주면 된다.
        })
    </script>
</head>
<body>
    <img src="" alt="">
</body>
</html>
画像プロパティを操作するために、にプロパティを作成し、画像を挿入します.
あとは「document」querySelector()'を使用してプロパティを選択します.
img.setAttribute(属性名、値)
プロパティに値を割り当てるために使用します.
img.getAttribute(属性名)
プロパティの抽出に使用する値.
値にurlを入れると(http://イメージソース。com/幅/高さ/)、必要な幅と高さの値のように幅と高さを決定できます.
上記のコードを実行すると、以下の結果が得られます.
(イメージは私の好きなダイナミックな図が入っているだけです😊)

前述したように、値であるurlの画像出力が表示されます.
imgもあります.getAttribute()を使用して、上の画像の値を抽出してコンソールに表示するため、以下に示すように、コンソールウィンドウを開いて抽出した値urlを表示できます.

でも必ずimggetAttributeとimg.setAttributeを使用しなくても、以下のように使用できます.次のコードを見てください.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const img = document.querySelector('img')

            img.src = 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FA66LG%2FbtqQ3gkqry4%2Fhw8Wj3OTq6h0w2tW9ThnOk%2Fimg.gif'
         
            console.log(img.src)
        })
    </script>
</head>
<body>
    <img src="" alt="">
</body>
</html>
上のコードを見て、簡単に「img.「src」は、上記の操作の実行を確認することもできます.

🧾 JavaScriptスタイルの操作


ドキュメントオブジェクトのスタイルはstyleプロパティを使用して操作できます.CSSで指定できるスタイルはたくさんありますが、まずここではチュートリアルで勉強したように、の内部に5つの
ラベルを作成し、「20 px」サイズの黒いグラデーションを作成します.
次のコードを見てください.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const divs = document.querySelectorAll('div')
            //5개의 div 에 모두 수정을 함으로 querySelectorAll() 을 사용
            divs.forEach((div,key) => {
                div.style.backgroundColor = `rgb(${key * 20}, ${key * 20}, ${key * 20})`
                //forEach 반복문을 활용하여 div 가 모두 반복문을 돌아 적용하게 한다.
                //key의 값은 위에서부터 순서대로 div 개수가 5개 이므로 0.1,2,3,4 이다,.
                div.style.height = '20px'
              //div 칸의 높이는 20px 로 주었다.
            })
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    //스타일 조작의 예제를 위해 5개를 만들었다.
</body>
</html>
以上のように,に5つの
ラベルが生成された.そして、5つとも操作が必要で、昨日勉強した「querySelector All()」を利用してすべて選択.
「forEach複文」を使用して、すべての
ラベルに背景色を適用します.
ここで背景色のrgb値「key*20」を示すのは、グラデーション色のためであり、キー値をコンソール確認に出力すると5つのdivラベルとなるため、keyは0、1、2、3、4の値を有する.したがって、上のキー値に20を乗算すると、各色がバックグラウンドでグラデーションされます.
確認結果は以下の通りです.

指定した高さの「20 px」単位で色が変化し、グラデーションが5層になるように決定します.
[Python]FloodFill[Programmerレベル3]
PreparedStatement/Quiz