[JavaScript] 생활코딩 Web2 내용정리 (함수, 객체, 라이브러리 등)

목차

 

---

WEB2 (24~37)

WEB2 JavaScript - 24.함수예고 - YouTube

본 글은 유튜브 무료 강의 생활코딩의 내용과 검색해서 이해한 내용을 정리하는 글

 

---

1. 함수(function) - ★

1.1. 함수

특정 일을 하는 명령어들의 묶음.

→ 코드 하나에 이름을 붙여서 반복되는 코드를 줄일 수도 있고 효과적으로 코드 작성

→ 관리하기도 용이하고 효율성을 갖는 코드를 만들 수 있음.

1.1.1. 함수의 문법 (fuction, method)

function two() {}

→ two라는 함수를 만들고 {}안에 있는걸 실행하겠다는것을 의미뒤에서 two; 만 하면 {}안에 있는 걸 실행

1.2. 매개변수(parameter)와 인자(Argument) - 입력

데이터가 입력이 되면 그것이 출력되는 형태로 대부분이 존재;데이터를 입력받고 출력을 해주는 것을 함수라고 생매개변수 : 함수를 정의할 때 사용되는 변수(데이터를 입력하려는 변수)인자 :  실제로 함수가 호출될 때 넘기는 변수값

    <h2>Parameter & Argument</h2>
        <script>
            function sum(left, right){
                document.write(left+right+'<br>')
            }

           sum(2,3);
        </script>

위 코드에서 left,right라는 게 매개변수라고 이해하고

저기서 2,3이 인자라고 이해하면 됨!

1.3. 출력(return)

매개변수를 통해서 들어간 값을 return이라는 것을 통해서 출력하는 것!

1.4. 함수 활용

<script>
    function darkmodehandler(self)
    {
        var target = document.querySelector('body');
    if 
       (self.value == '다크on')
        {
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        self.value = '다크off';
        
        
        var alist = document.querySelectorAll('a');
        var i = 0;
        while (i < alist.length)
        {
        alist[i].style.color = 'powderblue';
        i = i + 1; 
        }
        }
    else 
            {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            self.value = '다크on';

            var alist = document.querySelectorAll('a');
            var i = 0;
            while (i < alist.length)
                {
            alist[i].style.color = 'blue';
            i = i + 1; 
                }
            }
    }
</script>

…

<input type="button" value="다크on" onclick="darkmodehandler(this);" >

화면을 다크 모드로 바꾸는 걸 함수로 지정하기 위해 head 안에다가

함수 darkhandler(){}을 선언해서 뒤에 활용 하지만 정상 작동이 안됨.

→ 함수 안에 있는 this가 다른 걸 가르키기 때문! 

이는 객체를 이해해야 이해할 수 있는 내용

 

◎ 함수에 매개변수를 정의해서 <Input> 태그를 가르키기 위해 인자 this로 지정하는 변수(self)를 정의해야 함.

2. 객체

2.1. 객체(object)

물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른것과 식별 가능한 것

2.1.1 객체의 속성

함수가 많아지면 그와 관련된 변수들이 많아지면 너무 복잡한 한계 상황에서

서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구

→ 즉 여러 함수가 반복되는 걸 묶든, 하나의 로직도 보기좋은 객체로 묶어준다면 훨씬 잘 정리정돈할 수 있음을 의미.

→ 일종의 폴더라는 개념으로 일단 이해

---

document.querySelector('body');

→document라는 객체를 지정하고 그 안에 있는 querySelector라는 함수를 사용하는 것.

 

2.2. 객체 쓰기와 읽기

객체 쓰기

        var coworkers = {
            "programmer":"Taehun", 
            "designer" : "Nayeon"
        };

→ coworkers라는 객체를 정의 programmer라는 key에 Taehun이 있다라고 이해

객체에 데이터 추가하기

coworkers.editor = "Jonghun";

이러면 editor라는 key에 종훈이라는 데이터가 추가됨.

coworkers["data scientist"] = "Buldog";

이런 식으로 []를 통해서도 띄어쓰기가 있는 것도 객체 추가 가능.

2.3. 객체와 반복문

coworkers라는 객체에서 데이터를 전부 가져올 필요가 있을 때 반복문 활

    <script>
        for (var key in coworkers) 
        {
            document.write(coworkers[key]+'<br>');
        }
    </script>

위 문장은 coworkes라는 객체에 있는 key값들을 가져오는 반복문

• key는 여기서 programmer, designer와 같은 것들을 key라고 함.
• 각 key에 있는 value를 가져오고 싶으면 coworkers[]로 지정해주는 것으로 이해

반복문 실행결과

2.4. 객체프로퍼티와 메소드

객체에는 함수도 담을 수 있음!

<script>
        coworkers.showAll = function()
        {
            for (var key in coworkers) 
        {
            document.write(key+ ' : '+coworkers[key]+'<br>');
        }
        }
        coworkers.showAll();
    </script>

이런 방식으로 showAll이라는 함수를 정의할 수도 있음.

this : 이 함수가 소속된 객체를 가리키는 약속된 기호

이런 객체에 소속된 함수를 Method라고 정의

그리고 이런 객체의 소속된 변수를 Property라고 한다.

---

 

3. 정리정돈

서로 연관된 코드들을 파일로 그룹핑하는 것

자바스크립트로 코딩한 것들을 모조리 옮겨 붙이는 것에는 한계가 존재!

자바스크립트로 된 파일을 따로 만들고 호출하는 것으로 코드를 명확하게 간결해지는 역

---

 

4. 라이브러리와 프레임워크

4.1. 정의

• 라이브러리(library) : 내가 만들고자 하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어
• 프레임워크(framework) : 만들고자 하는 것이 있을때 만들고자 하는 것이 무엇이냐에 따라서 그것을 만들려고 할 때 언제나 필요한 공통적인 것을 프레임워크라고 이해하면 됨. 여기서 디테일만 조정하면 다른 걸 만들면 된다는 느낌

다른 사람과 협력하는 모델이라고 생각하면 됨.

JavaScript의 대표적인 Library : jQuery

4.2 jQuery

사이트 가서 다운로드 받아도 되고 CDN을 통해 라이브러리에서 땡겨서 써도 됨.

여기서 정해진 method를 땡겨서 써서 더 간략하게 더 명료하게 쓸 수 있음!

---

5. UI vs API

 

User Interface

클라이언트가 보고 있는 화면, 사용자가 시스템을 제어하기 위해서 사용하는 조작 장치

Application Programming Interface

애플리케이션이 웹브라우저가 가지고 기능을 그 문법의 코드를 이용해서 사용하고 있는 것

애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작 장치

 

모든 프로그래밍 언어의 공통점!

API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해서 만들어짐

 

6. 유용한 키워드 - 마무리

6.1. method 찾기

document 객체에서 method를 찾아보면서 자기한테 필요한 기능을 찾아보기

없으면?

DOM 객체(document object model)에서 method를 찾아보기

6.2. 웹 브라우저를 제어하고 싶으면

window 객체에서 찾아보기

1. 주소를 알아내야 함
2. 새 창을 열어야 함
3. 웹 브라우저의 화면 크기를 알아야 함.

6.3. 웹페이지를 리로드하지 않고 정보를 변하게 하고 싶음.

ajax

 

6.4. 웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면

cookie

6.5. 인터넷에 끊겨도 동작하는 웹페이지를 만들고 싶다면

offline web application

6.6. 화상 통신 웹 앱

webRTC

6.7. 사용자의 음성을 인식하고 음성으로 정보를 정달하고 싶으면

speech로 시작하는 API

6.8. 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면

webGL, webVR(가상현실)

 

 

---