이번 포스트는 querySelector(), querySelectorAll() 에 대해 알아보겠습니다 .

일단 크게 동작하는 방식은 같습니다. 

특정 name, id, class등을 이용해서 요소를 타겟으로 잡고 수정하거나 접근해서 정보를 가져올수 있습니다. 

하지만 querySelector()는 타겟의 자식요소 한가지만 가져오고 

querySelectorAll()은 모두 가져오게 됩니다. 

예제를 보며 설명드리겠습니다. 

<li class="section">섹션</li>
<li class="section">섹션</li>

const sections = document.querySelector(".section");
const sections2 = document.querySelectorAll(".section");

같은 html 태그이고 같은 클래스를 타겟을 잡았지만 

querySelector()를 사용하면 첫번째 li태그만 수정이 되고 

querySelectorAll()를 사용하면 모든 li태그가 수정이 됩니다. 

jQuery에서 .클래스명 으로 타겟을 잡는것과 흡사하지만 

querySelector()를 사용하면 첫번쨰 자식만 타겟으로잡고 

querySelectorAll()를 사용하면 타겟을 배열형식으로 받습니다. 

그럼으로 두번째 버튼에서 css를 수정할때는 for문을 이용해서 css수정을 하였습니다. 

차이점을 잘 이용해서 다양한 방법으로 타겟을 잡을수 있게 연습하면 될것 같습니다. 

끝으로 querySelector(), querySelectorAll()는 jQuery와 큰 속도차이가 없다고 합니다. 

저사양에서는 querySelector(), querySelectorAll()가 약간 우수하다고 합니다. 

그러나 지난 포스팅에서 다뤘던 getElementById()는 무려 10배이상 빠르다고 합니다. 

2019/01/23 - [IT/JAVASCRIPT] - 바닐라스크립트에서 이벤트리스너 (addEventListener)

각자 사양과 상황에 맞춰서 최적의 효율과 최고의 효과를 얻으시길 바랍니다. 

자바스크립트에서 현재 시간을 가져와서 매초마다 변경되는 

실시간 시계를 만들어 보겠습니다. 

아주 간단합니다 Date Object를 가져와서 시간 분 초를 뽑고 

값을 넣어주면 간단하게 완성입니다. 

일단 간단하게 크롬 개발자도구를 이용해서 보여드리겠습니다.  

var date = new Date();

데이트 객체를 받아와서 출력해보면 시간정보가 정확하게 나옵니다. 

date.getMonth();

현재 1월달입니다 getMonth()는 0~11월까지를 표시해줍니다. 

즉 +1을 해주면 현재 몇월인지 알수있습니다. 

date.getDate();

현재 24일로 getDate()는 현재 몇일인지 나옵니다.

Month는 0월부터 시작하는데 Date는 1일부터 시작하네요 

date.getDay();

현재 무슨요일인지를 출력해줍니다. 

4가 출력되고 오늘이 목요일인걸 봐선 

0은 일요일 6은 토요일 입니다. 

date.getHours();

getHours는 현재 시간을 보여줍니다.

14인걸로 봐서는 24시간제로 2시를 뜻합니다. 

date.getMinutes();

getMinutes는 현재 분을 보여줍니다. 

date.getSeconds();

getSeconds는 현재 초를 보여줍니다.

그럼 이것들을 종합해서 현재시간을 보여주는 시계를 만들어 보겠습니다.

00:00

<h1 id="clock" style="color:gray;">00:00</h1>

<script>

var clockTarget = document.getElementById("clock");

