javaScript 3

24643 ワード
テキストリンク

1.勉強の内容

<h1>function</h1>

<script>
	function abc(){
    console.log('a'); //a
    console.log('b'); //b
    console.log('c'); //c
    }

    console.log(1); //1
    console.log(2); //2
    abc(); //abc함수 실행
    console.log(3); //3
    console.log(4); //4
    abc(); //abc함수 실행
    console.log(5); //5
    console.log(6); //6
    abc(); //abc함수 실행
 </script>
関数:タスクを実行するコードからなるブロック.
関数の利点
1.コードが簡潔になります.
2.可読性が良くなる.
3.メンテナンスが容易です.
<h1>VAT</h1>
<script>
	function 부가세계산(가격, 부가세율) {
	let 부가세 = 가격 * 부가세율;

	return 부가세;
	}
    
	console.log(부가세계산(2000, 0.2)); //400
</script>
関数宣言:関数名(パラメータ){}
パラメータ(parameter):関数の特殊な性質を表す変数
ex)関数付加税計算(価格、付加税率){}
パラメータには、価格と追加税率が含まれます.
使用かんすう:関数名(パラメータ)かんすうめい(ぱらめーた)
パラメータ(パラメータ):関数に入力するデータ、値の入力
ex)付加税計算(2000、0.2)
因子は2000と0.2
return:関数が実行した結果値を返します.returnは結果値を決定するので、コードの末尾に他のコードを実行しません.
<h1>object</h1>
<script>
	let student = ['egoing', 'drue'];
	console.log(student[0], student[1]); //egoing drue
        
	let member = {developer: 'egoing', designer: 'drue'};
	console.log(member.developer, member.designer); //egoing drue

	let person = {name: 'egoing', city: 'seoul', job: 'developer'}
	console.log(person.name, person.city, person.job); //egoing seoul developer
</script>
≪オブジェクト｜Objects｜ldap≫:相互に関連付けられた変数と関数をグループ化して名前を付けます.
オブジェクトと配列の違い:データが平等である場合は配列を使用し、各データの役割が異なる場合はオブジェクトを使用します.配列は「インデックスによって識別されるオブジェクト」、オブジェクトは「名前によって識別される配列」です.
Math.PI;
Math.randome();
:Mathはオブジェクト、PIは変数、randome()は関数
<script>
    function night() {
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        let link = document.querySelectorAll('a');
        for(let i=0; i<link.length; i++){
            link[i].style.color = 'white';
        }
    }

    function day() {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        let link = document.querySelectorAll('a');
        for(let i=0; i<link.length; i++){
            link[i].style.color = 'black';
        }
    }
</script>

<input type="button" id="dnbtn" value="DARK" onclick="
if(this.value === 'DARK'){
    night();
    this.value = 'WHITE';
}else{
    day();
    this.value = 'DARK';
}
">
DARKボタンを押すと背景色が黒くなり、フォント色が白くなり、WHITEボタンを押すと背景色が白くなり、フォント色が黒くなるコードです.
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
:Webページのbodyタグの背景色と文字色を変更するコード
let link = document.querySelectorAll('a');
:すべてのaラベルが配列であることを宣言するコード(aラベルは独立して設計されており、設定する必要があります)
for(let i=0; ilink[i].style.color = 'white';
}
:配列内のaタグ文字の色を変更するコード
if(this.value === 'DARK'){
night();
this.value = 'WHITE';
}else{
day();
this.value = 'DARK';
}
:ボタン名を確認して、色変更関数とボタンの名前を変更するコードを実行します.
<script>
    let inputs = document.querySelector('input');

    //전체선택
    for(let i=0; i<inputs.length; i++){
        inputs[i].click();
    }

    //100이상만 선택 1
    for(let i=99; i<inputs.length; i++){
        inputs[i].click();
    }

    //100이상만 선택 2
    for(let i=0; i<inputs.length; i++){
        if(inputs[i].value > 99){
            inputs[i].click();
        }
    }

    //100이상 200미만만 선택 1
    for(let i=0; i<inputs.length; i++){
        if(inputs[i].value > 99){
            if(inputs[i].value <200){
                inputs[i].click();
            }
        }
    }

    //100이상 200미만만 선택 2
    for(let i=0; i<inputs.length; i++){
        if(inputs[i].value > 99 && inputs[i].value < 200){
            inputs[i].click();
        }
    }
</script>

2.学習内容の難点


条件、繰返し、関数はよく知っていると思いますが、直接作成ボタンの例に適用するには、理解だけでは解決しにくいです.

3.解決方法


検索やその他の知識の繰り返し応用例により,方法を習得した.

4.勉強の心得


理解したからといって自慢するのではなく、何度も勉強し、いろいろな例題に挑戦し、習熟度を上げるように努力しましょう.
[開発ログ22.325]
React Component構造