Web/JavaScript 검색 결과

64개 발견
  1. 미리보기
    2015.06.13 - Palpit

    [javascript] 55. DOM 문서(DOM document) - 자바스크립트 강좌 JS / CSE

  2. 미리보기
    2015.06.13 - Palpit

    [javascript] 54. DOM 메소드(DOM method) - 자바스크립트 강좌

  3. 미리보기
    2015.06.13 - Palpit

    [javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSE

  4. 미리보기
    2015.06.13 - Palpit

    [javascript] 52. closure - 자바스크립트 강좌 JS / CSE

  5. 미리보기
    2015.06.13 - Palpit

    [javascript] 51. 함수 호출(function invocation) - 자바스크립트 강좌 JS / CSE

  6. 미리보기
    2015.06.13 - Palpit

    [javascript] 50. 함수 매개변수(function parameters) - 자바스크립트 강좌

  7. 미리보기
    2015.06.13 - Palpit

    [javascript] 49. 함수 선언(function definitions) - 자바스크립트 강좌 JS / CSE

  8. 미리보기
    2015.06.13 - Palpit

    [javascript] 48. 객체 프로토타입(Object prototype) - 자바스크립트 강좌 JS / CSE

조회수 확인


JavaScript HTML DOM Document

 HTML DOM에서, 문서 객체(document object)는 웹 페이지 입니다.






1. The HTML DOM Document

 HTML DOM 객체 모델에서, 문서 객체는 웹 페이지를 나타냅니다.


 문서 객체는 웹 페이지의 모든 다른 객체의 주인 입니다.


 HTML 페이지 내의 객체를 접근 하고 싶을 때, 문서 객체를 접근 하는 것으로 시작 합니다.


 



2. Finding HTML Elements


MethodDescription
document.getElementById()Find an element by element id
document.getElementsByTagName()Find elements by tag name
document.getElementsByClassName()Find elements by class name

 [ 출처: W3Schools ]







3. Changing HTML Elements


MethodDescription
element.innerHTML=Change the inner HTML of an element
element.attribute=Change the attribute of an HTML element
element.setAttribute(attribute,value)Change the attribute of an HTML element
element.style.property=Change the style of an HTML element

  [ 출처: W3Schools ]







4. Adding and Deleting Elements

MethodDescription
document.createElement()Create an HTML element
document.removeChild()Remove an HTML element
document.appendChild()Add an HTML element
document.replaceChild()Replace an HTML element
document.write(text)Write into the HTML output stream

  [ 출처: W3Schools ]





5. Adding Events Handlers 

MethodDescription
document.getElementById(id).onclick=function(){code}Adding event handler code to an onclick event

  [ 출처: W3Schools ]









6. Finding HTML Objects

 첫 HTML DOM 레벨 1(1998)은 11 HTML 객체, 객체 집합, 속성들을 정의 했습니다. 이러한 것은 HTML5에 아직 유효 합니다.


 후에, HTML DOM 레벨 3에서 더 많은 객체, 집합, 속성들이 추가 되었습니다.



PropertyDescriptionDOM
document.anchorsReturns all <a> elements that have a name attribute1
document.appletsReturns all <applet> elements(Deprecated in HTML5)1
document.baseURIReturns the absolute base URI of the document3
document.bodyReturns the <body> element1
document.cookieReturns the document's cookie1
document.doctypeReturns the document's doctype3
document.documentElementReturns the <html> element3
document.documentModeReturns the mode used by the browser3
document.documentURIReturns the URI of the document3
document.domainReturns the domain name of the document server1
document.domConfigObsolete. Returns the DOM configuration3
document.embedsReturns all <embed> elements3
document.formsReturns all <form> elements1
document.headReturns the <head> element3
document.imagesReturns all <img> elements1
document.implementationReturns the DOM implementation3
document.inputEncodingReturns the document's encoding (character set)3
document.lastModifiedReturns the date and time the document was updated3
document.linksReturns all <area> and <a> elements that have a href attribute1
document.readyStateReturns the (loading) status of the document3
document.referrerReturns the URI of the referrer (the linking document)1
document.scriptsReturns all <script> elements3
document.strictErrorCheckingReturns if error checking is enforced3
document.titleReturns the <title> element1
document.URLReturns the complete URL of the document1
  [ 출처: W3Schools ]

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript - HTML DOM Methods

 HTML DOM 메소드는 HTML 요소로 수행 할 수 있는 행위 입니다.

 HTML DOM 속성은 설정할 수 있고, 변경 가능한 HTML 요소의 값 입니다.


1. The DOM Programming Interface

 HTML DOM은 자바스크립트에서 접근 할 수 있습니다.

 DOM 에서, 모든 HTML 요소는 객체로서 정의되어 있습니다.

 프로그래밍 인터페이스는 각 객체의 속성과 메소드입니다.

 속성(property)는 얻거나 설정 할 수 있는 값 입니다.

 메소드(method)는 해야 할 일의 행위 입니다.

2. Example

 아래 예제는 아이디가 demo인 <p> 요소의 내용을 바꾸는 예제 입니다.


1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
 
<p id="demo"></p>
 
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
 
</body>
</html>
cs
 

 위 예제에서 getElementById는 메소드이고, innerHTML은 속성입니다.




3. The getElementById Method

 HTML 요소에 접근하는 가장 일반적인 방법은 요소의 아이디를 이용하는 것 입니다.

 

 위의 예제는, getElementById 메소드를 사용하여 id가 demo인 요소를 찾는 것 입니다.


4. The innerHTML Property

 요소의 내용물을 가져오는 가장 쉬운 방법은 innerHTML 속성을 이용하는 것 입니다.

 innerHTML 속성은 HTML 요소의 내용물을 가져오거나 대치할 때 유용합니다.




다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript HTML DOM

 HTML DOM에서, 자바스크립트는 모든 HTML 문서를 접근하고 변경 할 수 있습니다.





1. The HTML DOM (Document Object Model)

 웹페이지가 로드될 때, 브라우저는 페이지의 문서 객체 모델(Document Object Model)을 생성합니다.

 HTML DOM은 객체의 트리 형태 구조로 되어 있습니다:




 







  객체 모델에서, 자바스크립트는 동적인 HTML을 만들어서 모든 걸 가져올 수 있습니다:

   - 페이지 내의 모든 HTML 요소를 변경 할 수 있습니다.

   - 페이지 내의 모든 HTML 속성을 변경 할 수 있습니다.

   - 페이지 내의 모든 CSS 스타일을 변경 할 수 있습니다.

   - 존재하는 HTML 요소와 속성을 제거 할 수 있습니다.

   - 새로운 HTML 요소와 속성을 추가 할 수 있습니다.

   - 페이지 내의 모든 존재하는 HTML 이벤트에 대해 반응 할 수 있습니다.

   - 페이지 내의 새로운 HTML 이벤트를 생성 할 수 있습니다.







2. What You Will Learn

 아래와 같은 것을 배웁니다:

  - HTML 요소의 내용물을 변경

  - HTML 요소의 CSS 스타일 변경

  - HTML DOM 이벤트의 반응

  - HTML 요소의 추가와 삭제






3. What is the DOM?

 DOM은 W3C(World Wide Web Consortium) 표준 입니다.

 

 DOM은 문서의 접근을 위한 표준을 정의 합니다:



 "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."



 W3C DOM 표준은 3가지 부분으로 나뉘어 집니다:

  - Core DOM - 모든 문서 타입의 표준 모델

  - XML DOM - XML 문서의 표준 모델

  - HTML DOM - HTML 문서의 표준 모델







4. What is the HTML DOM?

 HTML DOM은 표준 객체 모델이고 HTML을 위한 프로그래밍 인터페이스 입니다:

  - 객체 로서의 HTML 요소

  - 모든 HTML 요소의 속성

  - 접근 가능한 모든 HTML 요소의 메소드

  - 모든 HTML 요소의 이벤트

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인


JavaScript Closures

 자바스크립트 변수는 지역 변수 혹은 전역 변수에 속해 있습니다.


 Private 변수는 closures를 통하여 만들 수 있습니다.





1. Global Variables

 함수는 함수내에 선언된 모든 변수를 접근 할 수 있습니다:



1
2
3
4
function myFunction() {
    var a = 4;
    return a * a;
}
cs
 



 그러나, 함수는 함수 밖에 선언된 변수 또한 접근 가능합니다:


1
2
3
4
var a = 4;
function myFunction() {
    return a * a;
}
cs
 


 위의 예제에서는 a는 전역 변수입니다.


 웹 페이지에서, 전역 변수는 윈도우 객체(Window Object)에 속합니다.


 전역 변수는 페이지 내의 모든 스크립트에서 사용되어 집니다.


 맨 처음 예제에서는 a는 지역 변수입니다.


 지역 변수는 선언된 함수 내에서만 사용 가능 합니다. 







2. Variable Lifetime

 전역 변수는 어플리케이션이 살아 있는 한 계속 살아 있습니다.


 지역 변수는 짧은 삶을 갖습니다. 함수 호출에 의해 생성되어서, 함수가 끝나면 사라집니다.











3. A Counter Dilemma

 어떤 것을 세기위해 변수를 생성하여, 모든 함수에서 사용가능한 카운터를 만들고자 합니다.


 전역 변수를 사용하여, 함수에서 카운터를 써서 증가를 할 수 있습니다:


1
2
3
4
5
6
7
8
9
10
11
var counter = 0;
 
function add() {
    counter += 1;
}
 
add();
add();
add();
 
// the counter is now equal to 3
cs

 


 카운터는 add() 함수에 의해서만 변경되어 집니다.


 문제는 add() 함수를 호출할 필요없이 다른 어떤 스크립트에서도 카운터를 변경할 수 있다는 것입니다.


 카운터를 함수 내에 선언 한다면, add() 함수 호출 없이는 누구도 값을 변경 할 수 없을 것입니다:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <body>
 
    <p>Counting with a local variable.</p>
 
    <button type="button" onclick="myFunction()">Count!</button>
 
    <p id="demo">0</p>
 
<script>
function add() {
var counter = 0;
return counter += 1;
}
 
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
 
    </body>
</html>
 
cs
 

 




 




 위 예제는 제대로 작동하지 않습니다! add()함수를 호출 할 때마다, 카운터는 1로 설정 됩니다.


 자바스크립트 내부 함수가 위 문제를 해결 합니다.






4. JavaScript Nested Functions

 모든 함수는 전역 범위를 접근 할 수 있습니다.


 사실상 자바스크립트에서는, 모든 함수는 그들 자신의 상위 범위는 당연히 접근 가능 합니다.


 아래 예제에서, 내부 함수 plus()는 상위 함수의 카운터 변수를 접근하게 해줍니다:





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
    <body>
 
    <p>Counting with a local variable.</p>
 
    <p id="demo">0</p>
 
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();    
return counter; 
}
</script>
 
    </body>
