자바 스크립트 작성 방법
소스는 함수 단위로 작성하고, 이벤트 속성을 사용해서 구동되게 한다.
on이벤트명 = "실행할 함수명([전달값])"
#_ inline 방식
태그에 직접 간단한 소스코드를 작성해서 실행한다.
<button onclick="window.alert('버튼 클릭 확인');>경고장 출력!</button>
<button onclick="console.log('버튼 클릭 확인');>console 출력!</button>
<h4 onmouseover="this.style.backgroundColor='red'">마우스오버</h4>
#_ internal 방식
script 태그 영역에 작성해서 실행되게 하는 방법(head, body 태그에 작성도 가능하다.)
<button onclick="testfn();">함수 실행 확인용 버튼</button>
<script type="text/javascript">
// 자바 스크립트에서 함수 작성 시 함수명 앞에 반환 자료형(return type) 붙이지 않음
// -> 자바 스크립트는 자료형이 없음.
function testfn(){
alert('testfn() 함수 실행 확인');
// 원래는 window.alert 형태로 작성해야하지만 이렇게 줄여서도 사용이 가능하다.
}
</script>
#_ external 방식
별도의 js파일로 작성해서 가져다 사용하는 방법
<button onclick="samp();">samp() 실행</button>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01. 자바스크립트 개요</title>
<!-- script 태그의 type 속성 기본 값은 "text/javascript" -->
<!-- 따라서 사실 아래의 구문은 작성하지 않아도 문제가 되지 않는다. -->
<script src="js\sample.js"></script>
</head>
<body>
<h1>자바 스크립트 개요</h1>
<dl>
<dt>스크립트 언어란?</dt>
<dd>
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용됨<br>
매우 빠르게 배우고 짧은 소스코드 파일로 상호작용 하도록 고안되었다.
</dd>
</dl>
<dl>
<dt>자바스크립트</dt>
<dd>
웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어이다.<br>
ECMA 스크립트 표준을 따르는 대표적인 웹 기술이다.
</dd>
</dl>
<h2>자바스크립트 작성 방법</h2>
<pre>
소스는 함수 단위로 작성하고, 이벤트 속성을 사용해서 구동되게 함
이벤트 속성은 태그마다 차이가 있음
on이벤트명="실행할 함수명([전달값])"
</pre>
<h3>inline 방식</h3>
<p>태그에 직접 간단한 소스코드를 작성해서 실행되게 하는 방법</p>
<button onclick="window.alert('버튼 클릭 확인');">경고창 출력!</button>
<button onclick="console.log('버튼 클릭 확인');">console 출력!</button>
<h4 onmouseover="this.style.backgroundColor='red'">마우스오버</h4>
<h3>internal 방식</h3>
<p>script 태그 영역에 작성해서 실행되게 하는 방법<br>
head 태그, body 태그에 작성 가능
</p>
<button onclick="testfn();">함수 실행 확인용 버튼</button>
<script type="text/javascript">
// 자바 스크립트 주석은 자바와 동일함
// 자바 스크립트에서 함수 작성 시 함수명 앞에 반환 자료형(return type) 붙이지 않음
// -> 자바 스크립트는 자료형이 없음. 추후에 다시 배울 예정
function testfn(){
alert('testfn() 함수 실행 확인');
// 원래는 window.alert 형태로 작성해야하지만 많이쓰이니까 이렇게 줄여서도 사용이 가능하다.
}
</script>
<h3>external 방식</h3>
<p>별도의 js 파일로 작성해서 가져다 사용하는 방법</p>
<button onclick="samp();">samp() 실행</button>
</body>
</html>'KH 정보교육원 > JavaScript' 카테고리의 다른 글
| 3. 간이 계산기 만들기 - 문제 (0) | 2020.05.11 |
|---|---|
| 2. 자바스크립트를 이용한 자동 테이블 만들기 + 카운트 숫자 붙이기 - 문제 (0) | 2020.05.11 |
| 1. 자바스크립트를 이용한 자동 테이블 만들기 - 문제 (0) | 2020.05.11 |
| Java Script 03 (0) | 2020.05.11 |
| Java Script 02 (0) | 2020.05.11 |