OBG WiKi

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== JavaScript ======
웹페이지를 동적으로 만들어주는 언어

===== 변수 =====

==== 변수 선언 ====
var를 이용하여 선언한다. 변수의 타입은 지정하지 않는다.

<file javascript declare.js>
var i = 1;
</file>

==== 변수 타입 ====
크게 세 가지로 분류할 수 있다.

  * Number
  * String
  * Boolean

===== 문자열 =====
문자열과 관련된 속성은 다음과 같은 것들이 있다.

<file javascript string.js>
"obg".length // 문자열 길이 (결과 : 3)
"obg.".substring(0,2) // 문자열 추출 (결과 : "ob")
</file>

===== 입출력 =====

<file javascript js_io.js>
confirm("I am ready to play!"); // 대화 상자 출력

var age = prompt("What's your age"); // 입력 상자 출력

if(age < 13) {
    console.log("You take no responsibility"); // 텍스트 출력
}
else {
    console.log("Play on!");
}
</file>

===== 객체 =====
  * [[programming:javascript:object|Javascript - 객체]]

===== 함수 =====

====  Passing by value or passing by reference ====
일반적인 변수를 함수의 파라메터로 전달하면 해당 변수의 값이 전달된다.

<code javascript>
function myfunction(x)
{
      // x is equal to 4
      x = 5;
      // x is now equal to 5
}

var x = 4;
alert(x); // x is equal to 4
myfunction(x); 
alert(x); // x is still equal to 4
</code>

객체 또는 배열을 함수의 파라메터로 전달하면 참조가 전달된다.

<code javascript>
function myobject()
{
	this.value = 5;
}
var o = new myobject();
alert(o.value); // o.value = 5
function objectchanger(fnc)
{
	fnc.value = 6;
}
objectchanger(o);
alert(o.value); // o.value is now equal to 6
</code>

<WRAP important 100%>
배열, 객체는 포인터라고 생각하고 다루면 편하다. 배열, 객체를 변수에 대입할 때에도 마찬가지 룰이 적용된다. 다음의 예를 살펴보자.

<code javascirpt>
var arr = [0, 1, 2];
var a = arr;
a.push(3);
console.log(arr);
</code>

위 코드의 결과는 다음과 같다.

<code>
[ 0, 1, 2, 3 ]
</code>

즉, 변수 a는 arr의 레퍼런스라 보면 된다.
</WRAP>


==== 메소드 오버로딩 ====
자바스크립트는 메소드 오버로딩을 지원하지 않지만 구현은 가능하다. 다음은 jQuery의 개발자로 유명한 John Resig의 소스((http://ejohn.org/blog/javascript-method-overloading))이다.

<code javascript>
// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
    var old = object[ name ];
    object[ name ] = function(){
        if ( fn.length == arguments.length )
            return fn.apply( this, arguments );
        else if ( typeof old == 'function' )
            return old.apply( this, arguments );
    };
}

function Users(){
  addMethod(this, "find", function(){
    // Find all users...
  });
  addMethod(this, "find", function(name){
    // Find a user by name
  });
  addMethod(this, "find", function(first, last){
    // Find a user by first and last name
  });
}

var users = new Users();
users.find(); // Finds all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name
users.find("John", "E", "Resig"); // Does nothing
</code>

===== 클래스 =====
  * [[programming:javascript:class|Javascript - 클래스]]

===== 메모리 =====
  * [[programming:javascript:memory|Javascript - 메모리]]

===== 코드 암호화/복호화 =====

==== 암호화 ====
  * [[http://blog.daum.net/hometip/6768791|자바스크림트 암호화/복호화]]

==== 복호화 ====
  * [[http://jsbeautifier.org/|JS Beautifier]]

===== 데이터 암호화/복호화 =====

==== Crypto-JS 라이브러리 ====
암호화할 때 [[https://code.google.com/p/crypto-js/|Crypto-JS]]를 사용할 수도 있다. 그 이유는 클라이언트에서 crypto 모듈을 불러올 방법이 마땅히 없기 때문이다. (있을 수도 있음) Crypto-JS를 다운받은 후 다음 함수를 이용하여 crypt, decrypt를 수행할 수 있다.

<code javascript>
function crypt(s) {
	var words = CryptoJS.enc.Utf8.parse(s); 
	var ciphertext = CryptoJS.enc.Base64.stringify(words);
	return CryptoJS.AES.encrypt(ciphertext, pass).toString();
}

function decrypt(s) {
	var decrypted = CryptoJS.AES.decrypt(s, pass);
	var plaintext = CryptoJS.enc.Utf8.stringify(decrypted);
	return CryptoJS.enc.Base64.parse(plaintext).toString(CryptoJS.enc.Utf8);
}
</code>

그런데 이상하게도 다운받은 js파일을 불러왔는데 제대로 안되더라 -_-; 클라이언트에서는 다운받은 js 파일 대신 다음을 불러와서 사용할 수 있다.

<code html>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
</code>

Node.js에서는 다음 링크에서 aes.js를 다운받아 사용한다.

  * [[https://github.com/nondefault/CryptChat|CryptChat]]

위 링크로 들어가면 Crypto-JS를 이용하여 암호화/복호화 후 node.js와 통신하는 방법을 볼 수 있다.

===== 문서화 =====
  * [[programming:javascript:jsdoc|JSDoc]]

===== 코딩컨벤션 =====
다음 링크에 잘 정리되어 있다.

  * [[http://firejune.com/1713|섹시한 자바스크립트 코딩 컨벤션]]

===== 기타 =====
  * [[http://msdn.microsoft.com/ko-kr/library/ie/hh920765(v=vs.85).aspx|스크립트 기반 애니메이션용 타이밍 컨트롤("requestAnimationFrame")]]

===== 라이브러리 =====
  * [[programming:javascript:cocos2d-js|Cocos2d-JS]]
  * [[programming:javascript:jquery|jQuery]]
  * [[programming:javascript:nodejs|node.js]]

===== 코드 스니핏 =====
  * [[programming:javascript:snippet|코드 스니핏]]

===== 참고 =====
  * [[http://opentutorials.org/course/50|생활코딩 자바스크립트 사전]]
  * [[http://jsfiddle.net/|JSFiddle]]
  * [[http://www.sitepoint.com/javascript/|SitePoint]]
  * [[http://www.jshint.com/|JSHint - 디버깅 도구]]
  * [[http://ejohn.org/apps/learn/|Learning Advanced JavaScript]]
  * [[http://snook.ca/archives/javascript/javascript_pass|JAVASCRIPT: PASSING BY VALUE OR BY REFERENCE]]
사용자 도구

문서 도구

OBG WiKi

사이트 도구
