JavaScript의 개요에 대해 알아보자
JavaScript
👉🏻 원래 이름은 mocha
👉🏻 개발 시기에 Java가 흥행하면서 JavaScript로 이름을 변경함
(사실 Java랑은 딴판임! 원래라면 브랜드 네임 소송 어쩌고 난리나야 하지만 얘도 출시 후 유명해지면서 서로 윈윈하는 듯함)
👉🏻 프로그래밍 언어가 아닌 스크립트 언어(이미 만들어진 프로그램에 추가 기능 덧붙임)
웹의 3요소
👉🏻 HTML: 웹 문서의 큰 틀(뼈대)
👉🏻 CSS: 스타일(색상, 테두리, 디자인 등)
👉🏻 JavaScript: 웹 문서상에 이벤트가 발생했을 때 실행해야 할 동작들을 처리(동적인 효과)
(+) jQuery는 자바 스크립트의 문법을 간략하게 쓸 수 있게끔 해 주는 일종의 라이브러리
스크립트 언어
👉🏻 이미 만들어진 프로그램의 동작을 사용자의 요구에 맞게 수행하도록 해 주는 용도의 언어
매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안됨
자바스크립트란?
👉🏻 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터" 형식의 스크립트 언어
- 자바: "컴파일" 형식의 언어 => 컴파일(컴퓨터가 실행시킬 수 있는 언어인 기계어로 변환하는 과정)을 거치고 나서 실행됨
- 자바스크립트: "인터프리터" 형식의 언어 => 컴파일을 거치지 않고 곧바로 실행됨
(브라우저에 html 문서가 로딩될 때 코드를 위에서부터 한 줄씩 읽어내자마자 실행하는 방식)
'자바는 컴파일 방식 + 인터프리터 방식이지 않나?' 라는 의견도 있음
=> 컴파일 과정 (소스코드를 한 번쯤 다 읽고 나서)을 거치고 위에서부터 순차적으로 실행되기 때문에
실행 과정: .java - .class - 실행 - 인터프리터 방식처럼 위에서부터 실행
* 컴파일 방식: 컴파일 과정에서 코드상의 문법적인 오류가 있다면 바로 빨간 밑줄로 알려 줌
* 인터프리터 방식: 한 줄씩 읽는 시점에서 실행되기 때문에 실시간으로 코드 텍스트를 분석해서 실행됨
즉, 코드상에 문법적인 문제가 있다면 해당 문제가 있는 실행 시점에 오류를 알려 줌
자바에 비해 오류 찾기가 매우 힘듦 (오타 주의!)
자바스크립트의 장단점
✔️ 장점
👉🏻 요소에 이벤트가 발생했을 때 코드를 한 줄씩 읽어 나가면서 수행되기 때문에 수행 속도가 빠름
👉🏻 간단한 코드 작성으로 초보자가 접하기 쉬운 언어 (단순한 구조, 단순한 원칙)
예) 접근제한자의 개념 없음, 메소드 정의 시 반환형 정의를 안 함, 변수 선언 시 자료형을 지정할 필요가 없음 (타입 추론)
✔️ 단점
👉🏻 웹에 특화된 기술 => 내부에서 제공되는 기능이 제한적임
👉🏻 HTML 내에 소스코드를 작성하게 되면 외부에 공개됨 (개발자 도구) => 보안에 취약점이 있음
자바스크립트 소스코드 작성 위치에 따른 종류
👉🏻 inline(인라인): 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
👉🏻 internal(내부): 해당 html 문서 내에 script 태그 영역에
소스코드를 작성해서 실행되게 하는 방법
👉🏻external(외부): 소스코드들을 별도의 .js 파일로 작성해서
가져다가 실행되게 하는 방법
1) inline(인라인) 방식
👉🏻 태그 내에 직접적으로 실행할 간단한 소스코드를 작성해서 실행시킴
👉🏻 주로 실행해야 하는 소스코드가 매우 소량일 경우 사용
[ 표현법 ]
<태그명 이벤트속성명="해당요소에해당이벤트가발생했을때실행할소스코드"> </태그명>
<버튼이 클릭되는 순간 (클릭이벤트) 알림창 띄워 보기>
<button onclick="window.alert('버튼 클릭!');">알림창 출력</button>
<버튼이 클릭되는 순간 (클릭이벤트) 콘솔창 띄워 보기>
👉🏻 콘솔창 (개발자 도구탭)에 출력하는 용도의 함수: window.console.log()
보통 개발자가 디버깅할 용도로 많이 쓰임
<button onclick="window.console.log('콘솔 출력');">콘솔창 출력</button>
2) internal (내부) 방식
👉🏻 이 html 문서 내부의 script 태그 영역에 "함수" 단위로 소스코드들을 작성해두고
어떤 요소에 어떤 이벤트 발생 시 해당 그 함수를 호출함으로써 실행시키는 방식
👉🏻 script 태그는 head, body 태그 내에 다 작성 가능
<순수 내부 방식으로 버튼 클릭 시 콘솔창 출력해 보기>
👉🏻 이벤트를 적용시키고자 하는 요소 객체를 소스코드상으로 끌고 온 뒤
선택된 요소의 이벤트 속성에 접근하면 됨!
👉🏻 function은 자바로 따지면 메소드!
👉🏻 버튼 태그 자체를 자바스크립트 코드상으로 아예 끌고 간 꼴
<button id="btn">콘솔창 출력</button>
<script>
// 자바 스크립트 소스코드를 기술할 수 있는 script 태그 영역
/*
여러 줄 주석
=> 주석은 자바와 동일함
*/
// 매개변수가 없는 단순한 함수 만들어 보기
// abc라는 이름의 함수를 정의 (이렇게 이름을 정의한 함수를 선언적 함수라고 함)
function abc() {
window.console.log("콘솔창 출력!");
}
// 이벤트를 적용시키고자 하는 요소 객체를 소스코드상으로 끌고 오기
// 자바스크립트에서는 자료형뿐 아니라 변수에 button, p, pre, div, ... 같은 요소를 담을 수 있음
// 이런 요소 자체를 "요소 객체"라고 부름
// var 변수명 = document.getElementBy속성("속성값");
var btn = document.getElementById("btn");
// 선택된 요소의 이벤트 속성에 접근해서
btn.onclick = function() { // 익명 함수(이름이 없는 함수, 이벤트 발생 시 호출)
// window.console.log("콘솔창 출력!!");
// 혹은
abc(); // 함수 내부에서 미리 정의된 선언적 함수 호출 가능
}
</script>
<인라인방식 + 내부방식으로 버튼 클릭 시 콘솔창 출력해 보기>
👉🏻 이벤트를 적용시키고자 하는 요소 객체를 소스코드상으로 끌고 온 뒤
선택된 요소의 이벤트 속성에 접근하면 됨!
👉🏻 해당 버튼이 클릭될 때 내가 직접적으로 만든 선언적 함수를 호출한 꼴
<button onclick="abc();">혼합방식</button>
<script>
// 자바 스크립트 소스코드를 기술할 수 있는 script 태그 영역
/*
여러 줄 주석
=> 주석은 자바와 동일함
*/
// 매개변수가 없는 단순한 함수 만들어 보기
// abc라는 이름의 함수를 정의 (이렇게 이름을 정의한 함수를 선언적 함수라고 함)
function abc() {
window.console.log("콘솔창 출력!");
}
</script>
3) external (외부) 방식
👉🏻 별도의 .js 파일로 소스코드를 작성하고 해당 html에 가져다가 쓰는 방법
<resources/js/sample.js>
function test() {
window.alert("외부 방식으로 실행됨!");
}
<01_자바스크립트개요>
<head>
<script src="resources/js/sample.js" rel="javascript"></script>
<!-- 내가 가져다 쓸 외부 .js 파일을 script 태그의 src 속성으로 연결시킴 -->
</head>
<body>
<button onclick="test()">알림창 출력</button>
</body>
👉🏻 개발자도구에서 코드를 확인할 수 없으므로 보안성 좋아짐!
💡 참고
클릭 속성은 버튼에만 쓸 수 있는 게 아님! 어디에서든 쓸 수 있음!
<h4 onclick="window.alert('h4 태그 클릭됨!')">3) external (외부) 방식</h4>
<!-- 참고도 버튼 이외의 다른 요소에도 클릭 이벤트가 적용 가능하다 -->