Webベース-JavaScript 3日目

27894 ワード
テキストリンク

学習内容


ループ


繰り返し文を使用してタグのプロパティを変更する

// 반복문을 사용하지 않고 속성 변경 
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';
これらの単純な重複タスク
下図のように、二重の文を変えるときれいになります
// 배열로 가져와서
let as = document.querySelectorAll('a');
// 반복문으로 속성 변경
for(let i=0; i<as.length; i=i+1)
{
	as[i].style.color='white';
}

繰り返し文を使用してjsをクリック


(例)複数のボタンを含むページ

  • ボタンをクリック
    inputラベルの最初の要素
    • をクリックします.
    document.querySelector('input').click();
  • すべてのボタン
    • をクリック
    let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) { btns[i].click(); }
  • 100以降のボタン
    • のみをクリックします.
    let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) {
    if(btns[i].value>100)
        btns[i].click();
}
  • 100または200以下のボタン
    • のみをクリックします.
    let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) {
    if(btns[i].value>100)
        if(btns[i].value<200)
            btns[i].click();
}

    1回の書き込み
  • ネスト条件文
    • let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) {
    if(btns[i].value>100 && btns[i].value<200)
        btns[i].click();
}

    n.関数


    互いに関連付けられたコードを組み合わせて整理した箱
    関数は小さなプログラムで、すべてのプログラムは大きな関数です.

    関数を使うと?

  • コードは簡潔になります
  • 毒性が良くなる
  • メンテナンスが容易
  • は再利用性を高めることができる
    • .
  • 基底関数
    • function 부가세계산(){
	let 가격 = 1000;
	let 부가세율 = 0.1;
	let 부가세 = 가격*부가세율;
	console.log(부가세);
}

부가세계산();
  • 入力値を受信関数
    • function 부가세계산(가격, 부가세율){  // 매개변수, parameter
	let 부가세 = 가격*부가세율;
	console.log(부가세);
}

부가세계산(2000, 0.5);   // 인자, argument, 입력값
  • の戻り値を持つ関数
    • function 부가세계산(가격, 부가세율){  // 매개변수, parameter
	let 부가세 = 가격*부가세율;
	// console.log(부가세);	// 함수는 하나의 기능만 해야하므로 없는게 좋다
	return 부가세;
}

console.log(부가세계산(2000, 0.1));

    適用


    ボタン・プロパティでの繰り返し文と関数の使用

    <!DOCTYPE html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf-8">
</head>
<body>
    <script>
        function dark(){
            document.querySelector('body').style.backgroundColor = "black";
            document.querySelector('body').style.color = "white";
            let as = document.querySelectorAll('a');
            for(let i=0; i<as.length; i=i+1)
            {
                as[i].style.color = 'white';
            }
        }
        function light(){
            document.querySelector('body').style.backgroundColor = "white";
            document.querySelector('body').style.color = "black";
            let as = document.querySelectorAll('a');
            for(let i=0; i<as.length; i=i+1)
            {
                as[i].style.color = 'black';
            }
        }
    </script>
    <input type="button" value="night" onclick="
        let btn = this;
        if(btn.value === 'night')
        {
            dark();
            btn.value = 'day';
        }
        else
        {
            light();
            btn.value = 'night';
        }
    ">
    <h1><a href="index.html">web</a></h1>
    Welcome
    <ol>
        <li><a href="1.html">student</a></li>
        <li><a href="2.html">teacher</a></li>
        <li><a href="3.html">other</a></li>
    </ol>
</body>
</html>
  • ボタンをクリックすると、背景、文字、aラベルの色を変更できます.
  • ボタンを押して、ボタン値がnightであることを確認し、正しい場合は暗い関数を使用するか、light関数を使用します.
  • querySelector Allを使用してaラベルをすべて並べ、繰り返し文を使用してaラベルの色を変更します.

    • 学習後期


    aタグの属性を繰り返し文として適用すると、適用されないという問題が発生します.
    再度チェックした後、クエリー比較演算でi>as.長さi.これはlengthを書き間違えたための問題です.
    このような基本的な比較演算は混同されることがある.もう少し考えてから書く…!^^
    昨日と同じように、授業の途中で今のテーマをキーワードにしているので、授業が集中しています.授業の流れ全体を理解し、理解度を高めたり、復習したり、勉強内容を記録したりするときにも基本的な枠組みがあるので、書きやすいです.
    でも記録に注意すると、逆に川を見逃すので簡潔に書けます!
    最も重要なのは授業内容を聞くことと理解することです.
    2022.3.25開発ログJavaScript
    (iphone/ipad)画像合成の例について