'Computer/javascript(모던 참고)'에 해당되는 글 5건

  1. 2013.05.23 함수
  2. 2013.05.23 반복문
  3. 2013.05.23 조건문
  4. 2013.05.23 자바스크립트 기본
  5. 2013.05.23 들어가기 전에
2013. 5. 23. 20:58

함수 호출의 기본 예제

<script>
var 함수 = function(){
 var output = prompt('숫자를 입력해주세요.', '숫자');
 alert(output);
 
};
함수();
</script>

 

매개변수의 개수가 맞지 않을때의 예제

<script>
alert('원래 매개 변수 입니다.', '추가된 매개 변숭입니다');
prompt('원래 매개 변수입니다.'/*, '추가된 매개변수 입니다.'*/);
</script>

 

가변 인자 함수 예제

<script>
function sumAll(){
 var willReturn = 0;
 for(var i in arguments){   //for(var i = 0; i<arguments.length; i++)
  willReturn += arguments[i];
 }
 return willReturn;
}
alert(sumAll(1,2,3,4,5,6,7,8,9));  //arguments인 1부터 9까지 더해져서 결과가 45가 나옴
</script>

 

결과

45

 

리턴이 없을 때 예제

<script>
function returnTest(){
 alert('문장 A');
 return;
 alert('문장 B');
}
var value = returnTest();
alert(typeof (value)+' : '+value);
</script>

 

결과

 

 

 

익명 함수를 매개 변수로 전달하는 예제

<script>
function callFunctionTenTimes(otherFunction){
 for (var i = 0; i < 10; i++){
  otherFunction();
 }
}
callFunctionTenTimes(function(){
 alert('Hello World..!');
});
</script>

 

결과

Hello World..!를 10번 호출

 

선언적 함수를 매개 변수로 전달하는 예제

<script>
function callFunctionTenTimes(otherFunction){
 for(var i = 0; i<10; i++){
  otherFunction();
 }
}
function justFunction(){
 alert('Hello World..!');
}
callFunctionTenTimes(justFunction);
</script>

 

결과

Hello World..!를 10번 호출

 

익명 함수를 리턴하는 함수 예제

<script>
function outerFunction(){
 return function(){
  alert('Hello World .. !');
 };
}
outerFunction()();
</script>

 

결과

Hello World .. ! 1번 출력

 

 

클로저의 정의

: 지역 변수를 남겨두는 현상

: 함수 outerFunction() 내부의 변수들이 살아있는 것이므로 outerFunctino()으로 인해 생성된 공간

: 리턴되는 함수 자체

: 살아남은 지역 변수

 

클로저의 특성

: 자바스크립트 스스로 아직 지역 변수를 지우면 안된다는 것을 인식하고 남겨두는 특성을 지님

 

예제

<script>
function outerFunction(name){
 var output = 'Hello '+ name + '..!';
 return function(){
  alert(output);
 };
}
outerFunction('RintIanTta')();
</script>

 

결과

Hello RintIanTta

 

예제

<script>
function outerFunction(name){
 var output = 'Hello '+name+'..!';
 return function(){
  return output;
 };
}

var first = outerFunction('JavaScripot');
var second = outerFunction('jQuery');

alert(first());
alert(second());
</script>

 

결과

 

 

 

 

자바스크립트의 내장 함수

 

인코딩과 디코딩

인코딩은 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법

디코딩은 부호화된 문자를 원래대로 되돌리는 것

 

http://search.naver.com/search.naver?where=nexearch&query=%EC%9D%B8%EC%BD%94%A9&x=0&sm=top_hty&fbm=1&ie=utf8

이중에서 인코딩이 된 문자열이 EC%9D%B8%EC%BD%94%A9

 

자바스크립트의 인코딩, 디코딩과 관련된 내장 함수

escape()                                                 적절한 정도로 인코딩한다.

unescape()                                             적절한 정도로 디코딩한다.

encodeURI(uri)                                        최소한의 문자만 인코딩한다.

decodeURI(encodedURI)                           최소한의 문자만 디코딩한다.

encodeURIComponent(uriComponent)         대부분의 문자를 인코딩한다.

decodeURIComponent(encodedURI)           대부분의 문자를 디코딩한다.

 

참고

escape()

: 영문 알파벳, 숫자, 일부 특수문자를 제외한 모든 문자를 인코딩

: 1바이트 문자는 %XX의 형태로, 2바이트 문자는 %uXXXX의 형태로 변환

encodeURI()

: escape() 함수에서 인터넷 주소에 사용되는 일부 특수문자는 변환하지 않는다.

encodeURIComponent()

: 알파벳과 숫자를 제외한 모든 문자를 인코딩

: UTF-8 인코딩과 같다.

 

예제

<script>
var URI = 'http://tmsy.tistory.com?test=한글입니다.';

var output = ' ';
output += '★secape()\n'
output += escape(URI) + '\n\n';
output += '★encodeURI()\n'
output += encodeURI(URI) + '\n\n';
output += '★encodeURIComponont()\n'
output += encodeURIComponent(URI)+'\n\n';

