정의
HTML이 문서의 구조, CSS가 웹 페이지 디자인을 담당했다면,
JS의 경우 웹 페이지의 이벤트를 담당한다고 할 수 있다.
자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 프로그래밍 언어 중 하나로, 웹 페이지의 동적인 기능 구현을 위해 사용된다.
지난 시간 배웠던 HTML과 CSS와 같이 사용되며 사용자에게 동적인 다양한 기능을 제공하는 것이 주된 목표이다. 자바스크립트의 특징은 다음과 같다.
1. 자바스크립트는 프로토타입 기반의 객체 기반의 스크립트 언어이다.
- 다양한 데이터 타입과 연산자, 함수, 객체 등의 요소 등이 포함된다.
- 인터프리터 : 코드를 컴파일하지 않고 바로 실행 가능 (호이스팅 기능)
2. 자바스크립트는 ECMAScript라는 표준화된 버전으로 관리된다.
- 최신 버전에서는 ES6, ES7, ES8 등의 새로운 기능들이 추가되고 있음.
- 특히 ES6를 전후하여 클래스 기능 추가로 많은 변화가 발생하였음.
3. 다양한 분야에 사용된다.
- 웹 개발을 비롯한 다양한 분야에서 사용되며, 프론트엔드 개발, 백엔드 개발, 모바일 애플리케이션 개발 등 다양한 분야에서 필수적인 언어 중 하나
- 다양한 라이브러리 제공
자바스크립트 시작
스크립트 태그
<script>를 사용한다.
HTML에서의 자바스크립트 사용 방법
- 인라인 스크립트 사용
<script>태그를 사용하여 자바스크립트 코드를 작성하고 선언할 수 있다.<script>태그는 HTML 문서의<head>또는<body>태그 내부에 작성할 수 있으며, 다음과 같은 방법으로 선언할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript 선언</title>
<script type="text/javascript">
function hello(message) {
alert("Hello " + message); <- JS 이벤트
}
hello("JavaScript !!!");
</script>
</head>
<body></body>
</html>- 외부 스크립트 파일 사용
위 코드에서<script>태그의 src 속성을 사용하여 외부 스크립트 파일(myScript.js)을 연결한다. 이때 외부 스크립트 파일은 HTML 문서와 같은 경로에 있어야 한다. 외부 스크립트 파일에 작성된 자바스크립트 코드는 HTML 문서가 로드될 때 실행된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript 선언</title>
<script src="hello.js" type="text/javascript"></script>
</head>
<body></body>
</html>
- 권장
<Script> 태그는 HTML 파일 내부의 <head>나 <body> 안 어느 곳에서나 선언 가능하다.
하지만 <body> 안의 끝 분에 태그를 둘 것을 권장하는데, 이는 CSS Parsor가 인터프리터의 특징을 가지기에 위에서 아래로 코드를 읽어 head가 먼저 실행되기 때문이다.
따라서 head 태그의 구문은 먼저 실행되며, 해당 내부 구문이 전부 실행되고 다운로드 될 때까지 브라우저가 지연된다. (렌더링되지 않는다.)
함수 구분이 적용되거나, 다운로드 되지 않은 부분은 보이지 않는다면 브라우저가 상당히 이상하게 보이거나, 기능이 동작하지 않을 수도 있다.
먼저 렌더링을 시키고 천천히 다운로드 시키는 것이 사용자 측면에서 더 좋을 것이다.
요약 : head 구문에 넣으면 전부 다운로드 받을 때까지 화면 자체가 출력되지 않고 오류 가능성 있음. 일단 먼저 보여주기라도 할 것. (전체적인 다운로드 시간은 차이가 없음)
결론 :
<body>태그 안에 자바스크립트 파일을 위치시켜서 페이지가 제대로 렌더링되고 나서 자바스크립트 파일을 실행하는 것이 권장된다.
기본 문법
주석(commit)
기존 자바와 같이 한 줄 주석 '//' 과 블록 주석 '/* */'을 사용한다.
변수(variable)
자바스크립트는 파이썬과 같이 var 변수명; 의 동적 타입을 지원한다.
동적 타입 : 변수의 타입 지정 없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정된다.
또한, 같은 변수에 여러 타입의 값을 할당할 수 있다.
var x = 10; // x는 숫자 타입
x = "Hello"; // x는 문자열 타입
x = true; // x는 불리언 타입그 외에는 자바와 유사하게 '카멜 표기법'을 사용하고, 변수 이름은 메서드와 혼동되지 않도록 유일한 이름을 사용하도록 한다.
자료형(data type)
JS에서는 자료형을 원시 타입(primitive type)과 객체 타입(object type)으로 분류된다.
primitive type : 숫자, 문자열, boolean, null, undefined
이를 제외한 모든 것은 객체 타입이다.
자바와 유사하나, 기본 데이터 타입이 조금 상이하고 참조 데이터 타입의 객체 생성 부분에서 차이가 있다.(객체 리터럴 사용)
