생활코딩 WEB2- JavaScript 정리(2)

20. 배열 (array)

배열 : 데이터가 많아짐에 따라 그 데이터 중에 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자

 

배열을 만드는 방법: var number = ['one', 'two']; → 배열은 변수에 담는다

배열을 가져오는 방법: document.write(number[0]); → one

 

배열 만들고 가져오기

var coworkers = ["egoing", "leezche"]; //문자는 대괄호나 소괄호로 열고 닫음

document.write(coworkers[0]); //-> egoing 출력

 

배열에 들어있는 값의 개수

document.write(coworkers.length); //-> 2 출력

 

배열 추가

coworkers.push('duru');
coworkers.push('taeho');

 

그 외 배열 기능 검색해서 확인.

 

 

 

21.  반복문 (Loop)

반복문 : 순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문

 

 

· 목적

반복되는 코드를 반복문 while을 사용하여 간단히 작성한다.

 

· 내용

while(소괄호 안에는 블리언 값이 들어-> true or false값이 나오게 지정) {

중괄호 안에는 true값이 나오면 반복 출력할 내용

} 

-> 블리온 데이터 값이 true이면 중괄호 {} 안 코드가 false가 될 때까지 반복 출력되고, false가 되었을 때 이후 코드가 출력된다.

 

while은 실행 순서를 제어하는 제어문이다. (if 같은 존재)

 

소괄호 안에 반복문이 언제 종료될지를 잘 지정하는 게 중요하다.

 

코드가 몇 번 실행됐는지 적어놔야 하는데 그걸 하기에 좋은 것이 변수다.

 

관습적으로 i라는 변수에 반복문의 조건을 주는 변수를 할당해준다.

var i = 0; => i 변수는 0이다.

 

 

· 코드

(1)

document.write('<li>1</li>');

var i = 0; //-> i 라는 변수에 0을 지정

 

(2)

while(i < 3) {
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
//-> i라는 변수가 3보다 작으면 {}안의 코드를 반복 출력. 
//i = i + 1; -> (기존 i의 값에 1을 더한 결과를 i의 새로운 값으로 준다.) 
//이 코드에 온 순간에 i값에 1을 더하면 변수 i값이 바뀐다. 
//0, 1, 2 까지 3번 반복문을 출력하다가 i가 3이 되는 순간 반복문이 끝난다.

 

 

+)

while (i <3) 은 실행이 되나 while(i&lt3)은 실행이 안 되는 이유

-&lt는 html의 문법에서 쓰는 것이기에 js에서는 <,>로 처리가 가능하다.

 

 

+) Q

document.write()와 console.log()은 디버깅을 하거나 테스트를 할 때 쓰인다.

document.write() : 웹 상에 데이터를 출력

console.log() : console 창에 데이터를 출력

거의 document.write()보다는 console.log() 형태로 적혀있고, document.write()는 에러의 위험이 있다.

 

 

 

22. 배열과 반복문

document.write(); //-> 괄호 안에 있는 내용을 출력한다.

document.write(안녕); //-> 안녕을 출력하지 않는다. 안녕이 변수인지 텍스트인지 모르기 때문이다.

document.write('안녕'); //-> 안녕이라고 출력한다. 따옴표안에 있는건 텍스트라는 의미이기 때문이다.

var coworkers = ['egoing','leezche','duru','taeho'];

document.write(coworkers[0]); //-> coworkers라는 배열변수의 0번째에 있는 egoing을 출력한다.

document.write('안녕' + '하세요'); //-> 안녕하세요를 출력한다. 숫자에서 +는 수를 합치는거지만, 문자열에서는 문자열을 앞뒤로 붙여주는역할이니까요.

document.write('안녕' + coworkers[0]); //-> 안녕egoing을 출력한다. 

document.write('안녕' + coworkers[0]); == document.write('안녕' + 'egoing');

 

배열과 반복문

<script>
var coworkers = ['a', 'b', 'c', 'd']; // 배열 정의
</script>

...

<script>
var i = 0;

while(i < coworkers.length) {
document.write('<li> + coworkers[i] +</li>'); // i변수를 반복, 배열 원소 수에 적용
i = i + 1;
}
</script>

 

 

23. 배열과 반복문의 활용

<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.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';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>

 

 

 

24. 함수 예고( function)

코드가 많아지면 그 코드를 잘 정리 정돈하기 위한 도구들이 필요하다.

그중 간단하면서도 강력한 도구가 함수이다.

그것보다 좀 더 큰 도구는 객체라고 하는 것도 있다.

 

 

 

25. 함수   26. 함수 : 매개변수와 인자   27. 함수 (리턴)

반복되는 코드를 사용할 때 반복문으로 사용할 수 없을 때(불규칙적일 때) 사용할 수 있다.

 

 

1) 함수 기본

<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>

함수는 입력과 출력으로 이루어진다.