</html>
 
cs
 

 






 plus() 함수가 외부에서 호출되므로, 카운터 딜레마를 풀었습니다.


 counter = 0의 실행이 단지 한 번만 실행되는 방법이 필요합니다.


 closure가 필요합니다.







5. JavaScript Closures

 아래 예제를 먼저 살펴봅니다:


1
2
3
4
5
6
7
8
9
10
11
 
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// the counter is now 3
cs

 




 변수 add는 자가 호출 함수의 값을 반환하는 것을 할당했습니다.


 자가 호출 함수는 한 번 실행 됩니다. 카운터를 0으로 설정하고, 함수 식을 반환합니다.


 위 방법이 add를 함수로 만들게 합니다. 놀라운 부분은 상위 범위에서도 카운터를 접근 할 수 있다는 것입니다.


 이러한 것을 자바스크립트 closure라고 합니다. 함수의 private 변수를 갖게하는 방식을 말합니다.


 카운터는 익명의 함수의 범위에서 보호를 받고, add 함수에 의해서만 변경이 가능합니다.





다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript Function Invocation

 자바스크립트 함수는 4가지 방식으로 호출될 수 있습니다.



1. The this Keyword

 자바스크립트에서, 하나의 것을 this라 부르는 이것을 현재 코드에서 자기자신을 지칭하는 객체입니다.

 (In JavaScript, the thing called this, ​is the object that "owns" the current code.)


 함수에서 사용할 때, this의 값은 함수 자신의 객체 입니다.





