Logo
# Newsfeed
Image
로그인 | 회원가입
Image
Image

4. Javascript 기초학습

4.Javascript 언어의 이해

자바스크립트 언어가 다양한 개발 분야에서 사용되지만 이번 과정에서는 가장 많은 웹 개발 분야에서 사용되고 있는 웹 프론트엔드 분야에서의 자바스크립트 언어 사용에 대해 포커스를 맞춰 강의를 진행합니다.


1)프론트엔드 자바스크립트 언어의 역할
프론트엔드 웹 개발은 기본적으로 HTML,CSS,Javascript 코드가 웹브라우저 기반에서 작동되는 환경을 말합니다.

프론트엔드 웹 개발에서의 Javascript언의 역할을 정의해봅니다.
-HTML 태그 조작
-CSS 제어
-데이터 호출 및 제어
-각종 UI 프로세스 제어 및 사용자 입력 데이터 유효성 검증
-웹 브라우저 기반 작동되는 UI요소 제어 및 관련 기능 구현 


2)자바스크립트 기능정의 

HTML문서 하단에 다음과 같이 스크립트 태그를 이용해 스크립트 블록을 정의하고 관련 기능을 정의합니다.

<html>
<body>
HTML 컨텐츠 영역
<script type="text/javascript"> 
    document.write("홈페이지 방문을 환영합니다."); 
</script>
</body>
</html>


HTML언어는 인터프리팅 언어로 브라우저 엔진에 의해 HTML문서의 상단에서 하단으로 순차적으로 코드를 해석하고 컴파일하면서 코드를 실행시키는 특성이 있기에 되도록 스크립트 태그는 HTML문서 하단 </BODY> 닫는 바디태그 상단에 정의 하도록 합니다.
자바스크립트의 주요기능이 특정 HTML요소를 제어해야하기에 해당 HTML 요소가 렌더링되어 있지 않은 상황에서 해당 요소를 제어하는 경우 에러가 날수 있는 상황이 연출되기에 모든 HTML,CSS 리소스가 웹브라우저 DOM(Document Object Model)으로 렌더링 된 후 자바스크립트 언어를 이용해 해당 요소들을 제어하면 예기치 못한 에러 발생을 최소화 할 수 있습니다.


3)자바스크립트 파일 생성 및 참조

자바스크립트 코드는 해당 기능을 사용하는 HTML 문서 내에 직접정의할수도 있지만 파일확장자가 ~.js 형태로 별도의 파일형식으로 저장하고 저장된 자바스크립트 파일을 HTML문서에서 참조하여 사용할수도 있습니다.

<html>
<body>
HTML 컨텐츠 영역

<script type="text/javascript" src=”./sample.js”></script>
</body>
</html>


-sample.js파일을 만들고 파일안에 아래 코드 내용을 입력후 저장합니다. 
document.write(“홈페이지 방문을 환영합니다.”);
-sample.js 파일의 저장경로는 현재 해당 .js파일을 참조하는 html문서와 동일한 경로상에 존재해야합니다.

4) 자바스크립트 파일 참조하기

-자바스크립트 코드를 별도의 독립된 파일형태로 저장할수 있다고 했는데요. 
여러분이 만든 자바스크립트 파일의 위치를 위와같이 HTML 파일과 동일한 물리적 컴퓨터상에 두고 참조할수도 있지만 인터넷상에 관련 파일을 두고 참조할수도 있습니다.
이렇게 자바스크립트 파일을 인터넷의 특정공간에 저장하고 인터넷망을 통해 외부참조하는 방식을 CDN(Contents Delivery Network) 참조방식이라고 합니다.

직접 참조방식

<html>
<body>
HTML 컨텐츠 영역

<script type="text/javascript" src=”./sample.js”></script>
</body>
</html>


CDN참조방식

<html>
<body>
HTML 컨텐츠 영역

<script type="text/javascript" src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
</body>
</html>


5) Javascript Library & Plugin

가) Javascript Library

ㄴ자바스크립트 언어로 개발된 재활용 가능한 기능의 집합체(프로그램덩어리)
ㄴ각종 개발분야에서 자주 사용되는 기능을 미리 구현 쉽게 재활용 가능하게 해 개발의 생산성과 효율성을 제공하는것을 목표로한다.
ㄴ인라인코드>코드파일> 라이브러리>프레임워크> 플랫폼
ㄴ인라인코드,~.js,Jquery.js, Bootstrap.js, Vue.js Angular.js,React.js,Node.js

나)Plugin

ㄴ외부에서 제공하는 각종 오픈소스 라이브러리를 쉽게 본인의 개발 소스에 쉽고 빠르게 추가하여 개발할 수 있는 각종 라이브러리 파일들 
ㄴ플러그인 라이브러리를 로컬로 가져와 직접 개발소스에 포함시켜 참조하거나 외부저장소에 있는 플러그인들을 인터넷을 통해 참조(CDN)하는 방식 두가지 제공

다)Frontend Development Frameworks
ㄴ웹 프론트엔드 기반 어플리케이션 개발에 최적화된 개발 프레임워크 라이브러리
ㄴReact,Vue,Angular등의 웹프론트엔드 개발 프레임워크는 주로 MVVM UI 설계 패턴 기반의 데이터 바인딩 기술을  기반으로
    UI요소와 데이터 소스간 변경관리를 자동화하여 UI와 데이터 제어를 위한 개발자 코딩량을 줄여줌으로써 개발 생산성 효과를 제공한다.
ㄴ React.js , Vue.js , Angular.js


라이브러리 직접 참조방식

<html>
<body>
HTML 컨텐츠 영역
<script type="text/javascript" src=”/script/jquery.min.js”></script>
</body>
</html>


라이브러리  CDN참조방식

<html>
<body>
HTML 컨텐츠 영역
<script type="text/javascript" src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
</body>
</html>


6)주요 자바스크립트 코딩 주의사항

-자바스크립트는 대소문자를 구분한다
ㄴ초보 웹 개발자의 대부분 스크립트 오류의 원인은 대소문자 구분 안해서 발생합니다.

-코드 줄을 잘 맞추세요.
ㄴ줄 맞춤 코딩은 코드 가독성을 향상시킨다.
ㄴ에러 발생시 문제 원인을 쉽게 파악할수 있다.
ㄴTab키를 잘 활용하세요.

-; 세미콜론으로 문장을 구분해요
ㄴ코딩 문장이 끝나면 반드시 ; 로 마침표시 해주세요.

-스크립트 주석을 적극 활용하세요.
ㄴ인라인 주석 : //   
ㄴ구간주석 :   /*    */


Image

댓글목록

Image
This Is rising
Image
21 °C Mostly Cloudy
  • London, UK
  • Image13%
  • Image6.44 MPH
  • Image
    23° Sun, 3 Jan
  • Image
    26° Sun, 3 Jan
Image
Weekly Toplist
Image