먼저 폴더 구조를 설명
view 폴더를 만들고 저번과 같이 html 파일 생성
web 아래에 js 폴더를 만들고 다음과 같이 생성한다.
다음과 같은 화면을 구현한다.
다음 화면으로 넘어가는 코드
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>New JS</title> </head> <body> <h1>안녕!</h1> <ol> <li> <a href="views/javaScript01.html">자바스크립트 개요</a> </li> </ol> </body> </html>
javaScript01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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>
<dl>
<dt>자바스크립트 사용법</dt>
<dd>
<ol>
<li>태그에 직접 간단한 소스코드를 작성해서 실행되게 하는 방법(인라인)</li>
<li>script 태그 영역에 작성해서 실행되게 하는 방법</li>
<li>별도의 js 파일로 작성해 가져다 사용하는 방법</li>
</ol>
</dd>
</dl>
<dl>
<dt>단, 소스는 함수 단위로 작성하고 이벤트 속성을 사용해서 구동되게 한다.</dt>
<dd>이벤트 속성은 태그마다 차이가 있음<br>
on이벤트명 = "실행할 함수 명([전달값])"</dd>
</dl>
<hr>
<h2>1. 태그에 직접 자바스크립트 코드를 작성해서 실행하게 되는 경우</h2>
<button onclick="alert('버튼 클릭 확인')">클릭하세요!</button>
<hr>
<h2>2. script 태그 안에 함수 단위로 소스 작성하고,
태그에서 on이벤트명="함수명();"으로 사용하는 경우</h2>
<button onclick="testfn();">함수 실행 확인용 버튼</button>
<script>
function testfn(){
window.alert('testfn()함수 실행됨...');
}
</script>
<br>
<h2>3. 별도로 작성된 자바스크립트 함수 사용 테스트</h2>
<button onclick="samp();">samp() 실행</button>
</body>
</html>
sample.js
/*
* 별도로 작성된 자바 스크립트 샘플
*/
function samp(){
window.alert('samp 함수 실행');
}
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-004.HTML 태그에 접근하는 방법(Id, 태그 명, name) (0) | 2018.11.06 |
|---|---|
| [JS]04-003.주석, document.write(), inner HTML, console.log() (0) | 2018.11.06 |
| [JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행 (0) | 2018.11.05 |
| [JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법 (0) | 2018.10.19 |
| [JS]04-08.for each문, 반복문 한꺼번에 (0) | 2018.10.19 |