자바스크립트의 시작(생활코딩) - 2.Javascript 제어문 : 13~23(完)
13. 프로그램, 프로그래밍, 프로그래머
- 프로그램, 프로그래밍, 프로그래머 : 이러한 용어는 소프트웨어 뿐 아니라 다양한 분야에서 사용됨
1) 프로그램 : 순서 라는 의미 (음악회에서 시간의 흐름에 따른 연주순서)
2) 프로그래밍 : 이러한 순서를 만드는 행위
3) 프로그래머 : 이러한 순서를 만드는 사람
4) 설명 :
프로그램은 컴퓨터를 사용할 때 다양한 기능을 '순서'대로 사용하고, 보통 이러한 기능을 '반복'적으로 이용하고,
컴퓨터 프로그래밍 언어란 시간의 순서에 따라 실행되어야할 기능을 글로 적어두는 방식이다.
=> 프로그램은 작업이 필요할 때마다 이러한 언어로 적어둔 글을 컴퓨터가 실행하도록 전달하는것.
- HTML과 Javascript의 비교 : 모두 컴퓨터 언어지만, Javascript는 컴퓨터 프로그래밍 언어다.
1) HTML 로 만든 웹페이지는 시간의 순서따라 실행되는 것이 아니라, 한번 출력되면 바뀌지 않음(상태변화없음) => 컴퓨터 프로그래밍 언어가 아니다
2) Javascript 는 사용자와 상호작용하기위해서 시간에 따라 여러 기능이 실행되고, 조건에 따라 실행되고, 반복적으로 실행되는 형태를 띄므로, 컴퓨터 프로그래밍 언어이다
14. 조건문 예고
- 조건문 : 프로그램이 조건에 따라서 다른 기능들이 다른 순서에 따라 실행되도록 만들어주는것 / 단순한 업무에서부터 복잡한 업무까지 벗어날수 있도록 해준 혁명적인 도구
- 예제
1) night/day 버튼을 현재상태가 night면 day 모드로, day라면 night모드로 바꿔주는 기능을 넣어 하나로 구현하고자한다.
=> 이러한 버튼을 토글이라함
2) if/else 조건문 이용
※ Javascript로 데이터를 출력하기 : documnet.write('출력하기');
15. 비교연산자와 불리언(조건문 만들기 1 - 조건 만드는 방법:비교연산자를 통해 두값을 비교, 결과를 불리언을 통해 알아내서, 이 모두를 조건으로 이용)
- 비교연산자
1) ===
① 동등 비교 연산자로, 왼쪽과 오른쪽이 같은지 판단
② 또한 이항연산자이다. 좌항과 우항을 결합해 그 관계에 따라 하나의 결과(true 또는 false)인지를 만들어내므로
2) <, >
① 두 값의 크기를 서로 비교하는 연산자
② HTML에서는 < / > 로 작성해야함(꺽쇠기호가 태그에서도 사용되어 혼란), Javascript에서는 그대로 사용 가능
3) 결과는 true, false 둘 뿐이다
- 불리언(Boolean) : 위에서처럼 비교연산자를 사용하면 결과로 'True 또는 False'가 나오며, 이를 불리언 데이터타입이라고 한다
※ Javascript에서 '왼쪽이 오른쪽보다 크거나 같다'를 나타내는 비교연산자 : >=
16. 조건문 (조건문 만들기 2 - 조건문의 기본문법)
- if문의 괄호안에 불리언 데이터 타입이 오고,
불리언이 true이면 첫번째 중괄호의 코드가 실행되고 else의 중괄호 코드는 무시됨
불리언이 false이면 else의 중괄호 코드가 실행되고 첫번째 중괄호 코드는 무시됨
17. 조건문의 활용 (조건문 만들기 최종)
- night/day 토글 만들기
1) value가 night이면 day 버전으로, day면 night 버전으로 바뀌도록 하기위해, 조건인 value값을 먼저 찾기
※ .value는 해당 태그의 value값을 알게해준다 => document.querySelector('#night_day').value
2) if/else문에 위의 value값을 통해 조건넣기 / 원하는 style(버전) 넣기 / 각각의 value값 을 다시 서로값으로 바꾸기
※ console에서 위쪽화살표키 누르면 이전에 쓴 내용이 그대로 나온다
18. 리팩토링(중복의 제거)
- 리팩토링
1) 개념 : 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것. 단 기능적인 면에서는 변화가 없다
2 ) this : 자기자신 (#night_day1, #night_day2 등 추가적인 수정없이 사용가능)
3) 중복제거 : 하나의 변수를 만들어 중복된 코드를 집어넣어 사용함
19. 반복문 예고
- 반복문 : 같은 작업을 반복적으로 실행해주는 Javascript 문법 (몇억번을 반복해야하는 경우, 반복문은 획기적이다)
- 예제
1) 토글된 버튼을 클릭하면, 밝은화면에서는 그대로 '파란글씨', 어두운 화면에서는 '파우더블루'로 일부코드만(a태그) 수정하기
20. 배열 (반복문 만들기 1 - 하나의 상자로 만들기)
- 배열(Array)
1) 이해 : 서로 연관된 데이터를 정리해서 담아두는 수납상자로 이해(수많은 데이터를 종류별로 정리하고자)
2) 배열 만들기 : 대괄호로 표시하고, 값들은 콤마(,)로 구분하며 이를 변수(어떤 상자)에다 담는다
3) 배열의 값에 접근하기 : document.write(coworkers[0]); <= 배열을 담은 변수의 각 인덱스 값
4) 배열에 값 추가하기 : coworkers.push('duru'); <= .push('값')을 하면 배열의 맨마지막에 추가된다.
※ 배열에 대한 다양한 함수 찾기 : Javascript array + 원하는 키워드 (예 : remove value => splice)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Array.prototype.splice() - JavaScript | MDN
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice().
developer.mozilla.org
5) 배열의 길이 : document.write(coworkers.length); <= lengh를 이용하여 길이(개수)를 출력한다.
21. 반복문 (반복문 만들기 2 - 반복문 기본문법)
- 반복문
1) 왜 사용하는가 ? 동일(유사)한 코드가 여러번 반복적으로 실행하며, 그 반복 횟수가 아주 커질 경우 사용한다.
2) while 반복문 : 조건문처럼 조건부에 불리언 데이터 타입이 들어가며, true면 중괄호 안의 코드를 모두 실행하고, 다시 처음으로 돌아가 이 불리언이 false가 될 때까지 반복해서 코드를 실행한다.
3) 반복문과 조건문은 순서대로 실행되는 프로그램에 실행 흐름을 제어하는 제어문
22. 배열과 반복문 (반복문 만들기 3 - 배열과 반복문의 결합 )
- 배열과 반복문 결합하기
1) 순서
① 배열을 만들고
② 반복문을 이용해서 HTML 리스트만들기
③ 리스트안에 ( + coworkers[i] +)를 이용하여 원소를 순서대로 꺼냄
④ 배열의 수정 가능성이 있으므로, 조건을 '배열의 길이'보다 적게 설정한다
2) 배열을 사용하면 순서대로 연관된 데이터를 저장할 수 있고, 반복문을 사용하면 순서대로 이 배열의 원소를 하나씩 꺼내서 처리할 수 있기때문에
23. 배열과 반복문의 활용 (반복문 만들기 최종 )
- 예제(토글된 버튼을 클릭하면, 밝은화면에서는 그대로 '파란글씨', 어두운 화면에서는 '파우더블루'로 일부코드 수정하기)
1) 순서
① 파우더 블루로 바꾸기 위한 대상들인 모든 a태그를 가져오기 : querySelecorAll함수(해당하는 모든태그를 배열로 가져온다)
+ 변수에 해당 배열을 넣고, 정상적으로 불러오는지 console로 확인한다.
② 반복문을 통해 스타일을 적용시킨다(+앞에 콘솔을 위치시켜 기본태그가 제대로 오는지 확인함)
③ 스크립트에 해당부분을 추가하여 끼워넣는다
https://www.boostcourse.org/cs124/joinLectures/43685?isDesc=false
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org