웹은 크게 3요소
- html : 웹 문서의 큰 틀을 잡기 위한 요소
- css : html로 구성된 DOM에 다양한 스타일을 적용하기 위한 요소
- javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야 할 기능(동작) 처리하기 위한 요소
자바스크립트 개요
1. 스크립트 언어란 ?
프로그램의 동작을 사용자 요구에 맞게 수행하도록 해주는 용도
빠르게 배울 수 있고 짧은 소스코드로 상호작용 되도록 고안됨
2. 자바스크립트
웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어
=> 인터프리터 방식 : 코드를 한줄씩 읽어가며 바로 실행하는 방식 (실시간으로 텍스트 분석해서 실행됨)
-> 코드에 문법 오류가 있으면 실행 시점에 알 수 있음
3. 장단점
* 장점
컴파일 과정 없이 인터프리터로 코드를 한줄씩 읽어가면서 바로 실행되기 때문에 수행속도가 빠름
코드 작성이 간단해서 초보자에게 접하기 수월하다. (단순한 구조, 원칙/규칙)
ex) 접근제한자 개념 없음, 변수 선언 시 자료형을 정해줄 필요 없음
* 단점
웹에 특화된 기술 -> 내부에서 제공하는 기능이 제한적
html 소스코드 내에 작성하면 외부에 공개됨 -> 보안취약점 발생
4. 자바스크립트 사용법
inline(인라인) : 태그 내에 간단한 소스코드를 작성해서 실행하는 방법
internal(내부) : html 문서 내에 소스코드를 작성해서 실행하는 방법 (script 태그)
external(외부) : 별도의 .js 파일로 소스코드를 작성해서 현재 문서에 연결하여 실행하는 방법
1) 인라인 (inline)
[표현법] 태그명 on이벤트명="해당 요소의 이벤트 발생 시 실행할 코드"
소스코드가 소량일 경우(간단한 경우) 인라인방식으로 사용
-><button onclick='window.alert("Hello, javascript!")'>알림창 출력</button>
<button onclick="console.log('콘솔에 출력할거야!!!!!!')">콘솔에 출력</button>
2) 내부 (internal)
script 태그 영역 안에 소스코드를 작성
-> head 태그, body 태그 내에 모두 작성 가능!
<button id="btn">알림창 출력</button>
<button onclick="btnClick()">콘솔에 출력</button>
<script>
// 자바스크립트 영역 -------------------------
// 한줄 주석
/*
여러줄 주석
*/
// 현재 문서에서 요소를 선택하여 변수에 담아두기
let btn = document.getElementById("btn");
btn.onclick = function() { // 이름이 없는 함수(익명함수)
window.alert("스크립트에서 실행했어요~~");
}
// 함수의 이름을 부여하여 정의
function btnClick() {
console.log("스크립트에서 출력한다~~");
}
</script>
3) 외부 (external)
외부 파일(.js)을 작성하여 현재 문서에 연결
script 태그를 이용하여 연결!
<script src="resources/js/01_sample.js"></script>
<button onclick="test()">알림창 출력</button>
<button id="btn2">콘솔창 출력</button>
'##JavaScript' 카테고리의 다른 글
Math.pow() 제곱 (1) | 2024.10.08 |
---|---|
페이지 이동 : location.href (3) | 2024.09.04 |
요소에 접근하기 (0) | 2024.08.20 |
자바스크립트에서의 데이터 입/출력 (0) | 2024.08.20 |