230920 #002 상속 / 내장함수 및 객체

a + b + c + (d + e)

* / - "33"

"a"*33 --> NaN

Infinity 엄청 긴 숫자, 허수 / 0 isFinite(aaa)

null var val1 = null;

undefined var val2

 

참인 Obj

거짓인 Obj: Infinity, null, undefined, 0, "", ''(String상태이지만 비어있어);

 

var btn = document.querySelector("button");
if (btn) {
	btn.value = "gooood";
    element를 찾으면 참, 못찾으면 거짓.
 	}

 

callback

- js 아날로그 시계 가능

- 지구 공전 모형

---

상속

상속 방법 1: 실수

 

상속 방법1: 제대로

 

상속 방법2

 

 

JSON 객체

//JSON 객체 
    var strBill = JSON.stringify(bill); // var bill을 JSON형태로 만드는 명령어
    console.log(strBill);
    var billAgain = JSON.parse(strBill); // 다시 var형태로,,,,
    console.log(billAgain);


    // call back function
    function add(num1, num2, callback){
        var result;
        result = num1 + num2;
        callback(result);
    }
    function print1(result){
        alert("두 수의 합은 " + result + "입니다.");
    }
    function print2(result){
        document.write("결과는 " + result + "입니다.");
    }
    add(10, 20, print1);
    add(10, 20, print2);
    //이거 안하면
    print1(sum(10,20));
    //이렇게 써야하는데, 식이 복잡해지면 callback f(x)가 소중해질듯?

 

callback

 

왜 하는거야 이거?

더하는 작업과 뿌리는 작업까지 일련의 행동들을 한 번에 실행,,,

 

 

---

자바스트립트 내장함수 및 객체

1. 타이머 함수

function hello(){
        console.log("hello");
    }
    //방식 1
    var v1 = setInterval(function() {
        console.log("함수 만들면서 콜백지정");
    }
    , 2000);
    //방식 2
    var v2 = setInterval(hello, 1000);
    console.log(v1);
    console.log(v2);

//멈추기
    
    clearInterval(v1);
    clearInterval(v2);

    var timerID = setInterval(hello, 3000);

2. Math Class

// Math Class

    Math.abs([]); // 0
    Math.abs([2]); // 2
    Math.abs([1,2]); // NaN
    Math.abs({}) // NaN

    var value = Math.random(); //괄호 확실히 쳐야 출력된다.
    console.log(value);

    //1초마다 50~100사이의 난수를 출력
    setInterval(function(){
       document.write(parseInt(Math.random()*50) + 50 +"<br>");
    }
    , 1000)
    
    //첫 번째 50은 경우의 수, 두 번째 50은 최솟값을 의미한다.
    //여기서 경우의 수는 최대값 - 최소값, 최대값은 포함되지 않는다.



    //작은 값, 큰 값 알아내기
    var min = Math.min(23, 56);
    document.write(min);
    var max = Math.max(512, 42445);
    document.write(max)
    //cash가 다 사라지네?

3. String Class **

parameter 뭐가 들어가는 지 정도는 알고 있자

 

문자열 생성하기 **

literal

//literal
        var str1 = "Hi";

 

String object 

//String Obj
        var str2 = new String("Hi");

 

문자열 추출 함수

 

 

4. Date Class

//Date Class
        //실시간 시간 표시
        function day(){
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth();
            var date = d.getDate();
            var day = d.getDay();
            var hour = d.getHours();
            var min = d.getMinutes();
            var sec = d.getSeconds();

            var daystr;
            switch(day){
                case 0: daystr = "일";
                    break;
                case 1: daystr = "월";
                    break;
                case 2: daystr = "화";
                    break;
                case 3: daystr = "수";
                    break;
                case 4: daystr = "목";
                    break;
                case 5: daystr = "금";
                    break;
                case 6: daystr = "토";
                    break;
            }
            
             return   year + "년 " + month + "월 " + date + "일 " + daystr + "요일, " + hour + "시 "+ min + "분 " + sec + "초";
            //여기 무조건 리턴으로 해놓는게 좋겠네.

        }
        setInterval(function(){
            document.body.innerHTML = day();
        }, 1000);

 

        function Time(){
        var d = new Date();
        var hour = d.getHours();
        var min = d.getMinutes();
        var sec = d.getSeconds();
    
        hour = (hour>9?"":"0")+hour;
        min = (min>9?"":"0")+min;
        sec = (sec>9?"":"0")+sec;
    
        return hour + ":" + min + ":" + sec;
        }
    
        setInterval(function(){
            document.body.innerHTML = Time();}
            ,1000);

 

