생활 코딩 자바 스크립트

정리

자바 스크립트

1. 수업의 목적
a. 자바 스크립트는 사용자와 상호작용한다.
b. 웹 브라우저는 한 번 화면에 출력되면 자기 자신을 바꿀 수 없다. 자바 스크립트를 이용해 변경 가능하다. > html을 제어하는 언어.


2. HTML과 JavaScript의 만남
a. script 태그
ㄱ. 지금부터 자바 스크립트가 시작된다고 알려주는 태그. css의 style 태그 처럼..
ㄴ. 자바 스크립트는 동적이다. 연산도 가능.

b. 이벤트
ㄱ. onclick 속성의 값에는 JS가 와야 한다.
ㄴ. onclick 속성을 만나면 그 값을 기억하고 있다가 클릭하면 그때 실행한다.

ㄷ. 웹 브라우저에서 일어나는 일들을 이벤트라고 한다.
ㄹ. click, change, keydown 등이 있다.

c. 콘솔
ㄱ. 검사 > 콘솔로 파일을 만들지 않고도 실행 가능
ㄴ. 콘솔을 통해 자바 스크립트를 실행하면 보고 있는 웹 페이지를 대상으로 작업을 수행한다.


3. 데이터 타입 - 문자열과 숫자
a. 숫자에 대한 연산, 문자열에 대한 다양한 method를 지원한다.
4. 변수와 대입 연산자
a. 변수 쓸때는 var 키워드 붙이기
b. 대입 연산 > '='


5. 제어할 태그 선택하기
a. document.querySelector('body'): body 태그를 선택한다.
b. document.querySelector('body').style.color='white' : 선택한 body 태그에 style을 적용한다.


6. 프로그램, 프로그래밍, 프로그래머
a. 프로그램: 순서라는 의미가 있다.
b. 프로그래밍: 순서를 만드는 행위
c. 프로그래머: 순서를 만드는 사람
d. html은 순서가 상관이 없으므로 프로그래밍 언어가 아니다. 자바 스크립트는 반면 순서가 있는 프로그램밍 언어.


7. 비교 연산자
a. 자바 스크립트에선 == 대신 === 를 쓴다.


8. 리팩토링
a. 공장에 다시 보내서 개선한다는 의미. 비효율적인 코드를 개선시키는 것.
b. this.value를 이용하면 코드를 반복해서 사용할 때 id를 새로 만들지 않더라도 자기 자신의 value를 선택할 수 있다.
c. 변수에 document.querySelector를 저장할 수도 있다.


9. 배열
a. c++ 처럼 a[10] 같이 배열 변수를 만들지 않아도 a= [1,2] 하면 알아서 a는 배열이 된다. [1,2] 가 배열이고 거기에 a 라는 별칭을 붙혔다고 생각.

b. push로 배열에 요소를 추가 가능. .length 같은 기능도 지원한다.


10. 배열과 반복문의 활용
a. querySelector는 맨 처음 하나만을 가져온다.
b. querySelectorAll 은 모든 값을 다 가져온다. 배열로 가져옴. <br

11. 함수
a. 키워드:function
b. document.write() 안에는 태그를 작성할 수도 있다.
c. 자바 스크립트는 문자와 숫자를 더하면 문자로 간주한다.
d. this는 onclick이 속해있는 태그를 가리키는 역할을 할 수 있지만, 독립된 함수를 만들면 this는 전역 객체의 역할(웹 브라우저에선 윈도우)을 한다. 기존의 역할을 수행 못함. 인자로 this를 전달하면 해결할 수 있다.


12. 객체
a. 연관된 함수와 변수를 그룹핑해서 잘 정리정돈하기 위한 도구, 복잡성을 낮추기 위해 사용.
b. 만약 수십억개의 함수 중 중복되는 이름이 있다면? > 함수의 이름을 바꿀 수도 있지만, 객체를 활용할 수 있다.
c. 객체에 속해있는 함수를 method라고 부른다.
d. 순서 없이 정보를 넣을 수 있다. 이름이 있는 정리정돈 상자.
e. 배열을 만들 땐 {} 기호를 사용한다.
ex) var coworkers = {programmer: "egoing"};
여기서 programmer 는 정보를 꺼내기 위한 이름(key)이다.

f. 이름에 띄어쓰기를 쓰고 싶으면 coworkers["date scientist"] 처럼 쓰면 된다. . 과 [] 를 통해 객체에 요소를 만들고 불러올 수 있다.

g. 객체에서 반복문은 for..in을 쓴다.
ex) for(var key in coworkers) > coworkers 안에 있는 key 값을 가져온다. <br.
h. 객체에는 함수도 추가할 수 있다.
ex)coworkers.showAll = function(){};
function showAll(){}; 과 동일하다.

i. 객체에 포함된 변수를 property(key들), 함수를 method 라고 부른다.
j. 객체의 property 들을 구분할 땐 콤마를 사용한다.


13. 파일로 쪼개서 정리 정돈하기
a. 서로 연관된 코드들을 파일로 묶어서 그룹핑한 것.
b. 자바 스크립트 파일로 따뤄 만들어서 관리하면 재사용에 유용.
c. 웹 서버 입장에선 부담이 늘어나지만 캐시(저장한다) 덕분에 한 번 다운로드 해놓으면 비용 절감이 된다.


14. 라이브러리와 프레임워크
a. 라이브러리: 내가 만들 프로그램에 사용할 부품을 가져오는 느낌
b. 프레임워크: 반제품. 우리가 만들 프로그램에 공통된 부분을 가져와서 다른 부분만 수정하는 느낌.
c. 제일 유명한 라이브러리는 jQuery. 반복문까지 우리 대신해서 처리해줌.


15. UI VS API
a. UI(User Interface): "사용자가" 시스템을 제어하기 위해서 사용하는 조작장치. ex) 메뉴바, 스크롤, 경고창 등..
b. API(Application Programming Interface): 애플리케이션을 만들기 위해 "프로그래밍을 할 때" 사용하는 조작장치. 쉽게 말해서 우리가 프로그래밍을 한다는 건 이미 만들어 놓은 api를 순서에 맞게 나열하는 것이다.