정리_JavaScript/생활코딩

JavaScript에 대하여:

(1) 사용자와 상호작용하는 언어이다.

 HTML이 멈춰있는 정보라는 이미지를 그리는 것이라면,

 JavaScript는 정보라는 이미지를 영화처럼 움직이게 한다. ex) 야간모드 버튼

 

(2) 웹페이지를 훨씬 더 다이나믹하게 만들어준다.

 웹브라우저는 한 번 화면에 출력되면 자기자신을 바꿀 수 없지만

 JavaScript가 그것을 가능하게 해준다.

 

(3) 컴퓨터 프로그래밍 언어이다.

 기능들을 시간의 순서에 따라 실행시킨다. cf) HTML은 프로그래밍 언어가 아니다.

 

 

 

JavaScript 적용법:

(1) script 태그 안에

(2) common.js 파일 안에 → head에 script src="common.js" 추가

 

 

 

이벤트:

웹브라우저 위에서 일어나는 일들로,
onclock, onchange, onkeydown 등이 있다.
이벤트의 속성 값으로는 JavaScript가 와야 한다.

ex1) input type="button" value="hi" onclick="alert('hi')"

ex2) input type="text" onchange="alert('changed')"

ex3) input type="text" onkeydown="alert('key down!')"

 

 

 

데이터타입:

(1) Boolean

  - 비교연산자

    ① ===: 동등 비교 연산자이자 이항연산자.

    ② >, <

 

(2) String - " " 또는 ' '

  - 문자열의 기능

    ex) document.write('Hello world'.length)   →   11 출력

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Syntax

String

 

 

 

변수와 대입연산자(=):

<script>var name='XOXO';
document.write("Lorem ipsum dolor sit amet "+name+" consectetur adipisicing elit. Dolore nihil "+name+" quidem deserunt, error "+name+" velit perspiciatis fuga quibusdam dicta "+name+" odit minus aperiam ipsum, eveniet harum "+name+" autem ab voluptas? Totam, quia vel.");</script>

Lorem ipsum dolor sit amet XOXO consectetur adipisicing elit. Dolore nihil XOXO quidem deserunt, error XOXO velit perspiciatis fuga quibusdam dicta XOXO odit minus aperiam ipsum, eveniet harum XOXO autem ab voluptas? Totam, quia vel.

 

 

 

웹브라우저 제어:

Night/Day 모드 만들기

버튼 - input type="button" value="Night" onclick="여기에 JS 코드를 넣는다."

<input type="button" value="Night" onclick="
 document.querySelector('body').style.backgroundColor='black';
 document.querySelector('body').style.color='white';
">

<input type="button" value="Day" onclick="
 document.querySelector('body').style.backgroundColor='white';
 document.querySelector('body').style.color='black';
">

 

 

 

조건문:

<script>
 document.write("1, ");
 if(false) {
     document.write("2, ");
 } else {
     document.write("3, ")
 }
 document.write("4");
</script>

1, 3, 4

 

 

 

조건문 - 활용:

Night 버튼과 Day 버튼 합치기

<input id="ND" type="button" value="Night" onclick="
  if(document.querySelector('#ND').value === 'Night') {
     document.querySelector('body').style.backgroundColor='black';
     document.querySelector('body').style.color='white';
     document.querySelector('#ND').value='Day';
  } else {
     document.querySelector('body').style.backgroundColor='white';
     document.querySelector('body').style.color='black';
     document.querySelector('#ND').value='Night';
}">

 

 

 

리팩토링:

코드의 중복을 제거해서

가독성을 높이고 유지보수를 편리하게 만드는 것

 

(1) document.querySelector('body') 또는 document.querySelector('body').style을 target이라는 변수로 지정한다.

    cf) 위에 XOXO 예제에서는 작은 따옴표를 써줬지만, 여기서는 쓰지 않는다.

(2) document.querySelector('#ND')   →   this   (이제 input 태그의 id를 없애도 된다.)

    → 기존 코드를 그대로 복사해서, 페이지 안에 같은 버튼을 하나 더 만들면, 잘 작동되지 않는다.

        이렇게 this로 바꿔주거나, 태그의 id 뒤에 2를 붙여주면 잘 된다.

<input type="button" value="Night" onclick="
  var target = document.querySelector('body');
  if(this.value === 'Night') {
     target.style.backgroundColor='black';
     target.style.color='white';
     this.value='Day';
  } else {
     target.style.backgroundColor='white';
     target.style.color='black';
     this.value='Night';
}">

 

 

 

