Be a groovy man by positive thinking

UI/UX_016 본문

IT/_HTML_CSS_JS

UI/UX_016

KhanSelf 2017. 7. 28. 16:07

간단정리

1. 기본 내장 객체

1) Number 객체

2) String 객체

 (1) length 속성 : 문자열의 길이 반환

 (2) substring(시작, 종료)

      ==> 시작위치부터 종료위치앞까지 문자열 반환

 (3) substr(시작, 길이)

  ==> 시작위치부터 길이만큼의 문자열 반환


3) Array 객체

 var 배열명 = new Array (배열크기);

 var 배열명 = new Array (배열값1, 배열값2 ....);

 (1) 배열명.length 속성 : 배열의 크기

 (2) 배열명.push() : 마지막 인덱스에 요소 추가

 (3) 배열명.pop() : 마지막 인덱스 요소 삭제

 (4) 배열명.sort() : 문자열 오름차순

  배열명.sort(function (a, b) {}

  : 숫자를 정렬할 경우 비교함수 사용

 (5)  배열명.splice(위치, 삭제 항목 수, 추가 항목 ㆍㆍㆍ);

  : 배열요소 추가 및 삭제

 -- 추가

 배열명.splice(위치, 0, 추가항목ㆍㆍㆍ);

 

 -- 삭제

 배열명.splice(위치, 삭제 항목 수);

 

 

 

2. 브라우저 객체 모델

 - window 객체 : 브라우저 기반 자바스크립트의 최상위 객체


1) 속성

(1) innerHeight  - 브라우저 높이

(2) innerWidth - 브라우저 넓이 

(3) opener - 새창을 열 경우 현재 창을 열어준 부모 창

(4) parent - 여러 프레임이 존재할 경우 현재 창의 부모 창

(5) self - 현재 창

(6) status - 상태표시줄

(7) top - 여러 프레임이 존재할 경우 현재 창을 포함하는 최상위 창


2) 매서드

 - window.open()

 새창을 여는 매서드

 open(URL,윈도 이름 or target, 윈도우모양);

 

(1) URL

(2) 윈도 이름 or target :

 _blank : 새창 디폴트값

 _parent : 프레임 중 부모창

 _self : 현재 윈도우 창

 _top : 최상위 프레임 창

 name : 윈도위 이름

(3) 윈도우 모양

 top = 새창이 열릴 상하 위치

 left = 새창이 열릴 좌우 위치

 width = 새창 넓이

 height = 높이

 fullscreen = yes|no|1|0 

 menubar = yes|no|1|0 

 resizable = yes|no|1|0 창의 사이즈 조절 IE only

 scrollbars = yes|no|1|0 IE, Firefox & Opera only

 status = yes|no|1|0

 titlebar = yes|no|1|0


3) window.close()

 지정한 윈도우를 닫는다


4) window.print()

 윈도우 문서와 연관된 내용을 용지에 인쇄한다.


5) moveBy() : 현재 위치에서 상대적 이동


6) moveTo() : 절대 이동


7) resizeBy() : 상대적이로 크기 지정


8) resizeTo() : 절대적 크기 지정



9) screen 객체 : 운영체제 화면(모니터)의 속성


10) location 객체 : 브라우저 주소와 관련된 속성


11) navigator 객체 : 브라우저의 정보