alert(output);
</script>

 

결과

 

 

자바스크립트의 기본 내장 함수

함수명                            설명

eval(string)                     string을 자바스크립트 코드로 실행

isFinite(number)              number가 무한한 값인지 확인

inNaN(number)                number가 NaN인지 확인

parseInt(string)                string을 정수로 바꿈

parseFloat(string)            string을 유리수로 바꿈

 

eval()함수

: 문자열을 자바스크립트 코드로 변환해 실행하는 함수

 

예제

<script>
var willEval = '';
willEval += 'var number = 10;';
willEval += 'alert(number);';

eval(willEval);
alert(number);
</script>

 

 

결과

10

 

Infinity와 NaN 예제

<script>
var number1 = 10/0;
var number2 = 10/'a';
alert(number1 + ' : '+number2);
</script>

 

결과

 

Infinity : 숫자를 0으로 나뉘면 들어감

NaN : 숫자이지만 자바스크립트가 표현할 수 없는 숫자

 

 

Infinity와 NaN 확장 예제

<script>
var number1 = 10/0;
var number2 = 10/'a';
alert(alert(isFinite(number1)) + ' : '+isNaN(number2));
</script>

 

결과

 

 

 

isFinite : 유한한 수이면 true

isNaN : isNaN이면 true

 

 

parseInt()함수와 parseFloat()함수 예제

<script>
var won = '1000원';
var dollar = '1.5$';
alert(parseInt(won) + ' : '+ parseInt(dollar));
alert(parseFloat(won) + ' : ' + parseFloat(dollar));
</script>

Posted by CaD
2013. 5. 23. 16:14

while문

 

예제

<script>
var value = 0;
while (value < 5){
 alert(value+'번째 반복');
 value++;
}
</script>

 

결과

0~4번째 반복창이 뜬다.

 

 

do ~ while문

 

예제

<script>
var value = 0;

do{
 alert(value + '번째 반복문');
 value++;
} while(value < 5)
</script>

 

결과

0~4번째 반복창이 뜬다.

 

 

for문

 

예제

<script>
for(var value = 0; value < 5; value++){
 alert(value + '번째 반복문');
}
</script>

 

결과

0~4번째 반복창이 뜬다.

 

예제

<script>
var array = ['포도', '사과', '바나나', '망고'];
for (var i = array.length -1; i >=0; i--){
 alert(array[i]);
}
</script>

 

결과

역으로 망고부터 차례대로 뜬다.

 

 

for in문

for (var i in array){

}

for (var i = 0; i<array.length; i++){

}

과 같다.

 

 

피라미드 만들기 예제

 

결과화면

 

 

소스

<script>
var output = ' ';

for (var i = 0; i < 15; i++){
 for (var j = 15; j > i; j--){
  output += ' ';
 }
 for (var k = 0; k < 2 * i -1; k++){
  output += '*';
 }
 output += '\n';
}

alert(output);
</script>

 

 

break사용 예제

<script>
for (var i = 0; true; i++){
 alert(i + '번째 반복문입니다.');
 if(!confirm('계속하시겠습니까?')){
  //실행시 취소를 누를 때 false가 난다. alert('false');
  break;    //반복문을 빠져나간다.
 }
}
alert('프로그램 종료');
</script>

 

 

continue사용 예제

<script>
var output = 0;

for(var i = 1; i<= 10; i++){
 if(i%2 == 1){
  continue;    //반복문으로 돌아간다.
 }
 output +=i;
}
alert(output);
</script>

Posted by CaD
2013. 5. 23. 15:05

if ~ else문

예제

<script>
var date = new Date();
var hour = date.getHours();

if(hour <11){
 alert('아침 먹을 시간입니다.');
} else if(hour < 15){
 alert('점심 먹을 시간입니다.');
} else {
 alert('저녁 먹을 시간입니다.');
}
</script>

 

결과

시간에 따라 다름

 

 

응용 예제

<script>
var score = prompt('학점을 입력하세요.', '학점');

if(4.0 < score && score < 4.5){
 alert('논리 연산자를 사용해보았습니다.');
}
</script>

 

결과

4.0보다 크고 4.5보다 작으면 논리 연산자를 사용해보았습니다. 라는 메시지가 뜬다.

 

 

switch ~ case문

 

예제

<script>
var input = Number(prompt('숫자를 입력하세요', '숫자'));
switch(input % 2){
case 0:
 alert('짝수 입니다.');
 break;
case 1:
 alert('홀수 입니다.');
 break;
 default:
  alert('숫자가 아닙니다.');
 break;
}
</script>

 

 

삼항 연산자

 

예제

<script>
var input = prompt('숫자를 입력해주세요.', '');
var number = Number(input);
(number > 0) ? alert('숫자입니다.') : alert('숫자가 아닙니다.');
</script>

 

짧은 조건문

자바스크립트는 참이 확실할 때 추가 연산을 진행하지 않는다.

 

예제

<script>
true || alert('ok?');
false || alert('no?');
</script>

 

