Javascript - Web과 Javascript(사용 셋팅하기)
컴퓨터/Javascript
서론
Web개발에서 Javascript는 필수적으로 공부가 필요한 항목 중 하나입니다.
사용자가 웹브라우저를 통해 특정 URL에 접근하면 서버로부터 데이터를 받아 DOM(Document Object Model)을 생성하고, 이 DOM을 기반으로 사용자에게 보여주기 위한 Web페이지를 랜더링 합니다.
다시 말하자면, DOM을 수정하거나 변경한다면, 사용자가 보이는 Web페이지를 변화시킬 수 있다는 말이 됩니다.
오늘날 거의 모든 웹브라우저들은 Javascript를 지원합니다.
그리고 Javascript언어를 사용한 웹브라우저에서 생성된 DOM을 접근하고 제어할 수 있는 API를 제공해줍니다.
물론 다른 언어들을 통해서 DOM에 접근하고 제어하는 것 또한 가능하지만, 웹브라우저에서 제공하는가 와는 엄청난 차이를 가지게 됩니다. 이 때문에 Javascript가 Web에서 필수적인 존재가 되기 시작했습니다.
그렇다면 이제 Web에서 DOM을 다루기 위해서, Javascript를 사용하기 위해서 어디에, 어떻게, 무엇을 해야 되는지 알아 보록 하겠습니다.
1. 웹 브라우저 개발자도구
앞서 언급했듯이 웹 브라우저는 Javascript를 지원합니다. 사용자가 직접 웹브라우저 안에서 Javascript 소스코드를 사용할 수 있습니다.
보통 웹 브라우저에서 F12버튼을 누르면 개발자 도구를 열 수 있습니다. 여기서 직접 소스코드를 입력하여 Javascript언어로 DOM을 다룰 수 있습니다.
우선 F12를 눌러 개발자 도구를 열어보도록 하겠습니다. (본 예제는 크롬을 이용하였습니다.)
그림처럼 F12를 누르시면 현제 웹브라우저에의 웹페이지에 Javascript를 적용할 수 있는 Console 탭이 있습니다.
console.log함수로 출력해보기
이제 여기서 간단한 Javascript를 사용해 보도록 합시다. 콘솔 창에 출력을 하기 위해서 console.log함수를 이용하면 됩니다.
DOM에 접근해보기
사실 위와 같이 간단한 출력 함수도 확인의 용도로 많이 사용합니다.
하지만 가장 핵심적으로 Javascript가 하는 일은 DOM을 다루는 일입니다.
여러분의 웹 브라우저에서 웹페이지가 랜더링 되었다면 이미 DOM이 생성되어 있습니다.
그리고 Javascript에서 DOM은 document라는 객체에 담겨있습니다.
결국 Javascript에서 document라는 객체를 이용하면 바로 DOM을 이용하는 것입니다.
본문은 이 document에 대한 속성이나 사용법 등을 설명하지는 않고 간단한 예제만 한번 보도록 하겠습니다.
예제처럼 여러 줄을 한 번에 입력 또한 가능하며 실제 랜더링 된 DOM에서 html 태그의 lang속성에 접근하여 값을 추출한 모습입니다.
예제처럼 웹 브라우저에서 Javascript를 실행하여 바로바로 소스코드를 작성하고 실행시킬 수 있습니다.
HTML 문서에 Javascript코드 추가하기
사실 위에서 언급한 개발자 도구를 사용한 Javascript는 개발자를 위한 실시간 테스트 도구와 같은 개념입니다.
실제 서비스를 제공하기 위해서는 어딘가에 저장된 Javascript 소스코드를 원하는 시점에 실행시켜야 됩니다.
HTML 문서에는 <script></script> 태그를 이용해 Javascript코드를 추가할 수 있습니다.
정리하자면 서비스를 제공하는 사람은 HTML의 문서의 어떠한 형태로든 Javascript코드를 추가하여 사용하는 사람의 웹브라우저에게 전달해야 됩니다.
<script> 태그에 대한 속성과 javascript가 어느 시점에 실행되는가는 다른 포스트에서 자세히 다루도록 하고 본문에서는 HTML 문서에서 어떻게 javascript를 사용하는가만을 배워보도록 합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript를 사용해 보도록 합시다.</h1>
<button onclick="button_click_1()" >1번</button>
<button onclick="button_click_2()" >2번</button>
</body>
<script>
//1번 버튼 클릭
function button_click_1 (){
alert("1번 버튼을 클릭했습니다.");
}
//2번 버튼 클릭
function button_click_2 (){
const HTag = document.querySelector('h1');
HTag.innerText = '2번 버튼을 클릭!!';
}
</script>
</html>
HTML문서에 script태그의 위치에 따라 차이가 존재합니다. 하지만 어느 위치에도 javascript를 삽입할 수 있습니다.
'컴퓨터 > Javascript' 카테고리의 다른 글
| Javascript - 화면, 웹페이지, 요소의 위치 (0) | 2022.05.17 |
|---|---|
| Javascript - document 와 window (0) | 2022.05.16 |
| Javascript - 함수(Function)의 다양한 정의방법 (0) | 2022.05.13 |
| Javascript - 변수의 범위와 호이스팅(Variable scope and hoisting) (0) | 2022.05.12 |
| Javascript - 변수(variable) var,let,const? (0) | 2022.05.11 |
Commnet