function clock() {
    var date = new Date();
    // date Object를 받아오고 
    var month = date.getMonth();
    // 달을 받아옵니다 
    var clockDate = date.getDate();
    // 몇일인지 받아옵니다 
    var day = date.getDay();
    // 요일을 받아옵니다. 
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    // 요일은 숫자형태로 리턴되기때문에 미리 배열을 만듭니다. 
    var hours = date.getHours();
    // 시간을 받아오고 
    var minutes = date.getMinutes();
    // 분도 받아옵니다.
    var seconds = date.getSeconds();
    // 초까지 받아온후 
    clockTarget .innerText = `${month+1}월 ${clockDate}일 ${week[day]}요일` +
    `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes }`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`;
    // 월은 0부터 1월이기때문에 +1일을 해주고 
    // 시간 분 초는 한자리수이면 시계가 어색해보일까봐 10보다 작으면 앞에0을 붙혀주는 작업을 3항연산으로 했습니다. 
}

function init() {
clock();
// 최초에 함수를 한번 실행시켜주고 
setInterval(clock, 1000);
// setInterval이라는 함수로 매초마다 실행을 해줍니다.
// setInterval은 첫번째 파라메터는 함수이고 두번째는 시간인데 밀리초단위로 받습니다. 1000 = 1초 
}

init();

</script>

애초에 자바스크립트는 html css를 조작목적 보다는 

이벤트를 받으려고 만들어졌다. 

실제로 많은 사람들이 

이벤트를 받으려면 JQuery를 사용해야하고 

이벤트리스너 자체를 JQuery와 함께 배우다 보니 

순수 자바스크립트로는 기능구현을 못한다는 생각들을 많이한다. 

하지만 바닐라스크립트 즉 아무런 라이브러리를 사용하지 

않고도 이벤트리스너를 만들수 있다.

이벤트 종류는 

(click, resize, submit, inputchange, load)등이 있다

자바스크립트에선 이런것들을 JQuery를 사용하지 않아도 

이벤트리스너를 만들수 있다. 

ex) 버튼1 JQuery를 사용한 이벤트 리스너

<script src="//code.jquery.com/jquery.min.js"></script>  
<input type="button" id="button1" value="버튼1">

<script>
$("#button1").click(function() {
alert("버튼1을 누르셨습니다.");
});
</script>

ex) 버튼2 순수 자바스크립트를 이용한 이벤트 리스너(addEventListener)

<input type="button" id="button2" value="버튼2">

<script>
function clickEvent() {
alert("버튼2을 누르셨습니다.");
}

const button = document.getElementById("button2");
button.addEventListener("click", clickEvent);
</script>

코드가 실제로 JQuery를 사용하는것보다 조금더 길어지긴 했으나 

실제 성능차이는 많이 난다고 한다. 

물론 이런 작은규모 수준에서는 아니지만 

추후 각종 이벤트들로 스크립트파일 하나가 몇천줄이되는 순간 

많은 성능차이가 발생하게 될것이다. 

추가로 document.get~를하면 JQuery와 같이 다양한 방법으로 타겟을

잡을수 있다. 

"VanillaJs"란 ? 

 자바스크립트의 수 많은 프레임웍, 라이브러리를 사용하지 않고 순수하게 javascript만 사용하는것을 일컫는다.

요즘 수많은 개발자들이 javascript의 무거운 라이브러리등을 버리고 작고 가볍고 빠른 VanillaJs를 선택하고 있다. 

바닐라JS 는 공식사이트를 통해 다운 받을수 있다. 

실제로 사이트를 통해 VanillaJs를 다운 받으면 파일 사이즈가 0kb이다. 

바닐라JS는 실제로 사용하기 위해선 별도의 파일이 필요 없다는 의미이다. 

그 이유는 이미 우리가 사용하는 크롬, 사파리, 익스플로 등 브라우저에는 이미 바닐라JS가 자체적으로 내장이 되어 있기 때문이다.

바닐라JS 공식 사이트에서는 바닐라JS가 마치 프레임워크, 라이브러리처럼 가벼운것은 물론이고 빠르고 호환성이 좋다라는 문구들이 써있는데

이말이 바닐라JS가 프레임워크나 라이브러리로 오해 할 수 있지만 JQuery같은 라이브러리가 전혀 포함되있지 않아서 

훨씬더 빠르다는 말로 받아들이면 될 것 같다. 

국내에서는 아직도 많은 개발자들이 JQuery 없이는 개발하기 힘들어 하는 경향이 있는데 

앞으로 다음 포스팅부터는 과연 JQuery없이 어떻게 개발하며 JQuery없이도 각종 기능들을 구현할수 있게끔 하는데 노력해볼것이다.