자바스크립트 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가..
자바스크립트 javaScript while문
자바스크립트 JavaScript while문 ■ 자바 스크립트에서 가장 많이 사용하는 반복문은 for문 이겠지만, 경우에 따라서는 while문을 이용하기도 하는데요. while문은 횟수가 정해지지 않은 반복문에서 주로 사용됩니다. while문은 어느 조건만 만족하면 계속해서 실행되기 때문에 그 안에는 반드시 반복문을 빠져나오는 조건을 넣어줘야 합니다. 그렇지 않으면 무한루프를 돌게 돼서 컴퓨터를 재부팅 해야 하는 문제가 생길 수도 있어요. 어떤 내용인지 하나씩 알아보겠습니다. ■ 먼저 while문의 형식은 다음과 같습니다 . while(조건){반복되는 내용while문을 탈출하는 조건} 이해를 돕기 위해서 다음과 예제를 만들어보겠습니다. ▲ while문의 조건에 (true)를 입력했기 때문에 이 조건문은 ..
자바스크립트 삼항연산자
자바스크립트 삼항연산자 ■ 자바스크립트에서 조건을 처리하는 형태의 제어문에는 대표적으로 if문이 있고, 좀 더 간결하게 표현할 수 있는 삼항연산자가 있는데요. 이번 글에서는 예제를 하나 만들어보면서 삼항연산자를 이해해보고, 같은 내용을 if문으로 바꿔서 어떻게 다른지 비교해보겠습니다. ■ 메모장을 열어서 간단하게 HTML 문서를 만들고 그 안에 자바스크립트를 넣을 건데요. 어떤 숫자를 입력받아서 그 숫자가 음수인지 양수인지 알아봐서 출력하는 내용의 프로그램을 만들어보겠습니다. 그전에 먼저 삼항연산자의 형식을 살펴보고 넘어갈게요. 삼항연산자 형식(조건문) ? (조건이 참일 때 실행) : (조건이 거짓일 때 실행) ; 조건문이 참일 때는 첫 번째 문장을 실행하고, 거짓 일때는 두 번째 문장을 실행하는 형식입..
자바스크립트 배열 선언 JavaScript Array
자바스크립트 배열 선언 JavaScript Array ■ 여러 개의 변수에 각각의 데이터를 저장하고 따로 관리하는 것보다 이것들을 하나로 묶어서 관리하는 게 당연히 편할 텐데요. 이렇게 여러 개의 변수를 하나로 묶어서 관리할 수 있는 것을 배열이라고 생각하면 됩니다. ■ 예를 들어 다음과 같이 각각의 변수에 데이터를 저장한다고 가정해볼게요. ▲ a, b, c의 변수에 각각 데이터를 저장하는 것보다 aaa라는 하나의 배열[]에 연속적으로 데이터를 저장할 수 있습니다. 위 예제에서 배열 부분을 다시 한 번 정리하자면 다음과 같이 aaa []={10, 20, 30}의 형태가 됩니다. 따라서 aaa 배열에는 세 개의 값이 저장되어 있고 세 개의 값 중에 두 번째 값은 20입니다. 이 값에는 인덱스값으로 접근할 ..
HTML CSS JavaScript 자바스크립트 연결
HTML CSS JavaScript 자바스크립트 연결 ■ 우리가 눈으로 보는 웹 브라우저 화면은 [HTML + CSS + 자바스크립트]로 만들어져 있는데요. 이들 문서를 모두 한 곳(HTML)에 작성해도 되지만, 많이 복잡해지기 때문에 이번 글에서는 각각의 문서를 분리해서 작성하고 연결하는 방법을 알아보겠습니다. ■ HTML은 화면의 전체적인 구조를 잡아주는 역할을 하고 확장자는 [.html]입니다. css는 화면을 이루고 있는 각 요소의 위치와 모양 등을 꾸며주는 역할을 하고 확장자는 [.css]입니다. 앞에 두 문서의 역할이 전체적이 화면을 이루고 꾸미는 것들이라면 자바스크립트는 이것들을 역동적으로 움직여주는 역할을 하구요. 확장자는 [.js]입니다. 대충 개념을 알아봤으니 세 개의 문서를 작성하겠습..
자바스크립트 IDE aptana studio 3 설치
자바스크립트 IDE aptana studio 3 설치 ■ 자바스크립트 IDE(통합 개발 환경) 중에서 aptana studio 3를 설치하는 과정을 정리해볼까 합니다. aptana 홈페이지에서 내려받고 설치하면 되는 간단한 과정이지만 혹시 도움이 필요하신 분이 계실까 해서 그림 위주로 간단하게 정리하겠습니다. http://www.aptana.com/ aptana 홈페이지입니다. 클릭해서 이동할게요. ▲ 홈페이지 대문에 바로 내려받을 수 있게 버튼이 보이구요. 클릭하겠습니다. ■ 그림에서 표시한 이메일은 입력 안 해도 됩니다. 다시 한 번 내려받기 버튼을 클릭하겠습니다. ■ 내려받기가 시작된다는 메시지가 보이는데요. 저는 자동으로 내려받기가 안되더라구요. 혹시 여러분도 저와 같으면 그림에서 표시한 [Cli..