[생활코딩 WEB2 Javascript] 정리노트 3

함수 Function 

함수 = 수납상자

코드를 잘 정리정돈 하기 위한 도구 중 하나 (객체도 있음) 

 

Parameter & Argument 매개변수와 인자

함수는 입력과 출력으로 이루어짐

입력 - paremeter, argument / 출력 - return 

sum(2,3) 의 2,3 =Argument 인자 

function sum(x,y)의 x,y = parameter 매개변수 

 

 

Return 출력

return = 함수의 결과값을 돌려줌 

출력까지 하지 않고 결과값을 돌려주기만 하기때문에 이렇게 색을 바꾼다든지 폰트 크기를 바꾼다든지, 함수를 다양한 용도로 활용할 수 있음.

 

 

함수의 활용

함수를 통해 코드 리팩토링!

코드를 nightDayHandler라는 함수로 정의하고 head 안에 넣고 밑에 body에서 함수를 불러옴. 

하지만 Buttond 의 value 가 night mode 인데도 day로 변하지 않고 계속 night라고 써있는 문제 발생 -> this가 button 을 의미하게 되어있었는데 this가 포함된 코드를 함수로 정의해서 독립시켰기 때문에 this 가 더이상 button을 의미하지 않게 됨 -> 매개변수로 정의해줘야함

 

nightDayHandler(this) 를 통해 this가 button을 의미하도록 함 

this 인자는 self 매개변수가 받게 되기 때문에 this 가 self와 연결되고, self가 button을 의미하게 됨. 

 

 

객체 Object

객체의 역할 중 하나 = 코드 정리정돈, 폴더같은 역할을 한다

객체 - 연관있는 함수, 변수를 정리해주는 폴더 / 객체의 속하는 함수는 메소드라고 한다. 

색깔 변화 부분을 setColor이라는 함수로 정의

if 랑 else 의 차이점인 색깔을 매개변수와 인자로 해결

 

 

객체 쓰기와 읽기 

객체 = 이름이 있는 정리정돈 상자 

 

객체와 반복문

반복문 통해 객체 한번에 꺼내오기

 

Property & Method

key = property 라고 하고 그 안에 value = method

함수를 객체로 만들 수 있음

 

함수 정의 방법 - 둘이 똑같음 

var showAll = function(){}
function showAll(){}

 

객체의 활용

var Links = { //객체
        setColor: function(color){
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i<alist.length){
            alist[i].style.color = color;
            i = i + 1;
            } 
        }
    }
    var Body = {
        setColor:function(color){
            document.querySelector('body').style.color = color;
        },
        setBackgroundcolor : function(color){
            document.querySelector('body').style.backgroundColor = color;
        }
    }
        function nightDayHandler(self){
          var target = document.querySelector('body')
    if(self.value === 'night'){
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        self.value = 'day';

        Links.setColor('powderblue');
        
    } else{
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        self.value = 'night';

        Links.setColor('blue');
    }
}

객체화 시켜 코드를 바꿈, 출력화면은 똑같음

 

파일로 쪼개서 정리정돈하기

자바스크립트 코드만 따로 title.js 파일로 만들어준 다음 <script src = "title.js"></script> 해서 가져오기!

 

Library & Framework 

둘 다 다른 사람의 도움을 받아 소프트웨어 만들도록 해주는 것

 

Library - 내가 만들고자 하는 프로그램들에 필요한 소프트웨어를 잘 정리정돈해놓은 곳 / 필요한 부품을 가져오는 곳 

Framework - 만들고자 하는 소프트웨어가 무엇인지에 따라 공통적인 부분이 있고 달라지는 부분이 있음 

내가 만들고자 하는 것에 공통적인 부분만 framework 에서 가져온 뒤 내가 다르게 하고 싶은 부분만 살짝 바꾸면 됨

 

가장 유명한 Library - jquery https://jquery.com/

jQuery