<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 개요</title>
<script src="resources/js/01.jscript.js" rel="javascript"></script>
</head>
<body>
<!--
*웹은 크게 3요소
- html : 웹 문서의 큰 틀 (뼈대)
- CSS : 스타일 (색상, 디자인, 간격, 배치 등등)
- javascript : 웹 문서에서 이벤트가 발생했을때 실행해야되는 동작들 처리
-->
<h1>자바스크립트 개요</h1>
<h3>1. 스크립트 언어란? </h3>
<p>
프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도<br>
매우 빠르게 배우고 짧은 소스코드로 상호작용되도록 고안됨
</p>
<hr>
<h3>2. 자바스크립트</h3>
<p>
웹 브라우저에서 많이 사용되는 "인터프리터 방식"의 스크립트 언어<br>
- 인터프리터 방식 : 코드를 한줄씩 한줄씩 읽어가며 바로 실행하는 방식<br>
(실시간으로 텍스트 분석해서 실행됨) => 코드에 문법오류가 있으면 실행 시점에서 알려줌
</p>
<hr>
<h3>3. 장단점</h3>
<h4>* 장점</h4>
<ul>
<li>컴파일 과정 없이 인터프리터로 코드를 한줄씩 읽어 가며 바로 실행되기 때문에 "수행속도가 빠름"</li>
<li>코드 작성이 간단해서 초보자가 접하기 쉽다. (단순한 구조, 원칙)<br>
ex) 접근제한자의 개념 없음, 변수 선언시 자료형 정해 둘 필요없음
</li>
</ul>
<h4>* 단점</h4>
<ul>
<li>웹에 특화된 기술임=>내부에서 제공되는 기능이 제한적</li>
<li>html소스코드에서 같이 작성하면 외부에 공개됨 => 보안의 취약점 발생</li>
</ul>
<h3>4. 자바스크립트 사용 방법</h3>
<ol>
<li>inline(인라인) : 태그 내에 간단한 소스코드를 작성하여 실행되게 하는 방법</li>
<li>internal(내부) : html 문서내에 소스코드를 작성하여 실행되게 하는 방법</li>
<li>external(외부) : 별도의 .js파일로 소스코드를 작성하여 가져다가 실행되게 하는 방법</li>
</ol>
<h4>1) inline 방식</h4>
<p>
태그 내에 간단한 소스코드를 작성하여 실행되게 하는 방법<br><br>
[표현법]<br>
<태그 on이벤트명 = "해당 요소에 이벤트 발생시 실행할 소스코드" >
</p>
<!-- 소스코드가 소량일 경우 사용 -->
<button onclick="window.alert('알림창출력 버튼 클릭!!!');">알림창 출력</button>
<button onclick="console.log('콘솔출력 버튼 클릭!!!');">콘솔창 출력</button><br><br>
<h4>2) internal 방식</h4>
<p>
html 문서내에 소스코드를 작성하여 실행되게 하는 방법<br>
script 태그는 head태그나 body태그 어디든 다 작성가능<br><br>
[표현법]<br>
<script>
소스코드
</script>
</p>
<button id="btn">알림창 출력</button>
<button onclick="btnClick()">콘솔창 출력</button><br><br>
<script>
// 자바스크립트 영역 주석
// 이벤트를 부여하고자 하는 요소를 선택하여 변수에 담아두기
var btn = document.getElementById("btn"); // 버튼요소객체가 담겨있는 변수
console.log(btn);
// 해당 버튼요소에 클릭이벤트 발생시 실행할 함수(이벤트 핸들러) 정의
btn.onclick = function() {
window.alert("내부 스크립트에서 버튼 클릭!!!");
}
function btnClick() {
console.log("내부 스크립에서 콘솔버튼 클릭!!!")
}
</script>
<h4>3) external 방식</h4>
<p>
별도의 .js파일로 소스코드를 작성하여 가져다가 실행되게 하는 방법<br><br>
</p>
<button onclick="test();">알림창 출력</button>
</body>
</html>