DAY06 JavaScript 2/3
21662 ワード
🌱 学習の内容
サイトの背景を挿入
アクセスするたびに変更されるWebページの背景
スタイルシートで一括変更を許可
写真のサイトを変更し続ける
写真サイト
<!DOCTYPE html>
<html>
<head>
<title>web</title>
<link rel="stylesheet" href="style.css">
</head>参考資料
こうして単独で生成されたstylecssページにスタイルの内容を記入します.
その後、他のページでstyleラベルを削除し、linkラベルを挿入します.
style.cssページの変更はlinkラベルのあるページに一度に反映されます.
カラーグループおすすめサイト
querySeclector
重要関数
➪希望するタグの関数を選択
querySeclectorはcssセレクタを使用して要素を検索し、特定のname、id、classを制限しません.
▼▼▼制御文>条件文
異なる条件に基づいて異なるプログラム、異なるコードを実行します.
実行順序を制御します.
<html>
<body>
<script>
let input_id = prompt('아이디?');
if(input_id === 'xixi'){
alert(input_id+'님 안녕하세요^^');
} else{
alert(input_id+'가 누구냐');
}
</script>
</body>
</html>インスタントディスプレイを表示
条件がtrueの場合、結果値はです.
条件がfalseの場合、結果は2479182です.
let 文はブロックスキャン範囲を持つ領域変数を宣言し、宣言と同時に任意の値に初期化できます.
すべて
ブロックスキャンとは、ブロック{}を作成するたびに新しいスキャンが作成されることを意味します.
関数の実行時に関数内の変数へのアクセスを表す用語.
👇 実行画面
✏️Boolean
True、Falseは、Booleanの真偽を示すことを約束した.
<script>
console.log(true);
console.log(false);
</script>比較演算子
<script>
console.log(1>1);
console.log(1===1);
console.log(1!==1);
</script>本当に全く同じですか?厳格だいたい同じですか.
==はa==bを表す.
比較値と値のタイプ(Data Type)が同じかどうか、同じ場合true、異なる場合false.
比較演算子
👇実行画面
じょうけんステートメント
<h1>Conditional Statements</h1>
<script>
console.log(1);
if(true){
console.log('2 - true');
} else{
console.log('2 - false');
}
console.log(3);
console.log(4);
if(false){
console.log('5 - true');
} else{
console.log('5 - false');
}
console.log(6);
</script>👇実行画面
閉じるボタンの作成
<input type="button" value="night" onclick="
let button = this;
if(button.value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
button.value = 'day';
document.querySelectorAll('a').style.color = 'white';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
button.value = 'night';
document.querySelectorAll('a').style.color = 'black';
}
">
▼▼▼▼アレイ(Array)
クラスタリング
相互に関連付けられたデータをグループ化して名前を付けます.
目的:整理
配列内の値は順番に格納されます.順番が大事!
JavaScriptでは、配列の値はゼロからカウントされます.
各値は要素(各値)です.
htmlでは、要素はタグです
0,1,2...
格納値の番号付けインデックス(インデックス)
#ループ
For文では、1回目の実行、2回目の実行、3回目の実行、2回目の実行、3回目の実行
->本物の場合は、以下を参照してください.嘘なら次の内容
(初期化、増減演算、ブール言語)
条件文予告
<body>
<h1>배열(Array)</h1>
<script>
let topics = ['html','css','js']
let members = ['egoing', 'leezche', 'drue']
console.log(topics.length);
console.log(topics[0]);
</script>
<h1>반복문(Loop)</h1>
<script>
console.log(1);
for(let i=0; i<3 ;i=i+1){
console.log(2);
console.log(3);
}
console.log(4);
</script>
<h1>Arry + Loop</h1>
<script>
topics = ['html','css', 'js'];
for(let i=0; i<topics.length; i=i+1){
document.write('<li>'+topics[i]+'</li>');
}
</script>
</body>
▼varとletの違い
宣言をする
letは最初に使う意味です.
varは複数回宣言できます.
🍃 困難なところや解決していないこと
🍀 解決策
▼▼どうやって解決した?
▼▼そう理解した
▼どこまでわかった?
スタイルページを作成して一括適用する方法
条件文を使用してon-offボタンを作成する
じょうけんステートメント
letとvarの違い
▼▼▼次の試し方
学習内容で表現したい文を練習する必要があるようです.
🌷 学習の心得.
一日いろいろ勉強して複雑そうでした.
授業内容の順番に従って、私が何を学んだのか、どのように書くのかを確定します.今日学んだことはいろいろなことができますが、やはり遠くで絵を見たような気がします.あまり複雑に考えないで、落ち着いて何度も見てからよく知ってください.
Reference
この問題について(DAY06 JavaScript 2/3), 我々は、より多くの情報をここで見つけました https://velog.io/@sophia9901/DAY06-JavaScript-23テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol