2022. 5. 27. 03:38ㆍ22-1학기/웹 기초(WEB BASIC)
생활코딩 Javascript – 15. 비교 연산자와 불리언 ~ 21. 반복문
15. 비교 연산자와 불리언
1. Comparison operator : 비교 연산자
- ===
- 동등 비교 연산자, 연산자의 왼쪽에 있는 값과 오른쪽에 있는 값이 같은지를 비교하는 연산자
- 만약 같다면 true가, 다르다면 false가 출력됨
- 이항 연산자이다 (좌항과 우항을 결합해서 어떠한 데이터를 만든다.)
2. Boolean
- 위의 비교 연산자를 통해 만들어지는 true, false 값
3. 데이터 타입
- Number : 숫자
- String : 문자
- Boolean : true, false
4. <
- < 와 같음 (lt는 less than의 줄임말임)
16. 조건문
: 불리언 값이 무엇이냐에 따라서 실행되는 코드가 바뀌는 것
-> 조건문에 true가 들어가면 언제나 true이기 때문에 실행문이 반드시 실행되고, 조건문에 false가 들어가면 언제나 false이기 때문에 실행문이 절대 실행되지 않는다.
17. 조건문의 활용
value값이 뭔지 알기 위해서 Console을 이용하기
태그의 id 값을 "night_day"로 바꾸기
if문의 조건이 참이면 if문의 실행문을 실행하고,
조건이 거짓이면 else문의 실행문을 실행하도록 한다.
18. 리팩토링 중복의 제거
1. 리팩토링(Refactoring)
- 팩토리(factory) : 공장
- 공장으로 다시 보내서 좀 더 개선한다는 의미 -> 중복된 코드를 개선하는 작업
- 코드를 개선해서 코드의 가독성을 높이고 유지보수를 하기 편리하게 만듦
- 소프트웨어가 커지고 복잡해지는 데 있어서 리팩토링을 해야 좋은 프로그램을 만들 수 있음
2. var target = document.querySelector('body');
위의 명령어를 이용해서 document.querySelector('body')을 target으로 바꿔서 효율적으로 만들기
19. 반복문 예고
링크가 무수히 많아진다면 반복적인 작업을 많이 해야 한다. 그럼 코딩의 양도 늘어나고 유지보수하는 것도 매우 힘들어진다. -> 반복문을 사용하여 해결해야 함
20. 배열
데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수가 없기 때문에, 그 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아두는 수납상자가 배열(array)이다.
1. 배열
- 배열은 대괄호로 시작해서 대괄호로 끝남
- 여러 개의 값을 적을 수 있음
- 값과 값 사이는 콤마로 구분함
- 변수에 배열을 담을 수 있음 ex) var coworkers = ["egoing", "leezche"]; : 변수 coworkers에 배열이라는 새로운 데이터 타입이 담긴 것임
-배열을 작성하는 방법
<script>
var coworkers = ["egoing", "leezche"];
</script>
-배열을 가져오는 방법
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
-배열의 크기를 세는 방법
<script>
document.write(coworkers.length);
</script>
-배열에 데이터를 더 추가하는 방법
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
21. 반복문
반복문 : 루프(Loop)
1. while() {}
- 반복문의 키워드
- while문의 조건문인 () 안에는 true, false인 boolean 데이터 타입이 들어간다.
- 조건문인 true인 동안은 중괄호{} 안에 있는 코드들이 반복적으로 실행된다. 조건문이 false가 될 때까지 실행된다. 조건문이 false가 되면 while문 바깥쪽에 있는 코드가 그때서야 실행된다.
- 반복문은 순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Loop</h1>
<ul>
<script>
document.write('<li>1</li>');
while(true) {
document.write('<li>2</li>');
document.write('<li>3</li>');
}
document.write('<li>4</li>');
</script>
</ul>
</body>
</html>이렇게 조건문을 true로 하면 무한히 반복되기 때문에 이 웹브라우저가 컴퓨터 자원을 다 가져가 버림
따라서 반복문이 언제 종료될 것인지 지정하는 것이 필요함
-> 변수 사용하기
[실습]
링크 : file:///C:/Users/lin19/Desktop/page/home.html
[코드]
1. home.html
<!doctype html>
<html>
<head>
<title>MENU - Welcome</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<p>메뉴 소개</p>
</body>
</html>
2. a.html
<!doctype html>
<html>
<head>
<title>MENU - 한식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<h2>한식</h2>
<p><img src="han_1.jpg" width="50%">
<img src="han_2.jpg" width="50%">
<img src="han_3.jpg" width="50%">
<img src="han_4.jpg" width="50%">
<img src="han_5.jpg" width="50%">
</p>
</body>
</html>
3. b.html
<!doctype html>
<html>
<head>
<title>MENU - 양식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<h2>양식</h2>
<p>
<img src="us_1.jpg" width="50%">
<img src="us_2.jpg" width="50%">
<img src="us_3.jpg" width="50%">
<img src="us_4.jpg" width="50%">
<img src="us_5.jpg" width="50%">
<img src="us_6.jpg" width="50%">
<img src="us_7.jpg" width="50%">
<img src="us_8.jpg" width="50%">
</p>
</body>
</html>
4. c.html
<!doctype html>
<html>
<head>
<title>MENU - 중식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<h2>중식</h2>
<p>
<img src="ch_1.jpg" width="50%">
<img src="ch_2.jpg" width="50%">
<img src="ch_3.jpg" width="50%">
</p>
</body>
</html>
5.html
<!doctype html>
<html>
<head>
<title>MENU - 일식</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="home.html">MENU</a></h1>
<ol>
<li><a href="a.html">한식</a></li>
<li><a href="b.html">양식</a></li>
<li><a href="c.html">중식</a></li>
<li><a href="d.html">일식</a></li>
</ol>
<h2>일식</h2>
<p>
<img src="ja_1.jpg" width="50%">
<img src="ja_2.jpg" width="50%">
<img src="ja_3.jpg" width="50%">
<img src="ja_4.jpg" width="50%">
<img src="ja_5.jpg" width="50%">
</p>
</body>
</html>[설명]
home.html로 홈페이지를 만들고 a,b,c,d 링크를 삽입해서
각 글자를 클릭하면 a,b,c,d.html 페이지로 이동하게끔 만든다.
각 페이지로 이동하면 하위 카테고리의 주제와 예시인 메뉴 사진이 나온다.