2. Invoking a JavaScript Function

 함수의 코드는 함수가 선언 될 때 실행되는 것이 아닙니다. 함수가 호출 될 때, 실행되는 것입니다.


 






3. Invoking a Function as a Function


1
2
3
4
function myFunction(a, b) {
    return a * b;
}
myFunction(102);           // myFunction(10, 2) will return 20
cs

 




 위 함수는 어떤 객체에도 속해있지 않습니다. 


 HTML에서 가장 기본적인 전역 객체는 HTML 페이지 자신입니다. 그러므로 위의 함수는 HTML 페이지에 속하게 됩니다.


 브라우저에서, 페이지 객체는 브라우저 윈도우 입니다. 위의 함수는 자동적으로 윈도우 함수가 됩니다.


 myFunction()과 window.myFunction()은 같은 함수 입니다.



1
2
3
4
function myFunction(a, b) {
    return a * b;
}
window.myFunction(102);    // window.myFunction(10, 2) will also return 20
cs






4. The Global Object

 자신만의 객체없이 함수가 호출 될 때, this의 값은 전역 객체가 됩니다.


 웹 브라우저에서 전역 객체는 브라우저 윈도우 입니다.


 아래 예제는 this의 값으로 윈도우 객체를 반환합니다:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <body>
 
    <p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>
 
    <p id="demo"></p>
 
