LeonKim

Using data- attributes with JavaScript
Now that we understand what custom data- attributes are and when we can use them, we should probably take a look at how we can interact with them using JavaScript.

If we wanted to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

정말 신선하고, 충격적이며 멋있는 주제가 아닐수 없다 +_+a
미루고 미루다가 드디어 한번 구경해 보게 되었다
http://www.commonjs.org/

그동안 javascript는 브라우저에서만 수행되는 인터프리터 언어로서 취급 되어져 왔다.
나도 그리 생각했었다.
하지만 javascript의 영역이 계속 넓혀지고 있다.

The official JavaScript specification defines APIs for some objects that are useful for building browser

javascript는 이제 브라우저를 뛰쳐 나가고 싶어졌고, 많은 개발자들이 이 꿈을 지원해주고있다.
향후 아래와 같은 환경에서도 이제 js는 큰 역할을 짊어 질수 있을것 같다.
• Server-side JavaScript applications 
• Command line tools 
• Desktop GUI-based applications 
• Hybrid applications 

The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java.

CommonJS에서 제안하고 있는 표준스팩들은 아래와 같다.
http://www.commonjs.org/specs/
•Modules
•Binary strings and buffers
•Charset encodings
•Binary, buffered, and textual input and output (io) streams
•System process arguments, environment, and streams
•File system interface
•Socket streams
•Unit test assertions, running, and reporting
•Web server gateway interface, JSGI
•Local and remote packages and package management

위 제안들을 모두 구현한 구현체가 0.x대 버전을 넘어 1.x대로 진화하는 이후 부터 어떤 일들이 벌어질지 정말 기대된다.
이미 CommonJS에서 제안한 표준에 따라 구현된 구현체들이 상당하다.
아래 주소에서 확인 가능하다.
http://www.commonjs.org/impl/

Node.js 역시 CommonJS의 제안한 표준을 따라 CommonJS에서 정의한 모듈들을 일부 구현하였다.
현재 Node.js는 아래와 같은 상태로서 
v0.4.10 (stable) 
v0.5.2 (unstable) 
http://nodejs.org/#download
0.4 ~0.5 대 버전임에도 불구하고, 벌써부터 Node.js등을 열심히 지지고 볶고 있는 사람들이 많아진것을 구글링을 통해 쉽게 알수 있다.

간단하게 CommonJS에서 제안하고 있는 JS모듈을 Node.js에서 어떻게 사용하는지 모양을 살펴보자.
흔히 FF에 console에서 로그를 찍어보기 위해 console.log(), console.dir() 메소드를 사용하는데, 
http://wiki.commonjs.org/wiki/Console에 해당 모듈도 논의의 대상으로서 리스트에 올라 있다.
현재 Console의 논의 상태와 제안 내용을 살펴 볼수 있다.
11년 7월 현재 아직 PROPOSED, DISCUSSED, SOME IMPLEMENTATIONS 상태임을 알수 있다.

Node.js에서는 이미 이 제안을 참고하여 구현되어있고, 해당 모듈의 사용이 가능하다.
Node.js에서 100%는 아니지만 몇몇 기능을 구현하였고 아래와 같은 형태로 사용이 가능하다.
var maLog = require("console");
maLog.log("Hello world~!!");
-출력결과 당연히 Hello world~!! 라는 주어진 문자열을 출력
>Hello world~!!

maLog.dir(maLog);
-출력결과 당연히 maLog 객체에 assign된 console 모듈 내용을 출력한다. 
- 현재 Node.js에서는 Console스펙의 16가지 기능중 9가지 기능을 구현 제공하고 있음을 알수 있다.
>
{ log: [Function],  
   info: [Function],  
   warn: [Function],  
   error: [Function],  
   dir: [Function],  
   time: [Function],  
   timeEnd: [Function],  
   trace: [Function],  
   assert: [Function] 
}
슬슬 Node.js를 열심히 만져 보아야겠다.

dojox.charting.Chart2D 클래스의 Methods Summary

reference : http://dojotoolkit.org/api/

더보기

