callee 프로퍼티재귀호출을 처리하는 방법 중 하나로 arguments 매개변수의 callee 프로퍼티라는 함수에 대해 알아보자. (Callee 프로퍼티는 앞으로 자바스크립트에서 제거될 부분이다. ECMAScript5 “strict” 모드에서 callee 프로퍼티 사용을 금지하고 있다.) 123456789101112131415161718 Document var ninja = { attack : function(n){ return n > 1 ? arguments.callee(n-1) + "-sword" : "sword"; } } console.log(ninja.attack(3)); // sword-sword-sword Colored by Color Scriptercsarguments매개변수는 암묵적으로 ..
JavaScript
익명함수 익명함수는 간단히 말해 이름을 가지고 있지 않는 함수이다.익명함수는 함수를 변수에 저장하거나, 어떤 객체의 메서드로 설정하기 위해, 콜백으로 활요하는 것과 같이 나중에 사용하기 위한 함수를 만들때 주로 사용한다. (함수를 참조하기 위한 용도로 함수의 이름을 가지고 있을 필요가 없다.)아래는 사용 예이다. 123456789101112131415161718192021222324 Document window.onload = function(){ console.log("onload!"); // 변수에 저장 } var ninja = { shout : function(){ console.log("shout!!"); // 메서드로 사용 } } setTimeout(function(){ alert("hi!");..
스타일(CSS) 다루기Style 속성 Style 속성은 엘리먼트의 중요한 속성이다. HTML DOM 엘리먼트에는 style 프로퍼티가 있기 때문에 엘리먼트의 스타일과 관련된 정보를 얻으려면 element.style.color와 같은 식으로 프로퍼티를 사용할 수 있다. 하지만 그 엘리먼트에 지정한 원본 style 스타일 문자열 값을 얻고 싶다면 다른 방법이 필요하다. Color:red 라는 원본 문자열을 얻고싶으면 어떻게 할까? IE => element.style.cssText // 테스트결과 다른 브라우저에서도 사용 가능 대부분의 브라우저 => getAttribute(“style”)를 사용한다. 내 스타일은 어디있지?아래 테스트 코드를 살펴보자1234567891011121314151617181920212..
속성(attribute)와 프로퍼티(property)의 차이속성(attribute)DOM을 어떻게 만들어낼 것인가에 대한 필수적인 항목 프로퍼티(property) 런타임 동안 엘리먼트 정보를 저장해두는 주요 수단이자 해당 정보에 어떤 방식으로 접근해야 하는지를 나타냄 DOM 속성과 프로퍼티엘리먼트의 속성 값에 접근할 때, 두 가지 방식이 존재한다. 하나는 전통적인 DOM메서드인 getAttribute와 setAttribute를 사용하는 방법 두번째는 접근하려는 속성과 대응하는 프로퍼티를 사용하는 방법 이다. test라는 변수를 통해 참조하고 있는 엘리먼트의 id값을 얻으려면 다음과 같은 방법을 사용할 수 있다. test.getAttribute(“id”) // 속성으로 얻어옴 test.id // 속성과 대..
apply()와 call() 메서드를 사용하여 호출하기 apply(), call() 메서드는 명시적으로 함수 컨텍스트를 지정할 수 있는 메서드이다. apply() 메서드 두 개의 매개변수를 전달한다. 하나는 함수 컨텍스트로 사용할 객체, 다른 하나는 인자 값을 담은 배열이다. call() 메서드apply()메서드와 비슷하지만, 인자를 배열로 전달하지 않고 인자 목록으로 직접 전달한다. 사용방법을 살펴보자12345678910111213141516function juggle(){ var result = 0; for(var n=0; n 함수 호출시 임의의 객체를 함수 컨텍스트로 지정할 수 있다. 콜백의 함수 컨텍스트를 강제로 지정하기함수 컨텍스트로 강제 지정하는 구체적인 예제를 살펴보자일반적인 명령형 프로그래..
메서드로 호출 함수를 객체의 프로퍼티로 할당하고, 그 프로퍼티를 사용하여 “참조에 의한 호출”이 일어나면, 함수는 그 객체의 메서드로 호출된다.123var o = {};o.whatever = function(){};o.whatever(); // 참조에 의한 호출cs우리가 어떤 객체의 메서드로 함수를 호출하면, 그 객체는 함수 컨텍스트가 되고 함수 내에서 this 매개변수로 참조할 수 있다. 앞에서 “함수로 호출”에서 함수는 window에 “속하고”, window는 함수 컨텍스트로 설정된다. 하지만 위의 예제에서는 객체 o가 함수 컨텍스트가 된다. 다음은 함수 호출과 메서드 호출의 차이점을 나타내는 코드이다.123456789101112131415function creep{ return this; }cree..
함수의 호출_1 (함수로의 호출) 함수가 호출되는 방식은 코드 작동 방식에 큰 영향을 미치는데, 특히 this 매개변수가 어떻게 설정되는지를 결정한다. (Javascript를 파고들면 정말 중요해진다.) 함수를 호출하는 데에는 실제로 네 가지 다른 방법이 있다. 함수로 호출. 복잡할 것 없이 익숙한 방식으로 함수를 호출한다. 메서드로 호출. 함수 호출과 객체는 서로 묶여있는데, 이는 객체 지향 프로그래밍을 가능케 한다. 생성자로 호출. 이는 새로운 객체를 생성한다.함수의 apply()나 call()메서드를 통해 호출한다. 함수로 호출 일반적인 호출 방법으로 다른 호출 메커니즘(메서드, 생성자, apply/call)과 구분하기 위한 것이다. 메서드, 생성자, apply/call를 통해 함수를 호출하지 않는..
자바스크립트 함수에서 argument와 this인자(argument)에서 함수의 매개변수(parameter) 함수를 호출할 때 인자 목록을 제공하면, 이 인자들은 함수를 정의할 때 지정한 매개변수에 각 매개변수의 순서대로 할당된다. (첫 번째 인자는 첫 번째 매개변수에 할당, 두 번째 인자는 두 번째 매개변수에 할당) 자바스크립트는 인자 개수와 매개변수의 개수가 다르더라도 에러가 발생하지 않는다. => 매개변수보다 많은 인자가 제공되었다면, ‘남은’ 인자들은 매개변수에 할당되지 않는다. function whatever(a, b, c) { … } whatever(1, 2, 3, 4, 5)를 호출하면 인자 1, 2, 3은 각각 a, b, c 에 할당 되며, 인자 4, 5는 어떤 매개변수에도 할당되지 않는다...
자바스크립트 함수 자바스크립트는 함수형 언어이다. 그만큼 자바스크립트에서 함수는 중요한 역할을 한다. 자바스크립트에서 자바는 1종 객체(first-class object)이다. 이는 함수가 자바스크립트 객체와 같은 지위를 가지며, 일반적으로 다른 자바스크립트 객체처럼 취급할 수 있다는 것을 의미한다. 자바에서 컬렉션 정렬을 수행하는 명령문 12345Arrays.sort(values, new Comparator(){ public int compare(Integer value1, Integer value2){ Return value2 - value1; }});Colored by Color Scriptercs 함수형 접근 방식을 사용한 자바스크립트 코드 1values.sort(function(value1, v..
JavaScript DOM APISelectorsAPI라는 새로운 사양이 구현되면서, CSS 선택자를 이용하여 DOM을 조작할 수 있게 되었다.SelectorAPI는 getElementByTageName 과 getElementById와 같은 DOM의 객체를 취득하는 메소드이다. SelectorAPIquerySelector와 querySelectAll에 CSS셀렉터를 넘겨준다.12345678910111213141516171819202122232425 Document Selector API test class test Id var div1 = document.getElementsByTagName('div'); var div2 = document.querySelectorAll('div'); console.lo..
