가장 많이 사용되는 자바스크립트 라이브러리 jQuery가 2.x대로 업그레이드 되었습니다. 

1.x대 버전과 똑같은 API를 사용하는 특징이 있어서, 호환성이 그대로 유지됩니다만,

1.x대 버전과 가장 큰 차이점은 더 이상 ie 6,7,8 버전을 지원하지 않는다는 것입니다.

이 글을 쓰는 시점에 최신 배포되는 1.10.2.js 의 크기는 266.80KB 입니다. 

http://code.jquery.com/jquery-1.10.2.js

똑같은 기능을 하지만, ie6,7,8을 지원하지 않는 2.0.3.js는 다음과 같이 크기가 236.47KB입니다.

http://code.jquery.com/jquery-2.0.3.js

10% 정도의 코드량이 감소했습니다. 압축된 버전도 90KB 대 81KB로 약 10%정도의 차이가 납니다.

http://code.jquery.com/jquery-1.10.2.min.js

http://code.jquery.com/jquery-2.0.3.min.js

호환성을 위해서 이전 버전을 지원할 것이냐, 깔끔하게 털고 갈 것이냐의 결정은 언제나 어렵습니다. jQuery쪽에서도 2.x 사용에 대한 조건이 있습니다. 

"Since IE 6/7/8 are still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site." from: http://jquery.com/download/

"IE 6/7/8 버전이 여전히 보편적이기 때문에, 사이트에 IE 6/7/8 사용자가 안 올 것이라는 확신이 없다면 1.x 버전 사용을 권장합니다."

쉽지 않은 작업을 잘 해내는 듯한 팀입니다.

https://github.com/jquery?tab=members

현재 46명의 개발자들이 협업을 하고 있습니다.

jQuery를 만든 친구, John Resig은 jeresig 아이디를 씁니다.

• 

  jeresigJohn Resig

외부 파일을 불러와서 웹페이지에 표시를 하는 가장 간단한 방법입니다. 

index.html

jquery-2.0.3.min.js

file.txt

http://gmyenu.appspot.com/gmyenu.jsp

Words

• 교육(education)과 강의(instruction)는 다른 개념이다. 강의는 수학, 과학, 지리, 역사를 머릿속에 입력해 주는 것이지만, 교육은 강의를 통해 입력한 지식을 어떻게 삶에 적용하고 미래에 활용할지를 바르게 알도록 해 주는 것이다. 대다수의 학교는 강의에는 능숙하지만 진정한 교육은 잘 하지 못하는 것 같다. 
  (협동조합으로 기업하라, 스테파노 지마니 지음, 송성호 옮김, 붇돋움, p215)

안녕하세요.

메일 많이 기다리셨죠.

저도 이렇게 메일 쓰게 만들었던 느린 인터넷이 당황스러웠습니다.

한꺼번에 보내드릴 수도 있는데, 

5번 연재로 메일 보내드릴 생각입니다.

첫번째는 ajax원리입니다.

http://www.okjsp.net/seq/69451

function getXMLHttpRequest() {

  var xmlreq = false;

  if (window.XMLHttpRequest) {

    // Create XMLHttpRequest object in non-Microsoft browsers

    xmlreq = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    // Create XMLHttpRequest via MS ActiveX

    try {

      // Try to create XMLHttpRequest in later versions

      // of Internet Explorer

      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e1) {

      // Failed to create required ActiveXObject

      try {

        // Try version supported by older versions

        // of Internet Explorer

        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e2) {

        // Unable to create an XMLHttpRequest with ActiveX

      }

    }

  }

  return xmlreq;

}

function processAjax(url, params, callback) {

var req = getXMLHttpRequest();

req.onreadystatechange = function() {

if (req.readyState == 4) {

if(req.status == 200) {

eval(callback+"(req)");

}

}

}

url = url + params + "&t=" + new Date().getTime();

req.open("GET", url, true);

req.send("");

}

Ajax는 Microsoft에서 시작되었습니다.

iframe보다 진화된 형태로 ActiveXObject 객체로 시작했는데, 이것을 모질라 쪽에서 보고,

XMLHttpRequest 객체로 카피해서 사용한 것이죠.

아시다시피 MS쪽의 버전 하위 호환성은 보장하지 않기 때문에 프로그램으로 처리해야 할 경우의 수가 많습니다.

위 코드만 이해하시면 ajax의 기본 원리는 감(感) 잡으신 것입니다.

다음은 jQuery.ajax 보내드리겠습니다.

다음 주까지입니다.

감사합니다.

ps. 급하신 분은 https://github.com/kenu/gallery/tree/master/WebContent 를 참고하세요.

zip 버튼 클릭하시면 다운로드 가능합니다.

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var data = [32, 57, 112],
    dataEnter = data.concat(293),
    dataExit = data.slice(0, 2),
    w = 360,
    h = 180,
    x = d3.scale.ordinal().domain([57, 32, 112]).rangePoints([0, w], 1),
    y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);

window.onload = function() {
  var svg = d3.select("#chart-2").append("svg")
      .attr("width", w)
      .attr("height", h);

  svg.selectAll(".little")
      .data(data)
    .enter().append("circle")
      .attr("class", "little")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", 12);

  d3.select("#chart-2 button").on("click", function() {
    svg.selectAll(".select").remove();

    svg.selectAll(".select")
        .data(data)
      .enter().append("circle")
        .attr("class", "select")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 60)
        .style("fill", "none")
        .style("stroke", "red")
        .style("stroke-opacity", 1e-6)
        .style("stroke-width", 3)
      .transition()
        .duration(750)
        .attr("r", 12)
        .style("stroke-opacity", 1);
  });
}
</script>
</head>
<body>
<div id="chart-2">
<button>Run</button>
</div>