constructor(node, kwArgs) returns dojox.charting.Chart2D A reference to the constructor function for this object.
delayedRender() returns dojox.charting.Chart2D Delayed render, which is used to collect multiple updates within a delayInMs time window.
destroy() Cleanup when a chart is to be destroyed.
fireEvent(seriesName, eventName, index) returns dojox.charting.Chart2D Fires a synthetic event for a series item.
fullGeometry() returns dojox.charting.Chart2D Calculate the full geometry of the chart. This includes passing over all major elements of a chart (plots, axes, series, container) in order to ensure proper rendering.
fullRender() returns dojox.charting.Chart2D Force a full rendering of the chart, including full resets on the chart itself. You should not call this method directly unless absolutely necessary.
getAxis(name) returns dojox.charting.axis2d.Default Get the given axis, by name.
getCoords() returns Object Get the coordinates and dimensions of the containing DOMNode, as returned by dojo.coords.
getGeometry() returns Object Returns a map of information about all axes in a chart and what they represent in terms of scaling (see dojox.charting.axis2d.Default.getScaler).
getPlotOrder() returns Array Returns an array of plot names in the current order (the top-most plot is the first).
getSeriesOrder(plotName) Returns an array of series names in the current order (the top-most series is the first) within a plot.
movePlotToBack(name) returns dojox.charting.Chart2D Moves a given plot to back.
movePlotToFront(name) returns dojox.charting.Chart2D Moves a given plot to front.
moveSeriesToBack(name) returns dojox.charting.Chart2D Moves a given series to back of a plot.
moveSeriesToFront(name) returns dojox.charting.Chart2D Moves a given series to front of a plot.
removeAxis(name) returns dojox.charting.Chart2D Remove the axis that was defined using name.
removePlot(name) returns dojox.charting.Chart2D Remove the plot defined using name from the chart's plot stack.
removeSeries(name) returns dojox.charting.Chart2D Remove the series defined by name from the chart.
render() returns dojox.charting.Chart2D Render the chart according to the current information defined. This should be the last call made when defining/creating a chart, or if data within the chart has been changed.
resize(width, height) returns dojox.charting.Chart2D Resize the chart to the dimensions of width and height.
setAxisWindow(name, scale, offset, zoom) returns dojox.charting.Chart2D Zooms an axis and all dependent plots. Can be used to zoom in 1D.
setPlotOrder(newOrder) returns dojox.charting.Chart2D Sets new order of plots. newOrder cannot add or remove plots. Wrong names, or dups are ignored.
setSeriesOrder(newOrder) returns dojox.charting.Chart2D Sets new order of series within a plot. newOrder cannot add or remove series. Wrong names, or dups are ignored.
setTheme(theme) returns dojox.charting.Chart2D Set a theme of the chart.
setWindow(sx, sy, dx, dy, zoom) returns dojox.charting.Chart2D Zooms in or out any plots in two dimensions.
updateSeries(name, data) returns dojox.charting.Chart2D Update the given series with a new set of data points.
zoomIn(name, range) Zoom the chart to a specific range on one axis. This calls render() directly as a convenience method.

var myChart = new dojox.charting.Chart2D(node))

	.addPlot("default", { type: "Areas", tension: "X" })

	.setTheme(dojox.charting.themes.Shrooms)

	.addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])

	.addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])

	.addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])

	.render();


dojo campus에서 다양한 활용예를 살펴 볼수 있다.

친절하게 코드들도 모두 포함되어 있으니, 간단히 테스트도 가능하다.

http://dojocampus.org/explorer/#Dojox_Charting_2D_Simple%20Bar%20Chart

더보기

<script type="text/javascript">
  // list every node with the class "progressIndicator":
  var list = [];
  var nodes = document.getElementsByTagName("*");
  // iterate over every node in the document....SLOOOW
  for(var x = 0; x < nodes.length; x++){
      // only nodes with the class "progressIndicator":
      if(nodes[x].className == "progressIndicator"){
          // add to array:
          list.push(nodes[x]);
      }
  }
  console.dir(list);
</script>

더보기
<script type="text/javascript">
  // list every node with the class "progressIndicator":
  console.dir( dojo.query(".progressIndicator") );
</script>

더보기

  // every element in the page with the class "blueButton" assigned
  dojo.query(".blueButton").forEach(function(node, index, arr){
      console.debug(node.innerHTML);
  });
});

CSS Selector와 동일한 표현방식으로 DOM Node를 탐색한다.

더보기
// all <h3> elements
dojo.query('h3')
// all <h3> elements which are first-child of their parent node
dojo.query('h3:first-child')
// a node with id="main"
dojo.query('#main')
// all <h3> elements within a node with id="main"
dojo.query('#main h3')
// a <div> with an id="main"
dojo.query('div#main')
// all <h3> elements within a div with id="main"
dojo.query('div#main h3')
// all <h3> elements that are immediate children of a <div>, within node with id="main"
dojo.query('#main div > h3')
// all nodes with class="foo"
dojo.query('.foo')
// all nodes with classes "foo" and "bar"
dojo.query('.foo.bar')
// all <h3> elements that are immediate children of a node with id="main"
dojo.query('#main > h3')

좀 더 Optional한 DOM 노드를 탐색하기 위한 사용범을 아래 사이트에서 간단히 확인 가능하다.
http://www.dojotoolkit.org/reference-guide/dojo/query.html#dojo-query


jQuery와 Dojo 모두 Sizzle이라는 pure-JavaScript CSS selector engine을 활용하여 DOM Selector를
지원하고 있다. (Sizzle은 Dojo 재단에서 지원하는 OpenSource Project중 하나다.)

더보기