자바스크립트 (Javascript)란?
JavaScript는 객체 기반의 스크립트 언어
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현
자바스크립트는 주로 웹 브라우저에서 사용하지만, Node js와 같은 프레임워크를 사용하면 서버 프로그래밍에 사용 가능
Javascript 개요
웹 문서를 구성하는 3가지 요소
- HTML : 웹페이지 구조 담당
- CSS : 웹 페이지 디자인 담당
- JS : 웹 페이지 이벤트 담당
- Javascript는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원함
- 웹 브라우저가 Javascript를 HTML과 함께 다운로드해서 실행함
- 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 Javscript Engine이 실행 됨
- 대부분 Javascript Engine은 ECMAScript 표준을 지원함
Javascript 특징
1. 객체 기반의 스크립트 언어
2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 (개발자가 별도의 컴파일 작업을 수행하지 않음)
3. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능
4. 브라우저는 JS를 HTML과 함께 다운로드하고, 브라우저의 JS Engine이 JS를 실행
5. HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
5. ECMAScript 스펙을 준수하는 방식으로 JS 지원
Javascript 로드
inline
- 태그에 직접 JS를 작성
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>script
- <script> </script> 태그 사용
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
외부 파일
- src를 사용하여 외부 JS 파일 지정가능
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="Test.js"></script>
</body>
</html><head>안에 위치하면 브라우저 입/출력 발생 이전에 초기화 되서 브라우저가 먼저 점검함
<body>안에 위치하면 브라우저가 HTML부터 해석해서 사용자가 빠르게 느낌
'Language > Javascript' 카테고리의 다른 글
| Transpiler (0) | 2024.05.31 |
|---|---|
| Javascript 조건문 (0) | 2022.09.01 |
| Javascript 연산자 (0) | 2022.09.01 |
| Javascript 기본 문법 (0) | 2022.09.01 |
자바스크립트 (Javascript)란?
JavaScript는 객체 기반의 스크립트 언어
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현
자바스크립트는 주로 웹 브라우저에서 사용하지만, Node js와 같은 프레임워크를 사용하면 서버 프로그래밍에 사용 가능
Javascript 개요
웹 문서를 구성하는 3가지 요소
- HTML : 웹페이지 구조 담당
- CSS : 웹 페이지 디자인 담당
- JS : 웹 페이지 이벤트 담당
- Javascript는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원함
- 웹 브라우저가 Javascript를 HTML과 함께 다운로드해서 실행함
- 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 Javscript Engine이 실행 됨
- 대부분 Javascript Engine은 ECMAScript 표준을 지원함
Javascript 특징
1. 객체 기반의 스크립트 언어
2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 (개발자가 별도의 컴파일 작업을 수행하지 않음)
3. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능
4. 브라우저는 JS를 HTML과 함께 다운로드하고, 브라우저의 JS Engine이 JS를 실행
5. HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
5. ECMAScript 스펙을 준수하는 방식으로 JS 지원
Javascript 로드
inline
- 태그에 직접 JS를 작성
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>script
- <script> </script> 태그 사용
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript">
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html>
외부 파일
- src를 사용하여 외부 JS 파일 지정가능
<!DOCTYPE html>
<html>
<body>
<input type="button" id="hw" value="Hello world" />
<script type="text/javascript" src="Test.js"></script>
</body>
</html><head>안에 위치하면 브라우저 입/출력 발생 이전에 초기화 되서 브라우저가 먼저 점검함
<body>안에 위치하면 브라우저가 HTML부터 해석해서 사용자가 빠르게 느낌
'Language > Javascript' 카테고리의 다른 글
| Transpiler (0) | 2024.05.31 |
|---|---|
| Javascript 조건문 (0) | 2022.09.01 |
| Javascript 연산자 (0) | 2022.09.01 |
| Javascript 기본 문법 (0) | 2022.09.01 |