5. Array Class

  //특정 문자 index 구하기, 있으면 > index / 없으면 > -1
        console.log('LouisVuitton'.indexOf('ui', 3));
        console.log('MaisonMargiela_메zong마르지엘라'.indexOf('giela', 5));
        console.log('MaisonMargiela_메zong마르지엘라'.indexOf('종', 7));
        console.log('MaisonMargiela_메zong마르지엘라'.indexOf(''));
        console.log('MaisonMargiela_메zong마르지엘라'.indexOf('', 9)); 
        console.log('MaisonMargiela_메zong마르지엘라'.indexOf('', 10));
        console.log('MaisonMargiela_메zong마르지엘라'.indexOf('', 27)); // 총길이가 17인가봐, 그래서 17 이상은 다 17로 뜬다.
        
        var MM = "MaisonMargiela_메zong마르지엘라";
        console.log('----------');
        console.log(MM.length);
        console.log('MaisonMargiela_메zong마르지엘라'.lastIndexOf('메')); // 이건 구조가 어떻게 되어있는건지 모르겠네
        

        //문자열을 지정한 구분자로 쪼개어 배열로 돌려받기
        function splitString(str, [separtor]){
            var strArr = str.split(separtor);
            return strArr;
        }

        var str1 = "2010, 2011, 2012, 2013, 2014, 2015";
        strArr1 = str1.split(",");
        console.log("["+ strArr1 +"]");

        //문자열에서 지정한 범위 뽑아내기
        var namest = "가나다라마바사";
        var subst1 = namest.substring(0,4);
        var subst2 = namest.substring(4,7);
        console.log(namest.length); // 7개네,,, 흠,,,
        console.log(subst1);
        console.log(subst2);

결과 console

새로운 것

join()

slice()

splice()

 

6. Object Class

 

생성

//Object Class
        var obj = {
            x : "x's value",
            "y" : "y's value", //큰 따옴표가 있든, 없든 key는 String으로 저장되는듯?
            z : function(){
                return "z is a function";
            },
            //var x로 넣으면 지역 변수로 여기 안에서만 쓸 수 있게 한정된다.
        }
        console.log(obj.z); // 이건 들어가 있는 그 자체를 뽑아내고
        console.log(obj["z"]()); // 이건 return값을 뽑아낸다.

        console.log(obj.y);
        console.log(obj.x);

        console.log(obj["y"]);
        console.log(obj["x"]);

        //undefined 출력될 때 출력값 변경
        var x;
        console.log(x); //지금은 undefined
        var xx = x||"값을 확인할 수 없습니다.";
        var v = obj.b||"값을 확인할 수 없습니다.";
        console.log(v);
        console.log(xx);

 

생성 - 출력 결과 1

 

생성 - 출력 결과 2

추가

  //추가
        obj.b = "I just added b in obj";
        console.log(obj);

//object 형태 추가
	obj.add = {newAttr: "새로운 object형태 추가"};

 

삭제

   //삭제
        delete obj.a;
        console.log(obj);

b가 추가됐을 때

 

a가 삭제됐을 때

 

전달

 //전달
        var obj2 = obj; //참조값이 전달, 새로운 객체 생성은 되지 않는다. > 결국 '주소'를 공유한다는 말이 된다.
        //그래서 둘 중 어느 하나의 참조값을 바꿔도 다른 하나도 변경되게 된다.
        //새로운 객체가 생성됐으면, 독립적으로 edit할 수 있을텐데, 여기는 그게 안된다.
       
        console.log(obj2);

        obj.b = "I changed b";
        console.log(obj.b);

 

다 변해버렸다

JAVA에선 새로운 객체가 생성되는 복사는 clone.

//객체참조 테스트
        var a = {}, b = {}, c = {};
        //a,b,c는 각각 다른 빈 객체 참조.
        a = b = c = {};
        //a,b,c는 모두 같은 빈 객체 참조.

 

---

자바스크립트 브라우져 객체 모델(BOM)

BOM(Browser Object Model)

GUI와 연관

 

window obj

> 크롬에선 안걸리나보네 크기 말고,,,

first parameter

sencond parameter

third parameter

 

 

location obj **

navigator obj

history obj **

screen obj

document obj **

 

DOM(Document Object Model)