사랑하기 위해 필요한 것들

자주 쓰이는 jQuery AJAX 예제
개발일정에 치여 도무지 블로깅 할 시간이 안나 미치겠네요. 새로운 것 정리하기는 힘들고 자주 사용하고 있는 Ajax 패턴 정리해 봅니다.
Ajax 구현할 때는 거의 jQuery 를 활용하고 있습니다. 모바일 웹 구현할 때 네이티브 앱과 같은 UX 를 위해 Ajax 를 많이 사용하게 됩니다.
■로그인
로그인은 보통 화면에서 폼 값을 입력한 후 해당 값과 함께 ajax 호출합니다.
호출된 액션에서 로그인 관련 인증 및 예외처리 프로세스를 돌인 후
인증 상태에 따라 결과 값을 출력합니다.
출력된 값에 따라 로그인 페이지에서 경고를 띄우든 다음 페이지로 진행하든 처리하죠.
ajax 루틴을 돌고 있을 때 사용할 로딩 바를 띄우는 작업도 함께 해주면 좀더 나은 UX 를 구현할 수 있겠죠.
- login view script
<script>
function checkLogin(){
   
    if( $.trim($("#userId").val()) == '' ){
        alert("아이디를 입력해 주세요.");
        $("#userId").focus();
        return;
    }
    if( $.trim($("#userPw").val()) == '' ){
        alert("비밀번호를 입력해 주세요.");
        $("#userPw").focus();
        return;
    }
    // 로그인 프로세스 호출
    $.ajax({
        type: 'post'
        , async: true
        , url: '/member.do?cmd=login'
        , data: $("#frm").serialize()
        , beforeSend: function() {
             $('#ajax_load_indicator').show().fadeIn('fast');
          }
        , success: function(data) {
            var response = data.trim();
            console.log("success forward : "+response);
            // 메세지 할당
            switch(response) {
                case "nomatch":
                    msg = "아이디 또는 비밀번호가 일치하지 않습니다."; break;
                case "fail":
                    msg = "로그인에 실패 했습니다."; break;
                default :
                    msg = "존재하지 않는 사용자입니다."; break;
            }
            // 분기 처리
            if(response=="success"){
                window.location.href = "${targetUrl}";
            } else {
                alert(msg);
            }
          }
        , error: function(data, status, err) {
         console.log("error forward : "+data);
            alert('서버와의 통신이 실패했습니다.');
          }
        , complete: function() {
         $('#ajax_load_indicator').fadeOut();
          }
    });
}
</script>
- login view html
<form id="frm" name="frm" method="post" action="" onSubmit="checkLogin();return false;">
    <fieldset>
        <legend>login</legend>
        <div class="login_item mg_top34">
            <label>id</label>
            <input id="userId" name="memberVo.xcWebMbrId" type="text" class="i_login" />
        </div>
        <div class="login_item mg_top10">
            <label>password</label>
            <input id="userPw" name="memberVo.xcPswd" type="password" class="i_login" />
        </div>
       
        <div id="ajax_load_indicator" style="display:none">
            <p style="text-align:center; padding:16px 0 0 0"><img src="/mobile/common/img/ajax-loader-line.gif" /></p>
        </div>
        <p class="keeping mg_left89">
            <input id="keepidpw" class="rd_box22" value="1" type="checkbox" name="idPswdSave" >
            <label for="keepidpw">ID/PW 저장</label>
        </p>
        <p class="keeping mg_left20">
            <input id="keepid" class="rd_box22" value="1" type="checkbox" name="idSave" >
            <label for="keepid">ID 저장</label>
        </p>
        <span class="btn_login">
            <input type="image" src="<%=imageUrl%>/btn/btn_login.jpg" title="로그인" onclick="checkLogin();return false;">
        </span>
        <p class="btn_register"><a href="/member.do?cmd=memberJoin"><img src="<%=imageUrl%>/btn/btn_join.jpg" alt="회원가입" /></a>
        <a href="/member.do?cmd=goIdPwFind" class="mg_left5"><img src="<%=imageUrl%>/btn/btn_sch.jpg" alt="아이디/비밀번호 찾기" /></a></p>
    </fieldset>
