자바스크립트 개념 / 기본구성 자바스크립트 강좌 1강
※What? 자바스크립트?
솔직히 자바스크립트 강좌를 검색해서 이 포스팅을 보고 계신 분이라면..
자바스크립트가 무엇인지 굳이 설명이 필요없을 듯 합니다.
왜냐하면 대부분은 자바스크립트의 개념에 대해 알고 있고, 개발하던 중에 막히는 부분이 있어서 검색을 한 경우가 많기 때문이죠.
하지만 새롭게 프로그래밍을 공부하고 싶은 분들을 위해 간단하게 개념에 대한 이야기를 할까 합니다. 우리는 웹페이지를 웹문서라고 부릅니다. 보통 문서는 정적이죠.
신문이나 잡지를 보는것처럼 말이에요.
우리가 스스로 페이지를 넘기면서 콘텐츠를 살펴봅니다.
그런데 웹문서는 다릅니다.
웹문서는 사용자가 어떠한 명령.. 즉 오퍼레이션을 할 경우 문서에서 반응을 해주어야 합니다.
웹문서는 사용자의 명령을 어떠한 방식으로라도 이해하고 결과값을 보여주어야 하죠.
아주 쉽게 이야기 하자면 회사 전자사보에 들어가 회사에 대한 이런저런 소식을 보고..
마침 괜찮은 이벤트를 진행하고 싶어서 이벤트 참여를 클릭했습니다.
그리고 이벤트에서 요구하는 정보를 입력하고 참여를 완료 했죠.
이벤트를 보는것까지! 정적입니다.
하지만 이벤트에 참여하는것! 이것이 동적입니다.
이러한 동적인 작업을 주로 자바스크립트에 그리고 서버프로그래밍에서 처리를 해줍니다.
이러한 사용자의 오퍼레이션, 그리고 오퍼레이션에 이은 액션을 자바스크립트에서 만들어 줍니다.
그리고 결과는 서버프로그래밍에서 처리하고 데이터베이스에 저장하죠.
※Why? 자바스크립트?
너무 쉬운 언어? 다루기 편한 언어? 라는 인식이 많았기에 사실 자바스크립트에 대한 인식은 좋지 않았다고 합니다.
하지만 구글에서 플레쉬를 사용하지 않겠다고 선언을 했고, 자바스크립트/제이쿼리/HTML5를 이용해 플래쉬 없이도 플래쉬와 같은 효과를 구현할 수 있다는걸 보여주었죠.
자바스크립트는 서버프로그램 언어만큼 기능이 많지 않습니다.
하지만 서버프로그램 언어에 못지 않게 변수, 반복, 조건, 함수 심지어 객체까지 모두 갖추고 있는 언어입니다.
※자바스크립트 실습도구
자바스크립트를 공부하기 위해서 필요한 것들이 몇가지 있습니다.
에디터, 웹브라우저.. 그리고 HTML에 대한 기본적인 지식..
에디터는 에디트플러스를 사용하고 웹브라우저는 크롬을 사용하겠습니다.
※자바스크립트 기본구성
자 이제 자바스크립트를 어떠한 방법으로 작성하는지 알아보겠습니다.
자바스크립트 코드작성하는 방법은 몇 가지 방법이 있습니다.
△inline 방식
인라인 방식은 태그에 직접 자바스크립트 코드를 작성하는 방식입니다.
인라인 방식의 장점은 주석이 따로 필요없이 자바스크립트 코드의 위치를 알 수 있다는 점입니다.
하지만 코드의 내용이 길면 길수록 코드가 지저분해지고 정보와 제어가 섞여 있기에 정보로써 가치가 떨어집니다.
사용법)
<input type="button" onclick="alert('Hello JS')" value="클릭하세요." />
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
</head>
<body>
<div id="wrap">
<!-- 자바스크립트 인라인 방식 -->
<input type="button" onclick="alert('Hello JS')" value="인라인방식" />
</div>
</body>
</html>
결과)
△script 방식
인라인 방식과 달리 HTML 코드와 자바스크립트 코드가 서로 섞이지 않습니다.
장점은 코드가 깔끔해지고 정보와 제어가 분리된다는 점입니다.
단점은 자바스크립트 코드가 길어질수록 어떠한 메소드나 코드를 사용하는지 주석을 달지 않는다면 유지보수 단계에서 혼란을 가져올 수 있죠.
사용법)
*스크립트 영역
<script>
function hello(){
alert("Hello JS");
}
</script>
*HTML영역
<div id="wrap">
<input type="button" onclick="hello()" value="스크립트영역" />
</div>
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
</head>
<script>
function hello(){
alert("Hello JS");
}
</script>
<body>
<div id="wrap">
<input type="button" onclick="hello()" value="스크립트영역" />
</div>
</body>
</html>
결과)
△외부파일 호출
자바스크립트 문서를 따로 저장하고 호출하여 실행하는 방식입니다.
문서의 확장자는 문서명.js 입니다.
장점은 정보와 제어가 확연하게 분리가 됩니다.
그리고 문서를 호출함으로써 한 페이지가 아닌 여러 페이지에서 자바스크립트 메소드를 사용할 수 있습니다.
단점은 특정 부분에 대한 주석이 없고 여러개의 스크립트 파일이 있을 경우 여러 파일을 다 찾아봐야 하고 코드를 찾기 힘들 수 있습니다.
사용법)
*스크립트 파일 작성
function hello(){
alert("Hello JS");
}
*스크립트 파일 호출
<script src="hello.js"></script>
*HTML 코드 작성
<div id="wrap">
<input type="button" onclick="hello()" value="외부파일 호출" />
</div>
예제)
(1)hello.js
function hello(){
alert("Hello JS");
}
(2)01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learning Javascript! </title>
</head>
<script src="hello.js"></script>
<body>
<div id="wrap">
<input type="button" onclick="hello()" value="외부파일 호출" />
</div>
</body>
</html>
결과)
이쯤이면 모두 예상했을거라 생각이 드네요.
결과는 달라진게 없습니다.
사용자가 클릭을 했고, 클릭했을 경우 보여줄 동적인 액션도 똑같이 보여주죠.
다만 HTML의 문서의 관리와 자바스크립트 문서의 관리를 위해 세 번째 방식이 가장 깔끔하다는걸 알 수 있을겁니다.
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
|---|---|
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |
| 자바스크립트 팝업/window - 자바스크립트 강좌 4강 (0) | 2016.04.17 |
| 자바스크립트 location/navigator - 자바스크립트 강좌 3강 (3) | 2016.04.15 |
| 자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강 alert, confirm, prompt, if~else (2) | 2016.04.09 |