[Day20 | JavaScript] Function, Object

PlayData/WebUI

[Day20 | JavaScript] Function, Object

김유니콘 2021. 12. 8. 16:15

자바스크립트는 허접한 언어에서 시작되었다!

Type01.html

각 변수의 타입을 알아보자

<html>
    <body>
        <script>

            var a = 10; 
            var b = true; 
            var c = "Korea";
            var d = function() { } ;
            var e = { } ;
            var z; // undefined ==> null 
    

            alert(a + "," + typeof(a)); //number
            alert(b + "," + typeof(b)); //boolean
            alert(c + "," + typeof(c)); //string
            alert(d + "," + typeof(d)); //function
            alert(e + "," + typeof(e)); //object
            alert(z + "," + typeof(z));

        </script>
    </body>
</html>

Op02.html

파일이 html이면 파일 내 굳이 안써주고 스크립트만 써줘도 실행 가능

왜 아래의 코드에서 i++이 10이 나오는지 이해하면 됨

<script>
    var i = 10; 
    alert(i++); // i++ 이 10이 나오는 이유를 이해하면 됨 

    var s = '';
    s += 'Korea';
    s += '!!';
    s += '화이팅';

    alert(s);

</script>

prompt01.html

<script>
    var a = prompt('입력사항', '아름을 입력해주세요'); //홍길동'; 
    alert(a + '님, 어서오세요!')

    var b = confirm('확인하셨어요?');
    alert(b);
</script>

Quiz

점수를 입력받아서

90점 이상이면 우수

80점 이상이면 보통

70점 이상이면 부족 을 출력하시오

(promt, alert 사용)

<html>
    <body>
        <script>
            // 점수를 입력받아서 90점 이상이면 우수 / 80범 이상이면 보토 / 70점 이상이면 부족 
            var a = prompt('점수를 입력하세요', '점수 입력란'); 
            
            if (a >= 90) {
                alert("우수");
            } else if (a >= 80) {
                alert("보통");
            } else if (a >= 70) {
                alert("부족");
            } else {alert("낙제")} ;      
            
        </script>
    </body>
</html>

Arr03.html

다 다른 타입도 한 리스트 안에 들어갈 수 있다.

<script>
    var a = ['Hello', 10, true, function() {}, {}, 'Hi'];

    for (var i in a ){
        alert(a[i]);
    }
</script>

Function

Func01.html

결과는 아래와 같이 나옴

a는 function 부터 쭉 다 가지고 있음을 알 수 있음

익명함수

약점: 변수로 지정되므로, 나중에 재할당될 수 있음

<script>
    var a = function(){
        alert('Func01');
        alert('익명함수입니다.');
    }
    a();
    alert(a+' -> ' + typeof(a)); 
</script>

선언적 함수

<script>
    function b() {
        alert('b 함수는');
        alert('선언적 함수입니다.')
    }
    b();
    alert(b + '-> ' + typeof(b));
</script>

a와 b의 차이는 이름이 있느냐, 없느냐의 차이

교차된지 모르고,

익명함수에서 중복되서 변수가 사용되면

덮어씌여진다.

<script>
    var a = function() {
        alert('AAAA');
    }
    a();
    alert('--정상실행');
    var a = function(){
        alert("BBBB");
    }

    a();
</script>

선언적 함수는 최종적인 것만 메모리에 올라간다

익명함수는 변수에 할당하고 재할당이 가능하다.

<script>
    function c() {
         alert('CCCC');
    }

    function c() {
         alert('DDDD'); // 선언적 함수는 최종적인 것만 메모리에 올라간다
    }
    c();
    var a = function() {
        alert('AAAA'); // 익명함수는 변수에 할당하고 재할당이 가능하다. 
    }
    a();
    alert('--정상실행');
    var a = function(){
        alert("BBBB");
    }

    a();
</script>

이너함수를 구성할 수 있고,

밖에 함수를 정의한다고 해도

