3. 객체 사용, 브라우저 관련 내장 객체

2017. 2. 7. 13:20

1. Math 객체 사용

<!doctype html>

<head>

</head>

<body>

<!--

// Math 객체의 속성 이용하기

document.write("원주율 PI 값 : " +Math.PI +"<BR>");

document.write("2 의 제곱근 값 : " +Math.SQRT2 +"<BR>");

// Math 객체의 메소드 사용

document.write("5 의 SIN 값 : " +Math.sin(5) +"<BR>");

document.write("7 의 지수 함수 값 : " +Math.exp(7) +"<BR>");

//-->

</SCRIPT>

</body>

</html>

2. Math 객체 사용

<!doctype html>

<head>

<!--

message = new Array();

message[0] = "친구를 갖는다는 것은 또 하나의 인생을 갖는 것이다.";

message[1] = "사랑이나 지성보다도 더 귀하고 나를 행복하게 해주는 것은 우정이다.";

message[2] = "우정은 날개가 없는 사랑이다.";

message[3] = "친구를 얻는 유일한 방법은 스스로 완전한 친구가 되는 것이다.";

message[4] = "사랑하라, 한 번도 상처받지 않은 것 처럼";

random_message = Math.floor(Math.random()*5);

// floor : 값보다 작거나 같은 수 중에서 가장 근접한 정수값을 구합니다.

random_message = message[random_message];

document.write(random_message);

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

<f5를 눌러주면 랜덤으로 계속 새로운 글이 나와요.>

3. Object

<!doctype html>

<head>

<title>Object</title>

<!--

a = "75";

b = "A";

c = 135.875;

resA = new Number(a);

document.write("숫자형 문자 : " + a + " 를 숫자로 변환 : " + resA + "<BR>");

resB = new Number(b);

document.write("알파벳 문자 : " + b + " 를 숫자로 변환 : " + resB + "<BR>");

resC = c.toString(2);

document.write("숫자형 문자 : " + c + " 를 2진수 바이너리 값으로 변환 : " + resC + "<BR>");

resC = c.toString(8);

document.write("숫자형 문자 : " + c + " 를 8진수 바이너리 값으로 변환 : " + resC + "<BR>");

resC = c.toString(16);

document.write("숫자형 문자 : " + c + " 를 16진수 바이너리 값으로 변환 : " + resC + "<BR>");

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

4. Number 객체 이용하기

<!doctype html>

<head>

<title>Number 객체 이용하기</title>

<!--

// Number 객체를 이용하여 문자열을 숫자로 처리하여 값 구하기

a = "55";

b = "37";

document.write("a 의 값 : " +a + "<br>");

document.write("b 의 값 : " +b + "<br>");

document.write(" a + b = " + (Number(a) + Number(b))+ "<br>");

document.write(" a + b = " + (a + b)+ "<br>");

// Number 객체의 메소드 이용하기

document.write("<P>" +" +++ Number 객체의 메소드 사용+++" + "<BR>");

document.write("자바스크립트에서 표현할 수 있는 가장 큰 수 : "+Number.MAX_VALUE+"<BR>");

document.write("자바스크립트에서 표현할 수 있는 가장 작은 수 : "+Number.MIN_VALUE+"<BR>");

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

5. String 객체를 이용하여 문자열 속성 지정

<!doctype html>

<head>

<title>String 객체를 이용하여 문자열 속성 지정</title>

<!--

//변수에 문자열을 지정한 후 메소드를 이용 문자열을 변환

txt="H.E.L.L.O.W";

document.write("기본형:"+txt+"<br>");

document.write("bold:"+txt.bold()+"<br>");

document.write("strike:"+txt.strike()+"<br>");

document.write("fontcolor('red'):"+txt.fontcolor('red')+"<br>");

document.write("sub:"+txt.sub()+"<br>");

document.write("sup:"+txt.sup()+"<br>");

document.write("toLowerCase:"+txt.toLowerCase()+"<br>");

-->

</Script>

</head>

<body>

</body>

</html>

6. String 객체 이용하기 - 문자열 일부만 추출하기

<!doctype html>

<head>

<title>String 객체 이용하기 - 문자열 일부만 추출하기</title>

</head>

<body>

<!--

txt="KOREA 2017 SEOUL";

document.write("txt 객체의 문자열 : "+txt+"<P>");

document.write(" ++ substr 메소드를 이용하여 3 번째 부터 4개의 문자열 추출<BR>");

document.write(txt.substr(2,4) + "<P>");

document.write(" ++ substring 메소드를 이용하여 1 번째 부터 5번 앞 까지의 문자열 추출<BR>");

document.write(txt.substring(0,5) + "<P>");

//-->

</SCRIPT>

</body>

</html>

7. String 객체 이용하기 - 하이퍼링크와 네임 엥커 지정하기

<!doctype html>

<head>

