JavaScript Node Method
JavaScript Node Method ■ 지난 글에서는 노드에 접근하는 방법 중에서 name 속성을 이용해서 순차적으로 접근하는 방법에 대해서 알아봤는데요. 이번에는 메서드를 이용해서 바로 접근하는 방법과 노드를 생성하는 메서드를 알아보겠습니다. ■ 메서드로 접근하는 방법에는 세 가지가 있는데요. '이름', '아이디', '태그 이름' 등 세 가지 속성값을 이용해서 접근할 수 있구요. 메서드의 형식은 다음과 같습니다. var aaa = getElementsByName(이름); var bbb = getElementsById(아이디); var ccc = getElementsByTagName(태그이름); 다음과 같은 문서가 있을 때 메서드를 이용해서 이 텍스트 박스에 접근하는 형식은 다음과 같습니다. 1. ..
JavaScript Node 자바스크립트 노드
JavaScript Node 자바스크립트 노드 ■ 웹 화면의 콘텐츠 영역에 표시되는 요소들은 문서 요소들인데요. 단순하게 생각해서 HTML 태그들입니다. 이번 글에서 알아볼 문서 객체를 이용해서 화면에 표시되고 있는 요소들에 접근해서 속성값을 변경해줄 수 있는데요. 이런 역할을 하는 문서 객체에 대해서 알아보고, 각 요소에 접근하는 방법도 알아보겠습니다. 먼저 문서 객체의 구조를 살펴보겠습니다. ■ 다음과 같은 예제가 있을 때 html 태그 안에 head 태그와 body 태그가 있고 그 안에는 각각 title과 input 태그가 있는데요. 이렇게 각각의 태그 단위를 노드(node)라고 하는데요. 이 노드에는 태그와 같은 '요소 노드'가 있고, "Hello"와 같은 '텍스트 노드'가 있습니다. 다음 예제를..
javascript location 객체의 속성과 메서드
javascript location 객체의 속성과 메서드 ■ 자바스크립트 객체 중에서 location 객체는 현재 사용 중인 URL에 대한 정보를 읽어오거나 제어를 하는 역할을 하는데요. location 객체의 속성과 메서드에 대해서 정리해보고, 간단한 예제도 만들어 보겠습니다. location 객체의 속성은 다음과 같습니다. 1. hash: URL의 정보 부분 2. search: URL의 쿼리 부분 3. host: 호스트 이름과 폰트 번호 4. href: URL의 이동 5. pathname: URL에 포함된 경로 문자열 6. origin: 프로토콜, 호스트 이름, 폰트 번호 7. protocol: 프로토콜(웹에서 사용하는 통신 형식) 8. port: 포트 번호 9. hostname: URL에 포함된 호..
javascript history 객체
javascript history 객체 ■ 자바스크립트의 history 객체는 사용자가 방문했던 URL을 관리하는 역할을 하는데요. 이 녀석을 이용해서 방문했던 웹 페이지의 제어가 가능합니다. 이 객체의 속성과 메서드도 몇 개 안되니까 간단하게 알아볼게요. 먼저 속성에서는 history에 저장되어 있는 URL의 숫자만 확인할 수 있는 length 속성이 있구요. 메서드는 세 개가 있는데 1. go() : history 객체에 저장되어 있는 페이지 중에서 특정 페이지로 이동 2. back() : 이전 페이지로 이동 3. forward() : 다음 페이지로 이동 ■ 웹 페이지의 상단 툴바에 보이는 '←(뒤로)', '→(다음)' 버튼의 역할과 같다고 생각하시면 되겠죠? 이 메서드는 보통 웹 페이지에 로그인할 ..
javascript screen 객체
javascript screen 객체 ■ 자바스크립트의 객체 중에서 screen은 사용자의 모니터 화면과 관련된 정보를 가져올 수 있는데요. screen은 브라우저가 작동하는 공간으로서 브라우저와는 완전히 별개이기 때문에 메서드를 사용해서 제어할 수는 없습니다. 그래서 단지 화면의 정보만 읽어올 수 있는 속성만 있는데요. 그것들을 정리해보고, 이용해서 모니터 화면의 정보를 출력해보겠습니다. screen 객체의 속성을 이용해서 불러올 수 있는 화면의 정보는 다음과 같습니다. width : 화면의 너비 height : 화면의 높이 availHeight : 사용 가능한 높이 availWidth : 사용 가능한 너비 pixelDeph : 픽셀당 색상의 bit colorDepth : 색상 표현에 사용하는 bit ..
JavaScript DOM Navigator
JavaScript DOM Navigator ■ 자바스크립트 객체 중에서 navigator 의 속성과 메서드에 대해서 알아볼 텐데요. navigator 객체는 브라우저의 각종 정보를 다루는 객체입니다. window가 브라우저를 구성하는 모든 요소를 다루는 바면 navigator 객체는 브라우저 자체의 정보만 다룬다는 차이점이 있습니다. 혹시 window 객체의 속성을 알아보시면 아랫글 참고하시면 도움이 좀 될 겁니다. http://kd3302.tistory.com/561 ◀ JavaScript Window DOM ■ 여기서 브라우저의 정보란 종류, 버전, 언어, 온라인 여부 등의 정보를 말하는데요. navigator 객체의 속성은 다음과 같습니다. 속성 설명 appCodeName 코드네임 appName ..
JavaScript DOM Window Method
JavaScript DOM Window Method ■ 자바스크립트의 Window는 DOM 구조의 최상위 객체이고, 브라우저의 전반적인 정보에 관련된 객체인데요. 지난 글에서 이 객체의 속성에 대해서 알아봤습니다. http://kd3302.tistory.com/560 ◀ window 객체의 속성 ■ 이번에는 Window 객체의 메서드(method)를 정리해보고, 예제를 만들어보면서 메서드를 사용해보겠습니다. window 객체의 메서드는 전반적으로 브라우저를 컨트롤 하는 기능들인데요. 메서드의 종류는 다음과 같습니다. ■ 이 중에서 타이머를 설정하는 메서드인 SetTimeout() 메서드를 이용해서 일정한 시간 후에 함수가 실행되도록 하는 예제를 하나 만들어보겠습니다. 먼저 이 메서드를 사용하는 방법은 s..
자바스크립트 window 객체의 속성
자바스크립트 window 객체의 속성 ■ 자바스크립의 객체 중에서 브라우저 객체는 window, navigator, location, history, screen, document로 이루어져 잇는데요. 이것들 중에서 Window가 최상위 객체입니다. 이 window 객체의 속성을 알아보고, 간단하게 속성값을 출력하는 예제를 만들어보겠습니다. window 객체는 브라우저 전반에 관련된 객체로서 사용할 수 있는 대표적인 속성들은 다음과 같습니다. ■ 이 중에서 모니터의 화면에서 브라우저의 위치를 알 수 있는 screenX, screenY 속성을 이용해서 브라우저의 위치를 출력하는 예제를 하나 만들어서 객체의 속성을 사용하는 과정을 알아보겠습니다. winodw 객체의 속성값을 이용하는 방법은 [window.속..
자바스크립트 대화상자 JavaScript alert prompt
자바스크립트 대화상자 JavaScript alert prompt ■ 자바스크립트의 내부 함수 중에서 alert()와 prompt() 함수에 대해서 알아볼 텐데요. prompt 함수는 사용자가 어떤 데이터값을 입력할 수 있도록 다이얼로그를 띄어주는 함수이구요. alert 함수는 사용자에게 메시지를 보여주는 역할을 하는 함수 입니다. 이것들의 형식을 알아보고, 예제를 만들어 볼게요. ▣ prompt()의 형식 prompt(다이얼로그에 표시할 메시지, 기본값); 형식대로 HTML 문서에 넣어보겠습니다. ■ 다이얼로그에 표시할 메시지는 "이름을 입력하세요."라고 했구요. 기본값은 "홍길동"으로 설정하고 브라우저에서 실행하겠습니다. ■ 이렇게 다이얼로그가 뜨고, 메시지와 기본값이 출력되고 있습니다. prompt가..
자바스크립트 함수와 매개변수
자바스크립트 함수와 매개변수 ■ 지난 글에서 함수를 선언하고 호출하는 방법에 대해서 알아봤는데요. 함수를 호출하는 형식은 [함수이름();] 입니다. 이때 ()안에 특정한 데이터를 넣어서 함수에 전달하고, 그 값을 함수에서 받아들여 변수로 사용해서 코드 내용을 실행하게 할 수 있는데요. 이렇게 함수로 전달되는 변수를 [매개변수]라고 합니다. 글로만 이해하기에는 무리가 있을 거 같으니 바로 예제를 만들어 보겠습니다. ■ 다음과 같은 aaa(num1, num2){}라는 형식의 함수가 있을 때 이 함수를 호출하면서 두 개의 숫자를 매개변수로 전달해주면 두 수를 더해서 화면에 alert를 이용해서 출력하도록 하는 함수인데요. ■ 이렇게 aaa()함수를 호출하면서 두 개의 매개변수 (20, 30)을 넣어주면, 함수..
JavaScript function 자바스크립트 함수
JavaScript function 자바스크립트 함수 ■ 함수는 자바스크립트의 핵심이라고 해도 과언이 아닌데요. 이번 글에서는 함수의 개념과 선언 및 호출에 대해서 정리해보겠습니다. 함수란 자주 사용하는 코드를 미리 [구조화] 해놓은 형태인데요. 프로그래밍할 때 분명히 반복해서 사용하거나 자주 사용하는 코드가 있습니다. 이것들을 미리 묶어 놓은 형태를 함수라고 생각하면 되는데요. ■ 이렇게 함수를 미리 만들어 놓는 걸 '함수의 선언'이라고 하는데요. 'aaa'라는 함수를 선언하는 형식은 다음과 같습니다. function aaa () {코드 내용}이렇게 함수의 이름을 지정해서 코드를 작성해도 되구요. 다음과 같이 함수의 이름 없이 변수에 넣을 수도 있습니다. var bbb=function(){ 코드 내용}..
자바스크립트 javaScript while문
자바스크립트 JavaScript while문 ■ 자바 스크립트에서 가장 많이 사용하는 반복문은 for문 이겠지만, 경우에 따라서는 while문을 이용하기도 하는데요. while문은 횟수가 정해지지 않은 반복문에서 주로 사용됩니다. while문은 어느 조건만 만족하면 계속해서 실행되기 때문에 그 안에는 반드시 반복문을 빠져나오는 조건을 넣어줘야 합니다. 그렇지 않으면 무한루프를 돌게 돼서 컴퓨터를 재부팅 해야 하는 문제가 생길 수도 있어요. 어떤 내용인지 하나씩 알아보겠습니다. ■ 먼저 while문의 형식은 다음과 같습니다 . while(조건){반복되는 내용while문을 탈출하는 조건} 이해를 돕기 위해서 다음과 예제를 만들어보겠습니다. ▲ while문의 조건에 (true)를 입력했기 때문에 이 조건문은 ..
자바스크립트 삼항연산자
자바스크립트 삼항연산자 ■ 자바스크립트에서 조건을 처리하는 형태의 제어문에는 대표적으로 if문이 있고, 좀 더 간결하게 표현할 수 있는 삼항연산자가 있는데요. 이번 글에서는 예제를 하나 만들어보면서 삼항연산자를 이해해보고, 같은 내용을 if문으로 바꿔서 어떻게 다른지 비교해보겠습니다. ■ 메모장을 열어서 간단하게 HTML 문서를 만들고 그 안에 자바스크립트를 넣을 건데요. 어떤 숫자를 입력받아서 그 숫자가 음수인지 양수인지 알아봐서 출력하는 내용의 프로그램을 만들어보겠습니다. 그전에 먼저 삼항연산자의 형식을 살펴보고 넘어갈게요. 삼항연산자 형식(조건문) ? (조건이 참일 때 실행) : (조건이 거짓일 때 실행) ; 조건문이 참일 때는 첫 번째 문장을 실행하고, 거짓 일때는 두 번째 문장을 실행하는 형식입..
HTML CSS JavaScript 자바스크립트 연결
HTML CSS JavaScript 자바스크립트 연결 ■ 우리가 눈으로 보는 웹 브라우저 화면은 [HTML + CSS + 자바스크립트]로 만들어져 있는데요. 이들 문서를 모두 한 곳(HTML)에 작성해도 되지만, 많이 복잡해지기 때문에 이번 글에서는 각각의 문서를 분리해서 작성하고 연결하는 방법을 알아보겠습니다. ■ HTML은 화면의 전체적인 구조를 잡아주는 역할을 하고 확장자는 [.html]입니다. css는 화면을 이루고 있는 각 요소의 위치와 모양 등을 꾸며주는 역할을 하고 확장자는 [.css]입니다. 앞에 두 문서의 역할이 전체적이 화면을 이루고 꾸미는 것들이라면 자바스크립트는 이것들을 역동적으로 움직여주는 역할을 하구요. 확장자는 [.js]입니다. 대충 개념을 알아봤으니 세 개의 문서를 작성하겠습..
aptana studio 3 글자크기 변경
aptana studio 3 글자크기 변경 ■ HTML과 자바스크립트를 공부하기 위해서 aptana studio 3을 설치했는데요. 기본 글자 크기도 작고, 글꼴도 맘에 안 들어서 변경을 해봤습니다.■ 혹시 aptana studio 3 설치하시고 글꼴과 크기 변경하실 분들은 참고하시구요. 참고로 라인 번호가 안보일때 보이도로 설정하는 방법도 알아볼게요. ▲ 저는 개인적으로 나눔고딕 폰트를 좋아해서 선택했구요. 크기는 12입니다. 이렇게 글자의 크기와 글꼴부터 변경해보겠습니다. ▲ 메뉴 중에서 [Window > Preferences]를 선택합니다. ▲ 'Preferences' 창이 열리는데요. 왼쪽 메뉴 탐색기에서 [General ▶ Appearance ▶ Colors and Fonts]를 선택하고, 오른..
HTML5 input type
input type 인터넷을 이용할 때 어딘가에 로그인하기 위해서 아이디와 비번을 입력하고 로그인 버튼을 클릭하게 되는데요. 이런 입력란이나 버튼 등은 모두 HTML5 input type 태그로 이루어져 있는데요. 이 input type 태그를 이용하는 속성이 생각보다 많습니다. 일단 어떤 것들이 있는지 쭉 나열해보고, 이번 글에서는 한 두개만 살펴보고 다음 글에 계속 이어서 정리해볼게요. 먼저 input type 속성을 이용하는 유형은 hidden, text, search, tel, url, reset, image, submit, file, button, time, week, month, date, datetime-local, datetime, radio, checkbox, color, range, n..