051020 JavaScript 정리

-1를 return하는 경우 확인!

-1 = 찾지 못할 경우 나타나는 값

 

 

문제해결시나리오

1. 중첩함수 (선언하지 않고 담는거)

---

2. 변수에 함수 넣기

var btnClickHandler = function (e){ // event 관련 정보를 매개변수로 받는다.
            var cx = e.clientX;
            var cy = e.clientY;
            var keycode = e.keyCode;
            var target = e.target;
            alert(target.id + "버튼을 클릭하셨습니다." + " keycode: " + keycode+", " + cx + " : " + cy);

            for (var v in e){
                //key, index를 가지고 있다. item은 안가지고 있어.
                //뭐가 들었는지 모를 때,
                document.write(v + " : " + e[v] +   "<br>"); 
              
            }
        }

---

3. 콜백함수

(p.60 예제)

// 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));

var num = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var sortfunc = function(a, b) {
	if(a > b) {
    	return 1;
    } else if (a = b) {
    	return 0;
    } else {
    	return -1;
    }
    //아니면 그냥 return a - b; (양수인지 음수인지 0인지가 중요한 듯 해) (오름차순 정렬)
    //return b - a; (내림차순 정렬)
console.log(num.sort(sortfunc));

콜백함수는

parameter에 function이 들어갈 수 있는 특징을 이용해, 기존 method의 작동원리를 내 맘대로(?) 바꿀 수 있는 함수를 이야기하는 것이다.

---

4. 자료형 type

4.1. undefined / Infinite(대문자 확인) /  null

ex) if($("#id").val() == null)

id="id"가 존재하지 않으면 undefined,

id="id"가 존재하고 value가 없다면 ""

""는 false.

 

4.2. new Array( )  만드는 3가지 방법

 // Array 생성
	var arr1 = new Array(3);
    // 배열에 삽입
        arr1[0] = "a";
        arr1[2] = "36"

    var arr2 = new Array("a", "b", "36");

    var arr3 = ["a", "b", "36"]; // 들어가는 data type 모두 같아야 한다.

4.3. Object 만드는 2가지 방법

// Obj 생성
    var obj1 = new Object();
    //수를 정하지 않은 객체에 삽입
        obj1.b = 222;
        obj1.a = "첫 번째 a";

    var obj2 = { //들어가는 data type 달라도 된다.
        a: "첫 번째 a", //String
        b: 222, //num
        c: obj1, //object
        speak: function(){
                console.log("동작한다 speak!");
        }
    }

function Person(name, age, gender, nationality){
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.nationality = nationality;
        this.speak = function(){
            document.write("<br>"+"나는 [" + this.nationality +"]에서 온 [" + this.name + "]입니다.")
        }
        //speak; //지역변수라 여기 안에서 호출해야해 원래,,, 그래서 어떻게 해? this.
    }
    var lee = new Person("LEE", 28, "F", "Korea");
    var you = new Person("YOU", 28, "M", "France");
    var isabel = new Person("Isabel", 21, "F", "Catalan")
    you.speak(); //이거 어떻게 해야 동작하는거야,, new를 빼먹었잖아 새꺄

4.4. 참조복사 etc.

 //속성값 추가 / 삭제 / 전달
        //추가
        obj.b = "I just added b in obj";
        console.log(obj);

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

        //전달
        var obj2 = obj; //참조값이 전달, 새로운 객체 생성은 되지 않는다. 
       
        console.log(obj2);

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

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

 

 

4.5. 반복문, for in 확인

//활용
    for (var i; i < arr2.length; i++){ // array는 length 가능, obj는 불가능

    }

    for (var i in arr1){ // i는 arr1의 index가 들어감
        document.write("arr1 배열 속에는 " + (i+1) +" 번째에 " + arr1[i] + "가 들어 있습니다." + "<br>");
    }
    
    for (var i in obj1){ // i는 obj1의 key가 들어감
        document.write("var i에 들어가는 값은 " + i +" 이고, obj1[i]가 나타내는 값은: " + obj1[i] +  "<br>")
        console.log(obj1[i]); //obj1[i] 또는 obj1["aaa"]
        console.log(obj1.i); //이건 동작 안한다... why? obj1."aaa"라고 쓰는 것이기 때문... > undefined로 나타남.
        //이런 형식으로 하려면 obj1.aaa로 해야한다.
    }
    //과연 무엇이 동작할까,,,?
    
    obj2.speak;
    obj2.speak(); //> 요것만 돌아간다.
    obj2["speak"];
    obj2["speak()"];
    obj2["speak"](); // 활용 1을 함수 호출로 사용하는 방법

    // 추가 속성 및 메소드 학습

 

4.6. 형변환 (자동이 되는 조건들)

---

5. 내장함수

5.1. time / date / random / math / string / array / object

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);

// 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)

    setInterval(function(){
       document.write(parseInt(Math.random()*50)+50+"<br>");
    }, 1000)

    //작은 값, 큰 값 알아내기
    var min = Math.min(23, 56);
    console.log(min);
    var max = Math.max(512, 42445);
    console.log(max);
    //캐쉬값이 다 사라지네?

