[開発ログ22.325]
4995 ワード
学習の内容
関数オーバーラップによるトラブルシューティング
例えば、無数の数字からなる入出力のみから所望の入力を選択するためには、既存の使用関数を重畳することで解決することができる.
100~200件の結果を望む場合は、次のコードを使用します.
let inputs = document.querySelectorAll('input');
for(let i=0; iif(inputs[i].value<200){
if(inputs[i].value>100){
inputs[i].click();
}
}
}
関数による読み取りとメンテナンスの効率化
<input type="button" id="dnbtn" value="DarkMode" onclick="
let button = document.querySelector('#dnbtn');
if(button.value === 'DarkMode'){
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';
}
button.value = 'WhiteMode'
} else {
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';
button.value = 'DarkMode'
}
}
">
上記の可読性が低下し、数が増加すると、修正が困難なコードに
次の関数の組み合わせにより、文の利点をより簡単に修正でき、コードが長ければ長いほどメンテナンスが困難になるという既存の問題を補うことができます.<script>
function darkmode() {
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 whitemode() {
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';
}
}
//関数の指定<input type="button" value="DarkMode" onclick="
let button = this;
if(button.value === 'DarkMode'){
darkmode();
button.value = 'WhiteMode';
} else {
whitemode();
button.value = 'DarkMode';
}
">
//함수활용
オブジェクト向け
オブジェクト向け相互に関連付けられた変数と関数を組み合わせて名前を付ける
例
let student = ['ego', 'foon'];
console.log(student[0], student[1]); let member = {developer:'ego', designer:'foon'};
console.log(member.developer, member.designer);
let person = {name:'ego', city:'seoul', job:'developer'};
console.log(person.name, person.city, person.job);
学習中の難点や未解決の問題
関数の範囲設定とかっこの配置エラー
ソリューションの作成
和弦が曲がると、ゆっくりと外から確認します.
記述するコードの動作原理を理解することにより,この問題を解決した.
学習の心得.
概念全体の理解が一番大切だと思います.
Reference
この問題について([開発ログ22.325]), 我々は、より多くの情報をここで見つけました
https://velog.io/@dofoong/개발일지-22.3.25
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
if(inputs[i].value>100){
inputs[i].click();
}
}
}
関数による読み取りとメンテナンスの効率化
<input type="button" id="dnbtn" value="DarkMode" onclick="
let button = document.querySelector('#dnbtn');
if(button.value === 'DarkMode'){
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';
}
button.value = 'WhiteMode'
} else {
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';
button.value = 'DarkMode'
}
}
">
上記の可読性が低下し、数が増加すると、修正が困難なコードに次の関数の組み合わせにより、文の利点をより簡単に修正でき、コードが長ければ長いほどメンテナンスが困難になるという既存の問題を補うことができます.
<script>
function darkmode() {
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 whitemode() {
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';
}
}
//関数の指定<input type="button" value="DarkMode" onclick="
let button = this;
if(button.value === 'DarkMode'){
darkmode();
button.value = 'WhiteMode';
} else {
whitemode();
button.value = 'DarkMode';
}
">
//함수활용
オブジェクト向け
オブジェクト向け相互に関連付けられた変数と関数を組み合わせて名前を付ける
例
let student = ['ego', 'foon'];
console.log(student[0], student[1]);
let member = {developer:'ego', designer:'foon'};
console.log(member.developer, member.designer);
let person = {name:'ego', city:'seoul', job:'developer'};
console.log(person.name, person.city, person.job);
学習中の難点や未解決の問題
関数の範囲設定とかっこの配置エラー
ソリューションの作成
和弦が曲がると、ゆっくりと外から確認します.
記述するコードの動作原理を理解することにより,この問題を解決した.
学習の心得.
概念全体の理解が一番大切だと思います.
和弦が曲がると、ゆっくりと外から確認します.
記述するコードの動作原理を理解することにより,この問題を解決した.
学習の心得.
概念全体の理解が一番大切だと思います.
Reference
この問題について([開発ログ22.325]), 我々は、より多くの情報をここで見つけました https://velog.io/@dofoong/개발일지-22.3.25テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol