변수의 범위
자바스크립트에서는 객체, 함수가 모두 변수에 담길 수 있다. 변수의 범위는 해당 변수에 접근할 수 있는 영역이다.
1. 지역변수 = 함수 내부에서 선언된 변수, {} 영역 내에서 선언된 변수이다.
지역변수는 변수가 선언된 영역 내에서만 유효하고 그 영역을 벗어나면 메모리에서 사라진다.(삭제된다)
2. 전역변수 = 함수 외부에서 선언된 변수이다.
전역변수는 프로그램의 어느 영역에서나 접근할 수 있으며 웹 페이지가 닫혀야만 메모리에서 사라진다.
문서 객체 모델 (DOM : Document Object Model)
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법들을 제공해준다.
<html>
<head> <body>
<title><meta><style> <header><div><footer>
document 객체
웹페이지 자체를 의미하는 객체이다. 웹 페이지에 존재하는 HTML 요소에 접근할 때 반드시 document 객체로부터 시작.
document.getElementById() = () 안의 아이디를 가지고 있는 요소를 선택해서 가져온다.
<div id="banner"></div>
document.getElementById("banner")document.querySelector() = ()안의 CSS 선택자로 선택되는 요소를 선택해서 가져온다.
<div class = "menu_item">
<a>
<img/>
</a>
</div>
document.querySelector(".menu_item > a > img")document.querySelectorAll() = ()안의 CSS 선택자로 선택되는 요소들을 모두 선택한 후 배열로 가져온다.
document.getElementsByTagName() = ()안의 태그 이름의 요소들을 모두 선택 후 배열로 가져온다.
DOM 사용 예시
<div id="menu"></div>
<div class="hide_menu"></div> === display none // 상태로 설정해놨다고 가정한다.
document.getElementById("menu").addEventListener('click', funciton(){
document.getElementsByClassName("hide_menu").style.animation = "block";
});
// menu라는 아이디를 가져와서 클릭하면 ~~한 기능을 시킬꺼다.
// 기능은 hide_menu가 animation 효과로 블락되엇 나타나게끔한다.
document.getElementById("menu").addEventListener('mouseOver', function(){
document.getElementsByClassName("hide_menu").classList.add("on");
});
// menu라는 아이디를 가져와서 마우스를 올리면 ~~한 기능을 시킬거다.
// 기능은 hide_menu의 클래스에 on이라는 클래스를 추가시킬것이다.
// 그러면 아래와 같은 형태를 띈다.
==> <div class = "hide_menu on"></div>
// 아래부터는 CSS 파일이라 가정한다.
.hide_menu{
color: black;
display: none;
transition: all 2s
}
// 원래 hide_menu는 이런 상태였는데
// 마우스오버가 되면
.on{
color: white;
display: block;
}
// 색깔이 흰색이 되고 display는 block 된다.'개념정리' 카테고리의 다른 글
| [개념정리 11탄]React 시작 전(ES6 문법) (0) | 2022.10.09 |
|---|---|
| [개념정리 10탄] JavaScript 6번째 (0) | 2022.10.09 |
| [개념정리 8탄] JavaScript 4번째 (1) | 2022.10.08 |
| [개념정리 7탄] JavaScript 3번째 (2) | 2022.10.08 |
| [개념정리 6탄] JavaScript 2번째 (1) | 2022.10.08 |