.학습한 내용.
리뷰3 (복습) , 배경 이미지 설정 및 style.css로 적용, 버튼 설정
<!DOCTYPE html>
<html>
<head>
<title>web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = '#000F08';
document.querySelector('body').style.color = '#F4FFF8';
">
<h1><a href="index.html">web</a></h1>
<div id="container">
<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>
<div>
<h2>Welcome</h2>
Hello, WEB.
</div>
</div>
</body>
</html>-----자바 스크립트 반복문, 함수-----
Boolean , Comparison Operator, Conditional Statements
<html>
<body>
<h1>Boolean</h1>
<script>
console.log(true);
console.log(false);
</script>
<h1>Comparison Operator</h1>
<script>
console.log(1<1);
console.log(1===1);
</script>
<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>
</body>
</html><html>
<body>
<script>
let input_id = prompt('아이디?');
if(input_id === 'egoing'){
alert(input_id+'님 안녕하세요 ^^');
} else {
alert('뉘슈?');
}
</script>
</body>
</html>배열은 서로 연관된 데이터를 그룹핑해서 이름을 붙인 것.
<!doctype html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="night" onclick="
let btn = this;
if(btn.value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
btn.value = 'day';
document.querySelector('#a1').style.color = 'white';
document.querySelector('#a2').style.color = 'white';
document.querySelector('#a3').style.color = 'white';
document.querySelector('#a4').style.color = 'white';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
btn.value = 'night';
document.querySelector('#a1').style.color = 'black';
document.querySelector('#a2').style.color = 'black';
document.querySelector('#a3').style.color = 'black';
document.querySelector('#a4').style.color = 'black';
}
">
<h1><a id="a1" href="index.html">WEB</a></h1>
<div id="container">
<ol>
<li><a id="a2" href="1.html">html</a></li>
<li><a id="a3" href="2.html">css</a></li>
<li><a id="a4" href="3.html">JavaScript</a></li>
</ol>
<div>
<h2>Welcome!</h2>
Hello <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">WEB</a>
</div>
</div>
</body>
</html>배열(Array) , 반복문(Loop)
<!doctype html>
<html>
<head></head>
<body>
<h1>배열(Array)</h1>
<script>
let topic1 = 'html';
let member1 = 'egoing';
let topic2 = 'css';
let member2 = 'leezche';
let topic3 = 'js';
let member3 = 'duru';
let topics = ['html', 'css', 'js'];
let members = ['egoing', 'leezche', 'duru'];
console.log(topics.length);
console.log(topics[0]);
</script>
<h1>반복문(Loop)</h1>
<script>
console.log(1);
for(let i=0; i<2 ;i=i+1){
console.log(2);
console.log(3);
}
console.log(4);
</script>
<h1>Array + 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>
</html>.학습한 내용 중 어려웠던 점.
전부 다 어렵다...ㅠ너무 어렵다..특히 배열+반복문 ㅠㅠㅠㅠㅠㅠㅠ
역시 자바스크립트는 HTML보다 훨씬 어렵구나.
사용하는 단어도 다양한데다가 한꺼번에 여러 내용을 배우니까 앞에 배웠던 것과 또 헷갈리면서 더 복잡하게 느껴지는 것 같다..
.해결방법 작성.
반복, 복습만이 유일한 방법인 듯.
.학습 소감.
강사님이 설명해주시면 이해는 되는데, 막상 내가 직접 해보려고 하면 갑자기 머릿속이 복잡해지면서 모든 문법이 꼬이고 답답해진다.
더 열심히 공부하면서 따라가야 할 듯 하다.
.