</form>
- login ajax result
<%@ include file="/mobile/common/include/config.jsp" %>
${result}
■내용 추가
페이지 하단으로 스크롤 이동했을 때 추가되는 자동으로 다음 페이지 데이터가 추가되는 UX를 구현할 때 사용하는 기법으로 jQuery 의 append() 함수를 사용할 수 있다.
- product list view script
<script>
function paging(){
    count++;
   
    $.ajax({
        type: 'post'
        , async: true
        , url: "/display.do?cmd=productListAppend&ordFlag="+'${ordFlag}'+"&categoryCd="+categoryCd+"&itemCode="+'${itemCode}'+"&count="+count
        , beforeSend: function() {
             $('#ajax_load_indicator').show().fadeIn('fast');
          }
        , success: function(data) {
            var response = data.trim();
            console.log("success forward : "+response);
            // 상품 리스트 할당
            $('#view_list').append(response);
            $('#product_count').html($('#view_list li.thumb').size());
          }
        , error: function(data, status, err) {
            console.log("error forward : "+data);
            alert('서버와의 통신이 실패했습니다.');
          }
        , complete: function() {
            $('#ajax_load_indicator').fadeOut();
          }
    });
}
</script>
- product list view html
<!-- 상품 목록 -->
<div id="view_list" class="product_list" style="display: none;">
<c:forEach var="list" items="${returnMap}">
  <a href="/display.do?cmd=productView&brandCd=${list.brandCd }&prodCd=${list.prodCd }&ordFlag=${ordFlag }&styleYY=${list.styleYY }&priceDpYn=${list.priceDpYn }&listPrice=${list.listPrice }&categoryCd=${categoryCd}&itemCode=${itemCode}&rNum=${list.rNum }&count=${count}">
    <ul>
      <li class="thumb"><img src="${list.listImg }" alt="상품이미지" /></li>
      <li class="b_title"><span class="brand">[${list.brandNm }]</span><span class="title">${list.prodNm }</span></li>
      <li class="price">
      <c:if test="${list.priceDpYn eq 'Y'}">
      ${list.listPrice }원
      </c:if>
      <c:if test="${list.priceDpYn eq 'N'}">
      <span><a href="#"><img src="<%=imageUrl%>/common/ic_login.png" alt="로그인" /></a></span>
      </c:if>
      </li>
      <li class="btn_go"><img src="<%=imageUrl%>/btn/btn_go.png" alt="" /></li>
    </ul>
  </a>
</c:forEach>
</div>
<div id="ajax_load_indicator" style="display:none">
    <p style="text-align:center; padding:14px 0 14px 0"><img src="/mobile/common/img/ajax-loader-line.gif" /></p>
</div>
   
<!-- 더보기 bar-->
<div class="more_bar">
<a href="javascript:paging()">
  <ul class="sec01">
    <li class="btn_arr"><img src="<%=imageUrl%>/common/arr_down.png" alt="" /></li>
    <li class="text_more">15개 더보기</li>
    <li class="text_num"><span id="product_count">${total}</span> / 999</li>
  </ul>
  </a>
  <p><a href="#"><img src="<%=imageUrl%>/btn/btn_top.jpg" alt="맨위로" /></a></p>
</div> 
- append view html
<%@ include file="/mobile/common/include/config.jsp"%>
<!-- 상품 목록 -->
<c:forEach var="list" items="${returnMap}">
    <a href="/display.do?cmd=productView&brandCd=${list.brandCd }&prodCd=${list.prodCd }&ordFlag=${ordFlag }&styleYY=${list.styleYY }&priceDpYn=${list.priceDpYn }&listPrice=${list.listPrice }&categoryCd=${categoryCd}&itemCode=${itemCode}&rNum=${list.rNum }&count=${count}">
        <ul>
            <li class="thumb"><img src="${list.listImg }" alt="상품이미지" /></li>
            <li class="b_title"><span class="brand">[HAZZYS]</span><span
                class="title">${list.prodNm }</span></li>
            <li class="price">
            <c:if test="${list.priceDpYn eq 'Y'}">
            ${list.listPrice }원
            </c:if>
            <c:if test="${list.priceDpYn eq 'N'}">
            <span><a href="#"><img src="<%=imageUrl%>/common/ic_login.png" alt="로그인" /></a></span>
            </c:if>
            </li>
            <li class="btn_go"><img src="<%=imageUrl%>/btn/btn_go.png" alt="" /></li>
        </ul>
    </a>
