[JavaScript] 자바스크립트 개요

JAVASCRIPT

JavaScript 개요

 

• 웹상에서 가장 많이 사용되는 프로그래밍 언어
• 웹 브라우저가 해석하여 동작하는 스크립트 언어

---

JavaScript를 적용하는 3가지 방법

 

• 이벤트에 바로 사용
• <script>내부에 작성
• 다른 파일의 스크립트 가져오기

---

예제

버튼을 누를때마다 현재 시간이 표시되는 스크립트 작성

---

예제1

이벤트에 직접 사용

<div style="margin:20px;" id="print"></div>
<button onclick="document.getElementById('print').innerHTML = Date();">버튼1</button>

---

예제2

같은 html내에 <script>를 작성하여 사용

<div style="margin:20px;" id="print"></div>
<button onclick="getCurrentDate();">버튼 2</button>

  <script>
      function getCurrentDate() {
        document.getElementById("print").innerHTML = Date();
      }
    </script>

 

1. <button>을 클릭할 때  자바스크립트의 getCurrentDate() Function실행
2. getElementById로 html중에 id가 "print"인 영역의 데이터를 현재 시간(Date())로 변경한다.

 

---

예제3

외부의 자바스크립트파일을 가져와서 사용

/web/js/자바스크립트.html

<script src="./script/js01.js"></script>
<button onclick="getCurrentDate2();">버튼 3</button>

/web/js/script/자바스크립트.js

function getCurrentDate2() {
  document.getElementById("print").innerHTML = Date();
}

작동은 예제2번과 같이 동작한다.

---