16-1
1. 객체 인스턴스 만들기
기본형
new 객체명
자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어내는 것이 인스턴스이다.
2. 프로퍼티와 메서드 이해하기
프로퍼티:객체의 특징이나 속성 ex)제조사,모델명
메서드: 객체에서 할 수 있는 동작 ex)시동 걸기 멈추기
3. 마침표 표기법으로 프로퍼티와 매서드 작성하기
인스턴스 명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메서드 이름을 작성한다.
document.write("현재 시각은 " + now.toLocaleString())
16-2 자바스크립트의 내장객체
Array 객체
array 객체는 자바스크립트의 여러 객체 중에서 배열을 다룬다.
1. Array 객체로 배열 만들기
- 초깃값이 없는 경우
var numbers = new Array();// 배열의 크기 지정하지 않음
var numbers = new Array(4);//배열의 크기 지정- 초깃값이 있는 경우
var numbers = ["one", "two", "three", "four"];
var numbers = Array("one", "two", "three", "four");
2. Array 객체의 length 프로퍼티 사용하기
배열명 앞에 마침표와 length 프로퍼티응 작성하면 된다.
var numbers = ["pne", "two", "three", "four"]; //배열 선언
for(i = 0; i < numbers.length; i++) {
document.write("<p>" +numbers[i] + "</p>")Array 객체의 메서드
let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
console.log(arr[0]) // '첫 번재 요소입니다'를 기록
console.log(arr[1]) // '두 번재 요소입니다'를 기록
console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록 var chars = ["a", "b", "c", "d"];1. 배열끼리 합치는 concat()메서드
var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write("nums에 chars 합치면 : ", numsChars, "<br> chars에 nums 합치면 : ", charsNums);2. 배열안의 요소끼리 합치는 join() 메서드
var string1 = nums.join();
document.write("구분자 없이 : ", string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("/ 구분자 지정 : ", string2);3.새로운 요소를 추가하는 push(), unshift() 메서드
push():배열 맨 끝에 요소 추가
unshift(): 배열 맨 앞에 요소 추가
// 요소 추가 - 새로운 length 값 반환
var ret1 = nums.push(4, 5); // 배열 끝에 추가
document.write("length : ", ret1, " | 배열 : ", nums);
document.write("<br>");
var ret2 = nums.unshift(0); // 배열 앞에 추가
document.write("length : ", ret2, " | 배열 : ", nums);4. 배열에서 요소를 꺼내는 pop(),shift() 메서드
// 요소 추출 - 꺼낸 요소 반환
var popped1 = chars.pop(); // 마지막 요소 꺼냄
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars);
document.write("<br>");
var popped2 = chars.shift(); // 첫번째 요소 꺼냄
document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);5. 원하는 위치에 요소를 추가/삭제하는 splice() 메서드
- 1) 인수가 1개인 경우
var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2); //인덱스값이 2인 요소부터 마지막 요소까지 모두 삭제
document.write("변경된 배열 : " + numbers );- 2) 인수가 2개인 경우
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2,1); //인덱스 값이 2인 요소 부어 1개를 삭제
document.write("변경된 배열 : " + study);- 3) 인수가 3개 이상인 경우
var newStudy2 = study.splice(2, 1, "js");
//인덱스 값이 2인 요소 1개를 삭제하고, 새로운 요소 js를 추가
document.write("변경된 배열 : " + study);
6. 기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드
pop,shift와 다르게 시작과 끝 인덱스를 지정해 요소를 여러개 꺼내고 , 실행 결과 기존 배열이 바뀌지 않음
- 1)메서드 인수 1개
var colors = ["red", "green", "blue", "white", "black"];
var colors2 = colors.slice(2); //인덱스 2부터 끝까지- 2)메서드 인수 2개
var colors3 = colors.slice(2,4); // 인덱스 2부터 시작헤서 인덱스 4직전인 3까지 요소를 꺼냄
document.write(colors3);7. indexOf
indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.
'Blue Whale'.indexOf('Blute'); // returns -1
'Blue Whale'.indexOf('Whale', 0); // returns 5
'Blue Whale'.indexOf('Whale', 5); // returns 5
'Blue Whale'.indexOf('Whale', 7); // returns -1
'Blue Whale'.indexOf(''); // returns 0
'Blue Whale'.indexOf('', 9); // returns 9
'Blue Whale'.indexOf('', 10); // returns 10
'Blue Whale'.indexOf('', 11); // returns 10sort
배열 요소를 지정한 조건에 따라
var lotto = [1,2,3,33,22,11];
lotto.sort((a,b)=>a-b);
document.write(lotto);Date객체
new Date("2022")
new Date("2020-08-13")
new Date("2022-08-13T18:00:00")
new Date("2022-08-13T18:00:00Z")// t붙이면 국제 표준시
new Date("MM/DD/YYYY")
new Date("Mon Jan 20 2022 15:00:41 GMT+0900")
var now = new Date("2020-10-15"); // 오늘 날짜를 객체로 지정
var firstDay = new Date("2020-10-01"); // 시작 날짜를 객체로 지정
var toNow = now.getTime(); // 오늘까지 지난 시간(밀리 초)
var toFirst = firstDay.getTime(); // 첫날까지 지난 시간(밀리 초)
var passedTime = toNow - toFirst; // 첫날부터 오늘까지 지난 시간(밀리 초)
passedTime = Math.round(passedTime/(1000*60*60*24)); // 밀리 초를 일 수로 계산하고 반올림
document.querySelector('#result').innerText = passedTime;<script>
setInterval(displayNow, 1000);
```// 1초마다 시간 계산 함수 실행
function displayNow() { // 시간 계산 함수
var now = new Date(); // Date 객체의 인스턴스를 만듦
var currentTime = now.toLocaleTimeString(); // toLocaleTmeString() 메서드를 사용해 지역에 맞는 시간을 가져옴
document.querySelector("#current").innerHTML = currentTime; // id="current" 인 요소에 현재 시간 표시
}
</script>Math 객체
무작위 수가 필요하거나 반올림해야 하는 경우에도 사용
Date,Array객체는 예약어 new로 객체 인스턴트를 만들지만
Math 객체는 따로 인스턴트를 만들지 않음
기본형
Math.프로퍼티명 Math.메서드명
floor
Math.floor(Math.random() * 100 + 1)
Math.random() * 45 +1; //1이상 ~ 46 미만 실수(float)
var num = Math.random() * 45 + 1;
var ball1 = parseInt(num);
document.write(ball1);이벤트 당첨자 뽑기
<script>
var seed = prompt("전체 응모자 수를 입력하세요.");
var picked = Math.floor((Math.random) * seed + 1);
document.write("전체 응모자 수:" + seed + "명");
document.write("<br>");
document.write("당첨자:" + picked + "번");
</script><script>
var seed = prompt("전체 응모자 수 : ","");
var winner = prompt("당첨자 수 : ", "");
document.write("전체 응모자 수 : " + seed + "명 <br>");
document.write("당첨자: ");
for(let i = 0; i < winner; i++) {
var picked = Math.floor((Math.random() * seed) + 1);
document.write(picked + "번, ");
}
</script>16-3. 브라우저와 관련된 객체
브라우저와 관련된 객체
window 객체의 프로퍼티
window 객체는 웹브라우저의 상태를 제어하며 자바스크립트 최상위에 있다.
window 객체의 프로퍼티는 주로 웹브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용.
window.document
window 객체의 메서드
window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹브라우저 창 자체 관련
window.을 생략하고 alert()로 사용가능
window.open() 메서드는 주로 홈페이지 팝업 창을 띄울 때 사용
window.open(경로, 창 이름, 창 옵션)
- 창옵션:left,top,width,height
팝업창을 한번만 표시하고 닫기
<script> window.open("notice.html","pop", "width=500, height=400"); //창 이름을 지정하지 않으면 새로고침 할 때마다 팝업이 뜬다. </script>
팝업 창 위치 지정하기
window.open("notice.html","pop", "width=500, height=400, left=100, top=200");
팝업이 차단된 브라우저의 알림 창 표시하기
var blocked = false; function openPopup() { var newWin = window.open("notice.html", "pop", "width=500, height=400"); if (newWin == null) { alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.") } newWin.moveBy(100,100); }
navigator객체
navigator객체에는 웹브라우저의 버전을 비롯해 플로그인 설치 정보나 온오프라인 등의 여러 정보가 담겨있다. 이 정보는 사용자가 수정할 수 없으며 가져와서 보여줄 수만 있다.
history 객체
history 객체에는 브라우저에서 [뒤로]나[앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됨
loaction 객체
replace 사이트 위치 고정
<button onclick="location.replace('http://www.easyspub.com')">이지스퍼블리싱 홈페이지로 이동하기</button>
screen 객체
팝업 창을 화면 가운데로
function openCenter(doc, win, w, h){ var left = (screen.availWidth-w) / 2; // 팝업 창의 왼쪽 좌표 var top = (screen.availHeight-h) / 2; // 팝업 창의 위쪽 좌표 var opt = "left=" + left + ",top=" + top + ",width=" + w + ",height=" + h; window.open(doc, win, opt); } openCenter("notice.html","pop", 500, 400)
<script>
document.getElementById('bttn').onclick = displayTime; // 버튼 클릭하면 displayTime 함수 실행
function displayTime(){
var left = (screen.availWidth -400) / 2;
var top = (screen.availHeight -200) / 2;
var opt = "left=" + left + "top=" + top + ",width=" +400 + ",height=" + 200;
window.open("current.html", "pop", opt); //window.open(경로, 창 이름, 창 옵션)
// window.open() 메서드를 사용해서 current.html 파일을 팝업 창으로 표시하세요.
// 팝업 창은 화면 중앙에 표시합니다.
}
</script>