//String Class

        //문자열 만들기
        //literal
        var str1 = "Hi";

        //String Obj
        var str2 = new String("Hi");
        
        //특정 문자 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);

//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);

//Object Class
        var obj = {
            x : "x's value",
            "y" : "y's value",
            z : function(){
                return "z is a function";
            },
            a : ''
        }
        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);

---

6. BOM

6.1. window

6.1.1. navigator / screen

 

6.1.2. history 

go / back / forward

    <button id="back">back()</button><br>
    <button id="go">go()</button><input type="number" id="num"><br>
    <button id="forward">forward()</button><br>
    <button id="goNaver">히스토리 쌓기::네이버</button>
    <!--go(1)이랑 forward()랑 같고, go(-1)이랑 back()이랑 같다.--> 
    <p id="outputNav">d</p>

        document.querySelector("#back").addEventListener("click", function(){
            history.back();
        });
        document.querySelector("#go").addEventListener("click",function(){
            var num = document.querySelector("#num").value;
            history.go(num);
        });
        document.querySelector("#forward").addEventListener("click", function(){
            history.forward();
        })
        document.querySelector("#goNaver").addEventListener("click", function(){
            location.assign("https://naver.com");
        })

6.1.3. location

replace / assign / reload

//location
        var output=""; //var를 추가해야할 것 같아? 왜?
        for(var v in location ){ //location이 obj처럼 여러 key와 value를 갖고 있어, 지금 그걸 보려고 이 작업을 하는 거야
            output += v + " : "  + location[v] + "<br>" //v가 location의 key를 빼오니까 value값 보려고 location[v]
        }
        document.body.innerHTML = output;

<button id="btnReload">reload()</button>
<!--input 버튼과 차이? submit,,,? 안되니 script로 attr들 부여해야-->
<button id="btnReplace">repalce()</button>
<button id="btnAssign">assign()</button>
    <!--a태그 안의 target과의 차이? reload할때 href="" 이렇게만 써야하는데 이상하다고 하시네
    -->

        document.querySelector("#btnReload").onclick = function(){
            location.reload; //getElementById와의 차이?
        }
        document.querySelector("#btnAssign").onclick = function(){
            location.assign("https://naver.com");
        }
        document.querySelector("#btnReplace").onclick = function(){
            location.replace("https://naver.com"); // 요걸로 하면 뒤로가기 불가
        }
        var output=""; //var를 추가해야할 것 같아? 왜?
        for(var v in navigator ){ //location이 obj처럼 여러 key와 value를 갖고 있어, 지금 그걸 보려고 이 작업을 하는 거야
            output += v + " : "  + navigator[v] + "<br>" //v가 location의 key를 빼오니까 value값 보려고 location[v]
        }
        document.getElementById("outputNav").innerHTML = output; // 오 출력 위치 조정하는거 잘 확인해!!

6.1.4. document 

---

7.DOM (load가 끝나야 사용가능하다 onload이후 사용 가능)

7.1. event 걸어주는 방법

7.1.1. inline <body onload="function()"> or <button onclick="function()">

7.1.2. document.getElementsByName / Class / TagName ... (" ").onclick = function( );

7.1.3. document.getElementsByName / Class / TagName ... (" ").addEventListener('click', 'function()'); (onclick아닌 거 확인)

 

7.2. Node 생성 - createTextNode("<h2>Title</h2>" );

var textNode = document.createTextNode('Hello');

7.3. Element  생성 - createElement(" tagName ");

var header = document.createElement("h1");

7.4. Node 연결 - 엘리먼트명.appendChild(노드명);

header.appendChild(textNode); //header안에 textNode 집어넣기

7.5. removeChild(노드명);

7.6. innerHTML

7.6.1. 특징: 처음부터 다시 쓰는 것

//노드생성 방법 2
            var html = "";
            html+="<ul>";
            html+="<li>javascript</li>";
            html+="<li>DOM</li>";
            html+="<li>jQuery</li>";
            html+="</ul>";
            document.body.innerHTML = html; //위아래 순서 바꾸면 출력 둘 다 돼 (이게 덮어씌우는 느낌인 듯)

7.7. innerText

---

8. jQuery (JavaScript로 만든 library)

8.1. $

 

8.2. selector (p.59~60)

8.2.1. $("selector").click(function(){ } );

8.2.1. $("selector").click(function( event ){

event.target

});

8.2.2. $("selector").css( {"attr1" : "value1", "attr2" : "value2", "attr3" : "value3" ,,,,});

 

8.3. this

 

8.4. find / parent / children / prev / next

 

8.5. 노드 생성, 추가, 삭제, 이동

8.5.1. 생성: var $이름 = $("<div id=" "></div>");

8.5.2. 추가: append / appendTo / prepend / prependTo

8.5.3. 삭제: remove / clear

8.5.4. 이동:  append / appendTo / prepend / prependTo + insert / after / before / insertBefore,,,,

 

8.6. html( ) / text( ) : 둘이 꺼내 나오는 방식이 다르다.