HTML CSS 자바스크립트 무작정 따라하기
Chapter 00. 타이틀
HTML CSS 자바스크립트 무작정 따라하기 학습목표 내장 객체의 의미와 종류를 알 수 있다. array 객체의 프로퍼티와 메서드를 알 수 있다. date 객체를 이해하고 활용할 수 있다. 문자열을 다루는 string 객체를 이해하고 활용할 수 있다. screen 객체를 이용하여 사용자의 화면 정보를 알아낼 수 있다. HTML CSS 자바스크립트 무작정 따라하기
내장 객체의 구조
내장 객체의 종류 내장 객체 설명 window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체입니다. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체입니다. navigator 현재 사용 중인 브라우저에 대한 정보를 가지고 있는 객체입니다. frame 프레임마다 하나씩 만들어지는 객체로 <FRAME> 태그마다 하나씩 만들어집니다. document 웹 페이지마다 하나씩 만들어지는 객체로 <BODY> 태그에 의해 만들어집니다. HTML 문서에 대한 정보를 가지고 있습니다. location 현재 페이지에 대한 URL 정보를 가지고 있는 객체입니다. history 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체입니다. plugin 브라우저에 설치된 플러그인 정보를 저장하고 있는 객체입니다. 플러그인 하나마다 객체가 만들어집니다. mimeType 브라우저의 마임(MIME) 지원 정보를 가지고 있는 객체입니다. image 웹 페이지에 삽입된 이미지 정보를 가지고 있는 객체로, <IMG> 태그를 만날 때마다 객체가 하나씩 만들어집니다. link 웹 페이지의 하이퍼링크 정보를 가지고 있는 객체로, <A href="..."> 태그를 만날 때마다 만들어집니다. HTML CSS 자바스크립트 무작정 따라하기
area 웹 페이지의 이미지맵에 있는 영역 정보를 가지고 있는 객체로, <AREA> 태그를 만날 때마다 만들어집니다. form 웹 페이지에 폼이 사용되었을 때 폼 전체에 대한 정보를 저장합니다. <FORM> 태그를 만날 때마다 만들어집니다. applet 애플릿에 대한 정보를 가지고 있으며 <APPLET> 태그를 만날 때마다 만들어집니다. layer 익스플로러 DHTML에서 사용하는 레이어 정보를 가지고 있습니다. anchor 웹 페이지 안의 앵커 정보를 가지고 있으며 <A NAME="..."> 태그마다 anchor 객체가 하나씩 만들어집니다. text 폼의 텍스트 필드에 대한 정보를 가지고 있는 객체로 <INPUT TYPE="text"...> 태그를 만날 때마다 객체가 하나씩 만들어집니다. password 폼의 패스워드 필드에 대한 정보를 가지고 있으며 <INPUT TYPE="password“...> 태그를 만날 때마다 객체가 만들어집니다. hidden 폼의 히든 필드에 대한 정보를 가지고 있으며 <INPUT TYPE="hidden"...>을 만날 때마다 객체가 만들어집니다. textarea 폼의 텍스트 영역에 대한 정보를 가지고 있으며 <TEXTAREA>태그를 만날 때마다 객체가 하나씩 만들어집니다. HTML CSS 자바스크립트 무작정 따라하기
button 폼의 버튼에 대한 정보를 가지고 있으며 <INPUT TYPE="button"...> 태그를 만날 때마다 하나씩 만들어집니다. submit 폼의 submit 버튼에 대한 정보를 가지고 있으며 <INPUT TYPE="submit"> 태그를 만날 때마다 만들어집니다. reset 폼의 reset 버튼에 대한 정보를 가지고 있으며 <INPUT TYPE="reset"> 태그를 만날 때마다 만들어집니다. checkbox 폼의 체크박스에 대한 정보를 가지고 있으며 <INPUT TYPE="checkbox"> 태그를 만날 때마다 만들어집니다. radio 폼의 라디오 버튼에 대한 정보를 가지고 있으며 <INPUT TYPE="radio"> 태그를 만날 때마다 만들어집니다. fileUpload 폼의 ‘찾아보기’ 버튼에 대한 정보를 가지고 있으며 <INPUT TYPE="file"> 태그를 만날 때마다 만들어집니다. select submit 버튼에 대한 정보를 가지고 있으며 <INPUT TYPE="submit"> 태그를 만날 때 만들어집니다. option HTML CSS 자바스크립트 무작정 따라하기
array 배열 사용을 위한 객체입니다. date 날짜와 시간을 다루는 객체입니다. function 함수를 객체처럼 사용할 수 있게 합니다. math 수학적인 함수와 특수 함수를 제공하는 객체입니다. number 문자를 숫자로 바꾸는 객체입니다. screen 현재 사용 중인 화면에 대한 정보를 다루는 객체입니다. string 문자열을 처리하는 객체입니다. HTML CSS 자바스크립트 무작정 따라하기
① 기본 객체 생성 브라우저가 HTML 소스를 처음부터 읽어나가면 기본 객체인 window, document, navigator, history, location 객체가 자동으로 생성된다. <html> <head> <title>객체의 계층 구조</title> <style type="text/css"> ~ 중략 ~ </style> <script type="text/javascript"> function changeToPic2() { document.topimage.src = "images/pic2.jpg" } function changeToPic3() { document.topimage.src = "images/pic3.jpg" </script> </head> <body> <img src="images/pic1.jpg" name="topimage"> <form name="myform"> <input type="button" name="butt1" value="이미지 바꾸기1" onClick="changeToPic2()"> <input type="button" name="butt1" value="이미지 바꾸기2" onClick="changeToPic3()"> </form> </body> ② 스크립트 소스 처리 <script> 태그를 만나면 </script>까지의 소스를 자바스크립트 인터프리터에게 넘겨준다. 나중에 사용할 함수를 미리 준비하는 과정이다. ③ 객체 만들기 <body> 태그 이하의 소스를 차례로 읽어가면서 필요한 객체들을 생성한다.제일 먼저 <img> 태그를 topimage라는 이미지 객체를 만들고 이어서 순서대로 myform이라는 form 객체 하나와 butt1과 butt2라는 button 객체 두 개가 생성된다. 여기까지 끝나면 브라우저 화면에는 페이지의 내용이 모두 표시된다. ④ 이벤트 처리 브라우저 화면에 내용을 표시한 후 사용자의 동작을 기다린다. 만일 사용자가 첫 번째 버튼을 클릭하면 butt1 객체의 onClick 이벤트 핸들러 changeToPic2()가 실행되어 이미지가 pic2.jpg로 바뀐다 HTML CSS 자바스크립트 무작정 따라하기
Array 객체 1) 배열이란? 2) 배열의 선언 3) Array 객체의 프로퍼티 변수가 하나의 값을 저장할 수 있는 바구니라면 배열은 여러 개의 바구니를 한 줄로 늘어놓고 순서대로 여러 값들을 저장할 수 있는 공간이다 2) 배열의 선언 변수를 배열로 사용하려면 new를 이용해서 Array 객체의 인스턴스를 만든다. 예 예 기본형식 변수 = new Array( ) yoil = new Array( ) yoil[0] = "일요일" yoil[1] = "월요일" ... yoil[6] = "토요일" yoil = new Array(7) yoil[0] = "일요일" yoil[1] = "월요일" ... yoil[6] = "토요일" 기본형식 변수 = new Array(배열의 크기 ) 크기를 미리 지정하면 처음부터 필요한만큼 배열을 만들어 놓기 때문에 저장 공간을 효율적으로 사용할 수 있다. 3) Array 객체의 프로퍼티 length : 배열의 길이를 알아낼 수 있다. 예 var mess = new Array(‘가’, ‘나', ‘다'); var max = mess.length; HTML CSS 자바스크립트 무작정 따라하기
Array 객체의 메서드 메서드 설명 기본형식 concat() 기존 배열에 새로운 배열을 추가한다. join() var 배열명3 = 배열명1.concat(배열명2) join() 배열 요소를 합하여 문자열로 만든다. var 배열명1 = new Array var 배열명2 = 배열명1.join(구분 기호) reverse() 배열 요소의 배치 순서를 역순으로 바꾼다. var 배열명2 = 배열명1.reverse() slice() 배열을 나눈다. var 배열명2 = 배열명1.slice(시작 위치, 끝 위치) HTML CSS 자바스크립트 무작정 따라하기
Date 객체 Date 객체의 인스턴스 만들기 Date() 객체 : 날짜와 시간에 대한 정보를 조절할 수 있는 객체 new Date() : 현재 날짜를 갖는 인스턴스가 만들어진다. new Date( 특정 날짜) : 특정 날짜에 대한 인스턴스가 만들어진다. 기본형식 var 변수 = new Date() 또는 var 변수 = new Date(년, 월-1, 일, 시, 분, 초) 예 var now = new Date() var theDay = new Date(2015, 5, 24, 0, 0, 0) HTML CSS 자바스크립트 무작정 따라하기
Date 객체의 메서드 메서드 기능 getYear() 1970년도 이후의 연도를 알아내는 메서드 getMonth() 월을 알아내는 메서드. 이 메서드의 반환값은 0부터 11까지이다. getDate() 일을 알아내는 메서드 getDay() 요일을 알아내는 메서드. 이 메서드의 반환값은 0부터 6까지이다. getHours() 시간을 알아내는 메서드. 반환값은 24시간제로 표시된다. getMinutes() 분을 알아내는 메서드 getSeconds() 초를 알아내는 메서드 getTime() 1970년 1월 1일 이후의 시간을 1/1000초로 표현한다. getMiliseconds() 1970년 1월 1일 이후의 시간을 1/100초로 표현한다. setYear() 연도를 설정하는 메서드 HTML CSS 자바스크립트 무작정 따라하기
Date 객체의 메서드 setMonth() 월을 설정하는 메서드. 설정하려고 하는 월의 값보다 1 작게 설정해야 한다. setDate() 일을 설정하는 메서드. setDay() 요일을 설정하는 메서드 setHour() 시간을 설정하는 메서드 setMinutes() 분을 설정하는 메서드 setSeconds() 초를 설정하는 메서드 setTime() 1970년 1월 1일 이후의 시간을 1/1000초로 설정하는 메서드 setMiliseconds() 1970년 1월 1일 이후의 시간을 1/100초로 설정하는 메서드 toGMTString() 요일 일 월 연도 시간:분:초 UTC 형식으로 표시 toLocaleString() 월/일/년도 시간:분:초 형식으로 표시 toString 요일 월 날짜 시간:분:초 UTC+대한민국 표준시 형식으로 표시 HTML CSS 자바스크립트 무작정 따라하기
Date 객체 String 객체의 인스턴스 만들기 length 프로퍼티 String 객체는 변수에 문자열만 대입해 주면 그대로 String 객체가 만들어진다. 기본형식 변수명 = 문자열 예 greeting = "어서오세요" length 프로퍼티 문자열의 길이를 구한다. 이 프로퍼티를 이용하면 사용자가 입력한 문자열의 길이를 체크해서 지정한 길이보다 넘을 경우 알려줄 수 있다. 예 do{ yourText = prompt("4자 이상 8자 이하로 텍스트를 입력하세요. (한글가능) : ", "안녕하세요?") len = yourText.length } while(len <4 || len > 8) HTML CSS 자바스크립트 무작정 따라하기
String 객체의 글꼴 관련 메서드 메서드 설명 big() blink() 글자를 깜빡거리게 한다. <BLINK> 태그를 적용한 것과 같다. bold() 글자를 진하게 만듭니다. <B> 태그를 적용한 것과 같다. fixed() 글자를 고정 너비 글꼴로 바꾼다. fontcolor() 글자의 색상을 바꾼다. fontsize() 글자의 크기를 바꾼다. italic() 글자를 이탤릭체로 바꾼다. <I> 태그를 적용한 것과 같다. small() 글자의 크기를 한 단계 작게 한다. <SMALL> 태그를 적용한 것과 같다. strike() 글자 위를 가로지르는 스트라이크 선을 넣는다. <STRIKE> 태그를 적용한 것과 같다. sub() 글자에 아래 첨자를 표시한다. <SUB> 태그를 적용한 것과 같다. sup() 글자에 위첨자를 표시한다. <SUP> 태그를 적용한 것과 같다. HTML CSS 자바스크립트 무작정 따라하기
Date 객체의 링크 관련 메서드 String 객체에 있는 링크와 관련된 메서드를 사용하면 <A> 태그를 이용하지 않고도 문자열에 링크를 만들 수 있다. 메서드 설명 기본 형식 anchor() 특정 문자열에 앵커(책갈피)를 지정합니다. 앵커는 한 문서 안에서 특정 위치로 이동할 수 있게 해주는 책갈피입니다. 변수1 = "문자열" 변수1.anchor(앵커명) ⋮ 변수2 = "문자열" 변수2.link(#앵커명) link() 문자열에 직접 하이퍼링크를 만듭니다. 변수 = "문자열" 변수.link(링크 주소) HTML CSS 자바스크립트 무작정 따라하기
String 객체의 위치 관련 메서드 메서드 설명 기본 형식 charAt() 지정한 위치의 문자가 무엇인지 알아낸다. charCodeAt() 지정한 위치의 문자를 유니코드로 변환한다. 문자열.charCodeAt(인덱스) 문자열..fromCharCode(유니코드) fromcharCode() 유니코드를 문자로 변환한다. indexOf() 지정한 문자열의 첫 번째 인덱스 위치를 알아낸다. 문자열.indexOf(찾을 문자열, [시작 인덱스]) 문자열.lastIndexOf(찾을 문자열) lastIndexOf() 지정한 문자열의 마지막 인덱스 위치를 알아낸다. HTML CSS 자바스크립트 무작정 따라하기
String 객체의 문자열 추출 메서드 메서드 설명 기본 형식 slice() 매개변수에 맞게 문자열을 추출한다. 문자열.substring(시작 인덱스, 끝 인덱스) substring() substr() 지정한 길이만큼 문자열을 추출한다. 문자열.substr(시작 인덱스, 길이) HTML CSS 자바스크립트 무작정 따라하기
Math 객체 Math 객체 : 사인(sin) 함수값을 구하거나 최대값을 찾는 등 수학적인 계산과 관련된 객체 프로퍼티 설명 E 자연로그 밑의 오일러 상수 PI 원주율, π SQRT2 2의 제곱근, SQRT1_2 1/2의 제곱근 LN2 2의 자연로그, LN10 10의 자연로그, LOG2E 밑이 2인 e의 로그 LOG10E 밑이 10인 e의 로그 HTML CSS 자바스크립트 무작정 따라하기
Math 객체 Math 객체의 메서드 메서드 설명 abs() 매개변수에 대한 절대값을 반환한다. log() 매개변수에 대한 로그값을 반환한다. acos() 아크 코사인 값을 반환한다. max() 매개변수 중 최대값을 반환한다. asin() 아크 사인 값을 반환한다. min() 매개변수 중 최소값을 반환한다. atan() 아크 탄젠트 값을 반환한다. pow() 매개변수의 지수값을 반환한다. atan2() random() 0과 1 사이의 무작위수를 만든다. ceil() 매개변수의 소수점 이하 부분을 올린다. round() 매개변수의 소수점 이하 부분을 반올림한다. cos() 코사인 값을 반환한다. sin() 사인 값을 반환한다. exp() 지수 함수 sqrt() 매개변수에 대한 제곱근을 반환한다. floor() 매개변수의 소수점 이하 부분을 버린다. tan() 탄젠트 값을 반환한다. HTML CSS 자바스크립트 무작정 따라하기
Function 객체와 Number 객체 Function 객체 Number 객체 기본형식 객체명 = new Function(매개변수1, 매개변수2, …, 계산식) 예 average = new Function(num1, num2, return((num1+num2)/2) ) Number 객체 Math 객체와 마찬가지로 그 프로퍼티 값을 사용하기 위한 목적으로 만들었다. 따옴표와 함께 표시되는 숫자를 실제 숫자로 바꿔준다. 기본형식 Number("숫자") 프로퍼티 설명 MAX_VALUE 자바스크립트에서 표현할 수 있는 최대값 MIN_VALUE 자바스크립트에서 표현할 수 있는 최소값 NaN 수가 아님 NEGATIVE_INFINITY 음의 무한대 POSITIVE_INFINITY 양의 무한대 HTML CSS 자바스크립트 무작정 따라하기
Screen 객체 사용자의 화면 관련 정보를 가지고 있다. 프로퍼티 설명 availHeight 운영체제 인터페이스가 차지하는 영역을 제외하고 실제 내용이 나타나는 영역의 높이. 픽셀 단위이다. availWidth 인터페이스 영역을 제외하고 실제 내용이 나타나는 영역의 너비. 픽셀 단위이다. colorDepth 색상 수 height 화면의 높이. 모니터의 가로 해상도를 가리키며 픽셀 단위이다. width 화면의 너비. 모니터의 세로 해상도를 가리키며 픽셀 단위이다. HTML CSS 자바스크립트 무작정 따라하기