웹기초 6주차

(4) WEB2 JavaScript - 15. 비교 연산자와 블리언 - YouTube

​

1. 동등비교연산자: 왼쪽의 값과 오른쪽의 값이 같으면 True가 출력된다.

• === 은 비교연산자이자 이항연산자(좌항과 우항이 있을 때 좌항과 우항을 결합해 어떤 데이터를 만들어낸다 )
• 1===1: true
• 1===2: false

​

true, false 는 "Boolean" 이라고 불린다.

지금까지 살펴본 data type: number, string, boolean

• number 무한히 많다.
• string 무한히 많다.
• boolean은 두 개의 데이터로만 이루어진 data type

​

2. 크기 비교

• html: 1<2 => 1&lt;2 (lt=less than)

​

​

---

(4) WEB2 JavaScript - 16.조건문 - YouTube

​

if true

if false

if 문의 뒤에 따라오는 괄호 안에는 boolean data type, true 와 false 값에 따라 실행되는 것이 다르다.

​

​

---

(4) WEB2 JavaScript - 17.조건문의 활용 - YouTube

​

버튼의 벨류 값이 night 라면 light를 눌렀을 때 코드가 실행: onclick 이용

if night: night 버튼의 코드 실행

else: day 버튼의 코드 실행

• value 라는 property 를 사용하자.
• document.querySelector('#night_day') 로 가져오고
• document.querySelector('#night_day').value 는 night를 가져온다.

​

---

(4) WEB2 JavaScript - 18.리팩토링 중복의 제거 - YouTube

​

리팩토링=개선한다/ 코딩 이후 비효율적인 코드를 효율적으로 만들어 가동성을 높이는 것(중복된 코드 낮추기..)

• night 와 day를 클릭할 때마다 바꾸어주고 싶은 경우가 있다.

-> onclick과 같은 이벤트 안에서 실행되는 if 문과 같은 코드를 index 태그를 가리키도록 약속된 키워드 "this"로 바꾸어준다. ( if (this.value=='night'))

를 다시 더 편하게 바꾸어주면

​

버튼이 한 개가 떠서 클릭하면 바뀌는 것을 확인할 수 있다.

​

• document.querySelector('body')가 계속 중복되니까 중복을 없애주자.

var target = document.querySelector('body')로 해주고 중복인 부분을 target. 으로 바꿔주자.

​

​

​

---

(4) WEB2 JavaScript - 19.반복문 예고 - YouTube

​

버튼을 누를 때 컬러를 바꾸고 싶다.

링크를 스타일 속성 값으로 밝게 바꾸어줄 수 있지만 링크의 개수가 많은 경우 반복문을 사용할 수 있다.

검사버튼 눌러서 element의 a태그를 확인해보자. 버튼을 누르면 a태그의 style 속성이 달라지는 것을 확인할 수 있다.

새로 만들어놓은 html 코드

night 버튼 클릭 시 powder blue 로 바뀐다.

​

이 부분을 살펴볼 예정이다.

​

​

---

(6) WEB2 JavaScript - 20.배열 - YouTube

​

• 배열: 데이터가 많아짐에 따라 서로 연관된 데이터를 정리정돈해서 수납하는 것

​

1. 배열을 만드는 방법

• 문자는 "로 시작해 "로 끝나듯이 배열은 ' [' 로 시작해 ']' 로 끝난다.
• 값과 값 사이는 ,(콤마)로 구분한다.
• 배열을 변수에 담아서 표현할 수 있다. (var coworkers = coworkers 라는 변수에 담는다)

​

​

2. 배열을 가져오는 방법 : get

• 첫 번째로 들어간 데이터를 가져오고 싶다면 배열명[인덱스순서] 를 입력하면 된다

ex. coworkers의 첫 번째 데이터와 두 번째 데이터를 가져오자.

​

​

3. 배열에 데이터를 추가하고 싶다.

• 배열명.push("넣고싶은 값") 사용

count 먼저 하고 add 를 배워서 순서가 조금 엇갈림.

​

4. 배열에 들어있는 값 체크하기

• 배열명.length; 사용

​

​

​

---

(4) WEB2 JavaScript - 21.반복문 - YouTube

​

• 반복문=Loop

프로그램은 순서대로 실행하는 것이 기본인데, 특정 순서를 정말 많이 반복해야하는 경우 코드 복붙이 힘들다.

---> 반복문 사용

2번과 3번을 3번 반복하도록 하자.

• while 보고 true이면 2,3을 실행하고 마지막에 또 값을 확인한다. false이면 while문 바깥쪽의 코드가 실행된다.
• 반복문: 순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문 (조건문, if문과 함께
• 반복문의 종료를 반드시 지정해줘야 한다.

3번 실행해주기로 했으니까 i 라는 변수를 지정해주고, i 의 값을 1씩 증가시키도록 하자.

3번 실행하고 싶으니까 while(i<3)으로 써줄 수 있다.

i=0에서 시작해서 한 개씩 늘려간다. i=1, i=2이면 계속 진행한다. i=3 일 때 i<3이 false 이므로 반복문을 종료하게 되는 것이다.