- 본내용은 (생활코딩) 강의를 기반으로 한 요약정리입니다.
생활코딩, WEB2 - Javascript
Javascript언어의 등장
Javascript는 정적인 HTML을 보다 동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고, 웹브라우저에 동작을 부여하기 위한 욕구에서 1995년 등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기에, 호환되지 않는다는 측면에서 이 둘은 분명히 다르다.
Javascript 살펴보기
Javascript 언어를 살펴보기 가장 좋은 사례가 다크모드와 주간모드에 대한 부분일 것이다. 우리가 현재 보고 있는 velog 상단에도 이미지로된 다크모드와 주간모드 버튼이 있는데, 사용자가 원하는 환경에 따라서 HTML에 가변적인 요소를 더해주며, 동적인 작동이 이뤄지도록 하는 것이 Javascript를 활용하는 것 가운데 하나의 용례이다. 이를 적용한 코드를 보면서, 이를 더 살펴보자.
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
<input type="button" value="night" onclick="
document.querySelector('.light-mode').style.backgroundColor='black';
document.querySelector('.light-mode').style.color='white';"
style="width: 50px; background-color:black;color:white; border:1px solid black; border-radius:5px;">
<input type="button" value="day" onclick="
document.querySelector('.light-mode').style.backgroundColor='white';
document.querySelector('.light-mode').style.color='black';"
style="width: 50px; background-color:white;color:black; border:1px solid gray; border-radius:5px;">
<br><br>Javascript는 정적인 HTML을 보다 동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고, 웹브라우저에 동작을 부여하기 위한 욕구에서 1995년 등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기에, 호환되지 않는다는 측면에서 이 둘은 분명히 다르다.
</div>위를 보면 div태그(class="light-mode")라는 가장 큰 공간 안에 담겨있는 2개의 input:buttom태그와 띄어쓰기로 구분된 "Javascript는 정적인 ... 분명히 다르다"는 내용을 가진 HTML언어로 작성된 문서가 있는 것을 볼 수 있다.
먼저 2개의 input:buttom태그를 보자. 속성으로 onclick=""이 선언되었다. 그리고 이 onclick=""안에서 작성되는 언어가 바로 Javascript이다.
- document.querySelector('.light-mode').style.backgroundColor='black';
- document.querySelector('.light-mode').style.color='white';
큰따옴표("") 사이에 기록된 이 2줄이 Javascript 문법에 따라 작성된 코드이다. 내용을 보면 문서(document)에서 class선택자(.light-mode)를 찾아라. 그리고 그 스타일(style)로 배경은 검은색, 글자의 색상은 흰색으로 적용해라는 명령이 선언되었다. 그렇다면 언제 이 명령이 실행될까? 바로 첫번째 onclick 버튼 night를 클릭했을 때이다.
반면에 두번째 onclick 버튼 day를 클릭하면 어떤 일이 일어날까? 배경은 흰색, 글자의 색상은 검은색이 실행될 것이다. 이렇게 작동하는 언어가 javascript이다.
HTML과 script 태그
물론 Javascript는 HTML 내에 직접 기록하는 것도 가능하다. 이때는 Javascript언어를 사용하기 위한 공간을 HTML 내에 만들어주어야 하는데, 이때 필요한 것이 script 태그이다. 해당 태그는 HTML 태그 사용빈도에 있어서 무려 8위에 해당될 정도로 빈번하게 사용되는 태그인데, 현대의 HTML에서 그만큼 동적인 작용을 많이 사용하고 있다고 보아도 무방할 것이다. Javascript도 CSS와 마찬가지로, 코드의 재사용성적인 측면에서 별도의 파일로 만들고, 이를 적용할 HTML과 연결시켜 사용할 수도 있다. 이때 연결하는 방법이 CSS와는 다른데, Head태그에 script 태그를 통해서 연결시켜준다. 이때 defer(속성)은 HTML이 다운로드 될 때, 해당 .js파일을 다운받지만, 해당 파일이 실행될 때까지 기다리고 있다는 속성을 부여하는 값이다. 즉 다른 작업을 웹브라우저에서 구동하는데 방해하지 않고 차분히 기다리는 "기다려!" 명령과 유사하다고 보면 좋을 것 같다.
<head>
...
<script defer scr:"파일의경로.js">
...
</head>직접 기록은 body태그 내에 script 태그를 선언함으로 가능하다. 이러한 선언을 통해서, 해당 태그는 이제 javascript언어를 통해 HTML에 구현되게 된 것이다.
<body>
1+1
<script> document.write(1+1)</script>
</body>위를 보면 동일한 1+1을 기록했지만, 출력되는 결과는 다르다. 단순하게 body 태그안에 기록된 1+1은 그대로 출력되지만, Javascript 안에 기록된 1+1은 연산되어 그 값인 "2"를 화면에 출력한다. 이것이 HTMl과 Javascript의 근면한 차이이다. HTML은 단순하게 정보를 그대로 옮겨적는다면, Javascript는 계산식을 적용하는 동적인 활동을 통해 웹브라우저에 기록한다.
Javascript로 이벤트 발생시키기
경고창(alert) 이벤트
1) Javascript를 활용하는 가장 빈번한 사용에는 경고창(alert) 기능이 있다.
<input type="button" value="hi"
onclick="alert('안녕하세요.')"
style="width: 50px; background-color:white;color:black; border:1px solid gray; border-radius:5px;">버튼을 디자인한 style속성과 같은 것은 제외하고, 우리가 살펴볼 부분은 onclick=""속성이다. onclick속성 안에서의 언어는 javascript 라고 하였다. 위와 같이 javascript문법에 따라 alert('안녕하세요')를 작성하고, 웹브라우저를 실행하면, 설정에 따라 "hi"라는 버튼이 생겨난다. 그리고 이 버튼을 클릭하면, 경고창이 실행되는 이벤트를 사용자는 확인할 수 있게 된다.
2) 마찬가지로 input태그에 속성으로 onchange를 설정하면 아래와 같은 효과를 얻을 수도 있다. input type="text"는 사용자가 입력할 수 있는 공간을 다음과 같이 만드는 태그였으며, onchange는 별도의 설정없이 사용자가 내용을 입력하고 input 태그로 나가면 안에 기록된 javascript 언어에 따른 설정이 실행되도록 설정한 것이다. 코드의 결과에 따라 경고창(alert)이 실행되는 것을 볼 수 있다.과 유사한 속성으로는도 있다.
<input type="text" onchange="alert('기록되었습니다.')"> 
write(기록하기) 이벤트
<body>
<input id="name" type="text" placeholder="이름입력">
<button onclick="
var name = document.getElementById('name').value;
document.getElementById('namereturn1').innerText = name
document.getElementById('namereturn2').innerText = name">입력</button>
<input id="name2" type="text" placeholder="이름입력" onkeyup="
var name = document.getElementById('name2').value;
document.getElementById('namereturn1').innerText = name
document.getElementById('namereturn2').innerText = name">
<a id="namereturn1" style="font-weight: 700;"></a> 고객님, 저희 업체에서는
<a id="namereturn2" style="font-weight: 700;"></a> 고객님을 우수고객으로...
</body>1) 위의 코드를 보면 2개의 input태그가 있고, 첫번째 input태그와 함께 작동할 1개의 button태그, 그리고 HTML언어로 기록된 무언가가 있다. 첫번째 input태그과 button태그를 살펴보자. 작동은 button태그의 onclick속성이 실행되었을 때이다. 이때 var(variable)변수를 선언하고 변수인 name 안에 대입연산자(=)를 통해서 그 값으로 document문서 중에 찾은 태그의 id속성이 name인, getElementById('name'), 부분의 입력된 값(value)을 연결시켰다. 즉 button은 클릭하면, 첫번째 input(id="name")에 입력된 값이 변수(var) name 안에 담겨질 것이다. 그리고 실행될 내용은 태그의 id속이 namereturn1인 곳을 찾아서 그 안에 내용으로(innerText) 변수 name, 즉 사용자가 입력한 내용을 기록하라는 명령이다.
정리하면, 사용자가 첫번째 input에 내용을 입력하고 버튼을 실행하면, id가 namereturn1, namereturn2인 태그의 내용으로 해당 내용이 입력된다는 말이다.
2) 반면에, 두번째 input 태그는 button을 활용하지 않고, 속성으로을 선언하였다. 즉 input태그에 사용자가 내용을 입력하면 즉시로 반영되는 javascript를 선언한 것이다. 사용자가 해당 내용에 id속성이 name2인 곳에 입력한 내용이, 즉시로 id속성이 namereturn1, namereturn2인 태그의 내용으로 해당 내용이 입력된다는 말이다.
한 번 재미삼아, 위의 코드를 복사한 후, 웹브라우저에서 HTML을 실행해보아라.
토글(toggle)을 통해서 버튼제어하기
위에서 보았던 다크모드와 주간모드를 보다 세련되게 만들어보자. 현재 우리가 사용하고 있는 velog도 보면, 다트모드와 주간모드 버튼이 언제나 동시에 등장하고 있지 않다. 주간모드일 때는 다크모드 버튼이, 다트모드일 때는 주간모드 버튼이 있다. 이러한 구현을 가능하게 하는 기능이 토글(toggle)이다.
여기서 토글(toggle)이란 하나의 설정 값으로 다른 값으로 전환하는 것이다. 하나의 스위치로 여러 개의 동작을 수행하는 것, 바로 이것이 토글이다. javascript에서는 조건문(if, else)을 통해서 이러한 기능을 구현할 수 있다.
<body>
<input id="night_day" type="button" value="다크모드"
onclick=" if(document.getElementById('night_day').value === '다크모드')
{ document.querySelector('.light-mode3').style.backgroundColor='black';
document.querySelector('.light-mode3').style.color='white';
document.getElementById('night_day').value = '주간모드';}
else { document.querySelector('.light-mode3').style.backgroundColor='white';
document.querySelector('.light-mode3').style.color='black';
document.getElementById('night_day').value = '다크모드';}"
style="margin-bottom:10px;">
<div class="light-mode3" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
Javascript는 정적인 HTML을 보다 동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고, 웹브라우저에 동작을 부여하기 위한 욕구에서 1995년 등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기에, 호환되지 않는다는 측면에서 이 둘은 분명히 다르다.</div>
</body>분명 위의 코드는 가장 위에서 구현한 다트모드와 주간모드에 비해서 코드의 길이가 길어진 측면이 있지만, 결과물인 웹브라우저에서 버큰이 하나로 줄었다는 점에서 웹브라우저의 버튼의 효율성을 보다 높게 구현하였다.
최초의 웹페이지에 구현된 버튼의 value속성(화면에 표시되는 부분)은 "다크모드"이다. 이 상태에서을 통해서 HTML에 동적인 실행을 실행하면 다음의 것이 실행될 것인데 먼저 if의 조건에 따라서 실행될 것이고, 그렇지 않으면 else의 조건에 따라서 실행될 것이다.
조건(if)는 id속성이 'night_day'인 태그의 value가 '다크모드'라면(엄격한 비교연산자 ===), 조건에 해당되는 부분{중괄호}을 실행할 것이다. 첫번째로 실행할 것은 클래스속성이 '.light-mode3'인 부분을 찾아서 배경의 스타일을 변경(검은색)해달라는 것이고, 두번째로 실행할 것은 역시 같은 부분의 글자의 색을 변경(흰색)해달라는 것이다. 세번째로 실행할 내용은 id속성이 'night_day'인 부분의 value를 '주간모드'로 변경하라는 말이다.
이때, querySelector와 getElementByClass/ById는 동일하다.
- querySelector('.light-mode3')
- getElementByClass('.light-mode3')
- querySelector('#night_day')
- getElementById('night_day')
만약 id속성이 'night_day'인 태그의 value가 '다크모드'가 아니라면, 조건(else)가 실행될 것이다. 이러한 설정으로 토글의 기능을 실행해 볼 수도 있다. 그런데 조건문은 토글 기능을 구현할 때만 활용하는 것이 아니라, 코드를 작성하는 자의 조건에 따라서 정보를 위와 같이 다룰 수 있음을 보여주는 것 정도로 이해하면 될 것 같다.
Javascript의 데이터타입
코드를 조작하다보면, 다루려는 데이터의 타입에 따라서 해당 코드가 작동할 수도 있고, 작동하지 않는 경우에 직면하기도 한다. 그러기에 이 부분에서 Javascript가 다루는 데이터들의 타입을 살펴봄은 적당할 것이다.
mozilla에서 정리한 Javascript의 타입은 6개가 있다. 이 중에 가장 많이 사용되는 타입 2가지는 숫자형(Number)과 문자형(String)이다.
아래의 코드 살펴보자.
<body>
<script>
document.write(1+1)
document.write("1"+"1")
document.write(1 == 1)
document.write(1 == 2)
document.write(1 === 1)
document.write(1 === "1")
</script>
</body>숫자 자료형과 문자 자료형
이와 같이 코드를 입력해 보자. 웹브라우저에 어떠한 결과가 나올까? 첫번째 줄은 아마도 2가 기록될 것이다. 그러나 두번째 줄은 아마도 11이 기록될 것이다. "1"+"1"의 결과인 11에 대해서 어떠한 생각이 드는가. 무언가 잘못되었다고 여겨지지 않아요? 맞다. 무언가 잘못되었다.
- 1 과 같이 기록한 것은 javascript에서 숫자로 인식한다.
- "1"과 같이 기록한 것은 javascript에서 문자로 인식한다.
변수를 선언할 때도 마찬가지이다.
- var A = 1;
- var B = "1";
변수A는 숫자 1을 그 안에 담은 것이고, 변수B는 문자 "1"을 그 안에 담게 된 것이다. 그러기에 코드를 작성할 때 입력하는 내용이 숫자형인지 문자형인지 인지하는 것이 중요하다.
Boolean 자료형
세번째로 살펴볼 자료형은 boolean이다. 참이냐?거짓이냐?를 판단하는 자료형으로 이해하면 된다. 위의 코드에서 기록한 세번째 코드와 네번째 코드가 그것이다. 세번째 코드에 따라 기록된 결과물인 웹브라우저는 true를 기록할 것이고, 네번째 코드에 따라 기록된 결과물인 웹브라우저는 false를 기록할 것이다. 그런데 이때의 등호 표시를 보자 == 이다. 하나의 등호(=)가 사용되지 못한 것은 대입연산자의 이름으로 javascript가 사용하고 있기 때문이다. 변수를 사용할 때 우항의 값을 좌항의 값에 대입시킨다는 역할을 이미 하나의 등호(=)가 수행하고 있기 때문에, 일치를 문는 등호는 == 또는 === 가 사용된다. 그런데 문제는 == 는 1 과 "1"을 동일한 것이라고 인식한다는 한계를 가진다. 물론 내용은 동일하지만, 둘은 자료형이 다르다. 그러기에 엄밀하게 자료형까지 비교해야 한다면 === 를 사용한다.
이 결과, 위의 다섯번째 코드는 true 이지만, 여섯번째 코드는 false가 된다.
Refactoring 리펙토링
리펙토링이란, 코드의 중복을 제거함으로 중복을 제거하고, 가독성을 높이는 행위를 말한다. 물론 리펙토링은 중복되는 script를 함수로 만들어서 기록한 함수를 가져다 사용하는 곳이라면 어디서든지 재사용할 수 있도록 말하는 것을 의미하기도 하지만, 단순하게, 기록한 코드를 줄이는 행위에도 지칭될 수 있다. 예를 들면 아래의 코드를 줄이는 것과 같이 말이다.
<body>
<input id="night_day" type="button" value="다크모드"
onclick=" if(document.getElementById('night_day').value === '다크모드')
{ document.querySelector('.light-mode').style.backgroundColor='black';
document.querySelector('.light-mode').style.color='white';
document.getElementById('night_day').value = '주간모드';}
else { document.querySelector('.light-mode').style.backgroundColor='white';
document.querySelector('.light-mode').style.color='black';
document.getElementById('night_day').value = '다크모드';}"
style="margin-bottom:10px;">
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
Javascript는 정적인 HTML을 보다 동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고, 웹브라우저에 동작을 부여하기 위한 욕구에서 1995년 등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기에, 호환되지 않는다는 측면에서 이 둘은 분명히 다르다.</div>
</body>위의 코드를 리펙토링 한 결과가 아래와 같다. 리펙토링은 javascrip에서 사용하는 것임으로, javascrip언어를 사용하는 공간 안에서 작성할 수 있다. 그러나 용어 자체로 보았을 때 리펙토링은 css를 별도의 파일로 만들고 class/id속성을 통해서 재사용 행위에서도 적용될 수 있는 용어이다.
<body>
<input id="night_day" type="button" value="다크모드"
onclick="
var a = document.getElementById('night_day')
var b = document.querySelector('.light-mode').style
if(a.value === '다크모드')
{ b.backgroundColor='black';
b.color='white';
a.value = '주간모드';}
else {b.backgroundColor='white';
b.color='black';
a.value = '다크모드';}"
style="margin-bottom:10px;">
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
Javascript는 정적인 HTML을 보다 동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고, 웹브라우저에 동작을 부여하기 위한 욕구에서 1995년 등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기에, 호환되지 않는다는 측면에서 이 둘은 분명히 다르다.</div>
</body>배열과 반복문(while, for)
배열[Array]이란?
일상의 예를 들어서 살펴보다. 내게 책이 무수히 많다고 해보자. 이럴 때 정리를 위해서 무엇이 필요할까? 아마도 책장일 것이다. 배열이란 코드의 책장과 같다. 대입연산자(=) 통해서 변수 안에 많은 정보들을 가지고 있는 책장, 그것이 바로 배열이다.
<script>
var a = ["값1", "값2", "값3", "값4", "값5", "값6"]
</script>위와 같이 [대괄호] 사이에 하나 하나의 정보들을 담을 수 있고, 이러한 정보들의 책장이 바로 배열이다.
<script>
var a = ["값1", "값2", "값3", "값4", "값5", "값6"]
a.push("값7", "값8")
a.unshift("값0")
a.splice(1,1, "값00002")
a.splice(1,2, "값002", "값003")
a.shift()
a.pop()
</script>그리고 배열은 위와 같은 코드를 통해서 추가로 입력할 수도 있고, 내용의 값을 변경할 수도 있다.
- push, 단순하게 배열 뒤에 내용을 추가해준다.
- unshift, 배열 앞 앞에 내용을 추가해준다.
- splice, 컴퓨터용어러 1번지에 해당되는 2번째 자리부터, 값 하나를 "안에 내용으로" 변경해준다.
- splice, 두번째 splice는 1번지부터 2번지까지의 자리의 값을 이와 같이 변경해 줄 것이다.
- shift, 배열의 가장 첫번째 내용을 삭제한다.
- pop, 배열의 가장 마지막 내용을 삭재한다.
splice의 첫번째 숫자는 해당 변경이 시작될 위치, 두번째 숫자는 해당 위치로부터 몇 개의 내용을 변경해 줄 것인지 설정하며 내용을 변경할 수도 있다.
반복문(while)
배열로 담겨진 내용은 반복문을 통하여 언제든지 불러와 사용할 수 있다.
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
<span>!!</span>Javascript는 정적인 HTML을 보다 <span>!!</span>동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고<span>!!</span>, 웹브라우저에 동작을<span>!!</span> 부여하기 위한 욕구에서 1995년 <span>!!</span>등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언<span>!!</span>어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가<span>!!</span> 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기<span>!!</span>에, 호환되지 않는다는 측면에서 이 둘은<span>!!</span> 분명히 다르다.</div>다크모드와 주간모드를 작성했던 코드에 무수히 많은 span태그들이 존재한다고 하자. 이때 단 하나의 버튼으로 span태그의 색을 다루고 싶다면, 이럴 때 반복문을 사용하면 간단하게 해결할 수 있다.
<input type="button" value="다크모드" id="night_day" onclick="
var a = document.querySelector('.light-mode')
var b = document.querySelectorAll('.light-mode span')
var i = 0
if(this.value === '다크모드') {
a.style.backgroundColor='black';
a.style.color='white';
this.value = '주간모드';
while(i < b.length) {
b[i].style.color='red';
b[i].style.fontWeight='700';
i = i +1;
}
} else {
a.style.backgroundColor='white';
a.style.color='black';
this.value = '다크모드';
while(i < b.length) {
b[i].style.color='green';
b[i].style.fontWeight='700';
i = i +1;
}}"
style="margin-bottom:10px;">
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
<span>!!</span>Javascript는 정적인 HTML을 보다 <span>!!</span>동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고<span>!!</span>, 웹브라우저에 동작을<span>!!</span> 부여하기 위한 욕구에서 1995년 <span>!!</span>등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언<span>!!</span>어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가<span>!!</span> 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기<span>!!</span>에, 호환되지 않는다는 측면에서 이 둘은<span>!!</span> 분명히 다르다.</div> 위의 코드가 길지만 읽어볼 수 있다. 간단하다. input태그의 속성 onclick이 클릭됨에 따라서 아래의 코드가 솨솨솩 진행되며, 결과를 산출하는 것이다. 여기서 if(this)와 else(this)라는 내용을 확인할 수 있다. 이렇게 하나씩 배워가는 것이다. this라는 값은 특별한 것이 아니다. javascript를 실행시킨 태그를 가리키는 대명사라고 생각하자. 즉 this = document.querySelector('#night_day')인 것이다.
변수 b를 보면 document.querySelectorAll('.light-mode span')에서 찾은 모든(SelectorAll) span태그가 담겨지게 될 것이다. 배열데이터의 형식으로 말이다. 물론 여기서는 위에서 배운 것과 같이 [대괄호]를 통해서 기록하지 않았지만, 모든(SelectorAll)이라는 명령어가 실행되며, 배열 안에 데이터들을 담았다.
그리고 이를 실행할 조건문을 보면, while이 선언되며 반복적으로 어떠한 내용들이 실행되는 것을 볼 수 있다.
while(i < b.length) {
b[i].style.color='red';
b[i].style.fontWeight='700';
i = i +1;
}여기서 i는 초기값으로 0을 담은 변수이다. 위의 코드에서 var i = 0으로 선언된 내용을 기억하자. 반복문을 읽어보면, i는 배b의 길이만큼(length) 반복해서 한 번씩 실행될 것인데, b[i]번째마다, 해당 내용의 색과 글자의 크기를 볼드체로 실행하자, 그리고 난 뒤에 i의 값은 i+1씩 더해서 되돌려 주자가 된다.
최초의 i는 0이기에, 배열의 0번지(일상의 첫번째)가 실행될 것이고, 이것이 실행되면 i는 1이 된다. 그러면 다시 실행되여 배열의 1번지(일상의 두번째)가 실행될 것이고, 이것이 실행되면 i는 2가 된다. 그러면 다시 실행되어 배열의 2번지(일상의 세번째)가 실행될 것이고, 이것이 실행되면 i는 3이 된다. 이러한 식으로 배열의 내용일 끝날때까지 내용이 반복된다.
반복문(for)
그러나 코드의 절약적인 측면에서 while문은 불필요할 수 있는 var i=0을 선언해 주어야 한다는 단점이 있어서, for문을 통한 반복문이 더 선행된다. 위의 코드를 아래와 같이 변경할 수 있다.
<input type="button" value="다크모드" id="night_day" onclick="
var a = document.querySelector('.light-mode')
var b = document.querySelectorAll('.light-mode span')
if(this.value === '다크모드') {
a.style.backgroundColor='black';
a.style.color='white';
this.value = '주간모드';
for(var i=0;i.b.length;i++){
b[i].style.color='red';
b[i].style.fontWeight='700';}}
else {
a.style.backgroundColor='white';
a.style.color='black';
this.value = '다크모드';
for(var i=0;i.b.length;i++){
b[i].style.color='red';
b[i].style.fontWeight='700';
}}"
style="margin-bottom:10px;">
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
<span>!!</span>Javascript는 정적인 HTML을 보다 <span>!!</span>동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고<span>!!</span>, 웹브라우저에 동작을<span>!!</span> 부여하기 위한 욕구에서 1995년 <span>!!</span>등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언<span>!!</span>어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가<span>!!</span> 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기<span>!!</span>에, 호환되지 않는다는 측면에서 이 둘은<span>!!</span> 분명히 다르다.</div>또한 for문은 반복시킬 때마다, 실행되었던 i = i +1;와 같은 행위를 for(var i=0;i.b.length;i++)와 같이 한 줄로 표현하며 코드를 단축시킨다. 여기서 while의 i = i +1;에 해당하는 부분은 i++ 이다. 여기서 ++(증가연산자)로 +1을 의미한다. 이 결과 웹브라우저는 버튼 한번으로 공간의 배경과, 색상, 또한 특정 태그의 글자의 색과 폰트체를 변경하는 엄청난 동작을 가능하게 한다.
author. EDWIN
date. 2023/01/26
코드의 재사용성을 극대화 하기, 함수
만약에 동일한 input type:button태그로 동작하는 기능이 무수히 많은데, 그때마다 위와 같은 긴 코드들 작성해야 할까? 그것은 분명 괴로운 일일 것이다. 이를 간소하게 할 수 있는 기능이 바로 함수이다.
<input type="button" value="다크모드" id="night_day" onclick="hey()" style="margin-bottom:10px;">
<div class="light-mode" style="width: 100%; font-size:10px; margin-left:auto;margin-right:auto;">
<span>!!</span>Javascript는 정적인 HTML을 보다 <span>!!</span>동적이게 작동하도록 하기 위해서, 사용자와 상호작용을 통해서 정보를 받고<span>!!</span>, 웹브라우저에 동작을<span>!!</span> 부여하기 위한 욕구에서 1995년 <span>!!</span>등장하였다. 그런데 Javascript는 용어에 있어서 유사한 언<span>!!</span>어들이 존재하여 혼동되기도 한다. 대표적인 것이 Java이다. 두 언어가<span>!!</span> 모두 C언어를 기반으로 하지만, 의미론적으로 다르고, 서로 연관성이 없는 언어이기<span>!!</span>에, 호환되지 않는다는 측면에서 이 둘은<span>!!</span> 분명히 다르다.</div>함수를 사용하면, input태그의 길이의 압박을 효과적으로 줄일 수 있다. 그럼 사라진 코드들은 어디로 갈까? 그리고 그 자리에 대신 기록된 hey()는 무엇일까? 질문이 든다. 본래 있었던 코드는 다른 곳으로 이동되었다. 바로 head태그 내에 script태그나 script태그로 연결시킨 .js파일로 말이다.(해당 내용이 기억나지 않으면 위의 내용으로 돌아가자. "HTML과 script 태그")
해당 부분에 이렇게 작성한다.
<script>
function hey() {
var a = document.querySelector('.light-mode5')
var b = document.querySelectorAll('.light-mode5 span')
var i = 0
if(this.value === '다크모드') {
a.style.backgroundColor='black';
a.style.color='white';
this.value = '주간모드';
while(i < b.length) {
b[i].style.color='red';
b[i].style.fontWeight='700';
i = i +1;
}
} else {
a.style.backgroundColor='white';
a.style.color='black';
this.value = '다크모드';
while(i < b.length) {
b[i].style.color='green';
b[i].style.fontWeight='700';
i = i +1;
}
}
</script>이렇게 함으로 얻을 수 있는 효과가 무엇일까? 이제는 어디가 되었든지 같은 기능을 수행하는 _input _type="button" value="다크모드" id="night_day" style="margin-bottom:10px;"태그가 얼마나 되든지 동일한 기능을 구현할 수 있게 되었다는 말이다.
이러한 식으로 HTML은 동적인 효과를 얻어 이전보다 훨씬 더 다양한 기능을 수행하는 정보의 그릇이 되었다. 버튼 한번을 통해서 사용자가 원하는 기능을 구현해 볼 수 있기 때문이다. 가장 대표적인 것이 다크모드와 주간모드일 것이다. 이렇게 보니, 우리가 사용하는 이 기능이 얼마나 복잡한 결과들에 의해서 구동되는지 세삼 놀랍게 여겨진다.
이렇게 함으로 Javascript를 서둘러 마무리하는 것이 맞을 것 같다. 이미 충분히 과했다. 이것만 기억하다. HTML이 인터넷이라는 도로에 하나의 서비스를 구축하는 공간을 마련했다면, CSS는 그 공간의 인테리어를 디자인한 것이고, Javascript는 구축된 공간을 찾아오는 사용자들과 상호작용하는 동작을 만들어냄으로 WEB이라는 서비스를 실행하고 있다는 것이다. 이렇게 3가지 언어는 서로 연대하며, WEB을 사용자에게 제공해낸다.
author. EDWIN
date. 2023/01/26
