배열
배열형(Array Type)
인덱스 기반으로 값을 순서대로 삽입할 수 있는 특별한 객체 형태
인덱스 : 0 부터 시작하는 정수형 값
배열의 속성과 함수
- length : 배열의 크기를 리턴
- push() : 배열에 새로운 값을 추가
- unshift() : 배열에 새로운 값을 0번 인덱스로 추가
- pop() : 배열의 마지막 값을 리턴후 제거
- shift() : 배열의 처음 값을 리턴하면서 제거
객체 자료형, 프로퍼티
프로퍼티 : 값이나 함수를 가질수 있다. (CSS 속성과 값)
객체 프로퍼티에 접귾거나 값을 저장하려면 . 기호를 사용한다.
var ob = {userName : "Dan" , age : 20};
// 새로운 객체타입 선언, 프로퍼티 없이 선언 가능
ob.userName
// "Dan" , userName값에 접근
ob.age =10
// age 값을 10으로 변경
ob.online = true
// online 값을 true 로 지정, (새로 만든다.)함수
함수 (function)
함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미한다. 이렇게 코드들을 묶어서 작성하는 것을 정의(declarartion)라고 하고 정의된 함수는 호출(call)을 통해 실행할 수 있다.
- 함수는 재사용을 위해 사용한다.
function 함수명 (매개변수) {
실행코드
}함수의 입출력
수학에서의 함수처럼 어떠한 식에 미지수를 값을 대입하면 y값을 알 수 있다.
프로그래밍에서도 한 개 이상의 입력과 단일 출력이 가능하다.
//함수 예약어 대입값
function 함수명 (매개변수) {
//결과값
실행코드
}스코프
중괄호 => 블록
코드는 중괄호로 묶을 수 있는데, 이렇게 묶인 코드를 코드 블록이라고 한다.
{
코드블록
}함수 블록과 조건문/반복문등의 블록은 다른 성질의 블록
(함수 블록 내부에 선언된 변수는 함수 밖에서 사용이 블가능하다)
스코프
스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역을의미
-
전역 스코프 (전역변수, global) : 블록 바깥에 그냥 선언된 변수
-
지역 스코프 (지역변수, local) : 블록 내부에 선언된 변수
-
블록 스코프 : 일반적인 블록 (조건문, 반복문 등)에 선언된 변수
-
함수 스코프 : 함수 내부에 선언된 변수
스코프 범위
-
전역 스코프에 선언된 변수
=> 모든 스코프에서 사용가능 -
블록 스코프에 선언된 변수
=> var로 선언시 모든 스코프에서 사용가능
=> let로 선언시 선언된 블록 또는 중첩된 블록 내에서만 사용가능 -
함수 스코프에 선언된 변수
=> 해당 함수 내에서만 사용 가능
HTML => JavaScript
자바스크립트의 작성 방식
-
인라인 스타일 : html 태그에 이벤트 속성으로 직접 작성 (사용 안함)
-
내부 스크립트 : script태그 내부에 작성
-
외부 스크립트 : js파일에 작성후 script 태그로 임포트한다.
자바스크립트의 파일 로드
<body>
//html code
<script type="text/javascript" src="js파일 위치"></script>
</body>웹 브라우저의 로드시 html코드를 먼저 로드하고 script파일을 로드하면 브라우저의 비어있는 화면의 시간이 줄어든다 그래서 관행적으로 js파일은 html코드 뒤에 붙여준다.
선택자로 DOM 가져오기
DOM
DOM (Document Object Model)
- DOM은 자바스크립트 같은 프로그래밍 언어에서 HTML 문서의 정보들들 다룰 수 있게 해주는 프로그래밍 인터페이스이다.
변환 과정
-
HTML => DOM
웹 브라우저에 의해 DOM으로 변환 -
DOM => javascript
DOM 인터페이스로 자바스크립트에서 접근
html으로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다.
-
html 태그로 작성된 요소들은 DOMobject로 표현한다.
-
모든 요소들은 속성, 이벤트, 프로퍼티의 구성을 가진다.
-
html코드는 DOM 형태로 해석되어 CSS 적용, javascript와의 상호작용 등이 이루어진다.
DOM은 HTML파일의 구조를 계층적으로 표현한다.
DOM 주요 객체
- document : HTML문서의 최상위 root 객체이고, html 문서 전체를 대변한다.
- element : HTML document하위의 화면 요소 (html tag로 그려지는 요소들 등)을 의미한다. DOM에서는 계층적인 현태로 존재한다.
DOM 접근 함수
- document.getElementById : 요소의 id 값으로 요소를 가져옴
- document.getElementByTagName : 요소의 태그 종류로 요소들을 가지고온다.
- document.getElementByClassName : 여소의 class 값 으로 요소들을 가지고 온다.
QuerySelector
- document.querySelector(selector) : 선택자 문법으로 문서 내의 요소들을 가지고 온다.
(CSS 스타일로 선택한다. Ex : # . 등등)
DOM객체 추가
DOM 객체를 생성해서 DOM 구조에 추가하면 화면에 표시된다.
-
document.createElement(tagName): 새로운 노드 객체를 생성한다.
-
(특정 element).appendChild(삽입할 DOM 노드 객체): 특정 DOM 객체 하위에 다른 DOM 객체를 삽입한다.
DOM객체 수정
DOM 접근 API를 사용해서 필요한 객체를 가져와서 innerHTML이나 Style 속성으로 객체를 수정할 수 있다.
-
element.innnerHTML : 요소 내부의 콘텐츠 값ㅇ데 접근하거나 지정할 수 있다.
-
element.style : 요소가 가지고 있는 style을 지정할 수 있다.
// element.style.fontSize = '20px';
(font-size X , fontSize O )
이벤트 처리
이벤트
DOM 기반의 요소들은 event를 감지해서 그 이벤트가 감지되었을 때 원하는 코드가 실행되도록 할 수 있다.
대표적인 이벤트 종류
많은 종류의 이벤트를 감지할 수 있게 DOM 차원에서 미리 정의되어 있다.
- click : 해당 객체를 클릭시 발생
- mousemove : 해당 객체 위에서 마우스를 이동했을 때 발생
- keypress : 해당 객체가 선택된 상태에서 키보드 입력이 있을 * 때 발생
- submit:form의 전송 버튼이 눌렸을 때 발생
- load : 해당 객체가 화면에 로딩이 완료되어 화면에 표시될 때 발생
이벤트 리스너 등록
var element = document.getElementById("panels");
element.addEventListener("click", function () {
alert("halo");
});이미 선언된 함수를 이용할 수 있고 익명함수를 사용할 수 있다.
익명함수, 콜백함수
- 익명함수 : 이름이 없는 함수, 함수블록만 정의해서 사용하는 함수이다.
- 콜백함수 : 이벤트 리스너와 같이 특정 트리거가 발생했을 때 완료시점에 호출 받기 위한 함수 (매개변수로 전달하는 함수)
