WEB2 JavaScript -4

티스토리 뷰

javaScript/생활코딩 - JavaScript

WEB2 JavaScript -4

GrapeMilk 2020. 2. 11. 18:10

1. CSS 핵심

- <style> 태그를 이용하여, CSS속성값을 주면 HTML 디자인이 변경됨.

- 처리해야 할 값이 많아지면 선택자 (마치 id와 또는 변수와 같은 느낌)를 생성하여 처리

- 선택자에는 계층이 존재함. id > class > span

2. JS를 통해 동적으로 처리하기

2-1. element = document.querySelector(selectors);

- 괄호() 안의 선택자를 선택하는 JS문법, ('body') <- body를 선택 (동작을 처리하기 위해 지정)

- 버튼을 클릭 했을 때 <body>태그에 style속성을 동적으로, 프로그래밍적으로 상호작용에 의해 넣으려고 한다.

- 따라서 JS문법에따라 버튼을 클릭했을 때 동적으로 <body>태그를 선택하게 해야 한다. 그때 사용하는 코드

document.querySelector('body')

2-2 .style.backgroundColor = "black" ;

- 2-1번의 과정으로 <body>태그를 선택했다면, 다음으로는 style이라는 속성을 어떻게 JS로 넣을 수 있는가를 알아야 한다.

- 2-1의 코드에 연장선으로 .style을 입력하고 .backgroundColor = " color ";를 할당.

- Night 버튼을 클릭하면 <body>태그에 CSS 속성값을 JS로 부여할 수 있다.

document.querySelector('body').style.backgroundColor = 'black';

2-3 사진 예시

1) night버튼 클릭 전

2) night버튼 클릭 후

- <body> 태그에 style코드가 동적으로 처리되어 추가 된 것을 볼 수 있다.

즉, HTML, CSS를 동적으로 변경하여 사용자와 대화하는 느낌의 어플리케이션을 바꾸는 능력을 기름

3. JS와 프로그래밍

- HTML은 시간의 순서에 구애 받지 않는다. (정적)

- JS는 사용자와 상호작용을 해야 하기 때문에, 시간의 순서에 따라 기능이 실행되어야 한다.

- 프로그래밍이라 함은 시간의 순서에 따라 일을 처리하는 것.

4. 비교 연산자와 boolean

document.write(1===1);

- 웹사이트에 ture를 출력한다

- document.write(); <- 웹사이트에 값을 출력하는 코드

- 1 === 1 <- ===(등호 3개)를 기준으로 왼쪽과 오른쪽 값을 비교하여 같으면 true, 다르면 false를 출력

5. input의 변수 값 얻어오기 및 조건문

5-1 document.querySelector().value

- querySelector()를 통해 태그를 지정하고, .value를 통해 변수 값 얻어오기

  <input id="night_day" type="button" value="night" onclick="
            if(document.querySelector('#night_day').value === 'night'){
                document.querySelector('body').style.backgroundColor = 'black';
                document.querySelector('body').style.color = 'white';
            }

        ">

- document.querySelector('#night_day').value <- document.querySelector()에 input의 id 값(#night_day)을 삽입하여 input을 선택하고 .value를 통하여 선택한 input의 value 값을 얻어온다 따라서 결과는 input태그의 value 값인 "night"가 된다.

5-2 받아온 변수를 사용하여 day & night 통합 버튼 만들기

 <input id="night_day" type="button" value='night' onclick="
            if(document.querySelector('#night_day').value === 'night'){
                document.querySelector('body').style.backgroundColor = 'black';
                document.querySelector('body').style.color = 'white';
                document.querySelector('#night_day').value = 'day';
            }
            else{
                document.querySelector('body').style.backgroundColor = 'white';
                document.querySelector('body').style.color = 'black';
                document.querySelector('#night_day').value = 'night';

            }

-관건은, night 클릭 이후 어떻게 'day'를 input의 value값으로 설정할 것이냐임.

6. 리팩토링

- 코드를 작성하다보면 가독성이 떨어지며 중복이 증가한다.

- 그리고 프로그램이 비효율적인 순서로 작동하는 경우도 많아진다.

- 이러한 경우를 제거해 좀 더 코드의 가독성을 높이고 중복을 제거하며 프로그램의 효율성을 높이는 작업을 'reFactorying'이라고 한다.

6-1 This

- 리펙토링에 대표적인 키워드는 'this'.

- This를 사용해 많은 중복과 불편함을 제거할 수 있다.

1) this 사용 이유

- 기존의 코드에서 버튼을 하나 더 만들고 싶을 때, 기존의 코드에 id나 class를 사용했을 경우 그 코드를 그대로 복사 붙여넣기를 하면 버튼이 원하는대로 동작하지 않는다.

- 지정하고 있는 id가 있는 대상의 버튼만 바뀌고 새로 붙여넣기한 코드는 동작을 하지 않을 것이다.

     <input id="night_day" type="button" value='night' onclick="
        if(document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black'; 
            document.querySelector('body').style.color = 'white';
            document.querySelector('#night_day').value = 'day';
        }
        else{
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            document.querySelector('#night_day').value = 'night';

        }

1-1) 예시

- 예를 들어 텍스트 위의 오른 쪽 맨 끝 night 버튼의 기능을 그대로 복사하여

- 텍스트 밑에서도 사용하게 끔 붙여넣기 했지만, 붙여넣기 한코드의 id는 기존의 코드를 가르키고 있기 때문에

- 클릭을 해도 기존의 버튼이 동작하는 상황이 있을 수 있다.

2) this를 통한 해결

- id의 값을 바꿔서 구별할 수 도있지만 버튼을 1억개 추가하고 싶을 때는 id를 전부 바꿔야 한다.

- document.querySelector(id)가 지칭하고 있는 것은 현재 기능을 사용하고 싶은 input태그이다 따라서 this를 사용하여 기능을 사용하고 싶은 코드가 언제든지 현재의 input태그를 가르키도록 하면

- id값을 수정할 필요 없이 코드를 복사해도 잘 작동한다.

  <input id="night_day" type="button" value='night' onclick="
        if(this.value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black'; 
            document.querySelector('body').style.color = 'white';
            this.value = 'day';
        }
        else{
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            this.value = 'night';

        }

6-2 target

- body태그를 가르키는 document.querySelector('body')코드의 중복을 제거하기 위해 사용

1) 중복된 코드

   <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';
        ">

2) target을 이용한 중복 제거

- target은 변수를 사용하는 이유와 같다고 생각하면 된다.

? target을 태그 안에 말로 전역으로 지정하는 방법은?

 <input id="night_day" 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';

        }

* vsCode 같은 변수 선택하기

-> ctrl + d

'javaScript > 생활코딩 - JavaScript' 카테고리의 다른 글

WEB2 JavaScript -3 (0)	2020.02.11
WEB2 JavaScript -2 script 태그 (0)	2020.02.08
WEB2 JavaScript -1 정의 및 동작 (0)	2020.02.08

최근에 올라온 글

최근에 달린 댓글

TAG more

Total

Today

Yesterday

Now or Never

티스토리 뷰