자바스크립트 코드 작성법 > script

본문 바로가기

script

자바스크립트 코드 작성법

작성일 06-09-12 11:56

페이지 정보

작성자서방님 조회 179회 댓글 0건

본문

자바스크립트 코드 작성법

자바 스크립트를 사용 하는데 있어서 몇가지 규칙들이 있습니다.
모든 프로그래밍과 마찬가지로 자바 스크립트도 실행을 위한 코드를 작성할때 보통 라인을 바꿔 가며 코드를 작성 합니다.
코드는 라인별로 실행 되기 때문에 그 라인이 끝났다는 것을 알리기 위해서 세미콜론(;)을 사용 합니다.
그러나 실행될 단위로 라인을 바꿀때 (;)을 사용 하지 않아도 되지만 만약 한 라인에 모든 코드를 작성 한다면 반드시 (;)을 사용 하여 실행 단위를 지정해야 합니다.
예:
<script language="JavaScript">
<!--예제
message = "안녕 하세요";
alert(message);
//스크립트 끝-->
</script>
위와 같은 경우는 일반적으로 사용하는 코드 작성법 입니다. (올바른 방법)
<script language="JavaScript">
<!--예제
message = "안녕 하세요"
alert(message)
//스크립트 끝-->
</script>
위와 같은 경우도 라인별로 명확히 구분 되기 때문에 (;)를 사용 하지 않아도 실행 됩니다.
<script language="JavaScript">
<!--예제
message = "안녕 하세요"; alert(message);
//스크립트 끝-->
</script>
위와 같은 경우는 한 라인에 모두 작성 하였고 실행될 단위를 (;)을 사용 하여 구분 했습니다.
물론 스크립트가 동작 합니다.
<script language="JavaScript">
<!--예제
message = "안녕 하세요" alert(message)
//스크립트 끝-->
</script>
하지만 위와 같이 한라인에 작성할때 실행 단위를 (;)으로 구분 하지 않았기 때문에 동작 하지 않습니다.


자바 스크립트는 중괄호({,})를 사용 실행 코드를 블록단위로 지정합니다.
함수나 조건문, 제어문 등을 쓸때 사용 하는데요 경우에 따라 중괄호를 사용 하지 않아도 되지만 함수를 정의 하고 사용 하기 위해선 반드시 중괄호를 사용 해야 합니다.
예:

<script language="JavaScript">
<!--예제
function alertmsg1() {
message = "안녕 하세요";
alert(message);
}
function alertmsg2() {
message = "즐거운 하루 되세요";
alert(message);
}
//스크립트 끝-->
</script>

alertmsg1 alertmsg2
위와 같은 경우 함수가 두개로 나누어 지고 중괄호({,})를 써서 블록단위로 개별 실행 됩니다.

<script language="JavaScript">
<!--예제
function alertmsg() {
message1 = "안녕 하세요";
message2 = "즐거운 하루 되세요";
alert(message1);
alert(message2);
}
//스크립트 끝-->
</script>

alertmsg
위와 같은 경우는 두개의 함수를 하나의 블록 단위로 만들어서 실행 하였습니다.

<script language="JavaScript">
<!--예제
function alertmsg() {
message = new Array("안녕 하세요", "즐거운 하루 되세요");
for (i = 0; i < message.length; i++) {
alert(message[i]);
  }
}
/*
for (i = 0; i < message.length; i++)
alert(message[i]);
이와 같이 중괄호를 사용 하지 않아도 됩니다.
*/
//스크립트 끝-->
</script>

alertmsg3
위와 같은 경우는 중괄호를 사용 하지 않아도 되는데 for문에서 보면 중괄호로 조건에 맞게 경고창을 반복하는 블록 단위로 묶었습니다.
스크립트는 라인별로 실행이 되기 때문에 for문 다음 라인이 예제와 같이 한 라인으로 되어있다면 중괄호를 생략 해도 됩니다.
중괄호를 생략할 경우 for문 다음 라인 까지만 블록 단위가 되며 for문 두번째 라인 부터는 적용 되지 않습니다.
여러 라인의 코드가 for문으로 실행 되야 한다면 반드시 중괄호를 사용 해야 합니다.

자바스크립트 주석문

[Comment]
자바스크립트 코드를 작성 하고 코드에 대한 설명을 달때 주석을 사용 합니다. 주석을 다는 이유는 코드를 수정하거나 파악하는데 있어 가독성을 높여 줍니다. 자바스크립트의 주석문도 HTML 주석과 마찬가지로 실행되지 않고 무시 됩니다.

