본문 바로가기
카테고리 없음

자바스크립트 실습

by jaekk 2018. 7. 1.

실습 

 1. 콜백

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    /*함수 선언*/
    function callTenTimes(callback){
        /*10회 반복*/
        for(var i = 0;i<10;i++){
            /*매개변수로 전달된 함수 호출*/
            callback();
        }
    }
    
    /*변수 선언*/
    var callback = function(){
        alert('함수 호출');
    }
    
    /*함수 호출*/
    callTenTimes(callback);
cs
 매개 변수로 전달하는 함수

 2. 타이머 함수

 
1
2
3
4
5
6
7
8
9
10
    /*1초마다 함수 실행*/
    var intervalID = setInterval(function (){
        alert('<p>'+new Date()+'<p>');
    },1000);
    
    /*10초 후 함수 실행*/
    setTimeout(function (){
        /*타이머 종료*/
        clearInterval(intervalID)
    },10000);
cs
 

 3, 코드 실행 함수

 
1
2
3
4
5
6
7
    /*문자열 생성*/
    var willEval = '';
    willEval += 'var number=10;';
    willEval += 'alert(number);';
    
    /*eval()함수 호출*/
    eval(willEval);
cs

 4. 무한대 확인 함수

 
1
2
3
    /*무한대 확인 함수:isFinite()*/
    var number = 1/0;
    alert(number+':'+isFinite(number));
cs

 5. isNan()

 
1
2
3
4
5
6
    /*숫자 확인 함수 - NaN 확인시 isNan() 사용*/
    if(NaN == NaN){
        alerT('NaN == NaN');
    }else{
        alert('NaN != NaN');
    }
cs

 NaN 확인 시 사용

 6. 숫자 확인 함수 

 1. Number() 

 2. parseInt()
 3. parseFloat()
 
1
2
3
4
5
6
7
8
    /*Number(): 숫자 변환 불가시 NaN 반환*/
    var won ='1000원';
    var dollar = '1.5$';
    alert(Number(won) + ':' +Number(dollar));
    
    /*parseInt(string): 변환할 수 있는 부분까지 숫자 반환*/
    alert(parseInt(won)+':'+parseInt(dollar));
    alert(parseFloat(won)+':'+parseFloat(dollar));
cs

 7. 객체

 
1
2
3
4
5
6
7
8
9
    /*변수 선언*/
    var product = {
        제품명:'7D 건조 망고',
        유형: '당절임',
        성분 : '망고, 설탕, 메타중아황산나트륨, 치자황색소',
        원산지: '필리핀'
    };
    
    alert(product.원산지);
cs

 8. 식별자가 아닌 키 

      대괄호 사용

 
1
2
3
4
5
6
7
    /*변수 선언*/
    var object = {
        'with space':273,
        'with ~!@#$%^':52
    };
    
    alert(object["with ~!@#$%^"]);
cs

 9. this:

     자기 자신의 

     속성을 표시

 
1
2
3
4
5
6
7
8
9
10
    /*변수 선언*/
    var person={
        name:'윤인성',
        eat:function(food){
            alert(this.name + '이 '+ food+'을/를 먹습니다.');
        }
    };
    
    /*메서드 호출*/
    person.eat('(밥)');
cs

 10. 속성 살펴보기

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    /*변수 선언*/
    var product = {
        name:'Microsoft Visual Studio 2012 Ultimate',
        price : '15,000,000원',
        language: '한국어',
        supportOS:'Win32/64',
        subscription:true
    };
    
    /*출력*/
    var output = '';
    for(var key in product){
        output+=key+':' + product[key]+'\n';
    }
    alert(output);
cs
 

 11. in키워드

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    /*변수 선언*/
    var output='';
    var student = {
        이름:'연하진',
        국어:92, 수학:98,
        영어:96, 과학:98
    };
    
    /*in 키워드 사용*/
    output += "'이름' in student: "+('이름' in student)+'\n';
    output += "'성별' in student: "+('성별' in student)+'\n';
    
    /*출력*/
    alert(output);
cs
 

  객체의 속성 존재 체크

 12. 속성 삽입 추가

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  /*변수 선언*/
    var student = {};
    
    /*객체에 속성 추가*/
    student.이름 = '윤인성';
    student.취미 = '악기';
    student.특기 = '프로그래밍';
    student.장래희망 = '생명공학자';
    
    /*toString() 메서드 생성*/
    student.toString = function(){
        var output='';
        for(var key in this){
            /*toString()메서드는 출력하지 않게*/
            if(key!='toString'){
                output+=key+'\t'+this[key]+'\n';
            }
        }
        
        return output;
    }
    
    /*출력*/
    alert(student.toString());
cs
 
  
  
  
  
  
  
  


저작자표시 비영리 변경금지 (새창열림)

댓글

티스토리툴바