1. 기본형 : new 객체명
객체명.프로퍼티
객체명.메서드
- 객체 : 프로그램에서 인식할 수 있는 모든 대상
- 프로퍼티 (property) : 객체의 특징이나 속성
- 메서드 (method): 객체에서 할 수 있는 동작
2. 자바스크립트의 내장객체
| 종류 | 설명 |
|---|
| window | 브라우저 창이 열릴때마다 하나씩 만들어짐. 브라우저 창 안의 요소중에 최상위 |
| document | 웹 페이지마다 하나씩 있으며 태그를 만나면 만들어짐. html문서의 정보가 담김 |
| navigator | 현재 사용하는 브라우저의 정보가 담김 |
| history | 현재 창에서 사용자의 방문 기록을 저장 |
| location | 현재 페이지의 url정보가 담김 |
| screen | 현재 사용하는 화면 정보를 다룸 |
3. Array 객체의 메소드
| 종류 | 설명 |
|---|
| concat | 기존 배열에 요소를 추가해 새로운 배열을 만듬 |
| every | 배열의 모든 요소가 주어진 함수에 대해 참이면 true, 거짓이면 false를 반환 |
| filter | 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듬 |
| forEach | 배열의 모든 요소에 대해 주어진 함수를 실행 |
| indexOf | 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음 |
| join | 배열 요소를 문자열로 합침 |
| push | 배열의 맨 끝에 새로운 요소를 추구한 후 새로운 length 반환 |
| unshift | 배열의 시작부분에 새로운 요소를 추가 |
| pop | 배열의 마지막 요소를 꺼내 그 값을 결과로 반환 |
| shift | 배열의 첫번째 요소를 꺼내 그 값을 결과로 반환 |
| splice | 배열에 요소를 추가하거나 삭제 |
| slice | 배열에서 특정부분만 잘라냄 |
| reverse | 배열의 배치 순서를 역순으로 바꿈 |
| sort | 배열 요소를 지정한 조건에 따라 정렬 |
| toString | 배열에서 지정한 부분을 문자열로 반환. 각 요소는 쉼표로 구분. |
<script>
var nums = [1,2,3];
var chars = ["a","b","c","d"];
var numsChars = nums.concat(chars);
var charNums = chars.concat(nums);
document.write("nums에 char를 합치면: ", numsChars, "<br> chars에 nums 합치면: ",
charsNums);
var nums =[1,2,3];
var chars= ["a","b","c","d"];
var string1 = nums.join();
document.write("구분자없이 : ", string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("'/' 구분자지정: ", string2);
var nums = [1,2,3];
var ret1 = nums.push(4,5);
document.write ("length: " , ret1, " | 배열 : " , nums);
document.write("<br>");
var ret2 = nums.unshift(0);
document.write("length: " , ret2, " | 배열 : ", nums);
var chars= ["a","b","c","d"];
var popped1 = chars.pop();
document.write("꺼낸요소 : ", popped1, " | 배열: ", chars);
document.write("<br>");
var popped2 = chars.shift();
document.write("꺼낸요소 : ", popped2, " | 배열: ", chars);
var numbers = [1,2,3,4,5];
var newNumbers = numbers.splice(2);
document.write("반환된 배열: " + newNumbers + "<br>");
document.write("변경된 배열: " + numbers);
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2,1);
document.write("반환된 배열: " + newStudy + "<br>");
document.write("변경된 배열 : " + study);
var newStudy2 = study.splice(2,1,"js");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + Study);
var colors = ["red", "greed", "blue", "white", "black"];
var color2 = colors.slice(2)
document.write(colors2);
var colors = ["red", "greed", "blue", "white", "black"];
car colors3 = colors.slice(2,4);
document.write(colors3);
</script>
<script>
var now = new Date("2023-11-12");
var firstDay = new Date("2023-10-20");
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>
<body>
<h1>당첨자 발표</h1>
<script>
var seed = prompt("전체 응모자 수: ", "");
var picked = Math.floor((Math.random() * seed)+1);
document.write("전체 응모자 수 : " + seed + "명");
document.write("<br>");
document.write("당첨자: " + picked + "번");
</script>
</body>
- 팝업창
: 기본형: window.open(경로, 창이름, 창 옵션)
<script>
window.open("notice.html", "", "width=500, height=400");
window.open("notice.html", "pop", "width=500, height=400");
window.open("notice.html", "pop", "width=500, height=400, left=100, top=200");
function openPopup() {
var newWin = window.open("notice.html", "pop", "width=500, height=400");
if(newWin == null){
alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
}
newWin.moveBy(100,100);
}
<button onclick="javascript:window.close();">닫기</button>
</script>
<body>
<p>문서를 열면 팝업 창이 표시됩니다.</p>
<script>
popWin = window.open("doit-event.html", "popup", "width=750, height=600");
popWin.opener = self;
</script>
</body>
//doit-event.html
<body>
<div id="container">
<h1>이벤트 공지</h1>
<img src="images/doit.jpg">
<p><a href="doit-main.html"
onclick="loadURL(this.href);return false">자세히 보기</a></p>
</div>
<script>
function loadURL(url){
window.opener.location = url;
window.close();
}
</script>
