remagine

JAVASCRIPT 초급 강의 3 본문

JAVASCRIPT

JAVASCRIPT 초급 강의 3

remagine 2017. 2. 17. 11:16

JAVASCRIPT 초급 강의 3


 



 이번 시간 예제 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <title>JavaScript Core</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    // if ( !this.jQuery ) {
    //   document.write('<script src="../lib/jquery.3.1.0.min.js"><\/script>');
    // } else {
    //   console.log('CDN jQuery 로드 성공!!!');
    // }
 
    // 논리 OR 연산자를 사용한 조건 구문 처리
    // this.jQuery || document.write('<script src="../lib/jquery.3.1.0.min.js"><\/script>');
  </script>
  <script src="javascript-core.js"></script>
</head>
<body>
 
  <div class="wrapper">
    <header class="page-header">
      <h1 class="brand">Iropke</h1>
      <p class="slogan">Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Aperiam, excepturi.</p>
    </header>
    <main role="main">
      <article>article</article>
    </main>
  </div>
 
  <script>
    // while 구문을 사용하여 .wrapper 요소의 자식 노드들을 순환하는 처리
    var childNodes = document.querySelector('.wrapper').childNodes;
    var total = childNodes.length, collection = [], child;
    console.log('%c---------------------------------------------------', 'color: #b8b8b8');
    while( childNodes[--total] ) {
      // 노드의 유형을 체크하려면 .nodeType
      child = childNodes[total];
      // console.log(childNodes[total].nodeType === document.ELEMENT_NODE);
      if(child.nodeType === 1) {
        collection.push(child);
      }
    }
    console.log(collection.reverse());
  </script>
 
</body>
</html>
cs




1. 논리 연산자 &&,|| 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    // if ( !this.jQuery ) {
    //   document.write('<script src="../lib/jquery.3.1.0.min.js"><\/script>');
    // } else {
    //   console.log('CDN jQuery 로드 성공!!!');
    // }
 
    // 논리 OR 연산자를 사용한 조건 구문 처리
    // this.jQuery || document.write('<script src="../lib/jquery.3.1.0.min.js"><\/script>');
  </script>
 
 위의 코드를 보면 jquery를 cdn으로 받아오기 있다.
 가끔 network 문제로 loading에 실패할 때가 있는데
 
 이럴때는 this.jQuery가 존재하는지 여부를 if조건식에 넣어
 없을 때 서버 내에 존재하는 jQuery를 호출하게 한다. 
 
 이 if 문은 논리 연산자 &&, || 을 통해 간단하게 표현할 수 있는데
 this.jQuery || document.write('<script src="../lib/jquery.3.1.0.min.js"><\/script>'); 의 의미는 
  this.jQuery 가 존재하지 않을때만 뒤의 구문을 실행하라는 의미이다. 
 
 
 || --> 조건이 거짓일 때 뒤항이 실행
 && --> 조건이 참일 때 뒤항이 실행
cs


삼항연산자가 아닌 잏항 연산자가 아닐까 싶다. 



2. 자식노드  순환 처리 하기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    // while 구문을 사용하여 .wrapper 요소의 자식 노드들을 순환하는 처리
    var childNodes = document.querySelector('.wrapper').childNodes;
    var total = childNodes.length, collection = [], child;
    console.log('%c---------------------------------------------------', 'color: #b8b8b8');
    while( childNodes[--total] ) {
      // 노드의 유형을 체크하려면 .nodeType
      child = childNodes[total];
      // console.log(childNodes[total].nodeType === document.ELEMENT_NODE);
      if(child.nodeType === 1) {
        collection.push(child);
      }
    }
    console.log(collection.reverse());
  </script>
cs



 body 태그안에 wrapper class div는 child로 header와 main을 가지고 있다. header는 h1과 p를 자식으로 main은 article을 자식으로 가지고 있다. 

 

var childNodes 는 document.querySelector('.wrapper')로 wrapper div를 select하고, childNodes로 자식을 저장한다. //배열인가? 유사배열인가?


while( childNodes[--total])  // 선감소 조건문으로 더이상 배열이 없으면 false가 되어 종료된다. 

//out of index인가 null인가 undefined인가??


child = childNoes[total] ; //child 변수에 배열에서 꺼낸 값을 저장하고


if(child.nodeType ===1) // 만일 저장된 객체 타입이 1이면 (Element) 

 

 collection.push(child); // 해당 자식객체를 배열에 push한다


console.log(collection.reverse()); // 선감소로 while 돌렸기 때문에 역순으로 나온다. 그러므로 reverse()를 통해 역순으로 출력한다



