[WEB] HTML / CSS / Javascript 란 ? _ 3편 Javascript

 

1.Javascript란?

 Javascript는 웹 페이지 콘텐츠를 동적으로 생성하고, 멀티미디어 및 애니메이션 동작을 제어하기 위한 스크립트 언어이다. HTML과 CSS만으로 작성된 웹 페이지는 정적으로, 사용자와 상호 작용을하는 콘텐츠를 생성하기 위해서는 Javascript를 이용한 구현이 필요하다.

 

※ 스크립트 언어 : 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어

 

 해당 글을 열람하였을 때, 브라우저 상단에 'Hello, World'라는 팝업창을 볼 수 있었을 것이다.

 

 이처럼, Javascript는 웹 페이지에 동적인 움직임을 표시해주거나, 마우스와 키보드 입/출력에 의한 결과를 보여주고 싶을 때, 로그인이나 회원가입 시 입력된 데이터의 유효성을 검증할 때, AJAX 기술 등을 이용한 웹 서버와의 통신 등 다양한 곳에 사용할 수 있다.

 

 아래는 참조 사이트에서 가져온 미니 게임이다. 1 ~ 100까지의 숫자 중 임의의 숫자를 10회 안에 맞추는 게임으로 사용자 상호 작용을 위한 Javascript가 동적으로 사용되는 예시를 잘 보여주는 것 같아, 별도로 첨부하였다.

 

※ 참조 : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash#example_%E2%80%94_guess_the_number_game

 

---

1부터 100까지의 숫자 중 임의의 숫자 1개가 설정되었습니다. 10회 안에 숫자를 맞추세요.

입력된 숫자가 설정된 숫자보다 높으면, high를 낮으면 low를 표시해줍니다.

Enter a guess:

 

 

 

 

---

 

 이처럼 Javascript는 웹 페이지에서 다양한 역할을 수행할 수 있으며, 이를 지원하는 Javascript Framework 및 library는 다양한 종류가 있다. 대표적으로는 Angular, React, Vue.js, Node.js 등이 있다.

 

2.HTML + CSS + Javascript 이해를 돕는 사이트

※ 참조 1 : https://aws.amazon.com/ko/what-is/javascript/

※ 참조 2 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

 

3.Javascript는 Client에서만 사용될까?

 최근 Javascript는 만능이라고 말할 정도로, 어디든 사용되고 있다. Server에서는 Node.js가 Javascript를 이용해서 서버를 생성할 수 있다.

 

4.Javscript는 <script> 태그에서만 이용할 수 있을까?

 Javascript는 <script> 태그 외에도, 이벤트 핸들러로도 실행 시킬 수 있다.

 

 이벤트 핸들러란, 웹 브라우저(웹 페이지)에서 사용자의 입/출력이나 환경의 변화로 인해 발생하는 이벤트에 대한 동적 처리를 지원한다. 이벤트는 윈도우 팝업, 마우스/키보드의 입/출력, 웹페이지 내에서의 복사, 붙여넣기, 자르기 등 다양한 부분을 의미한다.

 

 다음은 "onpointerout"이라는 이벤트 핸들러를 이용하였으며, 마우스 커서가 해당 콘텐츠를 벗어나는 이벤트가 발생할 시 일어날 동적 행위를 정의하였다.

마우스 커서가 벗어날 시 'Hello, World' 팝업 표시를 정의	동적 행위 발생 확인
<b onpointerout="alert('Hello, World')"> 벗어놔 봐 ! </b>	벗어놔 봐 !

 

5.Javascript는 알겠는데, TypeScript는 무엇인가?

 TypeScript는, 구문에 유형을 추가하여 좀 더 코딩 오류가 발생하지 않으며 조기에 개발자가 알아낼 수 있도록 편의성을 개선한 JavaScript이다.