12) history 객체 :  방문했던 기록과 관련된 객체

 (1) history.back() == history.go(-(1);

 (2) history.forward() == history.go(1);


### onload 이벤트 속성

window.onload = function(){

  // 문서의 로드가 완료된 이후 함수 실행

  document.getElementById("size").style.color="red";

  // 문서에서 size 라는 id 를 찾아 컬러를 레드로 변경

 }


<body>

  <h1 id="size"> window.onload</h1>

</body>















예문


Ex_01

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 변수를 선언합니다.

var num1 = 273.1234;

var num2 = new Number(273.1237);


document.write(num1.toFixed(1));

document.write("<br />");

document.write(num2.toFixed(3)); //반올림 하여 변환*/

// 출력합니다.

</script>

</head>

<body>


</body>

</html>







Ex_02 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var str1 = 'Hello World..!';

var str2 = new String('Hello World');


document.write(str1.length);

document.write("<br />");

document.write(str2.length);

</script>

</head>

<body>


</body>

</html>






Ex_03

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var str = "Apple, Banana, Kiwi";

var str2 = str.substring(7, 13);

// 시작위치 부터 끝 위치까지의 문자열 반환


document.write(str2);

</script>

</head>

<body>


</body>

</html>








Ex_04

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var str = "javascript";

var str2 = str.substring(1, 3);

// 시작위치(0에서시작) 부터 종료 위치 앞 까지의 문자열 반환


var str3 = str.substr(7, 6);

// 시작위치부터 길이만큼의 문자열 반환


document.write(str2);

document.write("<br />");

document.write(str3);

</script>

</head>

<body>


</body>

</html>







Ex_05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var arr = new Array(3);


arr[0] = "박지성";

arr[1] = "박찬호";

arr[2] = "김연아";

arr.push("손연재");


for (var i = 0; i < arr.length; i++) {


document.write(arr[i]);

document.write("<br />");


}

</script>

</head>

<body>


</body>

</html>









Ex_06 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var arr = new Array(3);


arr[0] = "엘지";

arr[1] = "삼성";

arr[2] = "두산";

arr.splice(1, 0, "기아", "롯데");


for (var i = 0; i < arr.length; i++) {


document.write(arr[i]);

document.write("<br />");


}

</script>

</head>

<body>


</body>

</html>











Ex_07

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var arr = new Array("엘지", "삼성", "두산", "기아", "롯데");


arr.splice(3, 2);


for (var i = 0; i < arr.length; i++) {


document.write(arr[i]);

document.write("<br />");


}

</script>

</head>

<body>


</body>

</html>










Ex_08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var arr = new Array(3);


arr[0] = 123;

arr[1] = 4;

arr[2] = 20;


arr.sort(); // 문자열 오름차순 정렬

//arr.reverse(); // 문자열 요소 뒤집기


for (var i = 0; i < arr.length; i++) {


document.write(arr[i]);

document.write("<br />");


}

</script>

</head>

<body>


</body>

</html>




Ex_09

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var arr = new Array(3);


arr[0] = 123;

arr[1] = 4;

arr[2] = 20;


arr.sort(); // 문자열 오름차순 정렬

//arr.reverse(); // 문자열 요소 뒤집기


for (var i = 0; i < arr.length; i++) {


document.write(arr[i]);

document.write("<br />");


}

</script>

</head>

<body>


</body>

</html>



 






Ex_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 선언합니다.

var arr = new Array(3);


arr[0] = 256;

arr[1] = 7;

arr[2] = 123;


arr.sort(function(a, b) {

return b - a;

}); // 내림차순 정렬


for (var i = 0; i < arr.length; i++) {


document.write(arr[i]);

document.write("<br />");


}

</script>

</head>

<body>


</body>

</html>









Ex_11 ceil, floor, round

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var val = 324.6;


document.write("Math.ceil(val) : " + Math.ceil(val) + "<br />");

document.write("Math.floor(val) : " + Math.floor(val) + "<br />");

document.write("Math.round(val) : " + Math.round(val) + "<br />");

</script>

</head>

<body>


</body>

</html>






Ex_12 Random함수

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

document.write("결과 : " + Math.ceil(Math.random() * 5) + "<br>");

</script>

</head>

<body>


</body>

</html>





Ex_13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

var dt = new Date();


document.write(dt.getFullYear() + "년 ");

document.write(dt.getMonth() + 1 + "월 ");

document.write(dt.getDate() + "일 <br />");

document.write("유닉스타임 :" + dt.getTime());


var weekArray = [ "일", "월", "화", "수", "목", "금", "토" ];


document.write(weekArray[dt.getDay()] + "요일");

</script>

</head>

<body>


</body>

</html>











Ex_14

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

var dt = new Date(2017, 6, 28); //DATE함수에 월을 넣을때 -1을 해서 넣어야한다~

var weekArray = [ "일", "월", "화", "수", "목", "금", "토" ];


document.write("오늘날짜 : " + dt.getFullYear() + "년 ");

document.write(dt.getMonth() + 1 + "월 ");

document.write(dt.getDate() + "일 ");

document.write(weekArray[dt.getDay()] + "요일");

</script>

</head>

<body>


</body>

</html>









Ex_15

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

var y = Number(prompt("년도입력", ""));

var m = Number(prompt("월입력", ""));

var d = Number(prompt("일입력", ""));


var dt = new Date(y, m - 1, d);

var weekArray = [ "일", "월", "화", "수", "목", "금", "토" ];


document.write(dt.getFullYear() + "년 ");

document.write(dt.getMonth() + 1 + "월 ");

document.write(dt.getDate() + "일 ");

document.write(weekArray[dt.getDay()] + "요일");

</script>

</head>

<body>


</body>

</html>









Ex_16 window.open()

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

window.open("");

</script>

</head>

<body>


</body>

</html>









Ex_17

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

window.open("popup.html", "",

"left=100, top=100, width=500, height=400, resizable=no, menubar=no");

</script>

</head>

<body>


</body>

</html>



popup.html

==========

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

</script>

</head>

<body>

<h1>여기는 새창입니다.</h1>

<a href="#" onclick="window.close();">새창닫기</a>

<a href="#" onclick="window.opener.close();">부모창닫기</a>

</body>

</html>








Ex_18

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

var oPen = window.open('', '', 'width=500, height=300');


oPen.document.write('<h1>window 리턴!!!</h1>');


//oPen.opener.document.write("<p>This is the parent window!</p>");

</script>

</head>

<body>


</body>

</html>








Ex_19

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

// 변수pop 에 사이즈 300 x 300 의 팝업창을 담는다.


var pop = window.open("", "test", "width=300, height=300");


pop.moveTo(50, 50); // 절대적위치 0,0 지정


var intervalID = setInterval(function() { // 1초마다 반복 실행


pop.moveBy(50, 50); // 왼쪽, 아래쪽으로 50씩 이동한다.


}, 1000);


setTimeout(function() { // 5초뒤 한번 실행


clearInterval(intervalID); // 반복실행되던 setInterval() 을 정지 시킨다.

pop.close();


}, 5000)

</script>

</head>

<body>


</body>

</html>

 

 






Ex_20

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

window.print();

</script>

</head>

<body>


</body>

</html>








Ex_21

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

var pop = window.open("", "", "width=300, height=300");


var w = screen.width; // w 변수에 스크린의 넓이 값을 담는다.


var h = screen.height; // h 변수에 스크린의 높이 값을 담는다.


pop.moveTo(0, 0); // 위치를 절대적으로 지정 


pop.resizeTo(w, h); // 윈도우의 크기를 스크린의 넓이와 높이 값으로 절대적으로 지정

</script>

</head>

<body>


</body>

</html>









Ex_22

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

document.write("location.href : " + location.href);

</script>

</head>

<body>


</body>

</html>










Ex_23

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바스크립트</title>

<script>

location.replace("http://www.naver.com");

</script>

</head>

<body>


</body>

</html>







Ex_24

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.onload</title>

<script>

setTimeout(function() { // 5초뒤 한번 실행


history.back();// 이전 페이지로 가기

//history.go(-1);


}, 5000);

</script>

</head>

<body>

</body>

</html>








Ex_25

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.onload</title>

<script>

document.getElementById("size").style.color = "red";


// 문서에서 size 라는 id 를 찾아 컬러를 레드로 변경

</script>

</head>

<body>

<h1 id="size">window.onload</h1>

</body>

</html>








Ex_26

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.onload</title>

<script>

window.onload = function() {


// 문서의 로드가 완료된 이후 함수 실행

document.getElementById("size").style.color = "red";

// 문서에서 size 라는 id 를 찾아 컬러를 레드로 변경


}

</script>

</head>

<body>

<h1 id="size">window.onload</h1>

</body>

</html>



저작자표시 (새창열림)

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_018  (0) 2017.08.02
UI/UX_017  (0) 2017.07.31
UI/UX_015  (0) 2017.07.24
UI/UX_014  (0) 2017.07.20
UI/UX_013  (0) 2017.07.19
'IT/_HTML_CSS_JS' Related Articles more