자바 스크립트를 출력하는 다양한 방법
자바 스크립트는 다른 방식으로 데이터를 "표시"할 수 있습니다 :
innerHTML을 사용하여 HTML 요소에 쓰기
document.write ()를 사용하여 HTML 출력에 쓰기
window.alert ()를 사용하여 경고 상자에 쓰기
console.log ()를 사용하여 브라우저 콘솔에 쓰기
innerHTML 사용하기
HTML 요소에 액세스하기 위해 JavaScript는 document.getElementById (id) 메소드를 사용할 수 있습니다.
id 속성은 HTML 요소를 정의합니다. innerHTML 속성은 HTML 내용을 정의합니다.
경고창 띄우기 - 간단하게 버튼에 적용하기
| <input type="button" onClick="alert('Hey, remember to tell your friends about Quackit.com!');" value="Click Me!"> |
경고창 띄우기 - 더블 클릭하기
| <input type="button" onDblClick="alert('Hey, remember what I said!');" value="Double Click Me!" /> |
|
<!DOCTYPE html> <html> <body>
<h2>경고창 열기</h2>
<p>경고창을 만들어 보세요!</p>
<input type="button" onClick="alert('Hey, remember to tell your friends about Quackit.com!');" value="Click Me!">
<p>더블 클릭해서 경고창을 만들어 보세요!</p>
<input type="button" onDblClick="alert('Hey, remember what I said!');" value="Double Click Me!" />
</body> </html> |
경고창 띄우기 - 외부 링크 활용하기
외부 JavaScript 파일은 일반적으로 문서의 <head> 태그 내에 있습니다. 그러나 이것은 필수는 아닙니다. <script> 요소를 문서의 어느 곳에나 배치 할 수 있습니다. 성능상의 이유로 JavaScript는 종종 <body> 태그 바로 앞에 문서 하단에 배치됩니다. 외부 파일을 호출하기 전에 나머지 페이지를 먼저 로드 할 수 있습니다.
그러나 모든 JavaScript를 문서의 맨 아래에 배치 할 수있는 것은 아닙니다. 페이지의 다른 스크립트에로드시 특정 JavaScript가 필요한 경우 외부 스크립트를 필요한 스크립트 앞에 배치해야합니다.
| <script src="external_javascript.js"></script> |
JavaScript 란?
• JavaScript는 웹에서 유일한 스크립트 언어입니다
• 브라우저 플러그인 또는 확장 프로그램이 자바 스크립트를 실행하는 데 필요하지 않습니다.
C1에서 구조화 된 프로그래밍 구문을 공유합니다.
• "if", "while loops", "switch"등의 구문은 비슷합니다.
• 변수의 데이터 유형은 해당 변수의 값에 의해 동적으로 할당됩니다
• JavaScript의 대부분의 요소는 객체입니다.
웹 문서에 시간 출력하기
| <!DOCTYPE html> <html> <body> <h2>What time is it now?</h2> <button type="button" onclick="document.getElementById('time').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="time"></p> </body> </html> |
'디지털노마드 > Javascript 강좌' 카테고리의 다른 글
| 웹 문서에 글과 숫자 출력하기 - String, Variable, boolean (2) | 2020.08.07 |
|---|---|
| 알림창 띄우기- alert window, prompt, confirm (0) | 2020.08.07 |
| JavaScript 변수(Variables)를 알아보자! (1) | 2020.07.22 |
| 자바스크립트- JavaScript Statements와 Comments (0) | 2020.07.22 |
| Javascript Syntax-자바스크립트 문법을 알아보자! (0) | 2020.07.21 |