입력에 해당되는 것은 ‘parameter’ 한국어로는 ‘매개변수’, ‘argument’ 한국어로는 ‘인자’가 있다.

출력은 ‘return’이라는 것과 관련이 있다.

 

 

argument vs parameter

· parameter : 함수 정의에서 deta를 받기 위하여 선언할 변수

· argument : 함수 호출 시 실제로 전달하는 deta

정확한 정의는 위와 같고, 책에 따라서 아래와 같이 나오기도 한다.

· parameter => formal parameter

· argement -> actual parameter

 

 

2) 인자와 파라미터

<script>
function onePlusOne() {
document.write(1+1+'<br>');
}
onePlusOne();
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
</script>

 

 

+) Q

<br>에 작은따옴표가 들어가야 하는 이유는?

따옴표 안에 들어간다면 문자열로 표기한다는 거 같은데, 태그도 출력할 때 따옴표에 넣어야 하는지?

'<br>'를 연결할 때 +가 사용된 이유는?

-

document.write() 함수에서 () 괄호 안에는 변수, 숫자, 문자열이 들어갈 수 있다.

변수나 숫자는 따옴표를 치지 않지만 문자열은 꼭 따옴표를 쳐줘야 한다.

document.write(left+right+'<br>')를 보면, left와 right는 숫자를 값으로 가질 변수다.

하지만 <br> 안에는 아무 의미도 없는 html 그 자체의 <br> 일뿐이다.

그래서 문자열로 취급하여 '<br>'로 표기한다. 태그도 전부 문자열로 생각해야 한다.

만약 변수 left가 1이고, right가 2라면 (left+right)만 들어가면, left의 숫자 값과 right의 숫자 값을 더한 3이 출력된다.

그러나 ('left'+'right')라고 한다면 이것은 문자열끼리 더하라는 뜻이므로, 'leftright'라고 출력된다. document.write(left+right+'<br>')은 left의 숫자 값 1과, right의 숫자값 2를 더한 값 3에 <br>이라는 문자열이 뒤에 붙는다.

따라서 html로 표현될 때는 3 <br>이 된다.

 

 

3) 리턴

<h2>Return</h2>
<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>

return이 없으면 모든 함수를 일일이 만들어줘야 되는데(ex. sum, sumcolorRed, sumFont 등),

return이 있다면 결과 값을 하나로 묶은 후 따로 처리가 가능하다.(ex. sum을 return값으로 받은 후 color, font 적용)

 

'<div style="color:red">' + left + right + '</div><br>'

=> '<div style="color:red">' + '2' + '3' + '</div><br>'

=> 결과 : <div style="color:red">23 </div><br>

=> 이유 : 모두 문자열로 취급해서 연결

 

'<div style="color:red">' + (left + right) + '</div><br>'

=> '<div style="color:red">' + '5' + '</div><br>'

=> 결과 : <div style="color:red">5 </div><br>

=> 이유 : 괄호부터 덧셈 처리된 결과로 문자열 연결

 

똑같은 결과 값(덧셈)에 다른 효과(색깔, 폰트 크기 등)를 주기 위해서 함수를 새롭게 만들어 나가는 것보다,

처음부터 함수를 만들 때 재사용이 가능하도록 return값을 주면 필요(색상의 선택, 폰트 크기 등)에 따라 자유롭게 코드를 구현할 수 있다.

 

 

· return 값을 주지 않은 경우

function sum(left, right){
document.write(left+right);
}
sum(2,3); // 5
function sumColorRed(left, right){
document.write('<div style = "color:red">+(left+right)+'</div>');
}
sum(2,3); // 5 (빨갛게 변한 숫자 5)

return 값을 주지 않으면 결과 값(덧셈)은 같으나 서로 다른 효과를 주기 위해 새로운 함수를 작성해야 하는 번거로움이 있으며,

이는 함수가 더욱 복잡해졌을 때 큰 부담이 될 수 있다.

 

· return 값을 준 경우

function sum2(left, right){
return left + right;
}
document.write(sum2(2,3)); // 5
document.write('<div style="color:red">'+sum2(2,3)+'</div>'); // 5(빨갛게 변한 숫자 5)
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>'); // 5(폰트 사이즈가 커진 숫자 5)

이처럼 return값을 함수에 포함시키면 함수의 활용성을 극대화시킬 수 있으며, 

함수의 가장 기본적이면서도 중요한 속성인 '재활용성'을 유지할 수 있다.

 

 

+)

코드 스니펫이라고 하면 보통 짧은 '코드 조각'을 뜻하는 말 (작은 코드 뭉치라고 생각하면 됨)

 

 

---

 

 

역시 프로그래밍 언어는 다르구나..라는 걸 많이 느꼈다. 굉장히 복잡하고 아직 더 배워야 할게 많다..! 배우면 배울수록 html과 css는 굉장히 쉬웠다는 것을 깨달았다. 외우려고 하지말고 최대한 이해해보기!!