01_개요.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자바스크립트 개요</title>
<!-- 가져다 쓸 외부 .js파일을 script 태그의 src속성으로 연결지어준다(외부방식) -->
<script src="resources/js/sample.js"></script>
</head>
<body>
<!--
* 웹(프론트엔드)의 3요소
- HTML : 웹 문서의 큰 틀 (뼈대)
- CSS : 스타일 (색상, 테두리, 디자인)
- JavaScript : 웹 문서 상의 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리 (동적인 효과)
자바라는 프로그래밍 언어와 무관하다!
-->
<h1>자바스크립트 개요</h1>
<h3>1. 스크립트 언어란?</h3>
<p>
프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해준다. <br>
매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨.
</p>
<hr>
<h3>2. 자바스크립트란?</h3>
<p>
웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어 <br>
- 자바 : 컴파일 방식 => 컴파일 단계를 거치고 나서 실행되는 개념 => 오류 잡기 수월 <br>
- 자바스크립트 : 인터프리터 방식 => 컴파일 단계를 거치지 않고 곧바로 실행되는 개념 <br>
(브라우저에서 html 문서가 로딩될 때 코드를 한 줄씩 읽어내는 방식)
</p>
<!--
자바는 컴파일 + 인터프리터 방식
=> 소스코드를 한 번 다 읽어내고 나서 프로그램이 컴파일 후 실행되므로
=> 코드상의 문법적인 오류가 있으면 바로 빨간줄로 알려줌
인터프리터 방식
=> 실행되면서 소스코드를 한 줄씩 읽어내면서 바로 실행
(실시간으로 텍스트를 분석해서 실행됨)
=> 코드상에 문법적인 문제가 있다면 바로 알려주지 않고 실행시점에서 알려줌
=> 자바에 비해서 오류찾기가 힘들 수 있음
-->
<hr>
<h4>* 장점</h4>
<ul>
<li>요소에 이벤트가 발생했을 때 코드를 한 줄씩 읽어나가면서 수행되기 때문에 수행속도가 빠름</li>
<li>간단한 코드 작성으로 초보자가 접하기 쉬운 언어(단순한 구조, 원칙)
예) 접근제한자의 개념 없음,
메소드 정의 시 반환형 정의 안함,
변수 선언 시 자료형 지정 안 함(타입 추론)
</li>
</ul>
<h4>* 단점</h4>
<ul>
<li>웹에 특화된 기술 => 내부에서 제공되는 기술이 제한적임</li>
<li>HTML 내에 소스코드를 작성하기 때문에 외부에 공개됨(개발자 도구 이용)
=> 보안에 취약점이 있다.
</li>
</ul>
<hr>
<h4>4. 자바스크립트 소스코드 작성 위치에 따른 방법 종류</h4>
<ol>
<li>
inline(인라인) : 이벤트를 부여하고자 하는 요소 내에 소스코드를 작성해서 실행되게 하는 방법
</li>
<li>
internal(내부) : 해당 html 문서 내에 script 태그 영역에 소스코드를 작성해서
실행되게 하는 방법
</li>
<li>
external(외부) : 소스코드들을 별도의 .js파일로 작성해서 script태그를 가져다가 실행되게 하는 방법
</li>
</ol>
<br>
<h4>1) inline(인라인) 방식</h4>
<p>
태그 내에 직접적으로 실행할 간단한 소스코드를 작성해서 실행 시킴 <br>
주로 실행해야 하는 소스코드가 매우 소량일 경우 사용<br>
[표현법] <br>
<태그명 이벤트속성="해당 태그에 해당 이벤트가 발생했을 때 실행할 소스코드">
</p>
<!-- 버튼이 클릭되는 순간(== 클릭 이벤트가 발생하는 순간) 알림창 띄워보기 -->
<button onclick="window.alert('생일축하!!')">알림창 출력</button>
<!-- 버튼이 클릭되는 순간 -->
<button onclick="console.log('콘솔창임니다.')">콘솔창 출력</button>
<!-- 콘솔창(개발자 도구 탭) : 주로 디버깅할 용도-->
<br>
<h4>2) internal(내부) 방식</h4>
<p>
script 태그 영역에 함수단위로 소스코드들을 작성해놓고 <br>
어떤 요소에 어떤 이벤트 발생 시 해당 그 함수를 호출함으로써 실행시키는 방석<br>
=> script 태그는 head, body태그 내에 다 작성 가능
</p>
<!-- 버튼이 클릭되는 순간(==클릭 이벤트가 발생하는 순간) 알림창 띄워보기 -->
<!-- 인라인 방식 + 내부 방식 -->
<button onclick="abc()">알림창 출력</button> <!-- 버튼 클릭할 때 함수 호출 -->
<!-- 순수 내부방식 -->
<!-- 콘솔창 출력하는 버튼 -->
<button id="btn">콘솔창 출력</button>
<script>
// 자바스크립트 소스코드를 기술할 수 있는 영역
/*
여러줄 주석
*/
// 접근제한자 예약어 메소드명(매개변수) --> 자바 메소드의 경우
// 매개변수가 없는 단순한 함수 만들어보기
// abc라는 이름을 가진 함수 정의 (이렇게 이름을 정의한 함수를 선언적 함수라고 한다.)
function abc() {
// 해당 이 함수를 호출 시 실행할 코드를 기술
window.alert('알림창 출력!');
}
// 순수 내부방식으로 이벤트 부여
// 1. 이벤트를 적용시키고자하는 요소(태그)를 가지고 오기
var btn = document.getElementById('btn');
// 2. 선택된 요소의 이벤트 속성에 접근해서 해당 이벤트 발생 시 실행할 함수를 대입
btn.onclick = function(){ // 익명함수 : 이름이 없는 함수, 해당 이벤트 발생 시 실행
// 해당 이 함수를 호출 시 실행할 코드를 기술
console.log("이게 된다고?ㅋㅋ");
abc(); // 함수내부에서 미리 정의된 선언적 함수를 호출 가능
}
</script>
<h4 onclick="window.alert('버튼만클릭하란법은없어.')">3) external(외부) 방식</h4>
<p>
별도의 .js 파일로 소스코드를 작성하고 해당 html문서에 가져다가 실행하는 방법
</p>
<!-- 외부방식 + 인라인 -->
<button onclick="test()">알림창 출력</button>
</body>
</html>
'개발 관련 > JavaScript' 카테고리의 다른 글
| [JavaScript] 변수와 자료형 (0) | 2022.10.04 |
|---|---|
| [JavaScript] 요소 객체 가져오기 (0) | 2022.10.04 |
| [JavaScript] 데이터 입출력 (0) | 2022.10.04 |
| [JavaScript] 스크립트 언어란? (0) | 2022.10.04 |
