🍁JavaScript
Front-end
1. HTML
HTML에서 골격을 인라인 태그로 만들고, 내용물을 인라인 태그와 텍스트로 만든다.
2. CSS
CSS에서는 서식을 만든다.
3. JavaScript
JavaScript에서는 프로그래밍 기능을 만든다.
JavaScript는 브라우저에서 동작하는 프로그래밍 언어이다.
Netscape에서 자사 브라우저에 동작하는 프로그래밍 언어를 만들 목적으로 JavaScript를 만들게 되었다.
C 계열 언어이기 때문에 기본 구문은 자바와 유사하지만, 문법은 Java와 전혀 무관하다.
JavaScript의 원래 이름은 LiveScript였는데, 점유율을 높이기 위해서 Java의 이름을 빌려 쓰기로 협약을 하고 JavaScript라는 이름이 되었다.
JavaScript의 역사
초반 (19990년대)
가장 초창기의 JavaScript 모델을 BOM(Browser Object Model)이라고 부른다.
당시에는 폼태그 유효성 검사, 링크 조작, 이미지 조작 등의 심플한 용도로 사용되었다.
중반 (~2014년)
그런데 시간이 갈수록 사이트가 다양해지고 구현해야 하는 게 많아졌다.
모든 태그를 조작할 수 있는 게 필요했고, DOM(Document Object Model)이 출시되었다.
JavaScript를 배운다는 건, DOM을 배운다는 말과 같다.
후반 (2014년~)
JavaScript 버전 중에 ES6(ECMA2015)가 있다.
ECMAScript 1.0~(에크마 스크립트)가 표준으로 등록이 되었다.
ES6은 기존의 JavaScript 기능을 뜯어고치고 새로운 기능을 많이 탑재한 버전이다. 그래서 ES6 전 버전이냐, 후 버전(Modern JavaScript)이냐로 구분하는 경우가 많다.
ES6 이후에 Node.js(구글 크롬 V8 엔진)가 출시되었다. 그렇게 문법 환경과 실행 환경이 최적화되고 빨라지면서 JavaScript가 활성화되었다.
Node.js는 비 브라우저 환경에서 JavaScript를 동작할 수 있게 하는 기술이다. JavaScript는 클라이언트 언어인데, Node.js 덕분에 서버를 구축하고, 프로그램을 제작할 수 있게 되었다.
대형 프로젝트에서 Spring을 사용하지만, 규모가 작은 프로젝트에서는 Node.js를 사용하는 경우도 있다.
JavaScript가 하는 일
이처럼 JavaScript가 하는 일은 코어 파트, BOM과 DOM, 서버 및 응용프로그램 제작으로 나뉜다.
1. 기본적인 프로그래밍 언어로서의 행동
변수 생성, 연산자 제어, 제어문 제어 등의 조작, 가공 등의 행동을 한다.
이를 JavaScript Core 파트라고 부른다.
2. 브라우저에만 할 수 있는 행동 (BOM, DOM)
- HTML Element 생성
- HTML Element 수정
- HTML Element 삭제
- HTML Attribute 생성/수정/삭제
- HTML PCDATA 생성/수정/삭제
- CSS 속성(값) 생성/수정/삭제
- 폼 태그 조작(유효성 검사)
- 이미지 조작
- 링크 조작
- 기타 객체 조작
JavaScript는 브라우저에서 실행하기 위한 언어이기 때문에 JavaScript에서만 할 수 있는 행동이 있다.
이때 크게 BOM, DOM이 있으며, HTML/CSS를 동작하는 행동을 한다.
3. 서버 제작, 응용 프로그램 제작
Node.js로 ECMAScript 모듈을 사용한다.
4. 확장 라이브러리
jQuery는 요소 선택, 조작, 이벤트 처리, 애니메이션, AJAX 기능 등의 처리를 돕는다.
5. JavaScript Framework
- Angular
- React
- Vue.js
🍁HTML과 JavaScript 연결
1. 이벤트 핸들러 (Event Handler)
모든(대부분) 태그에 onXXX 속성을 제공한다.
태그에 직접 기재하여 CSS에서는 인라인 방식이라고 부르지만, JavaScript에서는 이벤트 핸들러 혹은 이벤트라고 부른다.
2. 임베디드 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS 영역 */
</style>
<script>
// JavaScript 영역
alert('안녕');
</script>
</head>
<body>
</body>
</html>
임베디드 방식은 <script> 태그를 사용한다.
<style> 태그는 아무데나 있어도 되는데, HTML과 섞이면 코드가 헷갈리므로 <head> 태그 안에 넣었던 것이었다.
자바스크립트도 마찬가지로 <script> 태그를 아무 데나 작성할 수 있으며, 여러 개를 사용할 수도 있다.
<script> 태그의 위치에 따라서 기능이 서로 다르다.
Uncaught TypeError: Cannot set properties of undefined (setting 'value') at ex03.html:8:40
<body>
<input type="text" name="txt1" size="50">
<script>
window.document.all.txt1.value = new Date();
</script>
</body>
<body> 태그 내에 넣은 script에서는 현재 시간이 잘 출력된다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.document.all.txt1.value = new Date();
</script>
</head>
그런데 이를 <head> 태그로 위치를 바꾸자 에러가 발생한다.
자바스크립트의 에러는 관리자 도구에서 확인할 수 있다.
자바스크립트 구문의 실행 순서
동기(문장 순서대로 실행)
위에서 아래로 실행된다.
연산자 우선순위에 따라 실행된다.
에러가 발생하는 이유는 자바스크립트의 실행 순서 때문이다.
위에서부터 아래로 실행하는데, 위에서 txt1을 찾으면 아직 txt1이 생성되기 전이기 때문에 에러가 발생하는 것이다.
이는 선언(생성)을 하기도 전에 호출하려는 것과 같다.
3. 외부 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="exaple.js"></script>
</head>
<body>
</body>
</html>외부 방식으로는 *.js 파일을 사용한다
참조할 때에도 <script> 태그를 사용한다.
🍁자바스크립트 디버깅
- alert(값)
- console.log(값)
값을 확인할 때, 값을 출력하여 확인하는 경우가 많다.
그런데 일반적으로 개발을 할 때 텍스트 박스를 만들어서 출력하기는 번거롭다.
이때 alert 함수 또는 console.log 함수를 사용할 수 있다.
alert 함수 사용
alert는 원래 사용자에게 메시지를 전달할 때 사용하지만, 이때 alert(값)라는 함수를 많이 사용한다.
console.log 함수 사용
console.log(new Date());
정석적인 방법은 console.log(값)을 사용하며, 개발자 도구에서 출력값을 확인한다.
