통합 후 삭제 예정

23.03.07 ver

1. 참고 도서 & 자료

• 웹 표준의 정석 http://aladin.kr/p/Fyssu

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석

---

2. 자바스크립트(JavaScript)

본래 웹 사이트에 움직이는 효과를 줄 때 사용하는 언어였다. 그렇기에 필수적이지 않았다. 하지만 지금은 자바스크립트로 서버나 웹에서 작동하는 프로그램을 만드는 등 웹의 모든 부분을 다룰 수 있는 핵심 언어이다.

 

■ 무엇을 할까?

HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓는 것처럼 웹 사이트 UI 부분에 많은 활용한다.

 

Node.js라는 프레임 워크를 사용해 백엔드 개발에서도 사용할 수 있다.

 

■ 작성하기

자바스크립트에서는 영어 대소 문자를 구별하므로 소스를 작성할 때 주의해야 한다.

 

웹 브라우저에는 자바스키립트 소스를 읽고 처리하는 해석기(JavaScript interpreter)가 있다. 따라서 자바스크립트 소스는 웹 문서에서 <script> 태그를 이용해 작성할 수 있다. 또는 자바스크립트만 별도 스크립트 파일로 작성한 후 웹 문서와 연결해서 사용할 수도 있다.

 

▶ 웹 문서 안에 <script> 태그로 자바스크립트 작성하기

자바스크립트 소스 코드가 짧을 경우, 웹 문서에서 <script>와 </script> 태그 사이에 실행할 자바스크립트 소스를 작성한다. <script> 태그는 웹 문서 안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행된다. 또한 <script> 태그는 하나의 문서에서 여러 개 사용할 수도 있다.

 

HTML 문서 안에 자바스크립트 소스를 작성하면 웹 문서에서 바로 확인할 수 있는 장점도 있지만 단점이 더 많다.

1) 우선, 웹 문서가 복잡해 보인다. 그로 인해, 소스를 수정할 때 필요한 코드를 찾아보기가 쉽지 않게 된다.

2) 같은 자바스크립트 소스를 사용하는 경우에 똑같은 소스를 반복해서 삽입해야 한다. 이럴 경우 해당 소스가 포함된 모든 웹 문서를 찾아다니며 수정해야 한다. 그래서 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 선호한다.

 

▶ 외부 스크립트 파일로 연결해서 자바스크립트 작성하기

HTML 문서에서 <script> 태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 된다. 이렇게 하면 HTML 태그와 CSS 만 유지할 수 있어서 소스가 한결 깔끔해진다. 또한 간단히 JS 파일만 수정해도 연결된 모든 HTML 문서에 바로 적용된다.

<script src="외부 스크립트 파일 경로"></script>

 

■ 웹 브라우저에서 스크립트를 해석하는 과정

1. HTML 분석기

2. CSS 분석기

3. 자바스크립트 해석기

---

3. 질문

Q 웹 사이트 UI(user interface)?

• 메뉴, 텍스트, 팝업 창 등 사용자가 사이트를 편리하게 둘러볼 수 있도록 만드는 모든 디자인 요소