* 웹의 3요소는 HTML과 CSS, JavaScript이다.
- HTML: 웹 문서의 뼈대를 담당한다.
- CSS: 웹 문서의 스타일(색상, 테두리 등)을 담당한다.
- JavaScript: 웹 문서 상에서 이벤트가 발생했을 때에 실행할 동작들의 처리(동적 효과)를 담당한다.
자바스크립트(JavaScript)란,
: 웹 브라우저에서 가장 많이 사용되며, 인터프리터(interpreter) 방식의 스크립트 언어(scripting language)이다.
- 인터프리터: 프로그래밍 언어의 소스 코드를 컴파일을 거치지 않고 바로 실행하는 프로그램을 뜻한다.
웹 브라우저에서 HTML 문서가 로딩될 때 코드를 한 줄씩 읽어내려간다.
코드에 문법적 문제가 있는 경우에 바로 알려주는 것이 아니라 실행 시에 알려준다.
- 스크립트 언어: 응용 소프트웨어를 제어하는 프로그래밍 언어이다.
프로그램 동작을 사용자의 요구에 맞게 수행하기 위해 사용된다.
자바스크립트의 장단점
1. 장점
1) 수행 속도가 빠르다.
: 요소에 이벤트가 발생했을 때 코드를 한 줄씩 읽어나가면서 수행되므로 수행 속도가 빠르다.
2) 코드 구조와 원칙이 단순하다.
: 구조와 원칙이 단순하여 간단하게 코드를 작성할 수 있어서 초보자들이 접하기 쉽다.
ex) 접근제한자가 없음, 메소드 정의 시 반환형을 정의하지 않아도 됨,
변수 선언 시 자료형을 설정하지 않아도 됨
2. 단점
1) 내부에서 제공되는 기능이 제한적이다.
: 웹에 특화되어 있어서 내부에서 제공되는 기능들이 제한적이다.
2) 보안에 취약하다.
: HTML 문서 내에 소스 코드를 작성하면 외부에 공개가 되므로 보안에 취약하다.
자바스크립트에서 소스 코드 작성 위치에 따른 종류
1. inline(인라인) 방식
: 태그 내에 직접적으로 실행할 소스 코드를 간단하게 작성하여 실행시키는 방식이다.
- inline 방식은 주로 실행할 소스 코드가 적을 때 사용한다.
- 작성법:
태그명 이벤트속성 = "해당 요소에 이벤트가 발생했을 때 실행할 소스코드"
- 예시:
1. <input type="text" id="button" style="color: beige">
2. <button onclick="window.alert('알림창이 출력되었습니다.')">알림창</button>
3. <button onclick="console.log('콘솔창에서 디버깅할 때 사용합니다.')">콘솔창</button>
2. internal(내부) 방식
: <script> 태그 영역에 함수 단위로 소스 코드를 작성해서 한 요소에 이벤트가 발생하면
해당 함수를 호출시켜 실행하는 방식이다.
- <script> 태그는 <head>나 <body> 태그 내에서 작성할 수 있다.
- 작성법:
<body>
<script>
function 함수(){
실행할 소스 코드;
}
</script>
</body>
- 예시:
<head>
<button id="btn">internal button</button>
<script>
function internal(){ // 함수 internal()
window.alert('internal 방식'); // 실행 시 'internal 방식'이라는 알림창이 뜬다.
}
// 이벤트를 적용시킬 요소 객체를 가져와 변수에 담는다.
var btn = document.getElementById("btn");
// button에 담긴 정보: <button id="btn">internal button</button>
btn.onclick = function(){ // 익명함수 function(){}
console.log('internal 방식으로 console 출력');
internal(); // 함수 내부에 정의돼있는 함수는 호출할 수 있다.
}
</script>
</head>
3. external(외부) 방식
: 소스 코드를 별도의 .js 파일로 만들어서 이를 가져와 사용하는 방식이다.
- 작성법:
<!-- 외부 파일.js -->
function 함수(){
실행할 소스 코드;
}
<!-- 해당 html 파일 -->
태그명 이벤트속성="함수();"
- 예시:
<!-- 외부 파일 test.js -->
function test(){
window.alert('외부 파일 test.js가 실행되었습니다.');
}
<!-- 해당 html 파일 -->
<button onclick="test();">외부 파일 실행</button>