생활코딩 심화 2
반복문과 배열
-
반복문 예고
예제를 Night로 전환했을 때 링크의 색깔이 바뀌도록 하고 싶다!
그런데 링크가 셀 수 없이 많을 때는 어떻게 할 것인가? -
배열
배열은 수납장과 같다. [ ] 안에 내용물이 담기고 이들은,로 구분된다.
(문자열은" "로 묶어 줘야함). 각 순서를 인덱스라고 한다.
배열은 0부터 시작한다.
<script>
var coworkers = ["egoing", "leezche"];
document.write(coworkers[0]);
</script>실행결과 : egoing배열의 크기를 세어주는 함수 : length
<script>
document.write(coworkers.length);
</script> 실행결과로 2가 나온다배열은 0부터 시작하지만 개수는 1부터 세므로 주의!
배열에 데이터를 추가하는 함수 : push(데이터를 뒤에 추가한다)
<script>
coworkers.push("duru");
coworkers.push("taeho");
</script>다시 length함수를 돌리면 실행결과가 4로 바뀐다.- 반복문
강의에서는while을 사용한다.
while은 ( )안의 조건이 true인 동안 { }의 내용이 계속 해서 실행되고,
( )안의 조건이 false가 되면 { }를 빠져나온다.
while문의 실행순서
1. while문 ( )의 조건이 true인지 false인지 판별한다.
2. true일 경우 : { } 안의 내용을 실행한다.
false일 경우 : { } 안의 내용을 실행하지 않고 다음 문장으로 넘어간다.
(while문 종료)
3. 다시 1로 가서 과정을 반복한다.반복문은 조건문(if문)과 함께 프로그램의 실행순서(흐름)를 제어하는 것이라고 할 수 있다.결과 값 예상해보기
<ul>
<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>
</ul>실행 결과
• 1 • 2 • 3 • 2 • 3 • 2 • 3 • 4
해답
1. 첫번째 줄인 document.write('<li>1</li>')가 실행됨
2. i에 0이라는 값이 들어감
3. while의 ( )가 참/거짓인지 판별(0<3이므로 참)
4. while의 { }안의 내용이 실행됨
'<li>2</li>'와 '<li>3</li>'이 화면에 출력되고,
i에 1을 더함(이제 i=1)
5. 다시 while의 ( )가 참/거짓인지 판별(1<3이니까 참)
4. while의 { }안의 내용이 실행됨
'<li>2</li>'와 '<li>3</li>'이 출력되고,
i에 1을 더함(이제 i=2)
5. 다시 while의 ( )가 참/거짓인지 판별(2<3이니까 참)
6. while의 { }안의 내용이 실행됨.
'<li>2</li>'와 '<li>3</li>'이 출력되고,
i에 1을 더함(이제 i=3)
7. 다시 while의 ( )가 참/거짓인지 판별(3<3이니까 거짓)
8. while의 { }를 실행하지 않고 다음 문장인 '<li>4</li>'를 출력함loop를 총 3번(3,4->5,4->5,6) 도는 것!!
- 배열과 반복문
배열을 이용하지 않고 많은 양의 데이터를 처리하는 경우 <ul>
<li>egoing</li>
<li>leezche</li>
<li>duru</li>
<li>taeho</li>
</ul>개수가 많아질수록 어떤 작업을 할 때 비효율적임배열과 반복문을 이용하는 경우<script> var coworkers = ['egoing', 'leezche', 'duru', 'taeho']; </script> <h2>Coworkers</h2> <ul> <script> var i = 0; while(i < 4){ document.write('<li>'+coworkers[i]+'</li>'); i = i + 1; } </script>
i라는 변수를 만들고 1씩 증가시켜서 배열의 처음부터 끝까지 접근하도록 만듬배열의 개수가 달라져도 그에 맞게 데이터를 불러올 수 있을까?
<script> var coworkers = ['egoing', 'leezche', 'duru', 'taeho']; </script> <h2>Coworkers</h2> <ul> <script> var i = 0; while(i < coworkers.length){ document.write('<li><a href="http://a.com/' +coworkers[i]+'">'coworkers[i]+'</a></li>'); i = i + 1; } </script>
while문에서 상수를 넣는 것이 아니라 coworkers.length를 이용해서 배열의 데이터가
추가되거나 삭제되어도 그에 맞게 배열에 접근할 수 있다.
아래 주소부분처럼 일일이 이름을 넣어야 하거나
많은 양의 데이터를 처리해야 될 때 다양하게 응용될 수 있다. -> 배열은 연관된 데이터를 순서대로 잘 정리할 수 있도록 만들어진 것이고
반복문은 배열과 함께 사용하면 배열의 데이터를 순서대로 꺼내서 어떤 자동화된
처리를 하도록 활용할 수 있다.- 배열과 반복문의 활용
버튼을 누를 때 배경과 글자색뿐만이 아니라 링크들의 색깔도 전부 바뀌도록!
document.querySelector('a')
-> 페이지에서 처음 나오는 <a>태그만 선택된다.
우리가 만들고자 하는 것이 아님... javascript get element by css selector multiple 검색
-> document.querySelectorAll('a')이라는 것을 알 수 있음document.querySelectorAll('a') ▸ (4) [a, a, a, a] var alist = document.querySelectorAll('a'); console.log(alist[0]); <a href="index.html" style="color: blue;">WEB</a> ▸ undefined var alist = document.querySelectorAll('a'); console.log(alist[1]); <a href="1.html" style="color: blue;">HTML</a>
✣ document.querySelectorAll('a')을 사용하면 결과가 배열로 나오는 것을
확인할 수 있다. 따라서 배열을 이용해야 해당하는 태그에 하나씩 접근할 수 있다.var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ console.log(alist[i]); i = i + 1; } <a href="index.html" style="color: blue;">WEB</a> <a href="1.html" style="color: blue;">HTML</a> <a href="2.html" style="color: blue;">CSS</a> <a href="3.html" style="color: blue;">JavaScript</a> ▸ 4
alist라는 변수를 만든 뒤에 SelectorAll한 결과 값들을 넣어준다.
그리고 alist.length만큼 i를 증가시켜서 배열에 하나씩 접근하여 style속성을 바꿔준다.
(console.log()은 콘솔창에서 화면에 출력해주는 명령어)컴퓨터는 서로 연관된 데이터들을 배열로 돌려주는 경우가 있다
함수
1. 함수 예고
nightDayHandler()함수를 만들어보면서 함수를 이용한 코드가 전체적인 효율이나 유지보수에 도움된다는 사실을 느끼기!!
<script> function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'day'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'powderblue'; i = i + 1; } } else { target.style.backgroundColor = 'white'; target.style.color = 'black'; self.value = 'night'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'blue'; i = i + 1; } } } </script>
- 함수의 기본
•같은 작업들을 반복해야할 때 반복문을 사용할 수 있지만, 반복문을 사용할 수 없는 경우도 있다.
ex) 연속적이지 않게 반복되는 경우
-> 이런 상황일 때 함수를 사용함.
•함수는 Function 또는 Method라고 함.
<ul> <script> document.write('<li>1</li>'); document.write('<li>2-1</li>'); document.write('<li>2-2</li>'); document.write('<li>3</li>'); document.write('<li>2-1</li>'); document.write('<li>2-2</li>'); </script> </ul>
만약 2-1과 2-2만을 불규칙하게 반복해야 하는 상황인 경우<ul> <script> function two(){ document.write('<li>2-1</li>'); document.write('<li>2-2</li>'); } document.write('<li>1</li>'); two(); document.write('<li>3</li>'); two(); </script> </ul>
반복되는 부분을 함수로 만든 후, 함수를 호출하는 것이 더 효율적이다!!- 매개변수와 인자
함수에는입력과출력으로 이뤄져있다.
입력은parameter(매개변수)와argument(인자),
출력은return이라고 한다.
<script> function onePlusOne(){ document.write(1+1+'<br>'); } onePlusOne(); fuction sum(left, right){ document.write(left+right+'<br>'); } sum(2,3); // 5 sum(3,4); // 7 </script>
sum()에서 sum이라는 함수에 전달하는 값(2와 3, 또는 3과 4)을 argument(인자)라고 하고,
인자 값을 받아서 sum함수와 매개해주는 left와 right는 parameter(매개변수)라고 함.
또한 이들은 함수의 입력 값과 관련이 있다.- 리턴
return값이 없는 경우function sum(left, right){ document.write(left+right+'<br>'); } function sumColorRed(left, right){ document.write('<div style="color:red">'+left+right+'</div><br>'); } sum(2,3); // 5 sumColorRed(2,3); // 5 sum(3,4); // 7
결과 값을 이용해서 어떤 기능을 구현하려면 사용하려는 기능을 구현한 함수를 계속해서 만들어야함return값이 있는 경우<script> function sum2(left, right){ return left+right; } document.write(sum2(2,3)+'<br>'); document.write('<div style="color:red">'+sum2(2,3)+'</div>'); document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>'); </script>
함수가 연산한 결과 값만을 내놓는다면 더 유연하게 사용가능- 함수의 활용
함수를 활용한 코드 refactoring<script> function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'day'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'powderblue'; i = i + 1; } } else { target.style.backgroundColor = 'white'; target.style.color = 'black'; self.value = 'night'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'blue'; i = i + 1; } } } </script>
중복되는 코드들을 <head>태그 안에 nightDayHandler()함수로 정의한다.<body> <h1><a href="index.html">WEB</a></h1> <input id="night_day" type="button" value="night" onclick=" nightDayHandler(this); "> <input id="night_day" type="button" value="night" onclick=" nightDayHandler(this); ">
그다음 <body> 태그안에서 자유롭게 호출해서 쓴다. 버튼이 많아질수록 효율적객체
1. 객체 예고
Object : 여러가지로 설명할 수 있지만 서로 연관된 함수와 변수를 같은 이름으로
grouping하는 도구라고 알아두기
<script> function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'Night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'Day'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'powderblue'; i = i + 1; } } else{ target.style.backgroundColor = 'white'; target.style.color = 'black'; self.value = 'Night'; var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = 'blue'; i = i + 1; } } } </script>
중복된 코드를 새로운 함수로 정의했다고 가정<script> function setColor(color){ var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = color; i = i + 1; } } function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'Night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; self.value = 'Day'; setColor('powderblue'); } else{ target.style.backgroundColor = 'white'; target.style.color = 'black'; self.value = 'Night'; setColor('blue'); } } </script>
이 상황에서 배경을 지정하는 코드(target.style.color = 'white')도
함수로 만들어야 한다면 문제가 발생!
(두 함수의 이름이 setColor가 될 경우 하나가 덮어씌워지는 결과)* 할 수 있는 대안
1. 중복되지 않도록 이름을 바꾼다.
ex) BodySetColor, BodySetBackgroundColor 이런식...
2. 이럴 때 쓰라고 만든 객체를 이용한다.
document.querySelector('body').style.backgroundColor = color;
• 객체를 배우고 나면 document가 객체라는 것을 알 수 있다!+ 코드들을 자꾸 함수나 객체로 만들어버리려는 이유?
코드가 길어질 때 일부러 함수나 객체에 넣어서 이름을 부여하고, 로직을 구분하게 하려는 목적- 객체 쓰기와 읽기
• 객체를 만들 때 사용하는 기호(Object literal)는 { } / 배열은 [ ]
• 객체에서 점(.)은 Object access operator라고 한다. 사용예시)
<script> var coworkers = { "programmer" : "egoing", "designer" : "leezche" }; document.write("programmer : "+coworkers.programmer+"<br>"); document.write("designer : "+coworkers.designer+"<br>"); coworkers.bookkeeper = "duru"; document.write("bookkeeper : "+coworkers.bookkeeper+"<br>"); coworkers["data scientist"] = "taeho"; document.write("data scientist : "+coworkers["data scientist"]+"<br>"); </script>
• 객체의 요소는 이름을 붙여서 사용해야 한다.
• 객체를 추가할 때는 객체이름.사용할이름 = "값"; 이고 불러올때도 마찬가지.
띄어쓰기를 사용해야 하는 경우는 객체["사용할 이름"] = "값";- 객체와 반복문
<h2>Iterate</h2> <script> for(var key in coworkers){ document.write(key + " : "+ coworkers[key] + "<br>"); } </script>
• for문은 반복문 중 하나로 coworkers의 안의 key값을 하나씩 접근한다는 의미.
예제에서 key값은 객체인 coworkers의 요소의 값(배열의 인덱스와 비슷),
coworkers[key]값은 요소 안에 들어가 있는 값들
✣객체는 배열과 달리 순서X실행결과 :
Iterate
programmer : egoing
designer : leezche
bookkeeper : duru
data scientist : taeho
- 객체프로퍼티와 메소드
<h2>Property & Method</h2> <script> coworkers.showAll = function(){ for(var key in this){ document.write(key + " : "+ this[key] + "<br>"); } } coworkers.showAll(); </script>
• 객체.함수이름 = function(){함수의 내용}의 형식으로 객체에 함수를 정의할 수 있다.
• 객체 안에 있는 함수를 method라고 하고, 객체안의 변수들을 property라고 한다.- 객체의 활용
코드들을 객체로 묶어보기<script> var Links = { setColor : function(color){ var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length){ alist[i].style.color = color; i = i + 1; } } } var Body = { setColor : function(color){ document.querySelector('body').style.color = color; }, setBackgroundColor : function(color){ document.querySelector('body').style.backgroundColor = color; } } function nightDayHandler(self){ var target = document.querySelector('body'); if(self.value === 'Night'){ Body.setBackgroundColor('black'); Body.setColor('white'); self.value = 'Day'; Links.setColor('powderblue'); } else{ Body.setBackgroundColor('white'); Body.setColor('black'); self.value = 'Night'; Links.setColor('blue'); } } </script>
객체의 property끼리 구분할 때 콤마(,)를 사용정리
1. 파일로 쪼개서 정리 정돈하기
파일은 가장 큰 정리도구
연관된 코드들을 파일로 묶어서 정리한다.
실습했던 코드들을 파일로 나눠서 저장하기
1. colors.js라는 파일을 만들고, <script> 태그를 제외한 내용들을 넣는다.
2. <head> 태그 안의 <script> 태그를 <script src="colors.js"></script>로!
3. 똑같이 동작하는 것을 확인할 수 있다 * 파일로 쪼갰을 때 장점
1. 코드의 재사용성
ex) 새로운 페이지를 만들 때 마다 js파일을 로드하는 코드만 넣어주면 되기 때문에 편리
2. 유지보수하기 매우 편리해짐
ex) 수정사항이 생겼을 경우 .js파일만 수정하면 됨
3. 가독성이 좋아지고, 코드의 의미가 파일의 이름으로 드러남
ex) 2.html과 3.html에 로드된 js파일이 같아는 것을 알 수 있음
4. 서버입장에서는 비용절감이 가능, 사용자입장에서는 적은 트래픽으로 이용가능하고 속도도 더 빨라진다. 속도가 더 빠른 이유??
자체 속도로만 따지면 웹페이지 안에 .js파일을 일일이 넣는 방법이
.js파일을 매번 다운받게 하는 방법보다 더 빠르다.
그러나 컴퓨터는 페이지를 방문하고 나서 사용한 js파일을 지우는 것이 아니라 컴퓨터에 저장해놓고,
다음번에 같은 페이지를 방문할 때 이것을 불러와서 쓴다.
(네트워크 사용 X)이것을 캐시(cache)라고 하는데, 캐시를 이용하면 웹페이지에
.js파일을 일일이 넣은 것보다 더 빠른 속도를 낼 수 있기 때문에
.js파일을 따로 만들어서 일괄로 관리하는 것이 더 효율적이라고 말하는 것!!- 라이브러리와 프레임워크
Library Framework
공통점 다른 사람의 도움을 받아서 소프트웨어를 만든다는 점에서는 비슷
(다른 사람과 협력하는 모델)
차이점 만들고자하는 프로그램에 만들고자 하는 것이 무엇이냐에
필요한 부품이 되는 SW들을 따라서 공통으로 필요한 부분들이
재사용하기 쉽도록 정리정돈 있는데 이것을 제공해 줌으로써
해놓은 것. 처음부터 끝까지 만드는 수고를 덜게
만들어주는 것. 사용자는 달라지는
부분만 만들면 된다. 반제품이라고
jQuery 보면 됨.
jQuery
: 원래 jQuery를 사용하기 위해서는 파일을 다운받아서 프로젝트 폴더의 디렉토리로
이동시켜야 한다. CDN(content delivery network)는 다른 사람이 서버에
올려놓은 jQuery파일을 불러와 쓰는 방식이라 편리하다.
jQuery사용하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
1. 링크를 복사해서 jquery를 적용할 페이지마다 넣는다.
color.js를 로드하는 코드 윗줄에 넣는다.var Links = { setColor : function(color){ // var alist = document.querySelectorAll('a'); // var i = 0; // while(i < alist.length){ // alist[i].style.color = color; // i = i + 1; // } $('a').css('color', color); } } var Body = { setColor : function(color){ $('body').css('color', color); }, setBackgroundColor : function(color){ $('body').css('backgroundColor', color); } }
2. colors.js파일의 코드를 jQuery문법으로 수정해본다.(결과는 ==)
• Ctrl + / : 주석처리(드래그 한 뒤 사용)
• $은 이 페이지에 있는 모든 해당 태그를 jQuery로 제어한다는 의미- UI & API
UI(User Interface)
: 사용자가 시스템을 제어하기 위해서 사용하는 조작 장치
API(Application Programming Interface)
: 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작 장치
<input type="button" value="Click me" onclick="alert('Hello world')">
button은 사용자가 사용하는 것이기 때문에 UI이고,
Alert는 웹 애플리케이션을 만들 때 사용하는 것이므로 API이다. JS뿐 아니라 모든 프로그래밍 언어에 공통적으로 쓰이는 개념.
모든 애플리케이션들은 API를 순서대로 실행하는 것을 통해서 만들어진다.-
수업을 마치며
모든 개념을 사용하려 하지 말고, 필수불가결한 최소한의 도구만으로 문제를 해결하려고
노력해야 한다!!<<마지막으로 추천해주는 검색어>>
• 웹페이지의 어떤 태그를 삭제하거나 어떤 태그에 자식태그를 추가하고 싶은 경우 : document 객체를 자세히 보기 -> document로도 찾을 수 없다면 DOM(Document Object Model)로 더 넓은 범위를 찾아보기. (document객체는 DOM의 일부임) • 웹페이지가 아닌 웹브라우저 자체를 제어해야 하는 경우 : window 객체에 있는 property나 method를 조사해본다. ex) 현재 열려있는 웹페이지의 주소를 알아내야하는 경우, 새 창을 여는 경우, 웹브라우저의 화면크기를 JS를 통해 알아내야 하는 경우 등 • 웹페이지를 reload하지 않고 정보를 변경하고 싶다 : ajax (현대적인 웹페이지를 만드는데 필수적인 테크닉) • 웹페이지가 reload되어도 현재 상태를 유지하고 싶다 : cookie (사용자를 위한 개인화된 서비스를 제공할 수 있다.) • 인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶다 : offline web application을 찾아보기 • 화상통신 웹 앱을 만들고 싶다 : webRTC • 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다 : speech로 시작하는 API들을 살펴보기 • 3차원 그래픽으로 게임 등을 만들고 싶다 : webGL • 가상현실 : webVR
개발자 지망생 서하입니당