[3日間]JavaScript 3
32212 ワード
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>
暗いモード切り替えボタンの作成
「
「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';
}
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();
}
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보다 작은 버튼만 클릭
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))
<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)ボタンを作成して、コンテンツとバックグラウンドカラーを反転することもできます.
意識をつなぎ合わせて復習することが大切らしい.
Reference
この問題について([3日間]JavaScript 3), 我々は、より多くの情報をここで見つけました
https://velog.io/@lnglog/3일차-자바스크립트3
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
var a, b, c;
a = b = 3; c = 4;
console.log(a);
var x, y, z;
x = (y = 5, z = 6);
console.log(x);
<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>
カンマ演算子とJavaScriptオブジェクトについて新しい知識が得られました.
繰り返して、意識の流れに従ってコードを書くことができるようになりました.
html基本構造から、タグを含むh 1タイトルとol、liリストを作成します.
[暗いモード切り替え](Black Mode Toggle)ボタンを作成して、コンテンツとバックグラウンドカラーを反転することもできます.
意識をつなぎ合わせて復習することが大切らしい.
Reference
この問題について([3日間]JavaScript 3), 我々は、より多くの情報をここで見つけました https://velog.io/@lnglog/3일차-자바스크립트3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol