BLOG main image

같은생각
From... Las

Home | Local log | Tag | Google RSS | Google analytics | Trace watch | Guestbook  
     - 잘 지내나요?
    List  

'자바스크립트 코드 작성법'에 해당되는 글 1건

  1. 2008/03/31 자바스크립트 코드 작성법

자바스크립트 코드 작성법

 
자바스크립트 코드 작성법

자바 스크립트를 사용 하는데 있어서 몇가지 규칙들이 있습니다.
모든 프로그래밍과 마찬가지로 자바 스크립트도 실행을 위한 코드를 작성할때 보통 라인을 바꿔 가며 코드를 작성 합니다.
코드는 라인별로 실행 되기 때문에 그 라인이 끝났다는 것을 알리기 위해서 세미콜론(;)을 사용 합니다.
그러나 실행될 단위로 라인을 바꿀때 (;)을 사용 하지 않아도 되지만 만약 한 라인에 모든 코드를 작성 한다면 반드시 (;)을 사용 하여 실행 단위를 지정해야 합니다.
예:
<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>


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

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


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

<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>


위와 같은 경우는 중괄호를 사용 하지 않아도 되는데 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]
abstractdeletefunctionnullthrow
booleandogotopackagethrows
breakdoubleifprivatetransient
byteelseimplementsprotectedtrue
caseenumimportpublictry
catchexportinreturntypeof
charextendsinstanceofshortvar
classfalseintstaticvoid
constfinalinterfacesupervolatile
continuefinallylongswitchwhile
debuggerfloatnativesynchronizedwith
defaultfornewthis

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

자바스크립트 데이타 타입

[문자열(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= 수치연산자=

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

[출처] 자바 스크립트의 코드 작성법 |작성자 굳세어라

Category : My page/Study   Tag :  
2008/03/31 13:49   By Las 
Trackback : Comment

prev page next page
1 

Recent Entry

Recent Comment

Recent Trackback

Counter

Total : 251294 Today : 23 Yesterday : 44

Tag cloud

..., ......ing, ActiveX 삭제, ADO, ADO 성능 높이기, agp, Aids, Another World, apple cinema, asp, Aya Ueto, A형, Baldurs Gate, bard, BEO Player, Book, Bryan adams, CGV, Chante Moore, clie, compact, Compilation, Convert, DAO, dao에서 ADO로, DarkNamer, datetime, DB restore, DB 복구, db 테이블 정의서, dell 2007WFP, DreamFall: The Longest Journey, dvd, DVD 타이틀, ecotonoha, eve-online, event.keyCode 번호표, Facebook, favicon, favis, Faye Wong, FLASH, Fon, Fon Lafontenna, fon maps, FON 지향성 안테나, footnote, Fun, Game, Gamecube, game_ost, GETDATE, Google, Google analytics, Graphic card, hanami, HDTV 수신카드, heaven, HijackThis, I-RAM, i4R, IceWind Dale, IE ActiveX, IE Plug-in, IETOY, include, irc, ishihara satomi, isNull, Java, JavaScript, jazz, join update, j_drama, j_music, kav, kb917422, Kenny G, keyboard_Fun, k님, Launcher, LightBox2, Linked Server, linux, Lottery Music, M.Friends, Maki Horikita, Matsu Takako, mdb, MDB생성, MDB압축, Microsoft iPod, mp3, mp3 Media Player, MSN Live, MSN Messenger, Mssql, Myminicity, NEC, NeverwinterNights, o-game, ogame, one more time, Open Your Eyes, opencapture, openTTD, PageDefrag, palm, pc_game, pc_game_tip, PC업그레이드, Pda, Petit Launcher, picture, pinball, Pink Floyd, program, ps3, punkbuster, RAID, RDO, Remake, retrievr, Review, Search, settler, settler2, skt 포인트소멸, songlist, sony usm2gj, spread, SqL, Starry Night, sudoku, Symphonic, THE ERASER, The Father, The isley brothers, thecheat, theinquirer, Think, THOM YORKE, Time, tip, Tistory, tracewatch, Twitter, ubuntu, Uchiyama Rina, Ueto Aya, UltraMon, unplugged, us and them, util, ux50, vangard, vb, wallpaper, Web관련, Wii, WOW, xirc, xp install, yui, Yumiko Shaku, z22, Zoo 愛をください, Zune, クロサギ, ソニン, 上戸彩, 優香, 我願意, 王菲, 王靖雯, 白い影, 가상주민등록번호, 강릉, 건슈팅, 검색로봇, 고냥군, 괴물, 구입기, 그해 여름, 그해여름 OST, 기억상실, 기억속의 인물, 김연아, 꿈 속에 살아가다, 난수 발생, 날개셋, 날씨, 내캐릭, 내컴퓨터, 놀자, 다랭이, 다스베이더, 다케우치 유코, 당신은 사랑받기 위해 태어난 사람, 더워, 데이터가져오기, 독백, 동생, 듀얼모니터, 레지스트리 청소, 로또, 로코모션, 마마님, 머리속, 메타정보, 미완료작업물, 밀란쿤데라, 바탕화면 아이콘을 줄이자, 박x무당님, 범프키, 보안카드, 북다트, 블랙잭, 뿌리를찾아서, 사제, 삼돌이, 삼벌식, 삽질의 현장, 생각, 생활의 지혜, 설명, 성격, 세계 AIDS의날, 소닌, 스타더스트, 스티브잡스, 스팸댓글, 시스템, 신동우, 신승훈, 실시간알리미, 싸이월드 플러그인, 안나님, 언락, 업데이트, 연애편차치, 영화를 보다, 오소영, 옥션광고, 와라님, 외장하드, 우에토 아야, 웨군, 웹표준, 유용한 소스, 유카, 윤창군, 음악저작권법, 이동성, 이벤트당첨, 이사, 이승환 9집, 이자람, 인희, 일본연예인, 자바스크립트 코드 작성법, 자식창에서 부모창 함수 사용, 잘지내나요?, 잡담, 저장프로시저, 정규식, 젠장!!!, 족보, 즐거운인생, 지름, 천안전씨, 추억과 이야기들, 카툰, 칼리브레이션, 캡쳐, 컴터 다운, 컴터업, 케로로중사 중에서, 키트님, 태양의노래 OST, 테더스킨, 테터툴즈, 투명한얼음, 트랙백놀이, 트릭, 특성, 파일이름바꾸기, 파코즈, 편한사람, 플러그인, 하고싶어, 한국 지도 서비스, 한글입력기, 함수모음, 향수, 혈액형, 혼자놀기, 후회,