<생활코딩 - WEB - WEB2 - JavaScript>
1. 변수와 대입 연산자
1 단어 소개
1) 변수(var, variable): 바뀔 수 있는 어떤 값
2) 대입 연산자(=): “오른쪽 항의 값을 왼쪽의 변수에 대입한다.”
3) 상수(constant): 항상 변하지 않는 값
2 변수를 왜 쓰는가
1) 변수를 사용하는 이유는 엄청 많다.
2) 공식과 프로그래밍에서 변수는 아주 중요하게 작용한다.
3 변수 예제
1) var name=“jean”; alert (“~~”+name+”~~”+name+”~~”)
: 괄호 안의 name 부분을 jean으로 바꾸어 알람을 띄워준다.
2) (shift+enter=띄어쓰기 및 실행 유보)
3) name을 모두 다른 이름으로 변경하고 싶을 땐, “jean”만 다른 이름으로 바꿔주면 된다.2. 웹브라우저 제어
1 HTML은 정적인 성격을 갖고 있기 때문에, 한 번 입력된 코드는 계속 그대로 실행된다.
2 이 점을 ‘javascript 문법을 이용하여 css의 style 속성을 입히는 방식’으로 동적으로 실행해보자.
3 이를 위해서는 javascript를 이용해서 제어하고자 하는 태그를 선택하는 방법을 알아야 한다. 3. 제어할 태그 선택하기
1 <input type=“button” value=“밤”>: 웹브라우저에 버튼을 생성되고, value의 큰 따옴표 안의 이름이 버튼 안에 새겨진다.
2 이 버튼을 눌렀을 때, body의 style 값이 변경되도록 해보자.
1) value 뒤에 onclick=“ ”을 입력한다.
2) 큰따옴표 안에 명령을 입력한다.
3) 모를 때는 검색!! “javascript select tag by css seletor”
4) 검색결과: document.querySelector(‘tag’) < tag에 변경을 원하는 태그 = body 를 입력해주면 됨.
5) 또 모를 때는 검색!! “javascript element style”
6) 검색결과: document.getElementById(“myH1”).style;
7) 또또 모를 때는 검색!! “javascript style background-color”
8) 검색결과: document.body.style.backgroundColor = “black”;
- (css에서는 background-color이나, JS에서는 backgroundColor이다. 문법 그대로 입력해야 실행이 된다. )
9) 짜잔! 웹브라우저의 버튼을 누르니, body 태그의 값이 변하고, 화면 전체가 검은색이 됐다.
10) 글을 잘 볼 수 있도록 document.querySelector(‘body’).style.Color=‘white’;도 입력해주자.
3 value=“낮”도 똑같이 붙여넣기 해보자.
1) <input type =“button” value =“낮” onclick="
2) document.querySelector(‘body’).style.backgroundColor=‘white’;
3) document.querySelector(‘body’).style.Color=‘black’;">
4 이로써, 동적으로 사용자와 상호작용하는 듯한 느낌을 주는, 애플리케이션의 핵심이 되는 javascript 문법을 알아봤다.
5 그런데 코드를 입력할 때, 작은따옴표와 큰따옴표 내의 코드가 다른 색을 띠고 웹브라우저에서 실행되는 여부도 다른 것을 발견했다.
‘’와 “”가 다른 기능을 갖는 것일까, 아니면 특정 조건이 있는데 내가 그 조건에 맞추지 않아서 기능이 다르게 나타난 것일까?
좀 더 코드를 입력해보면서 알아봐야겠다. 4. 프로그램, 프로그래밍, 프로그래머
1 HTML, JavaScript는 컴퓨터 언어이다.
JavaScript는 컴퓨터 프로그래밍 언어이나,
HTML은 컴퓨터 프로그래밍 언어는 아니다.
2 프로그램은 ‘순서’라는 의미를 갖고 있다.
프로그래밍은 순서를 만드는 행위이다.
프로그래머는 순서를 만드는 사람이다.
이 세 가지 단어는 다양한 분야에서 사용되어 왔고,
그것을 소프트웨어가 차용해 사용하고 있다.
컴퓨터에서 프로그램의 본질적인 의미는 반복적인 작업을 글로 적어두어서
컴퓨터에게 실행을 명령하는 것이다.
3 HTML은 웹페이지를 묘사하기 위한 목적의 언어이다.
때문에 시간의 순서에 따라 실행할 필요가 없다.
반면, JavaScript는 사용자와 상호작용하기 위해 고안된 언어이다.
때문에 시간의 순서에 따라 여러 기능이 실행될 필요가 있다.
4 나아가, 시간뿐만 아니라 조건에 따른 기능 실행이나 어떤 기능의 반복적인 실행을 원하는 마음이 생겨났다.
복잡해진 순서를 단순하게 잘 정리 정돈하는 방법도 고안됐다.
5 앞으로의 강의에서는 이런 욕심을 이루기 위해 성취한 업적들을 따라가며
조건문, 반복문, 함수 같은 핵심적인 기능을 알아볼 예정이다. 5. 조건문 예고
1 앞 강의에서 밤과 낮이라고 하는 버튼 두 개를 만들었다.
2 조건문 및 토글(toggle)을 이용하면 이 버튼을 한 개로 구현할 수 있다. 6. 비교 연산자와 Boolean 데이터 타입
1 Boolean은 비교 연산자를 통해 만들어지는 새로운 데이터 타입이다.
비교 연산자(Comparison operator)와, Boolean, 조건문은 아주 깊은 관련성이 있다.
2 script 태그 안에 document.write(1===1);을 써준다.
1) ===은 동등 비교 연산자이다.
2) 연산자 왼쪽과 오른쪽의 값이 true인지 false인지 계산하는 연산자이다.
3) true와 false의 값을 묶어서 Boolean이라고 부른다.
3 script 태그 안에 document.write(1<2);을 써준다.
- 꺽쇠 < 는 less than이라는 의미를 갖고 있는 &li;와 같은 의미이다. (꺽쇠가 문법으로 인식될 때 사용한다.)7. 조건문
1 if (true) { } else { } : 첫째 중괄호는 나타나고, 둘째 중괄호는 나타나지 않는다.
2 if (false) { } else { } : 첫째 중괄호는 나타나지 않고, 둘째 중괄호는 나타난다.8. 조건문의 활용
1 if else를 이용해서 day일 땐 night 키가 활성화되고, night일 땐 day 키가 활성화될 수 있도록 해보자.
2 if ( ), 소괄호 내의 내용이 true나 false가 되도록 하자.
1) value 값 알아내기.
1 input에 아이디 값 부여하기 > id=“해”
2 Console에서 id 값이 “해”인 element의 value값을 알아내자.
3 모를 땐 검색! “javascript element get value”
4 검색결과: var value = document.getElementById(id).value;
5 Console에 입력: document.querySelector(‘#해’) > 아래 해당 요소의 내용이 불려 옴
6 Console에 입력: document.querySelector(‘#해’).value > “night” 나타남
7 Elements에서 id=“해”의 value값을 day로 변경하면,
8 Console에 입력: document.querySelector(‘#해’).value > “day”로 나타남
9 즉, [document.querySelector(‘#해’).value] 코드를 통해 “해” 태그의 value 값을 가져올 수 있음
2) 동등 비교 연산자를 통해 조건문 완성시키기 1
1 if (document.querySelector('#해').value === 'night') { 스타일 코드~~ }
2 웹페이지에서 night 버튼을 누르면 body 태그 전체의 스타일 속성이 변한다. (=전체 화면이 검어진다.)
3) 동등 비교 연산자를 통해 조건문 완성시키기 2
1 night 속성의 효과가 나타난 이후, value 값을 day로 변경하자.
2 night의 style 태그; 다음에 document.querySelector('#해').value = 'day'; 입력
3 웹페이지에서 night 버튼을 누르면, 전체 화면도 검어지고, 버튼도 day로 바뀐다.
4) 동등 비교 연산자를 통해 조건문 완성시키기 3
1 value가 day로 바뀌었으니, 조건문에서 첫째 중괄호는 무시되고, 둘째 중괄호가 실행된다.
2 else의 style 태그; 다음에 document.querySelector('#해').value = ‘night’; 입력
3 웹페이지에서 day 버튼을 누르면, 전체 화면도 하얘지고, 버튼도 다시 night로 바뀐다.
5) 즉, if 절의 === (동등 비교 연산자)의 값이 true냐 false냐에 따라, 한 개의 버튼으로 두 개의 기능을 실행시킬 수 있다. - 여기까지 공부한 후, -
동영상 강의를 보며 함께 코드를 입력해서 실험을 해보았다.
영상에서 나온 코드대로 따라 입력했으니, 당연히 화면이 잘 구현되었다.
그런데 내 머릿속에서는 이게 대체 어떤 원리로 인해 구현되는 것인지 잘 이해가 되지 않아서
흥미도가 낮은 상태였다.
그래도 공부한 것을 기록해두고 싶은 마음에
한 자 한 자 강의 순서를 되뇌이며 글을 써보니
어떤 원리로 인해 이 기능이 실행되었는지 명확하게 이해가 됐다.
그러니 집중도와 흥미도 역시 높아졌다.
수동적으로 강의를 보며 코드를 하는 것보다
실행 순서를 되뇌어보며 직접 코드를 하는 것이
훨씬 중요한 것 같다.
9. 리팩토링 중복의 제거
1 리팩토링 (refactoring): 개선한다는 의미로 코드 자체를 효율적으로 수정하여
가독성은 높이고, 중복도는 낮추고, 유지보수는 편리하도록 개선하는 작업을 이른다.
좋은 코드를 만들기 위해서는 틈틈이 리팩토링을 하는 것이 중요하다.
2 중복의 제거 1: id 속성
1) onclick 같은 event 안에서 실행되는 코드들은 자신이 속해있는
태그를 가리키는 “this”라는 키워드를 갖고 있다.
2) if 절 안의 document.querySelector(‘#해’)를 this로 변경하자.
3) 인덱스 코드 내의 id=“해” 코드를 삭제하자. (this로 가리키기 때문에, 더 이상 필요 없음)
4) 기능은 잘 동작하고, 코드는 더 간결해졌다.
3 중복의 제거 2: body 선택자
1) onclick 이벤트 안에서 if 절 시작 전에 var target = document.querySelector('body'); 를 입력한다.
2) if 절 안의 document.querySelector('body')를 target으로 변경한다.
3) 효과는 잘 동작하고, 코드는 간결해져 수정이 보다 편리해졌다.
4 중복의 제거는 아주아주 중요하다. 또한, 변수를 사용하면 코드를 보다 효율적으로 작성할 수 있다. 10. 반복문 예고
1 body 전체 화면이 어둡고 밝음에 따라,
링크가 걸린 단어의 색도 바뀌도록 할 수 있다.
2 이 기능을 실현하기 위해 ‘배열”과 ‘그 배열을 이용해
반복적인 작업을 처리하기 위한 반복문 코드’를 배울 예정이다. 11. 배열
1 배열(Array)은 집에 있는 물건이 많아짐에 따라
책장, 냉장고, 옷장 같은 가구로 물건을 정리하는 것과 비슷하다.
비슷한 데이터를 잘 정리 정돈해서 일종의 수납상자에 담아두는 것이다.
1) 배열은 대괄호 [ ] 안에 “” 큰따옴표를 사용하여 문자를 입력한다.
2) var coworkers = [ ]: coworkers라는 변수에
배열이라는 새로운 데이터 타입이 담겨있다는 뜻이다.
이는 [ ] 라는 수납상자 안에 데이터 3 개를 넣어놓은 것과 같다.
(난 3개의 단어를 입력했다.)
2 데이터 다루기 1: get
1) script 태그 사이에 document.write(coworkers[0]); 를 입력하면,
제일 앞 순서 단어가 웹페이지에 나타난다. (*첫째 자리 값은 0번째이다.)
2) document.write(coworkers[1]); 를 입력하면,
그다음 순서 단어가 웹페이지에 나타난다.
3 데이터 다루기 2: count
1) 검색: “javascript array count”
2) 검색결과: “변수이름.length;”
3) 입력: document.write(coworkers.length);
4) 웹화면 결과: 3 (*개수는 1부터 센다.)
4 데이터 다루기 3: add
1) *count 보다 앞 순서에 입력한다.
2) 검색: “javascript array add data”
3) 검색결과: “변수이름.push(“단어”);” (push는 데이터를 끝에 추가하는 속성이다.)
4) 입력: coworkers.push("kiwi"); coworkers.push("jinnie");
5) 웹화면 결과: count가 5가 된다.
5 수많은 배열 속성은 예를 들어, “javascript array”라고 검색하면 모두 나온다. 12. 반복문
1 반복문(Loop)을 입력해보자
1) ul 태그 내에 script 태그를 입력했다.
그 안에 document.write('<li>1</li>'); 를 4번 입력했다.
2) while(true) { } 안에
document.write('<li>1</li>') 를 입력하고 리로드를 해봤다.
(나는 강의에서 새로운 문법이 나오면, 강의를 멈추고 먼저 실험해본다.)
3) 웹브라우저 새로고침 아이콘이 계속 돌아갔다. 겁이 나서 페이지를 닫았다.
4) 다시 강의를 재생해보니, 이 while 문법은 값이 참일 때 무한으로 반복되는 속성을 가졌기 때문에
꼭 종료하는 값을 지정해줘야 한다고 한다. 잠깐 놀랐지만, 이 원리는 오래 기억할 것 같다.
2 변수 속성을 입력해보자
1) var i = 0;
2) while (i < 3) { ~도큐먼트 속성 입력입력~ }
3) i = i + 1;
4) 위의 코드가 순서대로 실행되면서 i의 값이 3이 되어 false가 되면,
반복문은 더 이상 진행되지 않고, 다음 코드로 넘어간다.
3 반복문은 조건문과 함께 프로그램의 실행 순서의 흐름을 제어하는 제어문이다. - 여기까지 공부한 후, -
정리를 한다는 개념이 재밌다.
나는 집 청소를 할 때도, 물건들을 내가 구상한 조건에 맞춰 정리하는 것을 좋아했다.
간단한 수학적 개념도 재미있게 다가온다.
나는 쉬운 수학 문제를 반복해서 푸는 것을 재밌어했다.
내가 코딩과 잘 맞을 거라는 생각을 한 번도 해본 적 없이
막연하게 ‘와,, 코딩은 참 멋있다,,’라는 생각만 했었는데
막상 공부를 시작하니 나와 잘 맞는 부분이 종종 발견돼 신기하다.
13. 배열과 반복문
1 배열과 반복문을 이용해서 list 만들기
1) 첫째 script 태그에 var coworkers = ['jean',
'jun', 'gon', 'egoing', 'yeoul']; 을 입력한다.
2) ul 태그 사이에 둘째 script 태그를 열고, 아래를 입력한다.
3) var i = 0;
4) while (i < coworkers.length) {
5) document.write(‘<li>’+coworkers[i]+’</li>’
6) i = i + 1; }
2 의미 알아보기
1) var coworkers = [~~]는 coworkers라는 변수 상자 안에
'jean', 'jun', 'gon', 'egoing', 'yeoul' 가 들어가 있다는 뜻이다.
2) var i = 0;은 i가 0이라는 변수임을 알려준다.
3) while (i < coworkers.length)은 ‘i가 coworkers 수납상자에 있는
단어 개수보다 적을 때까지’라는 제어를 의미한다.
(i를 통해 순서를 셀 때는 0부터 세지만, 단어 개수는 1부터 세기 때문에 가능한 조건이다. )
4) document.write(‘<li>’+coworkers[i]+’</li>’ 의 [i]는 coworkers 대괄호 안의 단어 순서를 뜻한다.
3 효과
1) 위의 배열과 반복문 코드를 통해, 코더는 첫째 script의 대괄호 안의 정보에만 집중할 수 있다.
2) 정보 수정이나 유지보수가 편리하고, 가독성이 좋다는 장점이 있다.
4 추가기능
1) document.write(‘<li><a href=“http://~~.com/‘+coworkers[i]+’”>’+coworkers[i]+'</li>'): ‘닷컴/해당닉네임’ 이라는 도메인주소가 링크로 자동 설정된다.
2) (예를 들어 i가 0번째인 jean 리스트를 누르면: http://~~.com/jean 으로 이동된다.)
5 정리
1) 배열은 순서대로 서로 연관된 데이터를 잘 정리 정돈하는 기능이고,
반복문은 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법이기 때문에,
2) 배열과 반복문을 결합하면 이처럼 폭발적인 효과를 얻을 수 있다. 
💡 Software Engineer - F.E