본문 바로가기

[ programing ]/JavaScript + JQuery

개인적인 자바스크립트 (javascript) 유의점

세미클론( ; ) 과 새로운 줄이 똑같이 동작한다. 



한줄에 하나 이상의 문장을 배치하려면 x += 10; y -= 5; z = 0 이런식으로 사용 .







변수는 대소문자를 구분한다.



Count 와 count, COUNT 는 모두 다른 변수이다.

변수 이름의 첫번째 문자는 a-z , A-Z, $ , _ 를 사용할 수 있고 숫자는 허용되지 않는다.




var greeting = "Hello there" ;

var warning = 'Be careful' ;


문자열 변수는 작은 따옴표나 큰 따옴표를 사용할 수 있다.




큰 따옴표 안에 작은 따옴표를 사용하려면 


greeting = " \"Hello there\" is a greeitng "  같이 역슬레시 이스케이프 문자를 사용한다.






산술 연산자


증가 ++j

감소 --j






비교 연산자


=== 같은( 그리고 같은 형식인 ) 

!== 다른( 그리고 다른 형식인 )







논리연산자


!     NOT     !(j==k) 








typeof 연산자


변수의 형식을 확인







전역변수


전역변수는 모든 함수의 밖이나 안에 var 키워드 없이 정의된다. 

또한 var 키워드를 사용하든 안하든 함수 밖에 정의되면 전역변수이다. 




a = 123;                                     // 전역

var b = 456;                              // 전역

if( a == 124 ) var c = 789;          // 전역









지역변수



배열은 참조에 의해 함수로 넘어가므로, 배열 내에 어떤 엘리먼트를 변경하면 원래 배열의 엘리먼트도 변경된다.

매개변수로 넘어가지 않는 지역변수를 정의하려면 var 키워드를 사용해야 한다.





<script>


function isset( varname )

{

return typeof varname != 'underfunded' ; // 변수가 정의된 경우에만 리턴함.

}


</script>



위 함수는 변수가 정의되지 않은 경우 문자 undefined를 반환하는 typeof 연산자를 사용한다.





<script>


test();


if( asset(a) ) document.write( 'a = " ' + a + ' "<br  />');

if( asset(b) ) document.write( 'b = " ' + b + ' "<br  />');

if( asset(c) ) document.write( 'c = " ' + c + ' "<br  />');




function test()

{

a = 123;

var b = 456;

if( a == 124 ) var c = 789;


}





function isset( varname )

{

return typeof varname != 'underfunded' ; 

}




</script>






결과는 a = "123"



var 키워드가 앞에있는 변수 b 와 c 는 지역변수로 주어지고, 예상한 것과 같이 변수 a만이 전역범위 임을 보여 준다.














참 true, 거짓 false



거짓으로 평가되는 false문자열과 0, -0, 빈문자열, null, 비정의, NaN( Not a Number, 0으로 나누는등의 불법적인 부동소수점 연산의 컴퓨터 공학 개념)을 제외하고는 모든 값이 참으로 간주됨



true와 false 모두 반드시 소문자 여야 한다.




if( 1 == true ) document.write('true'); 













관계형 연산자



항등 표현식의 두 피연산자 형식이 다르면 자바스크립트는 가장 잘 맞는 형태로 변경한다.

숫자로 구성된 문자열 a = 3.14;

을 숫자 b = "3.14" ;

와 비교하면 숫자 형식으로 변경된다.



<script>


a= 3.14;

b="3.14";


if( a == b ) document.write(" true ");

if( a === b ) document.write(" false "); 



</script >



첫번째 이프문은 참으로 인식되어 true 이 출력된다.

문자형값이 b가 일시적으로 숫자형으로 변경됫기 때문이다.



반대로 두번째 이프문은 세 개의 등호 기호가 연속된 일치 연산자( === )를 사용하고

자바스크립트가 자동으로 혀식 변환을 하지 못하게 한다. 

















|| or 연산자



a = 1;

b = 0;


document.write(( a || b ) + "<br />");