<script>
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction(); 
</script>
 
    </body>
</html>
 
 
 
cs

 




 











5. Invoking a Function as a Method

 함수 선언을 객체 메소드로 선언 할수 있습니다.


 아래 예제는 객체(myObject)를 만들고, 두개의 속성(firstName과 lastName)과 메소드(fullName)을 포함합니다:




1
2
3
4
5
6
7
8
9
 
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"
cs
 




 fullName 메소드는 함수입니다. 함수는 객체에 속해 있습니다.


 myObject가 함수의 주인입니다.


 위 예제에서의 this 값은 my Object가 됩니다.




 

1
2
3
4
5
6
7
8
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Will return [object Object] (the owner object)
cs









6. Invoking a Function with a Function Constructor

 함수 호출이 new 키워드가 앞에 나오게 되서 호출 되면, 생성자 호출 입니다.


 이것은 새로운 함수를 생성하는 것처럼 보입니다, 그러나 사실상 새로운 객체를 생성한 것입니다:


1
2
3
4
5
6
7
8
9
// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // Will return "John"
cs
 

 



 생성자 호출은 새로운 객체를 생성합니다. 새로운 객체는 생성자의 속성과 메소드를 상속 받습니다.







7. Invoking a Function with a Function Method

 자바스크립트에서, 함수는 객체입니다. 함수는 속성과 메소드를 갖습니다.


 call()apply()는 미리 선언된 자바스크립트 함수 메소드입니다.


 두 메소드는 함수 호출 시 사용되어 지고, 첫 매개변수로 주인 객체(owner object)를 갖습니다.



 
1
2
3
4
function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 102);      // Will return 20
cs


 
1
2
3
4
5
function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // Will also return 20
cs




 두 메소드의 차이점은 call()은 함수 인자를 각각 넘겨 받고, apply()는 배열로 인자를 넘겨 받습니다.


  

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인


JavaScript Function Parameters

 함수는 매개변수 값을 검사하는 어떤 행위도 하지 않습니다.




1. Function Parameters and Arguments

 함수 매개변수(parameter)는 함수 선언 안에 나열된 이름들(names)입니다.

 

 함수 인자(arguments)​는 함수에서 넘겨 받은 실제 값(values) 입니다.



2. Parameter Rules

 함수 선언은 매개변수의 데이터 타입을 명시하지 않습니다.


 함수는 넘겨받은 인자에 대한 타입 검사를 수행하지 않습니다.


 함수는 넘겨 받은 인자의 수를 검사하지 않습니다.