</c:forEach>

[jQuery Cookbook - 1장 jQuery의 기초]

 

• jQuery는 HTML문서, 보다 정확하게는 문서객체모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈소스자바스크립트 라이브러리이다.
•jQuery의 철학 : Write less, do more (적게 작성하고, 보다 많이 한다)
•jQuery 선택자 : #은 id, .은 class
•jQuery('div').hide() => 모든 div를 숨긴다.
•jQuery('div').text('new content') => 모든 div의 내부텍스트를 변경한다.
•jQuery('div').addClass("updatedContent") => 모든 div에 updatedContent클래스를 추가한다.
•jQuery('div').show() => 모든 div를 나타낸다.
•jQuery 온라인문서 : http://docs.jquery.com/Main_Page
•문서에 jQuery 포함하기 (부가적인 기능향상을 위해 방법1을 사용하자!)
방법1 : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

방법2 : 다운로드 받아 포함시키기

•DOM 로드된 후 함수 실행 (로딩속도 향상을 위해 방법3을 사용하자!)

방법1 : jQuery(document).ready(function() { //실행구문 })

방법2 : jQuery(function() { //실행구문 })

방법3 : </body> 앞에 스크립트 추가

•DOM요소 선택

jQuery('a') => 모든 a요소 (== document.getElementsByTagName('a'))

jQuery('a').length => 모든 a요소의 개수

jQuery('input', $('form')) => 모든 form요소내의 input요소(들)

jQuery('input', document.forms[0]) => 첫번째 form요소내의 input요소(들)

jQuery('input', 'body') => body요소내의 input요소(들)

•DOM요소 필터링

jQuery('a').filter('.external') => 모든 a요소 중 클래스명이 external인 a요소(들) (== jQuery('a').filter(function(index) { return $(this).hasClass('external'); }))

jQuery('p').filter('.middle').end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 필터링 전 요소(들) (== jQuery('p'))

•파괴작업 (end()도 파괴작업의 이) : 일치된 jQuery요소집합에 변경을 가하는 모든 종류의 작업
•DOM요소 검색

jQuery('p').find('em') => 모든 p요소 하위의 em요소(들) (== jQuery('em', $('p')) ==jQuery('p em'))

jQuery('p').filter('.middle').find('span').end().end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 하위 span요소(들)의 검색 전, 필터링 전 요소(들)

(==jQuery('p'))

•filter는 현재 요소(들)에 대해, find는 하위 요소(들)에 대해 작동
•DOM 셀렉션 추가

jQuery('div').find('p').andSelf().css('border', '1px solid #993300'); => div요소(들)과 하위 p요소(들) 모두에 대해 스타일 적용

•DOM 탐색

jQuery('li:eq(1)') => 두번째 li 요소

관련메소드 => next():다음요소, prev():이전요소, parent():상위요소, children():하위요소들, nextAll():다음요소들, prevAll():이전요소들

jQuery('li:eq(1)').parent().children(':last') => 두번째 li요소의 상위요소의 마지막 하위요소

기타 탐색관련 메소드 : http://docs.jquery.com/Traversing

•DOM요소 생성

jQuery('<p><a>jQuery</a></p>'); => p요소 생성

jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com'); => p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경

jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body');

=> p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경 후 생성된 p 요소를 body요소 하위로 포함시킴

•DOM요소 제거

jQuery('a).remove(); => 모든 a요소 제거

jQuery('a').remove('.remove'); => 클래스명이 remove인 모든 a요소 제거

•DOM요소 교체

jQuery('li.remove').replaceWith('<li>removed</li>'); => 클래스명이 remove인 모든 li요소들을 뒤에 나온 li요소로 변경

•DOM요소 복제

jQuery('ul').clone().appendTo('body'); => 모든 ul요소들을 복제하여 body의 하위요소로 포함시킴

jQuery('ul#a li').click(function() { //실행구문 }).parent().clone(true).find('li').appendTo('#b').end().end().remove();

=> 아이디가 a인 ul 하위의 li요소들을 클릭하면 함수를 실행시키고 부모요소인 ul요소를 찾아 복제(true이면 이벤트까지도 복제됨)한 후 복제된 ul의

하위 li요소들을 찾아 아이디가 b인 요소의 하위요소로 포함시킨 후 기존 ul을 제거

•속성 제어

jQuery('a').attr('href', 'http://www.jquery.com').attr('href'); => 모든 a요소의 href속성의 값을 설정하고 가져옴

jQuery('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) => 모든 a요소의 href속성값과 title속성값을 설정

jQuery('a').removeAttr('title') => 모든 a요소의 title속성 제거

•class 조작

addClass() : 클래스 추가  hasClass() : 클래스 값 확인  removeClass() : 클래스 제거  toggleClass() : 클래스 없으면 추가, 있으면 제거

•HTML 컨텐츠 / 텍스트 조작

jQuery('p').html('<strong>Hello World</strong>'); => 모든 p요소에 html컨텐츠 삽입

jQuery('p').html(); => 모든 p요소의 html 가져옴

jQuery('p').text('Hello World'); => 모든 p요소에 text 삽입 (text메소드는 html을 escape한다)

jQuery('p').text(); => 모든 p요소의 text 가져옴

•전역적인 충돌 없이 $ 사용

(function($) {

})(jQuery);

 

 

[JQuery Cookbook - 2장 jQuery로 요소 선택하기]

 

• jQuery함수내에서 CSS셀렉터 사용
jQuery('#content p a'); => id가 content인 요소의 하위 모든 p요소의 하위 모든 a요소들
jQuery('#content p a').addClass('selected'); => 선택된 요소들에 selected 클래스 적용
•직속 자손 결합자 (>) : 계층적 관계
jQuery('#nav li > a'); => id가 nav인 요소의 하위 모든 li요소의 직속 자손인 a요소들

jQuery('> p', '#content'); => id가 content인 요소의 직속 자손인 p요소들 => jQuery('#content > p')와 같다

jQuery('#content').children(); => id가 content인 요소의 모든 직속 자손들 => jQuery('#content').find('> *');과 같다

jQuery('#content').children('p'); => id가 content인 요소의 모든 직속 p요소들

•인접 형제 결합자 (+) : 같은 레벨벨
jQuery('h1 + h2'); => h1요소에 인접한 h2요소들 => jQuery('h1').next('h2');와 같다
jQuery('h1').siblings('h2, h3, p'); => h1요소에 인접한 h2나 h3나 p 요소들
jQuery('li.selected').nextAll('li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들
•일반 형제 결합자 (~)

jQuery('li.selected ~ li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들

•필터

◦:first 첫번째 선택요소
◦:last 마지막 선택요소
◦:even 짝수번째 요소들
◦:odd 홀수번째 요소들
◦:eq(n) 인덱스가 n인 요소
◦:lt(n) 인덱스가 n보다 작은 요소들
◦:gt(n) 인덱스가 n보다 큰 요소들

jQuery(':even'); => 문서내의 모든 짝수번째 요소들
jQuery('ul li').filter(':first'); => ul요소다음에 나오는 첫번째 li요소들

•현재 에니메이션 중인 요소 선택
jQuery('div:animated'); => 에니메이션 중인 div요소들

jQuery('div:not(div:animated)').animate({height:100}); => 에니메이션 중이 아닌 div요소들의 높이를 100까지 에니메이션

•텍스트나 요소를 포함하는 요소 선택

jQuery('span:contains("bob")'); => bob라는 문자열을 포함하는 span요소들

jQuery('div:has(p a)'); => p요소 하위에 a요소를 가진 div요소들

jQuery('p').filter(function() { return /(^|\s)(apple|orange|lemon)(\s|$)/.test(jQuery(this).text()); });

  => apple이나 orange나 lemon이라는 텍스트를 가진 p요소들

•일치되지 않는 요소 선택

jQuery('div:not(#content)'); => id가 content가 아닌 모든 div요소들

jQuery('a:not(div.important a, a.nav)'); => important클래스를 가진 div요소의 하위 a요소가 아니고 nav클래스를 가진 a요소가 아닌 a요소들

jQuery('a').click( function() { jQuery('a').not(this).addClass('not-clicked'); } ); => a요소를 클릭하면 모든 다른 a요소들에 not-clicked클래스 추가

$('#nav a').not('a.active'); => id가 nav인 요소의 하위 a요소들 중 active클래스를 가지지 않은 a요소들

•가시성 기반 요소 선택

jQuery('div:hidden'); => 눈에 보이지 않는 div요소들

•속성 기반 요소 선택

jQuery('a[href="http://google.com"]');=>href속성의 값이 http://google.com인 a요소들

jQuery('*[title][href]'); => title과 href 속성을 모두 가지는 요소들

jQuery('div[id^="content-sec-"]'); => id속성의 값이 content-sec-으로 시작하는 div요소들

•속성 셀렉터

◦[attr] 특정 속성을 가지고 있는 요소
◦[attr=val] 속성이 특정값을 가지는 요소
◦[attr!=val] 속성이 특정값을 가지지 않는 요소
◦[attr^=val] 속성이 특정값으로 시작하는 요소
◦[attr$=val] 속성이 특정값으로 끝나는 요소
◦[attr~=val] 공백과 함께 특정값을 포함하는 요소 (car는 car와 일치하지만 cart와는 불일치)
•폼요소 셀렉터

◦:text <input type="text" />
◦:password <input type="password" />
◦:radio <input type="radio" />
◦:checkbox <input type="checkbox" />
◦:submit <input type="submit" />
◦:image <input type="image" />
◦:reset <input type="reset" />
◦:button <input type="button" />
◦:file <input type="file" />
◦:hidden <input type="hidden" />
jQuery(':text'); => type속성의 값이 text인 모든 input요소들

jQuery(':input:not(:hidden)'); => 눈에 보여지는 모든 input요소들

jQuery(':text, :textarea'); => type속성의 값이 text이거나 textarea인 모든 input요소들

•특성을 갖는 요소 선택

jQuery('*').filter(function() { return !!jQuery(this).css('backgroundImage') });

=> 배경이미지를 갖는 모든 요소들

=> !!는 타입을 불린으로 변경하기 위함

=> jQuery함수의 인자인 this는 모든요소들(*) 중 filter에 인자로 전달되는 시점에 함수에 인자로 전달된 요소를 가리키는데

    요소를 jQuery함수의 인자로 넘겨 jQuery메소드를 사용할 수 있도록 함

jQuery('div').filter(function() { var width = jQuery(this).width(); return width>100&&width<200; });

=> 넓이가 100보다 크고 200보다 작은 모든 div요소들

•컨텍스트 매개변수

◦컨텍스트란 jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소
◦jQuery에 의해 사용되는 기본 컨텍스트는 DOM계층에서 최상위 항목인 document임. 즉, jQuery('p')는 jQuery('p', 'document')와 같다
jQuery('p', '#content'); => id가 content인 요소의 하위 p요소들 (이때 #content가 p의 컨텍스트) => jQuery('#content p');와 같다

jQuery('form').bind('submit', function() { var allInputs = jQuery('input', this); });

=> form요소들 중 submit이벤트가 일어나면 allinputs변수에 이벤트가 일어난 form의 모든 input요소들을 저장

[출처 네이버 블로그 - 달빛소년]

1. for문 안의 배열 iterate
 
 Example:
 var myArray = [ “a”, “b”, “c” ];
 var totalElements = myArray.length;
 for (var i = 0; i < totalElements; i++) {
 console.log(myArray[i]);
 }

 Solution: always use regular for loops to iterate arrays.
 var myArray = [ “a”, “b”, “c” ];
 for (var i=0; i<myArray.length; i++) {
  console.log(myArray[i]);
 }
 
 << myArray 에 대한 간섭으로 인해 잘못된 정보를 참조할 수 있다고 하는 내용인데요...
    이글에 대한 많은 분들이 댓글 이슈를 달아주시기도 한 내용입니다.
 그럼 이슈가 무엇이였냐면요... 위 Example 에 대한 예시가 잘못되었다는 것이죠
 Example :
  for (var el in myArray){}
 Solution :
  for(var i = 0, iMax = myArray.length; i < iMax; i++){}
 이런 식으로 했어야 하였다는 이슈가 있더군요.
 
2. 배열 정의
 Example:
 var myArray = new Array(10);
 Solution: Use literal notation to initialize arrays. Do not predefine array length.
 var myArray = [];
 
 << 문제점 2개를 이야기 하는데요
      var a = new Array(10); // 빈 item 에 접근으로 인해 undefined 발생
  var a = {"","","","",....,""}; // 속도가 느린문제
  이런 문제를 앉고 있다고 하네요 >>
 
 
3. Undefined properties
 Example:
 var myObject = {
  someProperty: “value”,
  someOtherProperty: undefined
 }
 Solution: if you want to explicitly declare a uninitialized properties inside an object, mark them as null
 var myObject = {
  someProperty: “value”,
  someOtherProperty: null
 }
 
 << object 에 없는 값과 있으나 undefined 로 정의한 값을 구분할 수 없다는 이슈였습니다.
 typeof myObject['someOtherProperty'] // undefined
 typeof myObject['unknownProperty'] // undefined   >>
 

4. 클로저 오용
 Example:
 function(a, b, c) {
  var d = 10;
  var element = document.getElementById(‘myID’);
  element.onclick = (function(a, b, c, d) {
   return function() {
    alert (a + b + c + d);
   }
  })(a, b, c, d);
 }
 Solution: use closures to simplify your code
 function (a, b, c) {
  var d = 10;
  var element = document.getElementById(‘myID’);
  element.onclick = function() {
   //a, b, and c come from the outer function arguments.
   //d come from the outer function variable declarations.
   //and all of them are in my closure
   alert (a + b + c + d);
  };
 }
 
 << 변수에 대한 접근 범위를 몰라 중복해서 불필요한 파라미터를 정의하는 것을 말합니다. >>
 
5. loop 안의 클로져
 Example:
 var elements = document.getElementByTagName(‘div’);
 for (var i = 0; i<elements.length; i++) {
  elements[i].onclick = function() {
   alert(“Div number “ + i);
  }
 }
 Solution: use a second function to pass the correct value.
 var elements = document.getElementsByTagName(‘div’);
 for (var i = 0; i<elements.length; i++) {
  elements[i].onclick = (function(idx) { //Outer function
   return function() { //Inner function
    alert(“Div number “ + idx);
   }
  })(i);
 }

 << 내부 클로져의 경우 최종값 i 값을 참조한다는 문제였습니다. >>
 
6. DOM 으로인한 메모리 누수
 Example:
 function attachEvents() {
  var element = document.getElementById(‘myID’);
  element.onclick = function() {
   alert(“Element clicked”);
  }
 };
 attachEvents();
 Solution: avoid those closures or undo the circular reference inside the function
 function attachEvents() {
  var element = document.getElementById(‘myID’);
  element.onclick = function() {
   //Remove element, so function can be collected by GC
   delete element;
   alert(“Element clicked”);
  }
 };
 attachEvents();
 
 << 요소에 function이 참조로 걸려 해제가 되지 않는 문제를 다루고 있습니다. >>

7. float 과 integer의 구분
 Example:
 var myNumber = 3.5;
 var myResult = 3.5 + 1.0; //We use .0 to keep the result as float
 Solution: don’t use decimals to “convert” numbers to floats.
 var myNumber = 3.5;
 var myResult = 3.5 + 1; //Result is 4.5, as expected
 
 << 자바스크립트 float 과 integer 구분이 없습니다. 모두 float 입니다. >>
 
8. with() 사용
 Example:
 team.attackers.myWarrior = { attack: 1, speed: 3, magic: 5};
 with (team.attackers.myWarrior){
  console.log ( “Your warrior power is ” + (attack * speed));
 }
 Solution: don’t use with() for shortcuts. Only for context injection when you really need it.
 team.attackers.myWarrior = { attack: 1, speed: 3, magic: 5};
 var sc = team.attackers.myWarrior;
 console.log(“Your warrior power is ” + (sc.attack * sc.speed));

 << with() 는 특별한 경우가 아니면 사용하지 말라는 내용입니다. 이유는 느리기 때문입니다. >>
 
9. 문자 조합을 이용한 setTimeout/setInterval
 Example:
 function log1() { console.log(document.location); }
 function log2(arg) { console.log(arg); }
 var myValue = “test”;
 setTimeout(“log1()”, 100);
 setTimeout(“log2(” + myValue + “)”, 200);
 Solution: never use strings for setTimeout()or setInterval()
 function log1() { console.log(document.location); }
 function log2(arg) { console.log(arg); }
 var myValue = “test”;
 setTimeout(log1, 100); //Reference to a function
 setTimeout(function(){ //Get arg value using closures
  log2(arg);
 }, 200);
 
 << 스트링 조합을 사용할 경우 웹브라우저 엔진이 새로운 function 을 만들때 매우 느려지기때문에
    이렇게 사용하지 말라고 말합니다. >>
 
10. 무거운 funcation에 대한 setInterval() 사용
 Example:
 function domOperations() {
  //Heavy DOM operations, takes about 300ms
 }
 setInterval(domOperations, 200);
 Solution: avoid setInterval(), use setTimeout()
 function domOperations() {
  //Heavy DOM operations, takes about 300ms
  //After all the job is done, set another timeout for 200 ms
  setTimeout(domOperations, 200);
 }
 setTimeout(domOperations, 200);

 <<  자바 스크립트 엔진은  대기열에 이미 다른 실행이있다면 다음 실행 대기열에 추가합니다.
  이럴경우 function 을 건너뛰거나 동시에 실행될 소지가 발생합니다. >>
 >>
11. this 의 오용
 - 예로 표현하기 어려움.
 * Regular function: myFunction(‘arg1’);
 this points to the global object, wich is window for all browers.
 * Method: someObject.myFunction(‘arg1’);
 this points to object before the dot, someObject in this case.
 * Constructor: var something = new myFunction(‘arg1’);
 this points to an empty Object.
 * Using call()/apply(): myFunction.call(someObject, ‘arg1’);
 this points to the object passed as first argument.
 
 << 여기에 대해서는 궁금하네요...접근에 대한 이슈같아 보입니다. >>
 
12. eval() 을 이용한 dynamic properties 접근
 Example:
 var myObject = { p1: 1, p2: 2, p3: 3};
 var i = 2;
 var myResult = eval(‘myObject.p’+i);
 Solution: use square bracket notation instead of eval()
 var myObject = { p1: 1, p2: 2, p3: 3};
 var i = 2;
 var myResult = myObject[“p”+i];
 
 << eval() 대신에 배열을 이용해서 접근하라는 말입니다. >>
 
13. undefined 를 사용하는 변수
 Example:
 if ( myVar === undefined ) {
  //Do something
 }
 Solution: use typeof when checking for undefined.
 if ( typeof myVar === “undefined” ) {
  //Do something
 }
 
 << undefined 확인하기위해서는 typeof 를 사용하라는 것입니다. >>