웹기초 7주차

(18) WEB2 JavaScript - 22.배열과 반복문 - YouTube

​

li 태그가 복잡해진다면 목록 작성하는 것이 힘들 것이다.

서로 연관된 데이터들을 자바스크립트에서 담는 방법 = 배열

배열에 담긴 데이터를 순차적으로 꺼내 li 로 만들어주는 것을 반복문을 통해 나타낼 수 있다.

1. coworkers 라는 변수를 만들어주고, 배열의 항목들을 원소(element)라고 함.
2. coworkers가 나타내는 배열의 원소를 li 태그로 바꾸기 위해 script 표시 해주기
3. li 태그 만들기 : document.write('<li>/<li>') 를 배열의 항목 만큼 반복 -> 여기서는 4번 실행
4. while문과 count문(실행 횟수 세기)작성

• while (i<4), var i =0, i=i+1 사용

​

** coworkers 라는 배열문에서 원소는 0번째 부터 시작한다.

1. document.write('<li>/<li>') 를 document.write('<li>'+coworkers[i]+'</li>'); 로 변경

• 데이터의 인덱스값은 i와 일치하므로 coworkers [] 안에 i 넣어주기 -> coworkers[i]

​

그런데 배열 인덱스 추가/변경하고 싶으면 원소 추가/변경 후 while 문 등을 바꾸어주어야 하는 문제가 발생한다.

- while (i <4) 대신 while (i<coworkers.length)를 사용하면 데이터 자체에만 집중할 수 있다.

배열 원소에 링크를 추가하고 싶은 경우에는 위의 while 문 아래에

- document.write('<li>'<a href="링크"+coworkers[i]+'">'+coworkers[i]+'</a></li>' 사용

​

​

---

(18) WEB2 JavaScript - 23.배열과 반복문의 활용 - YouTube

​

야간모드와 주간모드에서 링크의 색을 바꿔주자.

1. 검사-element에서 모든 a 태그를 가져오자:

• document.querySelector('a') = a 태그에 해당하는 첫 번째 태그만 가져온다.
• document.querySelectorAll('a') : 배열을 출력함
• shift+enter=실행 안 하고 줄바꿈

​

2. alist라는 변수를 지정 : var alist = document.querySelectorAll('a')

3.​​ console.log(); = ()안의 값이 콘솔 창에 뜸

4. console.log(alist.length); = alist의 길이를 출력함

​

​

• alist.length로 a태그 찾기

​

• alist에서 a태그가 있는 곳 색을 powderblue로 바꾸기

​

​

---

(18) WEB2 JavaScript - 24.함수예고 - YouTube

​

input 태그가 1억개가 있다면? powderblue를 바꾸고 싶은 경우 복잡해짐

• 함수를 만들 때 앞에 function 이라는 키워드를 붙여줘야 한다
• function 함수명(self) 로 작성

​

​

• 함수를 실행시키고 싶다면 함수를 선언해준 후 body 태그 안에 함수명(this)
• nightDayHandler(this)=nightDayHandler를 실행시켜라 라는 뜻

​

함수 선언의 장점)

• 유지보수가 쉽다.
• 웹페이지의 크기가 줄어든다.
• 코드가 같은 로직을 가지고 있다는 것을 확신할 수 있다.
• 이름이 붙어있어 코드의 정체를 쉽게 이해할 수 있다.

​

---

(18) WEB2 JavaScript - 25.함수 - YouTube

​

함수(function/method)

• 반복문을 사용할 수 없는 경우(연속적이지 않게 반복하는 경우) 함수가 필요하다.

​

함수 만들기

1. 함수 만들기: function 함수명(){}
2. 재사용하고 싶은 코드를 {} 안에 써준다.
3. 함수를 사용하고 싶은 곳에 함수명(); 을 적어준다.

​

---

(18) WEB2 JavaScript - 26.함수 : 매개변수와 인자 - YouTube

​

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

입력이 parameter(매개변수), argument(인자)

출력은 return 과 관련있다.

​

document.write(1+1)을 function으로 나타내보자.

함수명은 onePlusOne이다.

​

함수를 입력값에 따라 다른 출력값을 나타나게 할 수도 있다.

예시: sum(2,3)=5, sum(3,4)=7

​

• 매개하는 변수를 left 와 right로 정해준 후 함수를 선언하자.

​

---

(18) WEB2 JavaScript - 27.함수 (리턴) - YouTube

​

• 표현식

1+1=2 : 2 이라는 값에 대한 표현식

2-1=1 : 1 이라는 값에 대한 표현식

1===1 :true 라는 값에 대한 표현식

​

sum2라는 함수를 만들어 sum2(2,3)을 통해 5라는 표현식을 나타내게 해주자.

sum 한 결과의 값을 돌려주자 = return

(5, 빨간색 5, 폰트 사이즈가 큰 5)

​

Return의 장점

• 기능을 다양한 맥락에서 활용 가능하다.
• 다양한 용도로 함수를 활용할 수 있다.

​

---

(18) WEB2 JavaScript - 28.함수의 활용 - YouTube

​

nightday 코드를 효율적으로 바꾸자: 함수 이용!

1. 웹브라우저에게 nightDayHandler 라는 함수를 만들어주자.
2. nightDayHandler(); 를 작성해주자.

-> night, day 레이블이 안 바뀜

이유

this 라는 값은 이벤트가 소속되어 있는 다음의 태그를 가리키도록 약속되어 있다.

<input id="night_day" type="button" value="night" onclick="

nightDayHandler();

">

그런데 독립된 함수를 만들게 되면 this는 더 이상 input 버튼이 아니게 된다.

따라서 this 가 input의 값이 되도록

• 함수를 정의할 때 function nightDayHandler(self) 로 바꿔주고
• input 태그에 있는 nightDayHandler(this)로 바꿔준다.

​

---

(18) WEB2 JavaScript - 29.객체 예고 - YouTube

​

객체(object)

: 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구

​

중복된 코드를 함수로 바꿔주자 : function setColor(color)

• 중복되었던 코드를 setColor('powderblue')와 setColor('blue')로 바꾸어주자.

​

• target.style.color ='white' : 웹페이지의 바디태그의 폰트컬러를 흰색으로 한다는 뜻
• 함수명이 같으면 마지막에 나오는 함수가 삭제당한다. -> 함수명 바꿔주기: LinksSetColor 와 BodySetColor로 정해주자.

​

• target.style.backgroundcolor ='black' 도 함수로 만들어주자.

​

서로 연관된 함수, 변수들을 정리하는 상자인 객체를 사용해볼 수 있다.

객체를 사용하는 쪽의 코드

• Body라는 객체를 만들고 싶은 경우: Body.setBackgroundColor('black');
• Links 라는 객체를 만들고 싶은 경우: Links.setColor('powderblue');

객체를 폴더라는 관점으로 봐도 괜찮다.

document.querySelector이므로 document가 객체, querySelector는 document라는 객체에 속해 있는 함수, 즉 메소드 라고 한다.

​