Javascript

9. HTML Element

웹브라우저의 문서를 제어하기 위해 가장 먼저 해야하는 것은 제어하고자 하는 태그의 엘리먼트에 대한 객체를 찾는것이다. 그 다음 그 객체의 프로퍼티를 이용해 색깔을 바꾼다던지 등의 작업을 한다. 객체마다 프로퍼티가 다르기 때문에 어떠한 객체인지 알아야 할 필요가 있다. localhost Kane Son Alli 자바스크립트 부분을 보면, ID와 TagName 값에 맞는 엘리먼트를 조회하여 target 변수에 저장한다. target 이라는 객체에 constructor 라는 프로퍼티를 사용하여 이름을 console에 출력한다. constructor.name 에 대해 구체적인 개념과 사용법은 넘어가고 이것을 사용하면 객체의 이름을 알 수 있다는 정도만 이해하고 넘어간다. 어찌됐든 ID와 TagName에 맞는 태..

8. jQuery 기본 사용법

jQuery는 자바스크립트의 라이브러리이다. "DOM을 이용해서 직접 제어하는것이 아닌 jQuery 라이브러리를 이용해서 보다 쉽게 이용할 수 있는 것" 이라고 할 수 있다. DOM에 대한 정의는 아직은 잘 모르겠다. 그냥 document.getElementByTagName 이런것을 이용하여 웹브라우저에 표시되는 것이 DOM 이라고만 알고있다. 여러 정보를 찾아봐도 DOM에 대해 정확히 설명할 수가 없다. 나중에 정리되면 다시 정리해 볼 것이다. jQuery를 사용하기 위해선 jQuery를 담고있는 코드파일을 먼저 로드시켜야 한다. 해당 코드파일을 다운로드 받아 웹소스에 저장하여 사용해도 되지만 CDN이라는 간편한 방법이 있다. CDN이란 Contents Delivery Network 라고 해서 컨텐츠를..

7. getElementsByTagName / getElementsByClassName / getElementById

먼저 document 객체란, 웹페이지 그 자체를 의미하며 웹페이지의 HTML 요소에 접근하기 위해서는 반드시 document 객체로부터 시작해야한다. 보통 HTML은 단순 정보를 주기 위함이고, 자바스크립트를 쓰는 이유는 HTML을 제어하기 위함이다. 제어를 하기 위해서는 제어대상을 찾고 그 대상에게 작업을 한다. 웹페이지의 HTML 요소에 접근하기 위해 document 라는 객체를 사용하고 이 객체의 메소드 중 getElementByTagName을 살펴본다. 말 그대로 태그 이름을 통해 엘리먼트를 가져온다 라는 뜻이다. 예제 코드를 보면, HTML CSS JavaScript ul 태그를 만들고 그 안에 li 태그들을 만들었다. script 안의 내용을 보면, li 라는 태그에 대한 엘리먼트들의 리턴값..

6. window.open 활용

위 코드를 살펴보면, 버튼 타입의 태그 2개와 텍스트타입의 태그 1개를 만들었다. Open 버튼 클릭 시 onclick으로 winopen() 이라는 함수가 호출되고, 텍스트필드에서 onkeypress 를 통해 텍스트 입력 시 winmessage(this.value) 함수가 호출된다. 여기서 this.value는 텍스트필드에 입력한 값이 되며 이 내용에 대한 자세한 부분은 나중에 이벤트부분에서 설명한다. 그 다음 Close 라는 버튼 클릭 시 onclick으로 winclose() 함수가 호출된다. winopen() 함수는, open.html 문서를 작성한 width와 height에 맞게 새 창(window)으로 연다. 정리하면, window.open 이라는 메소드를 통해서 연 새로운 창의 window 객체..

5. window.open

window 객체는 전역객체이며 브라우저 창에서 가장 큰 단위의 객체라고 할 수 있다. 그 중 window의 open함수는 새로운 창(window)을 여는 것이다. 간단한 코드로 확인해보면, 여기서 태그는 리스트 관련 태그이다. ul은 unordered list 라고 해서 순서가 없는 목록을 만들 때 사용되며, li는 list item으로 ul 내부에 사용해서 각 항목을 표시한다. 순서가 없기 때문에 동그란 점 처럼 생긴 불릿(bullet, ●)으로 항목들을 나타낸다. input 태그는 버튼을 클릭했을 때(onclick) 각각 open1~5 의 함수를 호출한다. 해당함수는 window.open으로 각각 인자가 다르며 open.php 라는 파일을 각 인자값에 맞게 로드시킨다. # open.php open...

4. location 객체

location 객체란 ? 현재 브라우저 창에 열려있는 문서의 URL에 대한 정보를 얻을 수 있는 객체이다. 크롬 개발자도구를 이용해서 테스트 해본다. 1) 현재 브라우저의 URL 알아내기 console.log는 콤마(,)로 인자값을 더 할 수 있다. 현재 브라우저창에 띄워진 창의 URL 주소를 출력하는 것을 확인할 수 있다. 인자값으로 들어간 location.toString() 과 location.href 둘 다 현재 window의 URL을 알아낼 수 있는 방법이나, location.href 가 조금 더 선호되는 방식이다. 2) location 객체에 대한 정보 console.log(location)은 location 이라는 객체에 대한 정보를 보여준다. location 이라는 객체에 대한 프로퍼티들을..