3. 예제풀기


 -----------------------------------

 미션, IE 8+

 -----------------------------------

 문서에서 .gnb ul 요소를 선택한 후,

 .gnb ul의 첫번째 자식 요소를 찾는다.

 찾은 요소의 다음 인접한 형제 요소를

 변수 gnb_2nd_child에 참조한다.






 1.헬퍼 함수


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function nextEl(node) {
   do { node = node.nextSibling; } //do 무조건 1번은 실행 while조건식이 false일때까지 반복한다 (do-while문)
   while( node && node.nodeType !== 1 ); // node에 객체가 없거나(null) nodeType이 1(Elements)가 아닐때 
   return node;
 } // node가 인자로 던져지면 마지막 형제노드를 담아 return한다
 
 function firstEl(node) { 
   return node.children[0];
 } // node가 인자로 던져지면 node의 자식노드들중 첫번째를 return한다
 
 
 function lastEl(node) {
  var l=node.children.length;
  return node.children[ l - 1 ];
 } // node가 인자로 던져지면 node의 자식노드들중 마지막을 return한다
 
cs


 

  2. html 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <title>자바스크립트 코어 - 반복 구문</title>
  <script src="js/js-core-loop.js"></script>
</head>
<body>
 
<nav class="gnb">
  <ul>
 
 
 
 
    <li><a href="">item 1</a></li>
 
 
 
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
    <li><a href="">item 4</a></li>
  </ul>
</nav>
 
</body>
</html>
cs




 3. 문제풀어보기


 먼저 gnb클래스를 select 하자


var gnb = document.querySelector('.gnb');


 이제 gnb의 자식 ul노드를 select 한다


var gnb_ul = gnb.querySelector('ul');


 첫번째 자식노드를 찾는다


var first_child_el = nextEl(gnb_ul.firstChild); // child의 type값이 1(element)여야 하기 때문에 nextEl함수로 검증한다

//만일 nextEl로 검증하지 않으면 element가 아니라 공백텍스트 공간 type 3이 node로 잡힌다.


 ** ie9 이상에서는


var first_child_el = gnb_ul.firstElementChild; 로 함수를 정의하지 않고 사용가능하다


1
2
3
4
  do { first_child_el = first_child_el.nextSibling; } // 3, 8, 1
  while( first_child_el && first_child_el.nodeType !== 1 );
  console.log(first_child_el);
 
cs




4. 문제풀기 2


  .gnb a 모두 수집한 다음

  수집된 각 <a>요소노드를 클릭하면

  콘솔에 수집될 당시의 인덱스 (for문의 l 값) 로그한다


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gnb_links = document.querySelectorAll('.gnb a');
 
 function printIndex(index) {
   console.log(this, index);
   return false; // [Legacy] Prevent Default Behavior 
 }
 
 for ( var l = --gnb_links.length; gnb_links[l] ; l--){
    // JavaScript Closure
    // 함수 다시!!
    var link = gnb_links[l];
    gnb_links[l].onclick = (function(index){
    return printIndex.bind(link, index);
    })(l);
 }
 
cs



 var gnb_links = document.querySelectorAll('.gnb a');

 gnb클래스 객체안에 있는 모든 a태그들을 수집해서 변수에 저장

 


 function printIndex(index) {

   console.log(this, index);

   return false; // [Legacy] Prevent Default Behavior 

 }

 선택한 a태그의 index를 출력하고, 


 for ( var l = --gnb_links.length; gnb_links[l] ; l--){ 

    // JavaScript Closure

    // 함수 다시!!

    var link = gnb_links[l];

    gnb_links[l].onclick = (function(index){

    return printIndex.bind(link, index);

    })(l);

 }


 // 이부분은 잘 이해가 안간다. 

 // index가 대체 어디서 나온것인가?

 // clouser라고 하는데 대체 closure가 뭔가



5. let 키워드  var 키워드 


 자바스크립트에서 변수의 scope는 일반적으로 함수전체이다.


 for문에서 선언된 i 변수도 함수안이라면 출력이 가능하다 


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
    
    var total = 0;
    for(var i = 1; i < 11; i++){
        var temp = i;
        total += temp;
    }
    
    console.log("total : " + total);
    
   //블록 내에 선언된 변수들이지만 호출이 가능하다..
    console.log("temp : " + temp);
    console.log("i : " + i);
    
})();

 



하지만 var 대신에 let 키워드를 사용하면 블록안에서만 사용한 변수가 된다 


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
    
    var total = 0;
    for(let i = 1; i < 11; i++){
        let temp = i;
        total += temp;
    }
    
    console.log("total : " + total);
    
   //밖에서는 정의되지 않았기 때문에 호출하려고 하면 에러가 난다..
    console.log("temp : " + temp);
    console.log("i : " + i);
    
})();




 

저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

Closure 클로저에 대해서  (0) 2017.06.30
This의 중요성과 Call() 사용  (0) 2017.05.04
JAVASCRIPT 초급 강의 2  (0) 2017.02.17
JAVASCRIPT 초급 강의 1  (0) 2017.02.17
공유하기 링크
'JAVASCRIPT' Related Articles more
Comments