균형의 5가지 유형

• 수평 균형
• 수직 균형
• 방사형 균형
• 대칭 균형
• 비대칭 균형

수평과 수직 균형

방사형 균형

대칭과 비대칭 균형

균형의 5가시 속성

크기

색상

모양

가치

위치

알아볼 수 있게

의미있는 정의

var foo = document.getElementById('foo'); // get element by id form DOM
var bars = document.getElementsByClassName('bar'); // get elements by class name form DOM

  /**
   * Create a new `Socket.IO client` which can establish a persistent
   * connection with a Socket.IO enabled server.
   *
   * @api public
   */

  function Socket (options) {
    this.options = {
        port: 80
      , secure: false
      , document: 'document' in global ? document : false
      , resource: 'socket.io'
      , transports: io.transports
      , 'connect timeout': 10000
      , 'try multiple transports': true
      , 'reconnect': true
      , 'reconnection delay': 500
      , 'reconnection limit': Infinity
      , 'reopen delay': 3000
      , 'max reconnection attempts': 10
      , 'sync disconnect on unload': true
      , 'auto connect': true
      , 'flash policy port': 10843
    };

    io.util.merge(this.options, options);

module.exports = {

  'test that protocol version is present': function (done) {
    sio.protocol.should.be.a('number');
    done();
  },

  'test that default transports are present': function (done) {
    sio.Manager.defaultTransports.should.be.an.instanceof(Array);
    done();
  },

  'test that version is present': function (done) {
    sio.version.should.match(/([0-9]+)\.([0-9]+)\.([0-9]+)/);
    done();
  },

  'test listening with a port': function (done) {

단수/복수 과거/현재

  var contentTypes = {
    "js": "application/javascript",
    "json": "application/json",
    "css": "text/css",
    "less": "text/css",
    "scss": "text/x-scss",
    "sass": "text/x-sass",

    ...

    "md": "text/x-markdown",
    "markdown": "text/x-markdown"
  };

  ...

  var fileExt = file.getAttribute("name").split(".").pop();
  var customType = contentTypes[fileExt];

jQuery.extend({
  // Create a simple deferred (one callbacks list)
  _Deferred: function() {
    var // callbacks list
      callbacks = [],
      // stored [ context , args ]
      fired,
      // to avoid firing when already doing so
      firing,
      // flag to know if the deferred has been cancelled
      cancelled,
      // the deferred itself
      deferred  = {

        // done( f1, f2, ...)
        done: function() {
          if ( !cancelled ) {
            var args = arguments,
              i,
              length,
              elem,
              type,
              _fired;
            if ( fired ) {
              _fired = fired;
              fired = 0;
            }

작은 따옴표가 기본

var anchor = '<a href="/' + foo + '.html">' + foo + '</a>'; // correct

var anchor = "<a href=\"/" + foo + ".html\">" + foo + "</a>"; // incorrect

var anchor = "<a href='/" + foo + ".html'>" + foo + "</a>"; // nonsense

띄어쓰기

• 쉼표(,): 전: 0, 후: 1
• 괄호('(', ')'): 전: 0, 후: 0
• 세미콜론(;): 전: 0, 후: 1
• 산술 연산자(+, -, *, /, % ...): 전: 1, 후: 1
• 관계 연산자(==, ===, !=, !==, <, >, <=, >= ...): 전: 1, 후: 1
• 1진 연산자(++, --): 전: 0, 후: 0
• 할당(a=b): 전: 1, 후: 1
• 논리 연산자(&&, ||): 전: 1, 후: 1
• 키-밸류 연산자({'a':'b'}): 전: 1, 후: 1
• 인라인 주석(//): 후: 1

파일 해더 작성하기

/**
 * All elements that implemented this {@link term.baseclass baseclass} have
 * {@link term.propertybinding property binding},
 * event handling and constructor & destructor hooks. The event system is 
 * implemented following the W3C specification, similar to the 
 * {@link http://en.wikipedia.org/wiki/DOM_Events event system of the HTML DOM}.
 *
 * @constructor
 * @baseclass
 *
 * @author      Ruben Daniels (ruben AT ajax DOT org)
 * @version     3.0, beta
 * @since       0.8
 *
 * @event propertychange Fires when a property changes.
 *   object:
 *     {String} name          the name of the changed property
 *     {Mixed}  originalvalue the value it had before the change
 *     {Mixed}  value         the value it has after the change
 *
 */

들여쓰기와 줄 변경하기

  $(form)
    .prevAll('div.black:first')
    .html(json.timeLabel)
      .prevAll('div.timeline:first')
        .children('div')
        .css('width', json.gauge + '%')
        .end()
      .end()
    .end()
    .replaceWith('<div class="extend-time"><p>' + json.optionLabel + '</p></div>');

  $(el)
    .parent()
    .before([
      '<form method="post" action="' + el.attr('href') + '">',
        '<input type="hidden" value="' + el.attr('id') + '" name="id">',
        '<input type="text" value="" name="key">',
        '<textarea name="value"></textarea>',
        '<p>' + beautify(new Date) + '</p>',
      '</form>'
    ].join('\n'))
      .prev()
        .find('input[type=text]')
        .focus();

/**
 * Module dependencies.
 */

var connect = require('connect')
  , HTTPSServer = require('./https')
  , HTTPServer = require('./http')
  , Route = require('./router/route')

코드를 줄이자

변수 할당

/**
 * Socket server.
 */
var io = require('socket.io').listen(smails.port)
  , sockets = io.sockets.sockets
  , clog = require('clog')
  , dgram = require('dgram');

io.configure(function () {
  io.enable('browser client minification');
  io.enable('browser client etag');
  io.set('log level', 2);

스위치가 싫어요

function getLabel(module) {
  var label;
  witch(module) {
    case 'todo' :
      label = '할일';
      break;
    case 'calendar' :
      label = '달력';
      break;
    case 'note' :
      label = '공책';
      break;
  }
  return label;
}

getLabel('todo'); //=> '할일'

function getLabel(module) {
  return {
      todo: '할일'
    , calendar: '달력'
    , note: '공책'
  }[module];
}

getLabel('todo'); //=> '할일'

3항 연산과 조건부 할당

  var value;
  if (n) {
    value = n;
  } else {
    value = 1;
  }

  // equal next

  var value = n ? n : 1;

  // equal next

  var value = n || 1;

조건부 함수 호출

  if (callback) {
    callback();
  }

  // equal either

  callback && callback();

정의와 동시에 사용

  (dep.using || (dep.using = [])).push(extension);

무의미한 변수 선언

  var self = this;
  $.ajax({
    type: self.method,
    url: self.action,
    success: function(text){
      $('#article').html(text)
    }
  });

  // to be

  $.ajax({
    type: this.method,
    url: this.action,
    success: function(text)
      $('#article').html(text);
    }
  });

더 빠르게

네이티브 코드 사용

문자열 결합

// Instead of this...
var result = 'a' + 'b' + 'c' + 'd';

// This is much faster:
var result = ['a', 'b', 'c', 'd'].join('');

캐시 효과

// Instead of this...
function nodeJam(){
  nodes = document.getElementsByTagName('P');

  for (var i = 0; i < nodes.length; i++) {
    nodes[i].innerHTML += 'test';
  }
}

// This is much faster
function nodeJam(){
  nodes = document.getElementsByTagName('P');

  for (var i = 0, len = nodes.length; i < len; i++) {
    nodes[i].innerHTML += 'test';
  }
}

// Instead of this...
function iterateOverMe(){
  for (var i = 0; i < 1000; i++){
    lorem.ipsum.dolor.sit(i);
  }
}

// This is much faster
function iterateOverMe(){
  var sit = lorem.ipsum.dolor.sit;

  for (var i = 0; i < 1000; i++){
    sit(i);
  }
}

// Instead of this...
function subTrees(){
  var ul = document.getElementById("myUL");

  for (var i = 0; i < 200; i++) {
    ul.appendChild(document.createElement("LI"));
  }
}

// This is much faster
function subTrees(){
  var ul = document.getElementById("myUL");
  var li = document.createElement("LI");
  var parentNode = ul.parentNode;

  parentNode.removeChild(ul);

  for (var i = 0; i < 200; i++) {
    ul.appendChild(li.cloneNode(true));
  }

  parentNode.appendChild(ul);
}

// Instead of this...
function foo(a, b){
  function bar() {
    return a + b;
  }

  return bar();
}

var baz = foo(1, 2) // 3

// This is much faster
function foo(a, b){
  return bar (a, b);
}

function bar(a, b) {
  return a + b;
}

var baz = foo(1, 2) // 3

코딩 패턴

  (function($) {

    // do something...

  })(jQuery);

var Minimaps = (function(win, doc, undefined) {

  /*
   * Options.
   */
  var $options = {
        width: 100
      , height: 400
      , duration: 0.2
      , focusWidth: 0.5
      , focusHeight: 0.5
    }
    , $canvas
    , $context;

  /*
   * Initialize.
   */
  return function(options) {
    $options = $.extend($options, options);
    $canvas = new Element('canvas', {
        id: 'outline'
      , width: $options.width
      , height: $options.height
    });

    if (!($canvas instanceof HTMLElement)
       || $canvas.nodeName.toLowerCase() !== 'canvas')
      return console.error('Your browser does not support Canvas');

    doc.body.insert($canvas);

    this.version = '0.1.1';
    this.draw = draw;
    this.scroll = scroll;

    $context = $canvas.getContext('2d');

    Event.observe(win, 'load', draw);
    Event.observe(win, 'resize', draw);
    Event.observe(win, 'scroll', draw);

    draw();
  };

  /*
   * Core.
   */
  function scroll(event) {
    var x = event.clientX - $canvas.left
      , y = event.clientY - $canvas.top;

    scroll.ani && scroll.ani.state == 'running' && scroll.ani.cancel();
    scroll.ani = new Effect.Scroll(
      y / draw.scale - size.win.height * $options.focusHeight
    , x / draw.scale - size.win.width * $options.focusWidth
    , {
        fps: 100
      , duration: event.type == 'mousemove' ? 0 : $options.duration
    });
  }

  function draw() {
    var scaleX = $options.width / size.doc.width
      , scaleY = $options.height / size.doc.height;

    draw.scale = scaleX < scaleY ? scaleX : scaleY;

    $context.clearRect(0, 0, $canvas.width, $canvas.height);
    $context.scale(1 / draw.scale, 1 / draw.scale);
  }

  ...

})(window, document);

var Minimaps=function(h,d){function g(e){var f=e.clientX-b.left,d=e.clientY-b.top;g.ani&&g.ani.state=="running"&&g.ani.cancel();g.ani=new Effect.Scroll(d/a.scale-size.win.height*c.focusHeight,f/a.scale-size.win.width*c.focusWidth,{fps:100,duration:e.type=="mousemove"?0:c.duration})}function a(){var e=c.width/size.doc.width,d=c.height/size.doc.height;a.scale=e<d?e:d;f.clearRect(0,0,b.width,b.height);f.scale(1/a.scale,1/a.scale)}var c={width:100,height:400,duration:0.2,focusWidth:0.5,
focusHeight:0.5},b,f;return function(e){c=$.extend(c,e);b=new Element("canvas",{id:"outline",width:c.width,height:c.height});if(!(b instanceof HTMLElement)||b.nodeName.toLowerCase()!=="canvas")return console.error("Your browser does not support Canvas");h.body.insert(b);this.version="0.1.1";this.draw=a;this.scroll=g;f=b.getContext("2d");Event.observe(d,"load",a);Event.observe(d,"resize",a);Event.observe(d,"scroll",a);a()}}(window,document);

참조 : http://blog.naver.com/barty82?Redirect=Log&logNo=80129299253


참조해야할 것 : http://tkyk.github.com/jquery-history-plugin/#documentation

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="jquery.history.js"></script>
  <script type="text/javascript">
   /**

    * 동적으로 html을 변경시 $.history.load() 함수호출시 이곳이 호출되어진다.

    */

   function historyStorage(hash) {

    if(hash) {

     $('#field').text(hash);

    } else {

     $('#field').empty();

    }

   }

   jQuery(document).ready(function() {

    //뒤로가기 버튼 클릭시 생성된 iframe을 history.back() 하면서historyStorage에 매개변수를 넘겨주는듯하다.

    $.history.init(historyStorage);

    //버튼정의
    
    $('button').click(function() { // button 클릭시 이벤트 처리를 함.
     $("h1").text($(this).html()); // 뒤로가기 할 시에 차이점을 볼 수 있다. 
     $.history.load($(this).html()); // html() 함수 형식으로 반환하여 history.load 함수에 전달. 말그대로 로드하고 있음.
   // 작동은 init()함수에 초기화했던 콜백함수를 실행시킨다. 실행 시키는 순간 history.js 어딘가에 history 시키는 것과같이 로드하고 있는 듯(로드했던 값을 ->(즉, $(this).html())하다. 그러므로? 뒤로가기를 누를 경우 전에 로드되었던 history를 되돌려준다. 첨에는 아무것도 로드되어있지 않았으니깐 깨끗한 상태로 ^^?

     return false;

    });
   });

  </script>
 </head>
 <body>
  <h1>jQuery AjaxHistory Plugin</h1>
  <button>
   aaa
  </button>
  <button>
   bbb
  </button>
  <button>
   ccc
  </button>
  <div id="field"></div>
 </body>
</html>

한글인경우는 문제가 없지만 영문이나 숫자들은 한줄로 글 입력시 줄바꿈이 자동으로 되지않습니다.
이를 해결하기 위해선 다음과같은 구문을 이용하셔야 합니다.
<style="word-break:break-all;">

예를들어 다음과같이 말이죠.

<table width=100 border=0 cellpadding=0 cellspacing=0>
<tr>
<td style="word-break:break-all;">abcdefghijklmnopqrstuvwxyz</td>
</tr>
<tr>
<td style="word-break:break-all;">1234567890</td>
</tr>
</table>

 출처 : http://adovoba.tistory.com/tag/%EC%98%A4%EB%9D%BC%ED%81%B4XE%208080%20%ED%86%B0%EC%BA%A3