[생활코딩] 4일차_JavaScript

<실습 목표: 버튼을 토글 버튼으로 구현>

🔔토글(toggle): 토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

 

1. 조건문: 현재 value 값을 이용하여 조건문 구현

if(document.querySelector('#ToggleButton').value==='night')

 

리팩토링

사용자가 보이는 외부 화면의 변경 없이 코드의 구조를 재조정하여 가독성을 높이고 유지보수를 편하게 하는 행위를 뜻한다.

 

1. 반복되는 부분을 변수로 처리하거나, this를 이용하여 구현

var target=document.querySelector('body');

if(this.value==='night')

 

 

2.  배열과 반복문

반복문 없이 a태그의 스타일을 바꾸기 위해서는 태그의 수만큼의 코드 작성이 필요하다. 이러한 중복을 제거하기 위하여 querySelectorAll을 이용하여 모든 a태그를 담은 노드 리스트 객체를 이용하여 반복문으로 처리한다.

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

🔎노드 리스트(node list) : HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있는 객체

 

3. 함수

반복적으로 실행되는 자바스크립트 코드를 하나의 함수로 묶어서 사용

            function change(self){
                <!--사용되는 코드-->
            }

<input type="button" id="ToggleButton" value="night" onclick="change(this)">

🔔 함수에서 this를 그대로 사용하면 window객체를 뜻하기 때문에 매개변수를 self로 정의하고 값으로 this를 넣어준다.

 

4. 객체

• 서로 연관된 함수(메서드)와 변수를 그룹핑하여 사용
• 각 속성(property)은 콤마(,)로 구분

            var coworkers={
                "name":"jieun",
                "teacher":"egoing"
            };

• 속성을 추가할 수 있음

            coworkers.showAll=function(){
                for(var v in this){
                    document.write(v);
                    }
                    
            }

 

5. 자바스크립트 파일 생성하여 연결

<script src="colors.js"></script>

 

라이브러리

자바스크립트 기반 애플리케이션을 더 쉽게 개발할 수 있도록 미리 작성된 것

1. jQuery:  HTML의 클라이언트 사이드  조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리

 

• 사용방법: 직접 작업 폴더에 합치기 or CDN을 이용하여 src로 연결
• ex) a태그의 color변경 :  기존의 반복문 등의 코드를 대체

$('a').css('color',color);

🔔CDN(콘텐츠 전송 네트워크): 지리적으로 분산된 여러 개의 서버

 

프레임워크

• 개발자가 원하는 기능 구현에만 집중하여 빠른 속도로 개발을 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것
• 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리해둔 일련의 기능 집합이며, 프레임워크는 뼈대를 제공해준다는 차이가 있다.

 

UI vs API

UserInterface:  사람과 시스템 사이에서 의사소통을 할 수 있도록 만들어진 물리적, 가상적 매개체

ApplicationProgrammingInterface: 컴퓨터나 컴퓨터 프로그램 사이의 연결, 일종의 소프트웨어 인터페이스

 

💡개발하며 추가적으로 찾아보길 권장하는 개념: document, DOM, window, ajax, cookie, offline web application, webRTC, speech, webGL, webVR,,,

---

🔔객체와 this에 대하여 추가적인 학습이 필요!

또한 라이브러리와 프레임워크 사용방법에 대하여 익숙해질 필요가 있음을 느꼈다. 기본 수업이 끝났으니 그동안 정리한 내용을 바탕으로 프로젝트들을 진행해보며 추가적인 개념을 학습하는 과정을 반복해야겠다.