/*주석 내용*/
"/*" 과 "*/" 사이에 내용들은 주석 처리 됩니다. 주로 주석 내용이 많거나 스크립트 코드의 전체에 대한 간단한 설명을 할때 사용합니다.
//주석 내용
"//" 뒤로 나오는 내용들은 주석 처리 됩니다. 라인별로 주석처리가 되며 보통 라인별 코드에 대한 설명을 달때 사용 합니다.
<script language="JavaScript">
<!--예제
/*메세지 경고창 띄우기*/
function alertmsg() {
message = new Array("안녕 하세요", "즐거운 하루 되세요"); //메세지 배열 변수
for (i = 0; i < message.length; i++) {
alert(message[i]); //메세지 경고창
  }
}
/*
for (i = 0; i < message.length; i++)
alert(message[i]);
이와 같이 중괄호를 사용 하지 않아도 됩니다.
이 부분은 내용이 여러줄로 사용되었으며 주석 처리 했습니다.
*/
//스크립트 끝-->
</script>

자바스크립트 변수

[Variable]
자바스크립트는 다른 고급 언어와 달리 변수를 선언하는데 있어 그리 까다롭지 않습니다.

변수 만들기
변수는 특정한 자료형의 값을 가지고 저장 장소에 넣어두었다가 필요시 변수를 가져다 사용 할 수 있습니다.
변수를 만드는데는 몇가지 제약이 있습니다. 변수는 영문으로 시작하거나 "_"로 시작해야 합니다.

var rangs
var _rangs
var 75rangs //잘못된 선언

그리고 변수를 선언 할때 여러 가지 방법이 있습니다.
var rangs //하나의 변수 선언
var _rangs, rangs, rangs75 //여러개의 변수 선언
var no = 0; //초기값을 할당한 정수형 변수 선언
var rangs = "랑스 웹 카페"; //문자열이 할당된 변수 선언

위와 같이 변수를 만들때 꼭 var로 선언 하지 않아도 자바스크립트는 별다른 제약이 없고 자동으로 변수로 선언 됩니다.
단지 값을 할당 하기만 하면 자동으로 타입을 설정 하고 변수로 선언됩니다.
no = 100; //정수형 변수 선언
rangs = "랑스 웹 카페"; //문자열 변수 선언

그러나 var을 이용해서 선언하는 이유는 명확한 구분과 가독성을 좋게 하며 스크립트 코드가 많은 부분에 대해서 지역과 전역 변수를 구분해서 정확하게 사용 할 수 있기 때문입니다.

지역 변수 / 전역 변수
지역변수 :
함수 안이나 중괄호({,}) 안에서 var로 변수를 선언한 경우 그 안에서만 변수로 사용 되고 함수나 중괄호를 벋어나면 메모리가 해제 됩니다.

<script language="JavaScript">
<!--예제
function Lvar() {
var lvmsg = "지역 변수"; //이 함수 내에서만 사용 가능한 지역 변수
alert(lvmsg);
}
//스크립트 끝-->
</script>

지역 변수

전역 변수 :
함수 안이나 밖에서도 언제나 변수를 가져다 사용할 수 있으며 var로 변수를 선언하지 않아 자동 변수로 할당된 경우와 var로 변수를 선언한 경우(단, var로 선언시 함수 밖에 선언한 경우)
<script language="JavaScript">
<!--예제
gvmsg1 = "전역 변수 1"; //모든곳에서 사용 가능한 전역 변수
var gvmsg2 = "전역 변수 2"; //모든곳에서 사용 가능한 전역 변수

function Gvar() {
var lvmsg = "지역 변수"; //이 함수 내에서만 사용 가능한 지역 변수
alert(lvmsg);
alert(gvmsg1);
alert(gvmsg2);
}
//스크립트 끝-->
</script>

전역 변수
끝으로 코드 작성을 위한 키워드로 사용되는 예약어들은 변수로 선언 할 수 없습니다.

자바스크립트 예약어

[Reserved Words]
abstract delete function null throw
boolean do goto package throws
break double if private transient
byte else implements protected true
case enum import public try
catch export in return typeof
char extends instanceof short var
class false int static void
const final interface super volatile
continue finally long switch while
debugger float native synchronized with
default for new this  

위와 같은 키워드는 자바스크립트에서 프로그램을 만들기 위해 예약된 것이므로 변수로 사용할 수 없습니다.

자바스크립트 데이타 타입

[문자열(String)]
따옴표('') 나 쌍따옴표("") 안에 들어 가는 내용들은 자바스크립트에서는 문자열로 처리됩니다.
"랑스 웹 카페"
'RANGS Web Cafe'
'"RANGS" 웹 카페'
"2003"

[정수(Number:Integer)]
정수형은 양수나 음수 또는 0은 물론이고 8진수, 10진수, 16진수와 같은 모든 형태를 사용 할 수 있습니다.
8진수(Octal): 0 ~ 7 까지
16진수(hexadecimal) : 0x 로 시작하는 수로 0 ~ 15 까지(0 ~ 9 다음 A(10) ~ F(15) 까지)