<title>String 객체 이용하기 - 하이퍼링크와 네임 엥커 지정하기</title>

</head>

<body>

<!--

txt = "DAUM";

abc ="NAVER";

a = "google";

// 책갈피 지정

txt.anchor("top");

// 지정한 주소(URL)을 찾아가는 link 메소드를 삽입합니다.

document.write(txt.link("http://www.daum.net") + "<P>");

document.write(" 아래로 이동" .link("#topp3")+ "<BR>");

document.write("<IMG src='../images/toolbang.jpg'>" + "<P>");

document.write(abc.anchor("topp2") +"<P>" );

document.write(abc.link("http://naver.com") +"<P>" );

document.write("<IMG src='../images/toolbang.jpg'>" + "<P>");

document.write(a.anchor("topp3") +"<P>" );

document.write(a.link("http://google.com") +"<P>" );

document.write("<IMG src='../images/1a.jpg'>" + "<P>");

// 책갈피로 지정한 위치를 찾아가는 link 메소드 삽입

document.write(" 중간 위치로 이동" .link("#topp2")+ "<BR>");

document.write(" 맨위로 이동" .link("#top")+ "<BR>");

//-->

</SCRIPT>

</center>

</body>

</html>

<넘 커서 못넣겠네요.; 대략 사진처럼 나오고 링크 클릭해서 해당 페이지로 이동 되면 됩니다.>

8. Window 객체 사용 - open_1.html 문서를 새창에 지정한 크기로 나타내기

<!doctype html>

<head>

</head>

<body>

<br>

</CENTER>

</body>

</html>

open_1.html로 저장해주세요.

<!doctype html>

<head>

</head>

<body>

<br>

</CENTER>

</body>

</html>

open_2.html로 저장해주세요.

<!doctype html>

<head>

<title>Window 객체 사용 - open_1.html 문서를 새창에 지정한 크기로 나타내기</title>

</head>

<body>

하이퍼 링크로 텍스트를 클릭하면 새창으로 지정한 웹 문서를 지정한 크기에 맞추어 나타나게 합니다.

<!--

'open_1.html' : 새로운 윈도우를 나타나게할 문서의 경로 입력

'open' : 열리게 할 윈도우 이름부여

'width=400, height=400' : 열리게할 윈도우 세부 속성 지정

. location : 주소 표시줄을 보이게 할지 여부 지정

. resizable : 창 크기를 조정 가능하게 할지 지정

. scrollbars : 스크롤 바가 생기게 할지 여부 지정

. width : 가로 넓이 픽셀 단위 지정

. height : 세로 높이 픽셀 단위 지정

-->

<br>

</CENTER>

</body>

</html>

<실행하면 이렇게 뜨는데요ㅎ 링크를 클릭하면 새창으로 문서가 열립니다.>

<클릭해서 새창으로 문서를 연 모습>

9. Window 객체

<!doctype html>

<head>

<title>open window</title>

</head>

</CENTER>

</body>

</html>

notice3.html로 저장해주세요.

<!doctype html>

<head>

<title>Window 객체</title>

<!--

function bigPicture()

{

window.open("notice3.html", "textwin", "width=700 height=230");

}

//-->

</SCRIPT>

</head>

<body>

<br>

그림에 마우스를 가져가면 <br>

크게 볼 수 있습니다.<br><br><br>

</body>

</html>

<실행화면>

<컵에 마우스를 올리면 이렇게 크게 실행되고 5초 후에 창이 닫힙니다.>

10. Window 객체

<!doctype html>

<head>

<title>open window</title>

</head>

</CENTER>

</body>

</html>

notice5.html로 저장해주세요.

<!doctype html>

<head>

<title>Window 객체</title>

<!--

function bigPicture()

{

window.open("notice5.html", "textwin", "width=700 height=230");

}

//-->

</SCRIPT>

</head>

<body>

<br>

그림에 마우스를 가져가면 <br>

크게 볼 수 있습니다.<br><br><br>

</body>

</html>

<실행화면>

<컵에 마우스를 올리면 똑같이 크게 실행 되는데 5초 후에 실행 된 창이 닫히는게 아니고 기존 창이 닫히게 됨. 응용해서 무한으로 인터넷 창 열리는 악용 프로그램도 만들 수 있지만.....하지 말아주세요^^>

. 브라우져 관련 내장 객체

: 브라우저 객체는 자바스크립트에서는

웹 페이지의 구성 요소를 객체로 정의 하여 제공하는 것을 말합니다.

. location 객체 : 주소 정보를 제어하는 객체

. window 객체 : 창에 대한 전반적인 모든 상황을 제어하는 최상위 객체

자바스크립트에서 사용하는 모든 객체는 window 객체의 하위

에 속합니다.

. document 객체 : 문서에 대한 정보를 제어하는 객체 입니다. 이미지나 폼을

구현할 경우 웹 페이지의 문서에 출력 합니다.

