오늘 한일
- 생활코딩 WEB2-JavaScript을 통해 자바스크립트 입문
- 복습
내일 할일
- 자바스크립트 공부
복습
1. JavaScript
- HTML은 정적이다. 한번 화면에 출력되면 그 모습을 유지한다.
- 자바스크립트는 동적이다. 사용자와 상호작용을 할 수 있다.
script 태그
- HTML 문서에 자바스크립트 코드를 넣을 때는 자바스크립트가 코드가 시작된다는 사실을 알려야한다. 그때 사용하는 태그가 script 태그이다.
<script>
document.write(1+1); // 출력결과 : 2
</script>
1+1 // 출력결과 : 1+1- 자바스크립트를 이용하면 1+1을 2로 출력가능하다.
이벤트
- 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 한다.
- 사용자가 웹페이지의 버튼을 클릭하는 등의 행위를 가했을 때 웹페이지에서 일어나는 일을 의미한다.
<input type="button" value="hi" onclick="alert('hi)">
// hi 버튼을 클릭할 경우 alert('hi') 코드가 실행됨.- 보통 on으로 시작하는 속성들이다.
콘솔
- 간단하게 어떤 코드를 실행하기위해 사용한다.
- 마우스 우클릭 -> 검사 -> console
- 콘솔을 이용하면 자바스크립트를 따로 파일을 만들지 않더라도 즉석으로 실행해볼 수 있다.
제어할 태그 선택
- 원하는 이벤트를 발생하기 위해서는 웹 브라우저에게 특정한 태그를 선택하게 해야한다.
- document.querySelector(selectors)에 속성.속성값을 붙혀주면 된다.
document.querySelector('body').style.backgroundColor='black';- 속성값에 - 대신 영어 때문자를 활용하는 점과 '를 사용하는 점을 주의한다.
중복의 제거를 위한 리팩터링
- 리팩터링이란 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드는 개선하는 작업을 말한다.
- this 키워드를 사용하면 이벤트 코드가 속해 있는 태그를 가리킬 수 이다.
- 변수를 활용하면 중복을 제거할 수 있다.
document.querySelector('body').style.backgroundColor='black';
// 위의 코드 대신 아래처럼 작성 가능
var target = document.querSelector('body');
target.style.backgroundColor = 'black';배열과 반복문의 활용
- document.querySelectorAll('a');를 사용하면 결과값을 노드리스트(일단은 배열로 간주하자)로 얻을 수 있다.
- 반복문과 .length를 활용하면 코드를 효율적으로 작성할 수 있다.
함수
- body에 JS를 직접 작성하는 대신 head에 함수의 형태로 작성을 하면 재사용과 유지보수가 간편하다
- 함수이름(인자) 형태로 호출하면, 함수에서 인자를 매개변수에 대입하고 알맞는 작동을 한다.
객체
- 객체의 문법
var 변수이름 = {
"키":"값", // 객체에 소속된 변수를 property라고 부른다.
"키":"값",
함수이름: function(매개변수) { // 객체에 소속된 함수를 method라고 부른다.
}
}- 변수이름.키 === 변수이름["키"] === 값
파일 분할
- .js파일에 자바스크립트 코드를 작성한 후 html의 script 태그의 속성인 src="url"을 사용한다.
라이브러리와 프레임워크
- 라이브러리는 내가 가져와서 쓰는 것이라면, 프레임워크는 우리가 들어가서 작업한다고 보면 된다.
- 라이브러리 대표적으로 jquery가 있다.
UI와 API
- UI : User Interface, 사용자가 시스템을 제어하기위해 사용하는 조작장치를 말한다.
- API : Application Programming Interface, 프로그래머가 애플리케이션을 만들기 위해 프로그래밍할 때 사용하는 조작장치를 말한다.
추후 공부해야할 것
- document 객체 : 어떤 웹 페이지의 태그를 삭제하고 싶거나 어떤 태그의 자식 태그를 추가하고 싶을 때 살펴보기
- DOM 객체 : document 객체로도 찾을 수 없다면 수색범위를 넓히기. document 객체는 DOM 객체의 일부이다.
- window 객체 : 웹 페이지가 아니라 웹 브라우저 자체를 제어해야할 때 살펴보기. 현재 열려있는 주소, 새 창을 열어야 할 때, 현재 웹 브라우저의 화면 크기를 자바스크립트를 통해 알고싶을 때 유용함.
- Ajax : 웹 페이지를 리로드하지 않고도 정보를 변경하고 싶을 때 공부하기
- cookie : 웹 페이지가 리로드돼도 현재 상태를 유지하고 싶을 때 공부하기
- offline web application : 인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶을 때 공부하기
- webRTC : 화상 통신 웹 앱을 만들고 싶을 때 공부하기
- webGL : 3차원 그래픽으로 게임들 만들고 싶을 때 공부하기
- WebVR : 가상현실에 관심이 많으면 공부하기
do for me