[부동 소수점(Number:Floating-point)]
부동 소수점은 소수 부분을 가지고 있는 10진수 이며 큰 자릿수에 대해서는 지수를 사용 할 수 있습니다.

1.23
-3.21
3*1010 (3E10)
0.01 (1E-2)

[Boolean]
Boolean은 크기가 1비트인 자료형 입니다.
true와 false값만 가지며 주로 함수에서 리턴값이나 관계 연산자의 결과값으로 사용 합니다.

message = true; //Boolean형의 값을 할당
if (message)
alert("message가 true입니다.");
else
alert("message가 false입니다.");

[Null]
null은 아무런 값도 없다는 뜻 입니다. 예를 들어 변수가 지정되지 않았다면 null값을 가지게 됩니다.
그리고 경고창에서 취소(Cancel)를 눌렀을때도 null값을 가지게 됩니다.

자바스크립트 연산자

[수치 연산자]
+ 수식계산에서 더할때 사용 하며, 문자열 사이에서 사용 하면 문자열 연산자로 사용됩니다.
- 수식계산에서 뺄때 사용 합니다.(변수 앞에 사용 하면 단항 연산자로 사용 됩니다.)
* 수식계산에서 곱할때 사용 합니다.(× 이와 같이 사용 하지 않습니다.)
/ 수식계산에서 나눌때 사용 합니다.(÷ 이와 같이 사용 하지 않습니다.)
% 수식계산에서 나머지를 구할때 사용 합니다.
++ 수치를 증가 시킬때 사용 합니다.
-- 수치를 감소 시킬때 사용 합니다.
- 단항 연산자(예: 변수 i에 -i하면 (-1) * i 와 같은 결과 입니다.)

가감승제(+, -, *, /)를 같이 사용 하면 우선순위는 *, /, +, - 순서입니다.

[논리 연산자]

< A < B : A가 B보다 작다.(비교 연산자)
> A > B : A가 B보다 크다.(비교 연산자)
<= A <= B : A가 B보다 작거나 같다.(비교 연산자)
>= A >= B : A가 B보다 크거나 같다.(비교 연산자)
== A == B : A와 B가 같다.(비교 연산자)
!= A != B : A와 B가 다르다.(비교 연산자)
! Boolean형의 값을 반전 합니다.(값이 true인 곳에 !을 붙이면 false, Boolean NOT 연산자)
&& &&으로 조건이 주어지면 모두 true인 경우만 true가 됩니다.(조건 연산자: AND)
|| ||으로 조건이 주어지면 하나만 true인 경우라도 true가 됩니다.(조건 연산자: OR)
?: (조건) ? ① : ② 이와 같이 사용 하며, 조건이 true이면 ":" 앞에값(①) false이면 ":" 뒤에값(②)

[비트 연산자]

& 비트간에 AND 연산을 수행 합니다.
| 비트간에 OR 연산을 수행 합니다.
^ 비트간에 XOR 연산을 수행 합니다.
<< 비트의 배열을 좌측으로 수평 이동 시킵니다.
>> 비트의 배열을 우측으로 수평 이동 시킵니다.

[대입 연산자]

= 일반적으로 많이 사용하는 변수에 값을 대입하는 연산자 입니다.
수치 연산자= 복합 대입 연산자이며, 수치 연산과 대입 연산을 동시에 합니다.(+=, -=, *=, /= 등등)

[연산자 우선 순위]

우선 순위 1 . [] ()
우선 순위 2 ++ -- - ~ ! delete new typeof void
우선 순위 3 * / %
우선 순위 4 + -
우선 순위 5 << >> >>>
우선 순위 6 < <= > >= instanceof
우선 순위 7 == != === !==
우선 순위 8 &
우선 순위 9 ^
우선 순위 10 |
우선 순위 11 &&
우선 순위 12 ||
우선 순위 13 ?:
우선 순위 14 = 수치연산자=

위에 내용들은 자바스크립트를 하기 위한 기본적인 사항들입니다. 실제적으로 원하는 스크립트를 실행 하기 위해서 많은 지식이 필요 하지만 그런 부분들은 예제를 통해서 익히고 의문나는 사항들은 책이나 인터넷을 이용하세요!
특히 모든것을 외우는건 불가능 하므로 사용방법과 내용만을 파악하고 반복 하다 보면 어느 순간 눈 감고도 원하는 코드를 작성할 날이 옵니다. 그럼 그날이 올때까지 열심히 하세요^^*

댓글목록

등록된 댓글이 없습니다.

전체 846건 57 페이지
게시물 검색
Copyright © 서방님.kr All rights reserved.
PC 버전으로 보기