프로그램의 순서를 제어하는 이유
자바스크립트는 프로그래밍 언어이지만, html은 프로그래밍 언어가 아니다. 이 차이는 무엇일까?
프로그램이란 순서를 뜻하는 말이다. 순서를 만드는 행위를 프로그램이라고 하며, 순서를 만드는 사람을 프로그래머라고 부른다. (반드시 컴퓨터 분야에서만 사용되는 용어가 아니다)
컴퓨터에는 여러가지 기능들이 있다. 컴퓨터로 어떤 일을 하려고 할 때 하나만 필요한 경우는 없고, 어떤 의도에 따라
순서대로 여러 기능들을 작동시키는 것이 컴퓨터를 사용하는 일반적인 방법이다.
순서가 반복되고, 반복되는 과정에서 시간이 많이 걸리고 실수를 한다면 반복적인 작업에 회의감을 느끼며
극복하고자 하는 의지가 생기게 된다.
시간의 순서에 따라서 실행되어야 할 기능들을 프로그래밍 언어의 문법에 맞게 글로 적어두었다가, 그 작업이 필요할 때 적어둔 글을 컴퓨터에게 실행해달라고 하면 컴퓨터가 그 일을 하는 것이 프로그램의 본질적인 의미이다.
html은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라 무엇을 할 필요가 없다.
하지만 자바스크립트는 사용자와 상호작용을 하기 위해 고안된 언어이고, 시간의 순서에 따라 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍이라는 형태를 띄고 있는 것이다.
여러 개의 명령어를 시간의 순서에 따라 배치해서 실행되도록 하는 방법이 자바스크립트이다.
처음에는 단순히 순서를 나열하는 것만으로도 만족스러웠지만,
조건에 따라 다른 순서의 기능이 실행되게 하거나 반복해서 어떤 기능을 실행하는 동작이 필요해졌다.
또한 순서의 배치가 복잡해짐에 따라 복잡해진 순서를 잘 정리정돈하는 방법에 대해서도 고안되기 시작하였다.
이러한 생각에 의해 등장한 개념들이 조건문, 반복문, 배열, 함수, 객체 이다.
조건문
조건문은 하나의 프로그램이 하나의 흐름으로 가는 것이 아닌, 조건에 따라 다른 순서의 기능들이
실행되도록 하는 것이다.
if문 안에는 true 혹은 false를 뜻하는 boolean형식의 데이터가 온다.
이 안의 값이 true이면 해당 문장을 실행하고, false이면 다음 문장을 실행하게 된다.
<h2>IF-true</h2>
<Script>
document.write("1<br>");
if(true) {
<!--true이면 아래의 문장을 실행한다 -->
document.write("2<br>");
} else {
<!--false이면 다음 문장을 실행한다 -->
document.write("3<br>");
}
<!--무조건 실행된다 -->
document.write("4<br>")
</Script>
<h2>IF-false</h2>
<Script>
document.write("1<br>");
if(false) {
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>")
</Script>
boolean의 값에 따라 실행되는 코드가 바뀐다. 조건에 따라 true가 오도록 하고, 조건에 따라 false가 오도록 하여 프로그램의 흐름을 제어할 수 있는 것이다.
<body>
<input id="button" type="button" value="night" onclick="
if(document.querySelector('#button').value === 'night') {
document.querySelector('body').style.backgroundColor = 'blue';
document.querySelector('#button').value = 'day'
} else {
document.querySelector('body').style.backgroundColor = 'yellow';
document.querySelector('#button').value = 'night'
}
">
</body>- 만약 버튼의 value 값이 ‘night’라면 파란색 화면을 보여준다. (이후 value = 'day'로 변경됨)
- 만약 버튼의 value 값이 ‘night’가 아니라면 노란색 화면을 보여준다. (이후 value = 'night'로 변경됨)
-this
this는 onclick 이벤트가 속해있는 태그 자신을 가리키게 된다.
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night')위의 코드는 this를 사용하여 간결하게 아래와 같이 바꿀 수 있다.
<input type="button" value="night" onclick="
if(this.value === 'night')또한 중복되는 코드는 변수 안에 넣어서 중복을 없앨 수가 있다.
<!-- document.querySelector('body'); 문장이 중복되고 있음 -->
<input type="button" value="day" onclick="
<!-- 중복되는 문장을 변수 target 안에 넣는다 -->
var target = document.querySelector('body');
if(this.value === 'day') {
target.style.backgroundColor = 'yellow';
this.value = 'night';
} else {
target.style.backgroundColor = 'blue'
this.value = 'day';
}
">
반복문
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');
</script>
</ul>위의 리스트를 출력해보면 순서대로 1,2,3,4의 리스트가 나올 것이다.
그 중 2,3만을 반복적으로 출력하고 싶다면 어떻게 해야할까? 이 때 우리는 반복문을 사용할 수 있다.
반복문이란 if문, 조건문과 함께 순서대로 실행되는 프로그램의 실행순서 흐름을 제어하는 제어문이다.
while문 안에는 true혹은 false의 값을 가지는 boolean 형태의 문장이 들어간다.
해당 문장이 true인동안 반복적으로 실행하며, false가 되면 다음 문장을 실행하게 된다.
while(true or false) {
<!-- true인 동안 실행되는 부분 -->
}
<!-- fasle 일때 실행되는 부분 --><!-- 아래의 리스트 중 2와 3을 세번 반복하고 싶다 -->
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3) {
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i+1;
}
document.write('<li>4</li>');
</script>
해당 게시글은 '생활코딩' 님의 자바스크립트 강의를 참고하였습니다.
출처 https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf
'WEB' 카테고리의 다른 글
| CSS 레이아웃: FLEX (0) | 2022.01.11 |
|---|---|
| WEB(5) : Java Script - 배열, 함수, 객체 (0) | 2021.12.21 |
| WEB(4) : Java Script - event, querySelector() (0) | 2021.12.21 |
| WEB(3) : CSS (0) | 2021.12.19 |
| WEB(2) : 웹의 역사와 웹 서버(Web Server), 웹 호스팅(Web hosting) (0) | 2021.12.14 |