|| 연산자는 첫번째 피연산자가 참이면 , 두번째 피연산자가 실행되지 않기 때문에 의도하지 않은 문제를 일으킬 수 있다.










with 문



많은 참조를 하나의 오브젝트로 줄여 자바스크립트 문장 타입을 하나의 참조로 단순화 시킨다.

with 블록 내부 속성과 메소드의 참조는 그 오브젝트에 적용된다고 가정한다. 





string str = "The quick brown fox jumps over the lazy dog"



with( str )

{

document.write(" The str is " + length + "characters<br />");

document.write(" In upper case it's : " + toUpperCase());

}



str이 documnet.write에 의해서 한 번도 참조 된 적은 없지만

이 코드는 다음과 같이 출력한다.


The str is 43 characters

Inupper case it's : THE QUICK BROWN FOX JUMP SOVER THE LAZY DOG 













continue 문


가끔 루프에서 완전히 나가지 않고, 현재 루프의 나머지 문장만 건너뛰게 하고 싶을 수도 있다.


<script>

haystack = new Array();

haystack[4] = "Needle";

haystack[11] = "Needle";

haystack[17] = "Needle";



for( j=0; j<20; ++j )

if( haystack[ j ] == "Needle" )

{

document.write( "<br />- Found at location " + j " <br />");

continue;

}


document.write( j + "," );


}




< 출력 >

0, 1, 2, 3, 

- Found at location 4 

5,6,7,8,9,10

- Found at location 11

12,13,14,15,16

- Found at location 17

18,19,
















형변환



int로 변환 : parseInt();

Bool, boolean 로 변환 : Boolean();

Float, Double, Real 로 변환 : parseFloat();

String 로 변환 : String();

Array 로 변환 : split();





 








Return 구문



자바스크립트에서 return문장을 만나면 함수의 실행을 중단하고 원래 함수를 호출했던 code 다음 코드로 돌아가게 됨...









function 함수 



함수 이름은 대소문자를 구분

getInput

GETINPUT

getinput은 모두 다른 함수



근데 함수 이름을 이렇게 대소문자로 구분하는 사람은 보통 없겠지....



자바스크립트에는 함수에 대한 일반적인 이름규칙이 있다.

함수 이름 내 단어에 첫 문자는 대문자를 사용하지만 이름자체의 제일 처음 문자는 소문자를 사용한다.


function getInput() {} 




규칙은 일반적으로 bumpyCaps라고 부른다.








displayItem( "Dog" , "Cat", "Pony", "Hamster", "Tortoise" );




function dispayItem( v1, v2, v3, v4, v5 )

{

document.write( v1 + "<br />");

document.write( v2 + "<br />");

document.write( v3 + "<br />");

document.write( v4 + "<br />");

document.write( v5 + "<br />");


}



위의 함수를 arguments 매개변수의 수를 담는 배열을 이용하여 아래와 같이 변환할수 있다.





function displayItems()

{

for( j = 0; j< displayItem.arguments.length ; ++j )

document.write( displayItem.argument[j] + <br />")

}












문자열관련 함수 



charAt(0).toUpperCase(); 

substr(1).toLowerCase();



charAt( 0 ) :  첫 번째 문자를 구분

toUpperCase( ) : 이용해 대문자로 바꿈

toLowerCase( ) : 소문자로 변경 




substr(1) : 첫번째 문자를 제외한 나머지 문자열

















prototype 키워드


function User( forename, username, password)  // 생성자 메소드

{

this.forename = forename;

this.username = username;

this.password = password;



this.showUser = function ()

{



}

}






userInfo = new User();


prototype 키워드는 메모리를 많이 절약한다. 

클래스 내의 메소드는 모든 경우에 동일하기 때문에 새로운 클래스가 인스턴스를 생성하는 대신에 

하나의 메소드인스턴스를 참조하게 명시한다. 


this.showUser = function()



위와같이 클래스 생성자를 사용하는 대신 아래처럼 교체한다.



User.prototype.showUser = function();





<script>


function User( forename, username, password)

{

this.forename = forename;

this.username = username;

this.password = password;

this.showUser = showUser;



User.prototype.showUwer = function()

{



}


}