[JS] JavaScript 사용하기

목표: JavaScript 사용하기 - 기본편

요약: 

1. HTML 문서에서 JavaScript 출력하기
2. 외부에 있는 JavaScript 파일 호출하기

 

 

 

 

안녕하세요 냥장판 입니다 

지난 게시글에서는 JavaScript를 사용하는 이유에 대해서 살펴봤어요

2020/03/09 - [놀고있네/Javascript] - [JS] JavaScript 란

[JS] JavaScript 란

 

이번 게시글에서는 실제 JS(JavaScript)를 어떻게 사용해서, 웹 페이지에 출력하는지 알아볼게요!

 

By 냥장판

 

 

 

1. HTML 문서에서 JavaScript 출력하기

By 냥장판

가장 기본적인 방법은 위에 보이는 그림과 같아요.

HTML 문서에서 JS를 출력하기 위해서

<script> 태그 사이에 JS 코드를 추가하면 됩니다.

 

추가할 수 있는 JS 코드는 아래와 같아요.

 

• window.alert() 메소드
• console.log() 메소드
• document.write() 메소드
• HTML DOM 요소에 innerHTML

 

window.alert() 메소드

HTML에서 가장 간단하게 JS를 출력하는 방법이에요.

브라우저에 알림창을 통해 데이터를 출력하는 방법입니다.

호출할 수 있는 메소드는 아래와 같아요.

• alert()
• confirm()
• prompt()

 

windows 객체에 alert 메소드를 사용하는 방법인데, windows는 생략 가능해요

console.log() 메소드

console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력하는 방법이에요.

개발자모드(키보드 F12)에서 console(콘솔)을 클릭하면 콘솔화면에 데이터가 출력됩니다.

디버깅 시에 유용해요.

 

document.write() 메소드

 

document 객체에 write 메소드를 사용하는 방법이에요.
그런데 document.wirte 메소드는 페이지를 overwrite 하거나, 새로운 페이지로 write 하기 때문에
먼저 로딩된 데이터를 지우고 자기자신을 출력해요.
따라서 HTML문을 초기화할 때 사용하는 게 바람직해요.

 

HTML DOM 요소를 이용한 innerHTML 프로퍼티

 

document 객체에서 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하는 방법이에요.
이를 DOM 요소라고 하고, DOM 요소에 innerHTML 프로퍼티(property)를 사용해서 데이터를 출력하는 방법입니다.
아까 위에서 document.write를 쓸 때 HTML문 초기화에 사용하는 방법을 추천했었는데,
innerHTML 프로퍼티는 HTML문 초기화 이후에 사용하는 걸 추천해요 

 

 

 

 

 

 

 

 

2. 외부에 있는 JavaScript 파일 호출하기

By 냥장판

 

HTML문에서 별도로 작성된 JS 파일을 호출 할 수 있고,
이미지 파일을 호출 하는 것 처럼
script 태그에서 src 속성을 사용해서 호출 할 수 있어요.

 

 

 

 

그럼 이만!