인덱스 기반으로 값을 순서대로 삽입할 수 있는 특별한 객체 형태
인덱스 : 0 부터 시작하는 정수형 값
프로퍼티 : 값이나 함수를 가질수 있다. (CSS 속성과 값)
객체 프로퍼티에 접귾거나 값을 저장하려면 . 기호를 사용한다.
var ob = {userName : "Dan" , age : 20};
// 새로운 객체타입 선언, 프로퍼티 없이 선언 가능
ob.userName
// "Dan" , userName값에 접근
ob.age =10
// age 값을 10으로 변경
ob.online = true
// online 값을 true 로 지정, (새로 만든다.)
함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미한다. 이렇게 코드들을 묶어서 작성하는 것을 정의(declarartion)라고 하고 정의된 함수는 호출(call)을 통해 실행할 수 있다.
function 함수명 (매개변수) {
실행코드
}
수학에서의 함수처럼 어떠한 식에 미지수를 값을 대입하면 y값을 알 수 있다.
프로그래밍에서도 한 개 이상의 입력과 단일 출력이 가능하다.
//함수 예약어 대입값
function 함수명 (매개변수) {
//결과값
실행코드
}
코드는 중괄호로 묶을 수 있는데, 이렇게 묶인 코드를 코드 블록이라고 한다.
{
코드블록
}
함수 블록과 조건문/반복문등의 블록은 다른 성질의 블록
(함수 블록 내부에 선언된 변수는 함수 밖에서 사용이 블가능하다)
스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역을의미
전역 스코프 (전역변수, global) : 블록 바깥에 그냥 선언된 변수
지역 스코프 (지역변수, local) : 블록 내부에 선언된 변수
블록 스코프 : 일반적인 블록 (조건문, 반복문 등)에 선언된 변수
함수 스코프 : 함수 내부에 선언된 변수
전역 스코프에 선언된 변수
=> 모든 스코프에서 사용가능
블록 스코프에 선언된 변수
=> var로 선언시 모든 스코프에서 사용가능
=> let로 선언시 선언된 블록 또는 중첩된 블록 내에서만 사용가능
함수 스코프에 선언된 변수
=> 해당 함수 내에서만 사용 가능
인라인 스타일 : html 태그에 이벤트 속성으로 직접 작성 (사용 안함)
내부 스크립트 : script태그 내부에 작성
외부 스크립트 : js파일에 작성후 script 태그로 임포트한다.
<body>
//html code
<script type="text/javascript" src="js파일 위치"></script>
</body>
웹 브라우저의 로드시 html코드를 먼저 로드하고 script파일을 로드하면 브라우저의 비어있는 화면의 시간이 줄어든다 그래서 관행적으로 js파일은 html코드 뒤에 붙여준다.
DOM (Document Object Model)
변환 과정
HTML => DOM
웹 브라우저에 의해 DOM으로 변환
DOM => javascript
DOM 인터페이스로 자바스크립트에서 접근
html으로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다.
html 태그로 작성된 요소들은 DOMobject로 표현한다.
모든 요소들은 속성, 이벤트, 프로퍼티의 구성을 가진다.
html코드는 DOM 형태로 해석되어 CSS 적용, javascript와의 상호작용 등이 이루어진다.
DOM은 HTML파일의 구조를 계층적으로 표현한다.
DOM 객체를 생성해서 DOM 구조에 추가하면 화면에 표시된다.
document.createElement(tagName): 새로운 노드 객체를 생성한다.
(특정 element).appendChild(삽입할 DOM 노드 객체): 특정 DOM 객체 하위에 다른 DOM 객체를 삽입한다.
DOM 접근 API를 사용해서 필요한 객체를 가져와서 innerHTML이나 Style 속성으로 객체를 수정할 수 있다.
element.innnerHTML : 요소 내부의 콘텐츠 값ㅇ데 접근하거나 지정할 수 있다.
element.style : 요소가 가지고 있는 style을 지정할 수 있다.
// element.style.fontSize = '20px';
(font-size X , fontSize O )
DOM 기반의 요소들은 event를 감지해서 그 이벤트가 감지되었을 때 원하는 코드가 실행되도록 할 수 있다.
많은 종류의 이벤트를 감지할 수 있게 DOM 차원에서 미리 정의되어 있다.
var element = document.getElementById("panels");
element.addEventListener("click", function () {
alert("halo");
});
이미 선언된 함수를 이용할 수 있고 익명함수를 사용할 수 있다.