결과

no?(경고창)

 

이유

true는 추가 연산을 하지 않았다

 

예제

<script>
var input = Number(prompt('숫자를 입력해 주세요', '숫자'));
input % 2 == 0 || alert('홀수 입니다.');
input % 2 == 0 && alert('짝수 입니다.');
</script>

 

Posted by CaD
2013. 5. 23. 13:23

잘못된 비교 연산자의 사용

alert(30>20>10);

결과는

false

이유는

alert(30>20>10);

|

alert(true>10);

|

alert(1>10);

|

alert(false);

 

올바른 비교 연산자의 사용

alert(30>20 && 20>10);

결과는

true

이유는

alert(30>20 && 20>10);

|

alert(true && true);

|

alert(true);

 

 

변수

 

<script>

//변수를 선언

var pi;

//변수에 값을 할당

pi = 3.14159265

</script>

 

<script>

//변수를 선언하고 초기화

var pi = 3.14159265;

 

//출력

alert(pi);

</script>

 

증감 연산자

전위형

++변수, --변수

 

후위형

변수++, 변수--

 

예제

<script>

var number = 10;

alert(number++);

alert(++number);

alert(number--);

alert(--number);

</script>

 

결과

10,12,12,10

 

예제

<script>
var number = 10;
alert(number);
number++;
number++;
alert(number);
alert(number);
number--;
number--;
alert(number);
</script>

 

결과

10,12,12,10

 

 

자료형 검사

<script>
alert(typeof ('String'));            
alert(typeof(234));                  
alert(typeof(true));                 
alert(typeof(function(){}));       
alert(typeof({}));                    
alert(typeof(alpha));               
</script>

 

결과

String, Number, boolean, function, Object, Undefined

Undefined은 선언되지 않은 자료형을 의미

 

 

입력

입력함수

<script>
var input = prompt('Message', 'DefStr');
alert(input);
</script>

 

결과

 

 

블리엇 입력함수

<script>
var input = confirm('수락하시겠습니까?');
alert(input);
</script>

 

결과

 

 

 

 

숫자와 문자열 자료형 변환

 

예제

<script>
alert('52+273');
alert(52+273);
alert('52'+273);
alert('52'+'273');
</script>

 

결과

52+273, 325, 52273, 52273

 

이유

연산자의 우선순위가 +보다 문자를 더 우선시 하기 때문

 

예제

<script>
alert('52*273');
alert(52*273);
alert('52'*273);
alert('52'*'273');
</script>

 

결과

52*273, 14196, 14196, 14196

 

이유

*연산자가 문자보다 높다

 

 

숫자 입력

//문자를 입력받는다

<script>
var input = prompt('숫자를 입력해 주세요.', '숫자');

alert(typeof (input));
</script>

 

//숫자를 입력받는다.

<script>
var input = prompt('숫자를 입력해 주세요.', '숫자');
var numberInput = Number(input);

alert(typeof (numberInput)+ ': ' + numberInput);
</script>

 

불리언 자료형 변환

 

예제

<script>
alert(Boolean(0));
alert(Boolean(NaN));
alert(Boolean(''));
alert(Boolean(null));
alert(Boolean(undefined));
</script>

 

결과

전부 true

 

예제

<script>
alert('' == false);
alert('' == 0);
alert(0 == false);
alert('273' == 273);
</script>

 

결과

전부 true

 

이유

자동으로 자료형이 반환되기 때문에

 

 

일치 연산자

 

===    :    양변의 자료형과 값이 일치

!==     :    양 변의 자료형과 값이 다름

Posted by CaD
2013. 5. 23. 10:48

애플리케이션에 따른 자바스크립트의 종류

 

모질라 파이어폭스                       자바스크립트

구글 크롬                                   자바스크립트

인터넷 익스플로러                       Jscript

오페라                                       ECMAScript

애플 사파리                                자바스크립트

마이크로소프트 닷넷 프로엠워크    JScript.NET

어도비 플래시와 플렉스                액션스크립트

어도비 아크로벳                          자바스크립트

 

 

식별자

 

규칙

키워드를 사용하면 안 된다.

숫자로 시작하면 안 된다.

특수 문자는 _와$만 허용

공백 문자를 포함할 수 없다.

 

개발자간의 식별자 사용 규칙

생성자 함수의 이름은 항상 대문자로 시작한다.

변수, 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작한다.

여러 단어로 이뤄진 식별자는 각 단어의 첫 글자를 대문자로 한다.

 

자바스크립트 식별자의 종류

구분                                단독으로 사용                            다른 식별자와 함께 사용

식별자 뒤에 괄호 없음        변수                                         속성

식별자 뒤에 괄호 있음        함수                                         메서드

 

예시

alert('Hello World')                 함수

Array.length                          속성

input                                    변수

propmt('Message', 'Defstr')    함수

Math.PI                                속성

Math.abs(-273)                     메서드

 

주석

<!-- 주석 -->

// 한줄 주석

/*

여러줄

주석

*/

 

Posted by CaD