[ 스터디 첫번째 ] #01 | 자바스크립트 시작하기

[ 강사 소개 ]

닉네임  :  Rapha0814

E-mail   :  hans7368@gmail.com

GitHub  : github.com/Rapha0814 

참고도서 : Do it! 자바스크립트+제이쿼리 입문

단지 공부의 목적으로 해당 도서 및 자료를 정리해둔 것입니다.

#01 | 자바스크립트 시작하기

[ 자바스크립트란? ]

• 개발자가 만든 문서에 방문자가 동작을 취했을 때, 그 동작에 대응하여 반응이 일어나게 해주는 언어
• 웹 브라우저에서 문서를 볼수 있도록 작성하는 언어는 HTML
• HTML로 작성된 문서에 디자인 서식을 입히고 보기 편하게 레이아웃을 정렬하는 것에는 CSS(스타일)을 사용합니다.
• HTML로 작성한 문서는 클라이언트(방문자)가 동작을 취해도 아무런 반응이 없는데, 이 HTML 문서에 자바스크립트를 적용하면 클라이언트가 특정 요소에서 동작을 취했을 때 반응을 한다.
• ex> GNB^[각주:1]요소에 마우스를 올리면 그에 해당하는 서브 메뉴가 펼쳐지는 것 등.

[ 자바스크립트 언어의 특징 ]

1. 자바스크립트는 인터프린터 언어이다.
• 자바스크립트는 코드가 작성된 순서대로 순차대로 구문 분석을 하는데 코드에 문제가 생기면 에러가 발생한 행 전까지 구문 분석을 하고, 에러가 발생한 다음 줄부터는 구문 분석을 하지 않음
2. 자바스크립트는 클라이언트 스크립트 언어이다.
• 자바스크립트는 서버에서 실행되는 것이 아니라, 사용자 컴퓨터에서 실행된다
• 서버의 부하를 줄일 수 있다.
• But, 클라이언트 스크립트 언어로 처리해야 할 것을 서버 스크립트 언어인 PHP, JSP 등으로 모두 처리 한다면, 서버의 일처리가 가중되어 부하가 걸리게 된다.
3. 객체기반 언어이다.
• 객체를 기반으로 한 언어다.
• 다양한 객체가 존재하며, 그에 해당하는 다양한 메서드(기능)들이 존재한다.
4. 공개된 언어이다.
• 웹 문서에 완성된 자바스크립트는 외부로 분리할 수는 있으나, 완벽히 숨길수는 없다. 그래서 이미 개발된 코드를 복붙할 수가 있다.
5. 다양한 라이브러리 활용이 가능하다.
•  제이쿼리, 제이쿼리 모바일, 센차터치, NODE JS 등
• 라이브러리란 자바스크립트를 이용하여 다양한 기능들을 쉽게 구현할 수 있도록 한 함수들의 집합이다.

[ WHY 자바스크립트? ]

1. 서버의 부하를 줄일 수 있다.
•  클라이언트 스크립트 언어이기 때문에.
2. 정적인 사이트를 동적인 사이트로 만들 수 있다.
•  HTML과 CSS를 사용해 만든 사이트에 동적인 움직임을 불어넣기 위해서는 자바스크립트를 적용해야 한다.
3. 인터렉티브한 사이트를 만들 수 있다.
• 버튼을 눌렀을 때 반응하도록 만들기 위해서
4. 다양한 라이브러리 언어 활용 가능.
• 다양한 라이브러리를 인터넷에서 검색해 다운받을 수 있으며, 이를 사용하면 그만큼 인력과 시간이 절약된다.
5. HTML5 API의 기반 언어.
• API(Application Programming Interface)란 소프트웨어를 제어할 수 있는 프로그래밍 명령어
• API를 사용하면 웹에서는 불가능했던 기능들을 구현할 수 있는데, 위치 정보 제공기능이나 채팅 기능, drag & drop 기능 등이 있다.

[ 자바스크립트 선수과정 ]

 

HTML

• HTML은 웹에서 기본 문서를 작성할 때 필요한 언어이다.

CSS

• CSS(Cascading Style Sheets)는 HTML을 사용한 기본 문서에 서식이나 배경, 레이아웃을 정렬하는 작업이다.
• CSS를 HTML의 내부에 작성하려면 CSS 선언문이 반드시 필요하다. 선언문이 없으면 브라우저는 CSS를 HTML 언어로 인식하게 된다.

CSS 선언문의 기본형

<style type="text/css"> 선택자{속성:값} </style>

• 외부 스타일 연동방식으로는 HTML 요소인 <link>태그를 이용하는 방법과, CSS 선언문 내에서 외부 CSS가 함께 포함되도록 불러오는 import 방식이 있다.

link 방식

<link rel="stylesheet" type="text/css" href="경로" media="all"/>

import 방식

<style type="text/css"> @import:url("경로"); </style>

1. (Global Navigation Bar) 웹사이트를 방문한 사용자의 이동 경로를, 하이퍼링크 형태로 모아서 보여주는 내비게이션 시스템. 웹사이트에서 항상 표시되어있는 메뉴. 바, 탭, 드롭다운 메뉴 등의 형태로 제공되며, 메인 메뉴라고 불리기도 한다. [본문으로]