[3日間]JavaScript 3


0、復習


  • htmlデフォルトコードの作成

  • nightボタンの作成
    ボタンをクリックするたびにonclick効果が適用されます

  • arrayを作成し、繰り返し文として出力
  • <!DOCTYPE html>
    <html lang="ko">
    
    <head>
        <title>Document</title>
        <style>
            a{
                text-decoration: none;
            }
        </style>
    </head>
    
    <body>
        <h1><a href="index.html">web</a></h1>
    
        <input type="button" value="night" onclick="
        let aTagSearch = document.querySelectorAll('a');
        // console.log(aTagSearch);
        if (this.value == 'night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            this.value = 'day';
            for(let i=0;  i<aTagSearch.length; i++){
                aTagSearch[i].style.color = 'white';
            }
        } else {
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
            this.value = 'night';
            for(let i=0;  i<aTagSearch.length; i++){
                aTagSearch[i].style.color = 'black';
            }
        }">
        <ol>
            <li><a href="1.html">html</a></li>
            <li><a href="2.html">css</a></li>
            <li><a href="3.html">js</a></li>
        </ol>
        <h2>welcome</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    
        <script>
            let topics = ['html', 'css', 'js'];
            for (let i=0; i<topics.length; i++){
                // document.write('<li>'+topics[i]+'</li>');
                document.write (`<li>${topics[i]}</li>`);
            }
        </script>
    </body>
    
    </html>

    暗いモード切り替えボタンの作成


  • メソッド1」a「各ラベルにidを付けて、異なる名前でstyleを変更しますか?
    「a」ラベルが多ければ多いほど、idも多くなります.
    これは非効率的な方法です.
  • if (this.value === 'night'){
    	this.value = 'day';
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        document.querySelector('#a1').style.color='black';
        document.querySelector('#a1').style.color='black';
        document.querySelector('#a2').style.color='black';
        document.querySelector('#a3').style.color='black';
        document.querySelector('#a4').style.color='black';
        document.querySelector('#a5').style.color='black';
        }
  • メソッドページのすべての「a」タブを検索し、重複文を使用します.
  • document.querySelectorAll('a');
    ページ上のすべての「a」タブを見つけ、NoteList形式に戻ります.
    インデックスを使用して要素を抽出および使用できます.
    let aSelectAll = document.querySelectorAll('a');
    if (this.value == 'night'){
    	this.value = 'day';
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        for (let i = 0; i < aSelectAll.length; i++){
        	aSelectAll[i].style.color='white';
        }
    }

    1.学習内容


    問題を解く


    以下に示すように、2000個のボタンがあります.
    backgroundColorを赤に変更するには、このボタンをクリックします.
  • コンソールを使用して、すべてのボタンをクリックするコードを作成します.
  • let allClick = document.querySelectorAll('input');
    for(let i=0; i<allClick.length; i++){
    	allClick[i].click();
    }
  • ボタンの数で100を超えるボタンだけをクリックするには?
  • let allClick = document.querySelectorAll('input');
    for(let i=0; i<allClick.length; i++){
    	allClick[i].click();
    }
    // 또 다른 답
    let inputs = document.querySelectorAll('input');
    for(let i=0; i<inputs.length; i=i+1){
        if (inputs[i].value > 100) {
            inputs[i].click()
        }
    }
  • ボタンの数は100より大きく、200より小さいボタン
  • のみをクリックする.
    // 100보다 크고 200보다 작은 버튼만 클릭
    let inputs = document.querySelectorAll('input');
    for(let i=0; i<inputs.length; i=i+1){
        if (inputs[i].value > 100 && inputs[i].value < 200) {
            inputs[i].click()
        }
    }
    
    // if문에 i를 가지고 해도 됨
    let inputs = document.querySelectorAll('input');
    for(let i=0; i<inputs.length; i=i+1){
        if (i > 100 && i < 200) {
            inputs[i].click()
        }
    }
    
    // 논리연산자를 사용하지 않는 코드
    let inputs = document.querySelectorAll('input');
    for(let i=0; i<inputs.length; i=i+1){
    	if(inputs[i].value>100){
    		if(inputs[i].value<200){
        		inputs[i].click();
    		}
    	}
    }

    n.関数


    :関数は、関連コードを巡回して名前を付けたボックスのようなものです.
    組み込み関数を使用してプログラムを記述します.
  • 関数化の利点
    (1)関数化すると可読性が良くなる.
    (2)メンテナンスが容易である.
  • コードに一定のパターンがある場合は、関数化したほうがいいです.
    次の結果が出力されます.
    どの部分を関数化すればいいですか?
    <script>
    	function abc() {
        	console.log('a');
            console.log('b');
            console.log('c');
    	}
        for (let i = 1; i < 5; i++) {
        	console.log(i);
            abc();
    	}
    </script>
    出力a,b,cの部分を関数化した.
    console.log(1), console.log(2), console.log(3)に出力することもできます.
    1をインクリメンタル出力として規則的に出力されます.
    繰り返し文を使用してconsoleを行います.ログ(i)をabc()関数に書き込み、呼び出す.

    VATを計算する関数の作成


    関数呼び出し時にパラメータとして入れると、関数のパラメータに渡されます.
    パラメータに渡す場合は、関数が正常に動作するように、関数に宣言されている部分を削除する必要があります.
    return:関数を呼び出すと、戻り値がその位置に戻ります.
    次のコードはrateの値が返されると考えています.
    Console.logは簡単な印刷出力関数です.
    Console.log(vatRateCalc(1000, 0.1))
  • vateRateCalc関数を呼び出し、1000と0.1をパラメータとして渡し、操作後にレート値
  • を返す.
  • は最終的にコンソールです.log(rate)のようにrate値をコンソールに撮ればいいと想像します.
  • returnは関数の終了条件です.
  • <h1>VAT</h1>
    <script>
    	console.log(1);
        console.log(2);
        console.log(3);
    
    	function vatRateCalc(price, vatRate) { // 매개변수, parameter
        	// let price = 1000;
            // let vatRate = 0.1;
            let rate = price * vatRate;
            // console.log(rate);
            return rate;
        }
        // vatRateCalc(2000, 0.1); // 인자, argument
        console.log(vatRateCalc(1000,0.1));
    </script>
    <script>
         function night() {
                document.querySelector('body').style.backgroundColor = 'white';
                document.querySelector('body').style.color = 'black';
                let aSelectAll = document.querySelectorAll('a');
                for (let i = 0; i < aSelectAll.length; i++) {
                    aSelectAll[i].style.color = 'black';
                }
            }
    	function day() {
                document.querySelector('body').style.backgroundColor = 'black';
                document.querySelector('body').style.color = 'white';
                let aSelectAll = document.querySelectorAll('a');
                for (let i = 0; i < aSelectAll.length; i++) {
                    aSelectAll[i].style.color = 'white';
                }
            }
    </script>
    <input type="button" value="night" onclick="
    	if (this.value === 'night'){
        	this.value = 'day';
            night();
    	} else {
        	this.value = 'night';
            day();
    }">

    2.重要な内容


    カンマ演算子


    カンマ演算子は、各被演算子を左から右の順に計算し、最後の演算子の値を返します.
    var a, b, c;
    a = b = 3; c = 4;
    console.log(a);
    var x, y, z;
    x = (y = 5, z = 6);
    console.log(x);

    JavaScriptオブジェクト


    オブジェクト向けは、相互に関連付けられた変数と関数を描くことで命名されます.
    <html>
        <body>
            <h1>Object</h1>
            <script>
                let student = ['nagyeom', 'leeng'];
                console.log(student[0]);
                console.log(student[1]);
    
                let member = {developer:'gyeomveloper', designer:'gyeomsigner'};
                // 객체는 중괄호로 시작해서 중괄호로 끝난다.
                console.log(member.designer, member.developer);
    
                // 배열은 순서가 있는 데이터
                // 객체는 role이 다르다.
    
                let leenagyeom = {name:'leenagyeom', city:'daegu', job:'developer'};
                //객체는 이름으로 식별되는 배열과 같다.
                console.log(leenagyeom.name);
            </script>
        </body>
    </html>

    3.勉強の心得


    カンマ演算子とJavaScriptオブジェクトについて新しい知識が得られました.
    繰り返して、意識の流れに従ってコードを書くことができるようになりました.
    html基本構造から、タグを含むh 1タイトルとol、liリストを作成します.
    [暗いモード切り替え](Black Mode Toggle)ボタンを作成して、コンテンツとバックグラウンドカラーを反転することもできます.
    意識をつなぎ合わせて復習することが大切らしい.