배열과 반복문 - 배열:

<script>
    var fruits = ["apple", "pear", "banana"];
    document.write(fruits[0]);
    document.write(fruits.length);
    fruits.push("Orange"); // 배열에 데이터 추가
</script>

기타 여러가지 배열의 기능들   https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array

 

 

 

배열과 반복문 - 반복문:

<script>
    document.write("1<br>");
    var i = 0;
    while(i < 3) {
        document.write("2<br>");
        document.write("3<br>");
        i = i + 1
    }
    document.write("4<br>");
</script>

3번 반복

 

 

 

배열과 반복문 - 배열의 모든 값 나열하기:

<script>
    var animals = ["dog", "cat", "rabbit"];
    var i = 0;
    while(i < animals.length) {
        document.write(animals[i]+"<br>");
    i = i + 1;
    }
</script>

 

 

 

배열과 반복문 - 활용:

Night 모드일 때, 모든 링크의 글씨 색을 powder blue로 변경해보자.

    <input type="button" value="Night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'Night') {
    target.style.color = 'white';
    target.style.backgroundColor = 'black';
    this.value = 'Day';

    var alist = document.querySelectorAll('a'); // 추가①
    var i = 0;
    while(i < alist.length) {
        alist[i].style.color = 'powderblue';
        i = i + 1;
     }
     
    } else {
    target.style.color = 'black';
    target.style.backgroundColor = 'white';
    this.value = 'Night';

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

body 태그는 하나였지만, a 태그는 여러개가 있다.

그러므로 document.querySelectorAll 셀렉터를 사용한다.

 

querySelector라는 메소드=함수=명령은

a 태그에 해당되는 태그 중

첫 번째 등장하는 하나만 가져오는 특성을 가지고 있다.

∴ 배열을 이용해서 모든 a 태그를 가져와서 적용시켜야 한다.

 

검사 - 콘솔 창에서 위와 같이 입력하면

모든 a 태그를 가져오는 것을 볼 수 있다.

→ 하나하나 가져온 태그의 글자색을 바꿔주면 된다.

 

 

 

함수 - 정의와 호출:

    <script>
        function two() {
            document.write('<li>2-1</li>');
            document.write('<li>2-2</li>');
        }
        
        document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
    </script>

 

 

 

함수 - 입력 - 매개변수와 인자:

    <script>
        function sum(left, right) {
            document.write(left+right);
        }
        sum(2,3);       
    </script>

위 코드에서 매개변수(parameter) - left, right

인자(argument) - 2, 3

 

 

 

함수 - 출력 - 리턴:

1+1 = 2에서

1+1은 2에 대한 표현식(expression)이다.

 

 

 

함수 - 활용:

Night 버튼을 함수로 만들어보자.

 

 

 

 

    <script>
        function ND(self) {
            var target = document.querySelector('body');
            if (self.value === 'Night') {
                target.style.color = 'white';
                target.style.backgroundColor = 'black';
                self.value = 'Day';

                var alist = document.querySelectorAll('a');
                var i = 0;
                while (i < alist.length) {
                    alist[i].style.color = 'powderblue';
                    i = i + 1;
                }
                
            } else {
                target.style.color = 'black';
                target.style.backgroundColor = 'white';
                self.value = 'Night';

                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="Night" onclick="
    ND(this)
    ">

onclick=" " 안의 부분을 잘라서 함수 ND로 만들고

ND( ) 안에 self를 쓰고

this를 모두 self로 바꾼다.

input 태그 안의 ND() 안에는 this를 쓴다.

 

this와 self 작업을 하지 않으면,
처음 클릭했을 때는 night 모드로 바뀌지 않고,
그 다음부터는 잘 작동하기는 하는데
버튼 이름이 night에서 day로 바뀌지 않는다.

∵ onclick이라는 이벤트 안에서 this는
이 이벤트가 소속된 태그(input id="night_day")를 가리키도록 약속되어 있는데,

우리가 독립된 함수를 만들게 되면
독립된 함수 안의 this는 더 이상 input 버튼이 아니고 전역객체를 가리키게 된다.
웹브라우저에서는 윈도우가 된다.

그래서 input을 가리키게 하기 위해서
body의 nightDayHandler 뒤의 괄호에 this를 써준다.

그러면 nightDayHandler라는 함수가 실행될 때,
함수에 적혀있는 self라는 매개변수를 this로 바꾸게 된다.

 

 

 

객체 - 쓰기와 읽기:

┌ 배열 - 정보를 순서에 따라서 정리정돈

└ 객체 - 정보를 순서 없이 저장. 대신 이름이 있다.

 ※ 객체란 이름(key)과 값(value)으로 구성된 property의 정렬되지 않은 집합

 

    <script>
    var coworkers = {
    "programmer" : "egoing",
    "designer" : "leezche"
    };
    document.write("programmer : "+coworkers.programmer);

    coworkers.bookkeeper = "duru";
    
    coworkers["data scientist"] = "taeho";
    document.write(coworkers["data scientist"]);
    </script>

생성: var 객체이름 = { "key" : "값", "key2" : "값" };   cf) 배열은 [ ]

출력: document.write(객체이름.key);

추가: 객체이름.key = "값";

※ 띄어쓰기가 있을 경우, .(object access operator)을 빼고 [" "]로 묶는다.

 

 

 

객체 - 반복문을 사용하여 모든 데이터 가져오기:

    <script>
        var coworkers = {
        "programmer" : "egoing",
        "designer" : "leezche",
        "bookkeeper" : "duru"
        };

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

 

 

 

객체 - 메소드와 프로퍼티:

객체에는 함수도 담을 수 있다.

메소드: 객체에 소속된 함수

프로퍼티: 객체에 소속된 변수 (key - programmer, designer, bookkeepper 등)

 

위의 예제를 coworkers라는 객체의 메소드로 만들어보겠다.

    <script>
        var coworkers = {
        "programmer" : "egoing",
        "designer" : "leezche",
        "bookkeeper" : "duru"
        };

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

※ 이렇게 하면 showAll이라는 함수까지 출력된다.

 이것이 출력되지 않게 하려면 

 위의 for문 안에서 if문으로 showAll을 제외하게 하면 된다.

 

이 때, 만약 coworkers라는 객체의 이름이 바뀐다면

이 함수가 제대로 동작하지 않는다.

∴ showAll 메소드 안의 coworkers들을 this로 바꾼다.

※ this: 이 메소드가 소속된 객체를 가리킨다.

    <script>
        var coworkers = {
        "programmer" : "egoing",
        "designer" : "leezche",
        "bookkeeper" : "duru"
        };

        // cf) 함수 만들기: function showAll(){}
        coworkers.showAll = function() {
            for(var key in this) {
            document.write(this[key]+'<br>');
        }};
    </script>

 

 

 

객체 - 활용:

Night 모드 버튼의 색깔 바꾸는 부분들을 함수로 바꿔보자.

 

(1) 객체 없이 하는 방법

    <script>
        function ND(self) {
            var target = document.querySelector('body');
            if (self.value === 'Night') {
                target.style.color = 'white';
                target.style.backgroundColor = 'black';
                self.value = 'Day';

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

            } else {
                target.style.color = 'black';
                target.style.backgroundColor = 'white';
                self.value = 'Night';

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

2번째 & 4번째 문단을 LinksetColor라는 함수로 만들고, color라는 매개변수를 지정해준다.

 

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

        function ND(self) {
            var target = document.querySelector('body');
            if (self.value === 'Night') {
                target.style.color = 'white';
                target.style.backgroundColor = 'black';
                self.value = 'Day';

                LinkSetColor('powderblue');

            } else {
                target.style.color = 'black';
                target.style.backgroundColor = 'white';
                self.value = 'Night';

                LinkSetColor('blue'); 
                }
            }
    </script>

target.style.color와 target.style.backgroundColor도 함수로 만들어준다.

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

        function BodySetColor(color) {
            document.querySelector('body').style.color = color;
        }

        function BodySetBackgroundColor(color) {
            document.querySelector('body').style.backgroundColor = color;
        }

        function ND(self) {
            if (self.value === 'Night') {
                BodySetColor('white');
                BodySetBackgroundColor('black');
                self.value = 'Day';
                LinkSetColor('powderblue');

            } else {
                BodySetColor('black');
                BodySetBackgroundColor('white');
                self.value = 'Night';
                LinkSetColor('blue'); 
                }
            }
    </script>

 

 

(2) 객체로 정리하는 방법:

    <script>
        function ND(self) {
            var target = document.querySelector('body');
            if (self.value === 'Night') {
                target.style.color = 'white';
                target.style.backgroundColor = 'black';
                self.value = 'Day';

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

            } else {
                target.style.color = 'black';
                target.style.backgroundColor = 'white';
                self.value = 'Night';

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

↓

    <script>
        var Body = {
            setColor:function(color) {
                document.querySelector('body').style.color = color;
            },
            setBackgroundColor:function(color) {
                document.querySelector('body').style.backgroundColor = color;
            }
        }

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


        function ND(self) {
            if (self.value === 'Night') {
                Body.setColor('white');
                Body.setBackgroundColor('black');
                Links.setColor('powderblue');
                self.value = 'Day';

            } else {
                Body.setColor('black');
                Body.setBackgroundColor('white');
                Links.setColor('blue'); 
                self.value = 'Night';
                }
            }
    </script>

 

 

 

라이브러리와 프레임워크:

JavaScript의 가장 유명한 라이브러리 - jQuery

 

CDN: 우리가 라이브러리를 다운받을 필요 없이,

 서버에 보관된 파일을 script src를 통해서 가져다 쓸 수 있는 방법

 

https://jquery.com/download/

Download jQuery | jQuery

여기서 Google CDN을 눌러서 첫번째 3.x를 복사한다.

 

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="colors.js"></script>
</head>

이렇게 head 안에 붙여넣는다.

 

 

 

라이브러리와 프레임워크 - jQuery의 활용:

    <script>
        var Body = {
            setColor:function(color) {
                document.querySelector('body').style.color = color;
            },
            setBackgroundColor:function(color) {
                document.querySelector('body').style.backgroundColor = color;
            }
        }

        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;
            }
        }}
    </script>

 

위 코드를 아래와 같이 바꿀 수 있다.

    <script>
        var Body = {
            setColor:function(color) {
                $('body').css('color', color);
            },
            setBackgroundColor:function(color) {
                $('body').css('backgroundColor', color);
            }
        }
        var Links = {
            setColor:function(color) {
                $('a').css('color',color);
            }
        }
    </script>

jQuery는 $라는 이름의 함수로 사용한다.

$('a')는 이 웹페이지의 모든 a태그를 jQuery로 제어하겠다는 뜻이다.

 

첫 번째 'color'는 이 코드가 바꾸려고 하는 것이 color 값이라는 뜻이고,

두 번째 color는 매개변수이다.

 

https://api.jquery.com/css/#css-propertyName-value

.css() | jQuery API Documentation

 

 

 

UI vs API:

UI - 사용자가 시스템을 제어하기 위해서 사용하는 조작장치   ex) input 버튼

 

API - 앱을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치   ex) alert (경고창)

  경고창이 실행되는 타이밍이나, 경고창에 표시되는 텍스트는 우리가 만든 것이나,

  경고창의 기능이나 모양 등은 웹브라우저를 만드는 사람들이 미리 만들어둔 것이다.

  → 함수 alert는 경고창을 실행하는 조작장치이다.

 

프로그래머가 되기 전까지 우리는 UI만 사용해왔다.

이제 JavaScript라는 접착제로 API들을 결합(응용)해서 프로그램을 만들 수 있다.

 

 

 

수업을 마치며:

여러분이 웹페이지에 있는 어떤 태그를 삭제하고 싶거나
어떤 태그에 자식 태그를 추가하고 싶다면
document 객체를 좀 더 자세히 살펴 보세요
여러분이 필요한 메소드가 그 안에 포함되어 있을 겁니다

만약에 document 객체를 통해서도 찾을 수 없다면
DOM으로 수색 범위를 넓혀 보세요
DOM 객체, document 객체는 DOM의 일부거든요

또 웹페이지가 아니라 웹브라우저 자체를 제어해야 한다면
window 객체를 조사해 보세요

이를테면, 현재 열려있는 웹페이지 주소가 뭔지 알아내야 될 수도 있고
여러분이 새 창을 열어야 될 수도 있고,

또 웹브라우저의 화면 크기를 JavaScript를 통해 알아야 한다면
window 객체에 속해 있는 프로퍼티나 메소드가 여러분을 도울 수 있을 거에요

또 웹페이지를 리로드하지 않고 정보를 변경하고 싶다면
ajax가 필요할 겁니다
현대적인 웹앱을 만드는 데 필수적인 테크닉입니다

또 웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면 cookie를 배우세요.
cookie와 함께라면 사용자를 위한 개인화된 서비스를 제공할 수 있습니다

인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다면
offine web application을 찾아보세요

화상 통신 웹 앱을 만들고 싶다구요?
webRTC라는 것이 있습니다

또 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면
speech로 시작하는 API들을 살펴 보세요

또 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면
webGL을 살펴보십시오

가상현실에 관심이 많으시다구요?
그럼 webVR이라는 것도 있습니다.