영향을 미치지 않는다.

Func05.html

<script>
    function func(i, j){
        function pow(k){return(k * k);}
        function sum(a, b){return(a+b);}

        return sum(pow(i), pow(j));
    }

    function pow(k){
        return (k + 1000);
    }

    alert(func(3,4));
    alert(func(2,7));

</script>

Func06.html

callBack 함수

계속 돌고있는 함수에 입력할 수 있는 단자가 있는 것.

ex) 자동 세차장으로 생각하면 됨. A차, B차, C차

<script>
    
    function callBack01(z){
        for( var i = 0; i<3 ; i++){
            z();
        }
    }


    var a = function() { alert(" AAAA ");}
    var b = function() { alert(" BBBB ");}
    var c = function() { alert(" CCCC ");}

    callBack01(a);
    callBack01(b);
    callBack01(c);
    
//////////////////////////////////////////////

    function callBack02(z, n){
        for( var i = 0; i<n ; i++){
            z();
        }
    }


    callBack02(a, 2);
    callBack02(b, 4);
    callBack02(c, 5);

</script>

Object.html

<script>
    // Array 생성
    var a = ['사과', '바나나', '귤', '포도'];
    alert(a);
    alert(typeof(a)); // Object - Arraylist
    alert(a[1]);// 바나나를 출력하려고 한다


    // 객체를 생성
    var book = {title: 'Java',
                author: 'Tom',
                price: 40000,
                bPrint: function() { 
                    alert(this.title + ', ' + this.author + ', ' + this.price); 
                }              
    }

               
    alert(book);
    alert(typeof(book)); // Object - Arraylist
    alert(book['author']);
    book.bPrint();
    book['bPrint']();//권장하지 않음
</script>

object02.html

<script>
    var book = { } // 빈 book object 
    
    book.title = 'HTML'; // book object 의 속성 추가 
    book.['author'] = 'Jane';
    book.getTitle = function(){ return this.title;} // book object 의 메소드 추가 
    book['getAuthor'] = function() {return this.author} 
    book.pBook = function() {alert(this.author); }

    alert(typeof(book));
    alert(book['title']);
    alert(book.author);

    alert(book.getTitle());
    alert(book.getAuthor());

    book.pBook();

</script>

Object03.html

1. 자바스크립트의 오브젝트는 파이썬의 딕셔너리처럼 사용 가능, 또는 자바의 클래스처럼 사용 가능.

2. 속성 정보에 한글을 써도 괜찮다!

3. 함수 쓸 때 this.라는 객체를 이렇게도 이용할 수 있겠다!

<script>
    var dict = {
        '사과' : 'apple',
        '바나나' : 'banana',
        '포도': 'grape',
        '강': 'river',
        '물': 'water'
    }
    
    alert(typeof(dict));
   
    dict.toString = function() {
        var output = '';

        for (var k in this) {
            if (k != 'toString'){
                output += k + ' : ' + this[k] +'\n';
            }
            
        }

        return output;
        //return (this.사과 + this.바나나 + this.포도 + this.강 + this.물);
    }

    // dict.toString = function() { 
    //                 return (this.사과 + this.바나나 + this.포도+ this.강+ this.물);
    //             }   
    
    // delete(dict.강);
    alert(dict.toString());
</script>

얘도 쉽지않네

악!

저작자표시 비영리 변경금지

'PlayData > WebUI' 카테고리의 다른 글

[Day 19 \| WebUI] CSS, JavaScript, 과제(호이스팅, 자바스크립트 함수) (0)	2021.12.07
[Day 18 \| Web] Media Tag , 기타 태그, CSS(업데이트 필요) (0)	2021.12.06
[Day 19 \| Web] HTML(특히 Table tag 위주) (0)	2021.12.03

현재글[Day20 | JavaScript] Function, Object

Be prepared to accept an exciting opportunity in the future 🚀 미디어와 데이터에 관심이 많습니다

🦄