반응형
13. 프로그램, 프로그래밍, 프로그래머
14. 조건문 예고
Toggle 에 대해..
15. 비교연산자와 불리언
비교연산자 = comparison operator
=== 이항연산자 + 도 이항연산자 오른쪽과 왼쪽의 값을 이용
Bealean : Ture or False
우리가 배운 data type 1. number2. string3. boolena
<!DOCTYPE html>
<head>
</head>
<html>
<body>
<h1>Comparision operator & boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
document.write(1===1);
</script>
<h3>1===1</h3>
<script>
document.write(1===2);
</script>
<h3>1<2</h3>
<script>
document.write(1<2);
</script>
<h3>2>1</h3>
<script>
document.write(2<1);
</script>
</body>
</script>
</body>
</html>
html에서는 꺽쇠기호가 태그 나타낼 때 쓰여서 <> 사용 혼란 막기 위해 대신< = <> =>로씀
16. 조건문
<!DOCTYPE html>
<head>
</head>
<html>
<body>
<h1>Conditional statements</h1>
<h2>Program</h2>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<h2>IF-true</h2>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
<h2>IF-true</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
</body>
</html>
if문에 () 괄호 안에는 boolean data type이 옴. Boolean의 값에 따라 실행되는 값이 바뀐다.
17. 조건문의 활용
<!DOCTYPE html>
<head>
</head>
<html>
<body>
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day';
}
else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='blue';
document.querySelector('#night_day').value='night';
}
">
<div>lululala</div>
</body>
</html>
18. 리팩토링(중복의 제거)
refactoring
불편함 : 위의 코드를 복사 붙여넣기하면 background는 바뀌지만 value가 안바뀜 이럴 때 id 를 변경해줘야함 -> 모든 코드안의 id 바꾸기 귀찮
THIS 자기 자신을 가르킴.
<!DOCTYPE html>
<head>
</head>
<html>
<body>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
}
else{
target.style.backgroundColor='white';
target.style.color='blue';
this.value='night';
}
">
<div>lululala</div>
<input type="button" value="night" onclick="
if(this.value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value = 'day';
}
else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='blue';
this.value='night';
}
">
</body>
</html>
변수 target으로 바꿔서 document.querySelector('body')로 대체근데 이건 맨 위의 버튼 코드에만 적용하고 아래 복붙한 곳에는 그대로 쓰는ㄱ ㅓㅅ 같음.
19.반복문 예고
20. 배열
21. 반복문
22. 배열과 반복문
23. 배열과 반복문의 활용
반응형
