Web-Programming/Javascript
[Javascript] 자바스크립트 기초,초급
오늘은 자바스크립트 기초를 정리해 보겠습니다.
누구나 알고 쓰지만 매번 찾아 보게 되는 내용으로 정리해 볼려고 합니다. 조금은 개략적인 내용입니다.
1. 코드 작성 준비
자바스크립트 코드는 (X)HTML의 <head>안의 <script> 태그 안에 작성하면 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<html>
<head>
<script type="text/javascript">
// 스크립트가 들어가는 곳
</script>
</head>
<body>
</body>
</html>혹은 <script> 태그의 src 속성을 사용하여 외부의 js 파일을 인클루드 할 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<html>
<head>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
</body>
</html>여기서 중요한점은 다음과 같은 방법으로 작성을 하면 해당 스크립트가 작동하지 않습니다.
<script type="text/javascript" src="myjs.js"/>왜일까요? XML공부를 하다보면 값이 없는 것을 표현하는 방법으로는 <script></script> 나 <script/> 둘다 같은 표현 방법인데요.
XHTML strict의 DTD를 한번 봐볼까요
<!ELEMENT script (#PCDATA)>
<!ATTLIST script
id ID #IMPLIED
charset %Charset; #IMPLIED
type %ContentType; #REQUIRED
src %URI; #IMPLIED
defer (defer) #IMPLIED
xml:space (preserve) #FIXED 'preserve'
>script에는 PCDATA(문자열)이 들어가야만 하는군요. 일반적으로 그냥 닫을 수 있는 녀석들은 어떻게 선언되어있는지 볼까요?
<!ELEMENT img EMPTY>
<!ATTLIST img
%attrs;
src %URI; #REQUIRED
alt %Text; #REQUIRED
longdesc %URI; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
ismap (ismap) #IMPLIED
>
<!ELEMENT br EMPTY> <!-- forced line break --><!ELEMENT hr EMPTY>
img, br, hr같은 태그들은 기본적으로 EMPTY속성입니다. 값이 존재할수가 없군요. 속성만을 가질 수 밖에 없는 슬픈 녀석들입니다.
위의 태그들은 다음과 같이 바로 닫아 써도 됩니다.
<img src="image.jpg" alt="이미지"/>2. 세미콜론의 사용 여부
자바스크립트는 컴파일되어 실행되는 언어가 아닌 각 브라우저의 인터프리터들이 한줄단위로 실행하는 언어입니다.
정확하게는 하나의 명령문 단위로 실행이 되며 한줄에 하나의 명령이 존재한다면 세미콜론을 사용하지 않아도 사용에 아무런 문제가 없습니다.
var value = 'Hello World!'
alert(vaule)하지만 위의 명령을 한줄에 표현할려면 세미콜론을 사용하여야 합니다.
var value = 'Hello World!'; alert(vaule);작동한다는것에 연연하지 말고 각 명령문이 끝날때마다 세미콜론을 붙여주는 것이 좋겠네요.
var value = 'Hello World!';
alert(vaule);3. 주석
자바스크립트에서는 다음과 같은 주석을 사용할 수 있습니다.
// 이것은 한줄만 주석으로 지정 할 수 있습니다./* 이것은 여러줄을
주석으로
사용할 수 있습니다.*/<!-- 이것은 한줄만 주석으로 사용할 수 있습니다. HTML 주석과 달리 종료 구문이 없습니다.4. 변수
변수(Variables)는 말그대로 "변하는 수" 입니다. 어떤 변수를 생성하고 그 변수에 특정한 값을 할당 할 수 있습니다.
자바스크립트에서는 이 변수의 선언을 다음과 같이 합니다.
var number;
var str;다음과 같이 한번에 선언할 수도 있습니다.
var number, str선언한 변수에 다음과 같은 방법으로 값을 할당해 봅시다.
number = 12;
str = 'Hello World!';다음과 같이 선언과 동시에 값을 할당 할 수도 있습니다.
var number = 12;
var str = 'Hello World!';자바스크립트의 변수는 대소문자를 구별합니다.
또한 자바스크립트의 변수는 변수에 형 지정을 하지 않습니다. 어떤 형태의 값도 들어갈 수 있고 중간에 형이 바뀔수도 있습니다.
var res = '문자열';
res = 27;위와 같은 경우도 아무런 문제가 없습니다.
5. 문자열
다음과 같이 문자열 변수를 선언할 수 있습니다.
var str = "Hello";
var str = 'World';보시면 아시겠지만 큰따옴표와 작은 따옴표가 모두 동일하게 사용됩니다.
위의 두가지는 동일한 결과를 가져옵니다.
문자열중에 또 따옴표를 사용할려면 다음과 같은 방법이 있습니다.
var str = "Hello \"eye\"";
var str = 'Hello "eye"';
var str = "Hello 'eye'";위에서 알 수 있듯이 큰따옴표 작은 따옴표를 필요에 따라 사용해도 됩니다. 또는 이스케이프 문자(\)를 사용하여 표현 할 수 있습니다.
6. 숫자
자바스크립트에서는 양/음수 및 소수를 포함한 어떤 숫자라도 자유롭게 사용할 수 있습니다.
var num = 12;
var num = -12;
var num = 12.34;
var pi = 3.14253777777777;7. 참거짓
다음과 같이 Boolean 값을 표현할 수 있습니다.
var isTrue = true;
var isTrue = false;
var isTrue = "true";3번째의 따옴표로 묶여있는 true는 참이 아닌 문자열 true이겠죠.
8. 배열
자바스크립트의 배열은 어떻게 보면 매우 편리하고 어떻게 보면 정말 개판입니다;;
다음과 같이 생성자를 이용하여 배열을 생성할 수 있습니다.
var fruits = new Array(4); // 크기가 4인 배열
var fruits = new Array(); // 크기를 알 수 없는 배열
var fruits = new Array('apple', 'tomato', 'melon', 'strawberry');또는 다음과 같은 방법으로 직접 생성할수도 있습니다.
var fruits = ['apple', 'tomato', 'melon', 'strawberry'];다음과 같이 값을 입력할 수 있습니다.
fruits[0] = 'apple';
fruit['tomato'] = 'tomato';신기하게도 배열의 크기를 지정하지 않고도 얼마든지 마음껏 값을 집어넣을 수 있고, 크기를 4로 선언했더라도 그 이상의 값을 넣을 수 있습니다.
자동으로 배열의 크기가 확장됩니다.
물론 내부에선 숫자가 붙어 사용됩니다.
위의 예제에서 볼수 있는 문자로 인덱스명을 붙일 경우에는 배열이 아닌 Array객체의 Property로 들어가게 됩니다.
var fruits = new Array();
fruits['tomato'] = 'red';
alert(fruits.length); // fruits 배열의 길이는 0
fruits[0] = 'yellow';
alert(fruits.length); // fruits 배열의 길이는 1
fruits['1'] = 'green';
alert(fruits.length); // fruits 배열의 길이는 2
alert(fruits.join(',')); // yellow, green 출력됨위의 예제에서 알 수 있듯이 인덱스가 문자열일 경우에는 배열로 들어가지 않고 객체의 Property로 들어가게 되며 숫자일 경우에는 따옴표의 여부와 상관없이 배열값으로 들어가게 됩니다.
9. 조건문
자바스크립트의 조건문은 어느 프로그래밍 언어와 동일합니다.
if (condition) {
명령문들;
}이상의 값을 넣을 수 있습니다.
condition에서 사용될 수 있는 비교 연산자로는 크다(>), 작다(<), 크거나같다(>=), 작거나같다(<=), 같다(==)가 있습니다.
하지만 한가지 다른것이 있습니다. 같다(==)와 별개로 완전히같다(===)가 있습니다.
Equal(=)를 3개를 사용하며 값의 타입까지 같을 경우 참을 반환합니다.
자바스크립트의 너그러운 문법에 의해 다음과 같은 상황이 일어납니다.
var value = '1';
if(value == 1) alert('running'); // 실행된다.
if(value === 1) alert('not running'); // 실행되지 않는다.value에는 문자열 "1"을 담았지만 숫자 1과 비교를 한다. ==를 사용하면 참이 나오지만 ===를 사용하면 거짓이된다.
실제로 prototype.js 의 소스를 보다 보면 다음과 같은 문구가 나온다.
if (value === false || value === null) {}Boolean이나 null값 체크를 타입까지 정확하게 확인하는것을 알 수 있다. 알아두자.
10. 함수
다른 프로그래밍 언어와 동일한 함수이다. 다음과 같은 형식을 갖는다.
function 함수이름(인수들) {
명령문들;
}자바스크립트는 신기하게도 함수도 변수에 담을 수 있다. 정확하게는 Pointer의 개념일 것이다.
공부하고자 저장해뒀던 부분인데..저 처럼 아무것도 모르고 덤벼들 분들을위해서..ㅎ
글쓴분의 허락도 못구하고 기재합니다..
사실어디서 가져왔는지를..- -;;;;;
글쓴분의 허락도 못구하고 기재합니다..
사실어디서 가져왔는지를..- -;;;;;
'Web-Programming > Javascript' 카테고리의 다른 글
| [ 구글맵 / api / v3 / map / 지도 ] google map api 사용하기, 마커찍기 (5) | 2011.12.24 |
|---|---|
| [ 자바스크립트 / 브라우저 / 체크 ] Javascript Browser Check (0) | 2011.11.22 |
| [ 자바스크립트 / javascript / 아이프레임 / 파이어폭스 / IE / 크롬] iframe auto resize - 아이프레임 리사이즈 (1) | 2011.11.21 |
| [ javascript / 자바스크립트 ] F5, 새로고침 , Ctrl + R, Ctrl + N, 방지, 막기, 금지 (0) | 2011.11.15 |
| [ DOM / BOM ] HTML 객체 모델 차이 (1) | 2011.09.28 |
| 스크롤 따라 움직이는 레이어 (0) | 2011.02.26 |
| 시작페이지, 즐겨찾기 버튼 만들기 (0) | 2010.05.26 |
| JAVASCRIPT-자바스크립트 : 경고창이나 대화상자 없이 window.close() 시킬 수 있는 방법입니다. ㅎ (0) | 2010.05.15 |
| JAVASCRIPT : 자바스크립트 쿠키를 구워보자!!!ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ (0) | 2010.05.14 |
| [자바스크립트] 동적-라디오 버튼 예제 (0) | 2010.04.16 |
댓글