[생활코딩] JavaScript 7. 문장 (Statement)

* JavaScript 목차

 

 

1. 문장 (Statement)

: 어떤 작업을 수행하는 문장

- 조건문 : if, else
- 리팩토링
- 반복문 : while, for
- 배열

 
 
* 표현식 (Expression)
: 어떤 값을 가지고 있는 것
- 함수의 매개변수나 반환값이 될 수 있음
 
 
 

2. 조건문 (if)

- if, else if, else
 
 

1. 실습 : 버튼 하나로 주간/야간 모드

1. 결과

주간 모드 (day)

야간 모드 (night)

- 의도 : if문을 사용해서 버튼 하나로 주간/야간 모드 기능 구현
- 버튼의 id를 night_day로 설정
 
 
2. 코드

 
 
 

3. 리팩토링 (refactoring)

- 코드를 효율적으로 개선하는 것
 

 
1. this
- 자기 자신을 가리킴
 
2. target 변수를 통한 중복 제거
 
 
 

4. 반복문 (Loop)

- while문, for문
 
 

1. break와 continue

1) break
- 반복작업을 중간에 중단시키고 시다면
- 반복문을 즉시 종료
ex) 5에서 break하면 0~4까지 출력
 
2) continue
- 실행을 즉시 중단하면서 반복은 지속
ex) 5에서 continue하면 0~4, 6~9를 출력
 
 

2. 실습 : a 태그 색 바꾸기

1. 결과

주간 모드

야간 모드

- 의도 : 버튼을 누르면 하이퍼링크 색이 바뀌게 설정
1) night 버튼 : powder blue 색상
2) day 버튼 : blue 색상
 
 
2. 코드

- 변경 사항은 노란 밑줄
 
 

3. 실습 : 메뉴판 만들기 (링크 연결)

1. 결과

결과 화면

사과를 눌렀을 때

- 의도 : 과일을 추가하면 메뉴 항목이 늘어나고, 각각 사이트에 연결되도록
- 배열 fruits를 만들기
 
 
2. 코드

 
 
 

5. 배열 (array)

: 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입
- 수납상자, 책장
 
 

1. 생성

1. 대괄호
: 배열을 만드는 기호
 
2. 콤마
: 데이터 구분
 
3. 색인(index)
: 배열에 담겨있는 값을 가져올 때 대괄호에 넣는 숫자
- 0부터 시작
 
 

2. 반복문

- 함께 사용하면 리스트에 담긴 정보를 하나씩 꺼내서 처리할 수 있음
 
 

3. 제어와 크기

1. 제어
- 데이터 추가, 수정, 삭제 가능
 
1) 추가
- push : 끝점 원소 추가
- concat : 하나 이상의 원소 추가
- unshift : 시작점에 원소 추가
- splice : 원하는 위치에 원소 추가
 
2) 삭제
- pop : 끝점 원소 제거
- shift : 시작점 원소 제거
 
3) 정렬
- .sort와 .reverse(역순)
 
2. 크기
- .length
 
 

4. 실습

1. 결과

- 의도 : 개념 공부용
 
 
2. 코드

 
- game 배열에 stardew, valley 추가
- 인덱스 0과 인덱스 1 출력
- 배열의 길이 측정
- 배열에 원소(element) 추가