[JavaScript] HTMLCollection 객체

HTMLCollection 객체 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자. HTML CSS JavaScript실행결과) 출처: https://devbox.tistory.com/entry/JavaScript-HTMLCollection?category=574556 [장인개발자를 꿈꾸는 :: 기록하는 공간]

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] HTMLElement 객체

HTMLElement 객체 1. HTMLElementgetElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.아래 코드는 getElement*의 리턴 값을 보여준다. HTML CSS JavaScript실행결과)HTMLLIElement (li 엘리먼트 태그)HTMLCollection (여러개의 엘리먼트를 담고 있다.)이것을 통해서 알 수 있는 것은 아래와 같다.- document.getElementById : 리턴 데이터 타입은 HTMLLIELement- document.getElementsByTagName : 리턴 데이터 타입은 HTMLColle..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavsScript] 제어 대상을 찾기

제어 대상을 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 1. document.getElementsByTagName문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다. HTML CSS JavaScript 만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다. 이러한 원칙은 다른 메소드에도 적용된..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 전역객체 window

전역객체 window 1. Window 객체Window 객체는 모든 객체가 소속된 객체(DOM, BOM, JavaScriptCore)이고, 전역객체이면서, 창이나 프레임을 의미한다. `window.Array(JavaScriptCore)window.navigator(BOM)window.document(DOM) 2, 전역객체Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다. 아래는 전역변수 a에 접근하는 방법이다. 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다. 예제를 통해서 알 수 있는 것은 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드라는 것이다. 또한 모..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] Object Model

Object Model 자바스크립트를 통해서 브라우저를 제어하기 위해서는 자바스크립로 제어할 무엇인가가 준비되어야 한다. 그것이 바로 Object(객체)이다.웹브라우저의 구성요소들은 하나 하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.자바스크립트로 브라우저를 제어하기 위해서는 객체를 제어한다.--> 객체화(자바스크립트로 브라우저를 제어하기 위해서는 모든 것이 객체화 되어 있어야 한다.)브라우저 또는 웹페이지를 제어하기 위해서는 객체가 필요하고 그 객체를 만드는 주체는 웹브라우저가 준비하고 개발자는 준비된 그 객체를 자바스크립트를..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] arguments(유사 배열 객체)

arguments(유사 배열 객체) argument라는 객체는 함수 안에서 함수의 여러가지 정보를 담고있는 특히 인자의 정보를 담고 있는 객체이다.(사용법이 배열과 유사)함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다. --> 몇 개의 인자가 있는지 알 수 있다, sum()으로 들어온 특정자리수의 값을 알수 있다. function sum(){// 매개변수가 없다. var i, _sum = 0; for(i = 0; i 사용자가 전달한 인자 수 만큼 for문의 루프를 돌린다. document.write(i+' : '+arguments[i]+' '); _sum += arguments[i]; } return _sum;}document.w..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 클로저

클로저 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. 1. 내부함수자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.function outter(){// 외부 함수 function inner(){ //내부 함수 var title = 'coding everybody'; alert(title); } inner();}outter();실행결과)coding everybody위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] 유효범위

유효범위 유효범위(Scope)는 변수의 수명을 의미한다. var vscope = 'global';// 전역 변수function fscope(){ alert(vscope);}fscope();실행결과)global 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. var vscope = 'global';function fscope(){ var vscope = 'local';// 로컬 변수 alert('함수안 '+vscope);//local}fscope(..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] Object

Object Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. var grades = {'test1': 10, 'test2': 6, 'test3': 80};동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.Object의 prototype은 모든 객체의 prototype이 된다.Object가 가지고 있는 prototype는 모든 객체가 사용할 수 있는 기능이다. 즉, 모든 객체가 공통적으로 사용할 기능이 있다면 Object의 prototype으로 지정해 쓸 것이다. 모든 객체가..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms

[JavaScript] prototype

prototype 한국어로 원형이다. 자바스크립트는 prototype를 통해 상속 기능을 제공한다. 1. prototype그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. function Ultra(){}Ultra.prototype.ultraProp = true; function Super(){}Super.prototype = new Ultra(); function ..

• format_list_bulleted Javascript/JavaScript
• · 2020. 7. 7.
• textsms