{} (중괄호) => 블록(Block)
코드는 중괄호로 묶을 수 있는데, 이렇게 묶인 코드를 코드 블록(Block)이라고 한다.
{
실행코드
}
함수 블록과 조건문/반복문 등의 블록은 다른 성질의 블록
- 함수 블록 내에 선언된 변수는 함수 밖에서 사용할 수 없다!
스코프(Scope)
스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역을 의미
- 전역 스코프 : 블록 바깥에 그냥 선언된 변수
- 지역 스코프 : 블록 내부에 선언된 변수
- 블록 스코드 : 일반적인 블록(조건문, 반복문 등)에 선언된 변수
- 함수 스코프 : 함수 내부에 선언되 변수
스코프 범위
- 전역 스코프에 선언된 변수
- 모든 스코프에서 사용 가능
- 블록 스코프에 선언된 변수
- var로 선언 시 : 모든 스코프에서 사용 가능
- let로 선언 시 : 선언된 블록 또는 중첩된 블록 내에서만 사용 가능
- 함수 스코프에 선언된 변수
- 해당 함수 내에서만 사용 가능
자바스크립트의 작성 방식
- 인라인 스타일 : html 태그에 이벤트 속성으로 직접 작성
- 내부 스크립트 : <script> 태그 내부에 작성
- 외부 스크립트 : .js 확장자 형식의 파일에 작성 후 <script> 태그로 임포트(import)
자바스크립트 파일 불러오는 방식
<body>
... html 코드 생략 ...
<script type="text/javascript" src="js파일 위치"></script>
</body>
</html>DOM (Document Object Model)
DOM은 자바스크립트같은 프로그래밍 언어에서 HTML 문서의 정보들을 다룰 수 있게 해주는 프로그래밍 인터페이스이다.
쉽게 표현하자면 DOM은 HTML과 JavaScript 사이에서 Bridge 역할을 해주는 것이다.
HTML 코드 → 웹 브라우저에 의해 DOM으로 변환 → DOM → DOM 인터페이스로 자바스크립트에서 접근 ↔ Javascript
DOM은 html으로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다.
- html 태그로 작성된 요소들은 DOM Object로 표현된다.
- 모든 요소들은 속성, 이벤트, 프로퍼티의 구성을 가진다.
- html 코드는 DOM 형태로 해석되어 CSS의 적용, Javascript와의 상호작용 등이 이루어진다.
DOM 주요 객체
- document : HTML 문서의 최상위 root 객체이고, html 문서 전체를 대변한다.
- element : HTML document 하위의 화면 요소 (html tag로 그려지는 요소들 등) 들을 의미한다. DOM에서는 계층적인 형태로 존재한다.
<div>
<h1>제목</h1>
<ul>
<li> ... </li>
</ul>
</div>▼
DOM 접근 함수
- document.getElementById(elementId) : 요쇼의 id 값 (html 태그의 id 속성)으로 요소를 가져온다.
- document.getElementsByTagName(name) : 요소의 태그 종류로 (html 태그)으로 요소들을 가져온다. (배열 형태, nodeList)
- document.getElementsByClassName(className) : 요소의 class 값 (html 태그의 class 속성)으로 요소들을 가져온다. (배열 형태, nodeList)
QuerySelector
- document.querySelector( selector ) : 선택자 문법으로 문서 내의 요소들을 가져온다.
// 클래스가 panels인 div 내의 li 요소들을 가져옴
var elements = document.querySelector("div.panels li");DOM 객체 추가
DOM 객체를 생성해서 DOM 구조에 추가하면 화면에 표시된다.
- document.createElement(tagName) : 새로운 DOM 노드 객체를 생성한다.
- (특정 element).appendChile(삽입할 DOM 노드 객체) : 특정 DOM 객체 하위에 다른 DOM 객체를 삽입한다.
var div = document.getElementById('panels');
var element = document.createElement('p');
element.innerHTML = 'p 태그의 내용입니다.';
div.appendChile(element);'Front-End' 카테고리의 다른 글
| [JavaScript] Const에 관련하여 (1) | 2025.03.03 |
|---|---|
| [CSS] 부트스트랩 태그 정리 (1) | 2025.02.25 |
| [JavaScript] 기초 공부 3 (2) | 2025.02.09 |
| [JavaScript] 기초 공부 2 (5) | 2025.02.08 |
| [JavaScript] 기초 공부 1 (2) | 2025.02.03 |