document 객체는 이미지를 출력하기 위한 이미지 객체

입력 양식을 구현하기 위한 form 객체 등 다양한 객체를

하위 객체로 가지고 있습니다.

: 웹 브라우저 객체의 계층 구조

window

FRAME DOCUMENT LOCATION HISTORY

layers image form link anchor applet

text radio textarea select password checkbox reset submit hidden fileuplord

window.document.write("안녕하세요");

. window 객체

: window 객체는 자바스크립트 계층 구조 중에서 가장 최상위에 있는 객체 입니다.

window 객체는 window 라는 단어의 의미 그대로 열린창,

즉 브라우저 자신이나 alert, confirm, prompt 등 각종 대화상자의

정보를 제공하거나, 조작할때 사용하는 객체 입니다.

window 객체의 속성

속성 내 용

. close 창의 닫힌 여부(true/false)

. document document 객체

. history history 객체

. location location 객체

. opener 현재 창을 열어준 윈도우

. self 현재 창 자신

. top 가장 앞쪽 창

. name 창의 이름

11. Location 객체 사용

<!doctype html>

<head>

<title>Location 객체 사용</title>

</head>

<body>

Location 객체를 이용한 폼 버튼에 하이퍼 링크 연결하기<br>

</FORM>

</CENTER>

</body>

</html>

12. document 객체 사용

<!doctype html>

<head>

<title>document 객체 사용</title>

</head>

<body>

<P>

색상을 클릭하면 문서의 배경 색상이 변경 됩니다.<P>

</body>

</html>

13. document 객체

<!doctype html>

<head>

<title>document 객체</title>

<!--

function myFunc()

{

document.bgColor ="skyblue";

document.fgColor ="darkblue";

document.linkColor ="red";

document.alinkColor ="cyan";

document.vlinkColor ="green";

}

function myFunc22()

{

document.bgColor ="yellow";

document.fgColor ="darkblue";

document.linkColor ="green";

document.alinkColor ="cyan";

document.vlinkColor ="red";

}

//-->

</SCRIPT>

</head>

<body>

<!--

document.write("배경 색상 : " + document.bgColor +"<br>");

document.write("텍스트 색상 : " + document.fgColor +"<br>");

document.write("링크 텍스트 색상 : " + document.linkColor +"<br>");

document.write("클릭시 링크 텍스트 색상 : " + document.alinkColor +"<br>");

document.write("방문 한 적이 있는 링크 텍스트 색상 : " + document.vlinkColor +"<br>");

//-->

</SCRIPT>

<P>

</body>

</html>

14. document 객체 사용

<!doctype html>

<head>

<title>document 객체 사용</title>

<!--

function openWin()

{

myWin = window.open("","popMyWin","width=400,height=300");

myWin.document.open();

myWin.document.write("<HTML><HEAD><TITLE> Document Test </TITLE></HEAD>");

myWin.document.write("<BODY bgColor='gold'>");

myWin.document.write("<P align=center><B>안녕하세요</B></P>");

myWin.document.write("</BODY></HTML>");

myWin.document.close();

}

function openClose()

{

myWin.document.open();

myWin.document.clear();

myWin.close();

}

//-->

</SCRIPT>

</head>

</body>

</html>

<실행 모습>

<새창열기를 클릭하면 안녕하세요가 나와요~ 창 닫기 눌리면 닫히구요>

15. History 객체 사용

<!doctype html>

<head>

<title>History 객체 사용 222</title>

</head>

<A href="history_3.html">history_3.html 문서로 이동하기</A>

</CENTER>

</body>

</html>

history_2.html로 저장해주세요.

<!doctype html>

<head>

<title>History 객체 사용 333</title>

</head>

</CENTER>

</body>

</html>

history_3.html로 저장해주세요.

<!doctype html>

<head>

<title>History 객체 사용</title>

</head>

<body>

<A href="history_2.html">history_2.html 문서로 이동하기</A>

</CENTER>

</body>

</html>

<여기서 history_2.html 문서로 이동하기를 클릭하면 다음 페이지로 넘어가져요>

<history_3.html 문서로 이동하기를 클릭해서 넘어가구여>

<마지막엔 처음으로 돌아갈 수도 있고 이전 화면으로 갈 수도 있구요ㅎ 응용해서 해보시면 될거에요.>

저작자표시 비영리 변경금지

'자바스크립트(Javascript)' 카테고리의 다른 글

4. javascript 활용, Login Page 꾸미기, Image 넘기기, Image 버튼으로 넘기기 (0)	2017.02.08
2. 선택문, switch 문, 반복문, while 문, do~while 문, 내장 함수, Javascript 함수의 정의 와 호출, 배열의 사용, 이벤트 사용 (0)	2017.02.06
1. Java Script(자바스크립트), javascript 삽입하기, javascript 에서 변수 사용 (0)	2017.02.06

테스토리