15강. 버튼 만들기
14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는 하기와 같다. fun
soo0100.tistory.com
웹 페이지를 동적으로 만들기란. 바로 사용자의 행동에 반응하는 웹페이지를 의미한다.
기존 앞에서 서술했던 HTML 과 CSS 만으로만 웹 페이지를 만들면
그저 정보를 보여주는 역할에만 충실하게 된다.
예를 들어 버튼 클릭시 화면이 변화하게 만들어야 된다면, 바로 자바스크립트를 활용해야 한다.
이것이 바로 동적인 웹 페이지를 만드는 기본적인 개념이다.
앞 시간에 보았던 팝업창을 띄워주는 alert() 역시 자바스크립트에서 기본으로 제공해주는 함수이다.
기본적으로 제공해주는 함수를 빌트인 함수라고 말한다.
이런 빌트인 함수들을 모두 외울 필요는 없고, 필요시 마다 검색해서 사용하면 된다.
오늘은 버튼 클릭시 특정 영역의 텍스트를 바꾸어보는 예제를 만들어본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Object Model</title>
<script>
function buttonClick(){
document.getElementById("text").innerText = "안녕하세요";
}
</script>
</head>
<body>
<div id="text"></div>
<input type="button" value="클릭" onclick="buttonClick();">
</body>
</html>
1. div 와 input 요소를 만들었다.
2. 버튼 클릭시 동작을 위한 onclick 속성에 자바스크립트 함수를 연결한다.
위 두가지는 16강 까지 진행해온 내용이다.
새로 공부할 내용은 바로 하기 라인이다.
document.getElementById("text").innerText = "안녕하세요";
해당 라인을 이해하기 위해서는 DOM 이라는 자바스크립트 빌트함수 세트를 이해할 필요가 있다.
자바스크립트는 웹페이지의 모든 요소에 접근 및 수정 등을 위해서 웹 페이지를 document 라는 객체로 인식을 한다.
즉, 하나의 웹 페이지가 있다면 그 웹페이지는 document. 으로 접근 할수 있다.
document 안에는 많은 메소드(함수)와 프로퍼티(값) 들이 있다. 이 것들을 우리는 DOM(Document Object Model) 이라고 말하고, 앞서 말한것처럼 document. 을 사용해서 웹 페이지를 충분히 제어할 수 있다.
우선은 DOM의 기본 개념만 체크해두고 공부하자. 아! 웹페이지에 접근하기 위해서는 DOM 을 사용하는 구나.
document. 이렇게 접근하는 구나! 바로 이렇게 말이다.
이 라인을 다시 꼼꼼히 풀어보면,
document.getElementById("text").innerText = "안녕하세요";
document. 를 이용해서 웹페이지에 접근한다
getElementById("text") text 라는 아이디를 가진 요소(Element) 를 얻어온다.(접근한다)
여기 까지 실행하면 div 요소에 접근이 가능하다,즉 div 요소를 수정할 수 있다.
.innerText 는 해당 요소의 내용을 바꾸는 기능을 하는 프로퍼티 이다.
여기에 우리는 "안녕하세요" 라는 값을 넣었다.
결과를 브라우저를 통해 확인해보면,
1. 버튼만 나옴
2. 버튼 클릭시 "안녕하세요" 텍스트 나옴.
document. 를 사용해서 웹 페이지의 각 요소들에 접근한다는 것이
가장 중요한 포인트 이다.
17강. DOM을 활용하여 신규요소 추가하기
16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수
soo0100.tistory.com
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 로또 숫자 만들기 with 자바스크립트 (랜덤 함수 활용하기) (3) | 2024.08.12 |
|---|---|
| 17강. DOM을 활용하여 신규요소 추가하기 (1) | 2024.08.05 |
| 15강-2. 버튼 만들기 (함수 이용) (1) | 2024.07.30 |
| 15강. 버튼 만들기 (2) | 2024.07.23 |
| 14강. HTML요소 클릭시 동작하도록 만들기. (1) | 2024.07.11 |
댓글