3. Parameter Defaults

 인자없이 함수가 호출되었을 경우, 빠진 인자 값들은 undifined로 설정 됩니다.


 가끔은 위와 같은 상황을 허용하지만, 기본 값을 매개변수에 두어 할당하는 방법이 더 좋은 방법입니다.



1
2
3
4
5
6
7
 
function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}
 
cs

 

 아니면, 더 간단하게 아래처럼 작성 할 수 있습니다:



1
2
3
4
 
function myFunction(x, y) {
    y = y || 0;
}
cs

 



 * y가 선언 되어지고, y || 가 y를 반환 한다면, y는 true 이기 때문입니다. y가 0을 반환한다면, y는 undefined 이기 때문입니다.








4. The Arguments Object

 함수는 인자 객체에 의해 호출되는 내장된 객체 입니다.


 인자 객체는 함수가 호출될 때, 사용될 인자 값들의 배열을 포함합니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <body>
 
    <p>Finding the largest number.</p>
    <p id="demo"></p>
 
<script>
function findMax() {
var i, max = 0;
for(i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
document.getElementById("demo").innerHTML = findMax(456);
</script>
 
    </body>
</html>
 
 
 
cs


 


 


 아니면 모든 입력 값을 요약하여 함수를 생성할 수 있습니다:


1
2
3
4
5
6
7
8
9
10
 
x = sumAll(11235001154488);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
cs
 





5. Arguments are Passed by Value

 함수 호출에 있어서 매개변수는 함수의 인자(argument) 입니다.


 자바스크립트 인자 값은 값을 넘겨 받습니다(passed by value): 함수는 값만 알지, 값의 위치는 모릅니다.


 함수가 인자 값을 변경하면, 매개변수의 원본 값은 변하지 않습니다.


 인자 값 변경은 함수 바깥에서는 보여지지 않습니다.






6. Objects are Passed by Reference

 자바스크립트에서, 객체 참조는 값입니다.


 이러한 이유로, 객체는 참조에 의해 넘겨 받습니다(passed by reference): 


 함수가 객체 속성을 변경하면, 원본 값은 변합니다.


다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript Function Definitions
 자바스크립트 함수는 function 키워드로 선언합니다.
 



1. Function Declarations
 아래 문법과 같이 함수를 선언 할 수 있습니다.

 

1
2
3
function functionName(parameters) {
  code to be executed
}
cs

 





 선언된 함수는 바로 실행되는 것이 아닙니다. 

 선언된 함수는 나중에 사용하기 위해 저장되거나, 나중에 실행되어 질 것입니다.





2. Function Expressions
 함수는 식을 사용하여 선언 할 수도 있습니다.

 
1
var x = function (a, b) {return a * b};
cs




 함수식이 변수에 저장되어 진 후에, 변수는 함수로 사용되어 집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
 
    <p>After a function has been stored in a variable,
    the variable can be used as a function:</p>
 
    <p id="demo"></p>
 
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(43);
</script>
 
    </body>
</html>
 
 
 
cs

 




 





 위의 예제의 함수는 익명의 함수(anonymous function)이라고 합니다.

 변수에 저장된 함수는 함수의 이름을 필요로 하지 않습니다. 변수 이름을 사용하여 호출 합니다.
 




3. The Function() Constructor
 함수는 내장된 자바스크립트 함수 생성자인 function()을 호출하여 선언 할 수도 있습니다.

1
2
3
4
 
var myFunction = new Function("a""b""return a * b");
 
var x = myFunction(43);
cs


 아래 예제는 위의 예제와 같습니다.


1
2
3
var myFunction = function (a, b) {return a * b};
 
var x = myFunction(43);
cs
 





4. Function Hoisting
 끌어올림은 현재 범위에서 가장 상단으로 선언부를 올리는 기본적인 자바스크립트 행위 입니다.

 끌어올림은 변수 선언과 함수 선언에 적용됩니다.

 이러한 성질 때문에, 함수는 호출되기 전에 선언되어야 합니다.


1
2
3
4
5
myFunction(5);
 
function myFunction(y) {
    return y * y;
}
cs
 

 식을 사용한 선언된 함수는 끌어올려 지지 않습니다.









5. Self-Invoking Functions
 함수 식은 자가 호출(Self-Invoking)에 의해 만들어 집니다.

 자가호출 식은 호출되는 거 없이 자동적으로 호출되어 집니다.

 함수 식은 식이 ()로 구성되어 졌다면, 자동으로 실행되어 질 것입니다.

 자가 호출 함수를 선언 할 수 없습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
 
    <p>Functions can be invoked automatically without being called:</p>
 
    <p id="demo"></p>
 
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
 
    </body>
</html>
 
 
 
cs

 






 




 
6. Functions Can Be Used as Values
 함수는 값으로 사용되어 질 수도 있습니다:



1
2
3
4
5
6
 
function myFunction(a, b) {
    return a * b;
}
 
var x = myFunction(43);
cs
 


 함수는 식으로도 사용 가능 합니다:


1
2
3
4
5
6
 
function myFunction(a, b) {
    return a * b;
}
 
var x = myFunction(43) * 2;
cs
 



7. Functions are Objects
 typeof 연산자는 함수를 위한 함수를 반환합니다.

 함수는 속성과 메소드를 가지고 있습니다.

 arguments.lengh 속성은 함수가 호출 되었을 때 받은 인자 값의 수를 반환합니다:



1
2
3
function myFunction(a, b) {
    return arguments.length;
}
cs
 



 toString() 메소드는 함수를 문자열로 반환합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <body>
 
    <p>The toString() method returns the function as a string:</p>
 
    <p id="demo"></p>
 
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
 
    </body>
</html>
 
cs
 


 


다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript Object Prototypes

 모든 자바스크립트 객체는 프로토타입을 갖습니다. 프로토타입 또한 객체 입니다.


 모든 자바스크립트 객체는 그들만의 프로토타입으로 부터 속성과 메소드를 물려 받습니다.



1. Creating a Prototype

 프로토타입 객체를 생성하는 일반적인 방법은 객체 생성자 함수를 사용하는 것입니다:


 생성자 함수와  함께, new 키워드를 통해서 같은 프로토타입 객체를 생성할 수 있습니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
 
var myFather = new person("John""Doe"50"blue");
var myMother = new person("Sally""Rally"48"green");
 
document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age; 
</script>
 
    </body>
</html>
 
cs




 

 






2. Adding a Property to an Object

 객체에 새로운 속성를 주는 방법은 다음과 같습니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
 
var myFather = new person("John""Doe"50"blue");
var myMother = new person("Sally""Rally"48"green");
 
myFather.nationality = "English";
 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>
 
    </body>
</html>
 
cs









3. Adding a Method to an Object

 객체에 새로운 메소드를 추가하는 방법은 아래와 같습니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
 
var myFather = new person("John""Doe"50"blue");
var myMother = new person("Sally""Rally"48"green");
 
myFather.name = function() {
return this.firstName + " " + this.lastName;
};
 
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>
 
    </body>
</html>
 
cs







  











4. Adding Properties to a Prototype

 프로토 타입은 존재하는 객체가 아니기 때문에, 새로운 속성을 프로토타입에 추가 할 수 없습니다.


 생성자에 새로운 속성을 추가하려고 한다면, 생성자 함수를 통하여 추가해야 합니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
 
var myFather = new person("John""Doe"50"blue");
var myMother = new person("Sally""Rally"48"green");
 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>
 
    </body>
</html>
 
cs



 






5. Adding Methods to a Prototype

 생성자 함수에 또한 메소드를 선언 할 수 있습니다:


 

1
2
3
4
5
6
7
8
 
function person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.name = function() {return this.firstName + " " + this.lastName;};
}
cs




6. Using the prototype Property

 자바스크립트 프로토타입 속성은 존재하는 프로토타입에 새로운 속성을 추가하는 것을 허용합니다:


 

1
2
3
4
5
6
7
function person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
person.prototype.nationality = "English";
cs


 자바스크립트 프로토타입 속성은 존재하는 프로토타입에 새로운 메소드을 추가하는 것을 허용합니다:


 

1
2
3
4
5
6
7
8
9
function person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};
cs




다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다