240205 자바스크립트

KDT/JavaScript

240205 자바스크립트

001cloudid 2024. 2. 5. 12:52

728x90

객체(object)

프로그램에서 인식할 수 있는 모든 대상, 데이터를 저장하고 처리하는 기본 단위, 자바스크립트에서 필요한 시스템
1) 내장 객체
JS 엔진이 구동되는 시점 바로 제공, 객체를 생성시켜서 사용
자바스크립트 엔진에 내장되어 있는 객체들로 문자, 날짜, 배열, 수학 객체 등이 있음
형식) new 객체();
ex) let 사용할객체명 = new 객체();
작성된 인스턴스 사용 : 인스턴스명 뒤에 마침표를 붙이고 객체의 프로퍼티나 메소드 이름을 작성

2) 브라우저 객체
브라우저에 내장된 객체로 웹 브라우저 전체를 관리하는 시스템

3) 문서 모델 객체
브라우저 객체에 렌더링되어 보이는 웹 문서를 관리하는 시스템

4) 브라우저 객체의 하위 객체
웹 문서의 모든 요소를 해석하고 분석하여 조작할 수 있도록 하는 시스템

5) 사용자 정의 객체

1) 내장 객체

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Date 객체</title>
</head>
<body>
<!-- Date 객체의 메소드 -> 인터넷에서 찾아보고 사용 -->
<script type="text/javascript">
let now = new Date();
document.write("현재 시간 " + now+"<br>");
document.write("toLocalString 메소드 : " + now.toLocaleString() + "<br>");

<!--년/월/일만 따로 뽑아오기-->
document.write("연도만 가져오기 : " + now.getFullYear() + "년 <br>");
document.write("월만 가져오기 : " + (now.getMonth()+1) + "월 <br>"); //0월부터 시작
document.write("일만 가져오기 : " + now.getDate()+ "일 <br>");
document.write("요일만 가져오기 : " + now.getDay()+ "요일 <br>"); //0:일요일, 1:월요일,..~ 6:토요일
document.write("<hr>");

let now1 = Date.now();
document.write("현재 시간 " + now1);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Date 객체 테스트 - 날짜 계산 프로그램</title>
<style type="text/css">
#containner{
	margin: 50px auto;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 2px double #222;
	background-color: #d8f0fc;
	text-align: center;
}
h1{
	margin-top: 80px;
}
.accent{
	font-size:1.8em;
	font-weight: bold;
	color:red;
}

</style>
</head>
<body>
<div id="containner">
<h1>책 읽기</h1>
<p><span class="accent" id="result">
</span>일 연속으로<br> 책일기를 달성했습니다.<br></p>
<p>축하합니다.</p>
</div>
<script type="text/javascript">
let now = new Date("2024-02-05"); //오늘 날짜를 객체로 지정
let firstDay = new Date("2023-10-25"); //시작 날짜를 객체로 지정

let toNow = now.getTime(); //오늘까지 지난 시간(/ms)
let toFirst = firstDay.getTime(); //첫날까지 지난 시간(/ms)
let passedTime = toNow - toFirst; //첫날부터 오늘까지 지난 시간(/ms)
document.write(passedTime);

passedTime = Math.round(passedTime/(1000*60*60*24)); //밀리초를 일 수로 계산하고 반올림(밀리초*초*분*시)

document.querySelector('#result').innerText = passedTime;
</script>
</body>
</html>

<script type="text/javascript">
let today = new Date();
document.write(`오늘은 ${today.getFullYear()}년 ${today.getMonth()+1}월 
				${today.getDate()}일 `);

switch (today.getDay()) {
case 0: document.write("일요일");
break;
case 1: document.write("월요일");
break;
case 2: document.write("화요일");
break;
case 3: document.write("수요일");
break;
case 4: document.write("목요일");
break;
case 5: document.write("금요일");
break;
case 6: document.write("토요일");
break;
}

</script>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열(Array) 객체</title>
</head>
<body>
<!-- 형식) new Array(); 
형식) let 배열명 = new Array(배열개수);
ex)
let arr = new Array();
let arr = ["1","2","3","4"];
let arr = new Array(4);
let arr = new Array("1","2","3","4");-->
<script type="text/javascript">
let numbers = ["one","two","three","four"];
for(let i = 0; i<numbers.length; i++){
	document.write(`numbers${[i]} = ${numbers[i]}<br>`);
}
document.write("<hr>");
let numbers1 = Array("one","two","three","four");
// for(let i = 0; i<numbers1.length; i++){
// 	document.write(`numbers${[i]} = ${numbers[i]}<br>`);
// }
//향상된 for문 : in구문으로 사용
for(let j in numbers1){
	document.write(`numbers${[j]} = ${numbers[j]}<br>`);
}

document.write("<hr>");
let numbers2 = new Array("one","two","three","four");
for(let i = 0; i<numbers2.length; i++){
	document.write(`numbers${[i]} = ${numbers[i]}<br>`);
}
document.write("<hr>");
//요소값 수정
numbers2[0] = "하나";
//향상된 for문
for(let i = 0; i<numbers2.length; i++){
	document.write(`numbers${[i]} = ${numbers[i]}<br>`);
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열(Array) 합치기</title>
</head>
<body>
<h1>배열 합치기(배열 연결)</h1>
배열명.concat(합칠(연결할) 배열명) 메소드
<hr>
<script type="text/javascript">
let nums = [1,2,3];
let chars = ["a","b","c","d"];

document.write("nums : " + nums + "<br>");
document.write("chars : " + chars +"<br><hr>");

let numsChars = nums.concat(chars);
let charsNums = chars.concat(nums);
document.write("nums + chars = " + numsChars + "<br>");
document.write("chars + nums = " + charsNums + "<br><hr>");
</script>

<h1>배열 내 요소끼리 합치기</h1>
join('구분자지정') 배열 요소 사이에 지정한 구분자를 넣어서 문자로 만듦<br>
배열내의 각 요소들을 연결해서 하나의 문자열로 만듦<hr>
<script type="text/javascript">
let string1 = nums.join();
document.write(`string1 구분자 없이 ${string1} 구분자가 없을 때 ,로 나타남<br>`);

let string2 = nums.join('/');
document.write(`string2 구분자 /로 했을 경우 ${string2}<br>`);

let string3 = nums.join('');
document.write(`string3 구분자 공백으로 했을 경우 ${string3}<br><hr>`);
</script>

<h1>새로운 요소 추가 : length도 같이 반환함</h1>
배열 맨 끝에 요소 추가 : 배열명.push(요소값)<br>
배열 처음에 요소 추가 : 배열명.unshift(요소값)<hr>
<script type="text/javascript">
let nums1 = [1,2,3];
document.write("nums1 요소 : " +nums1+"<br>");
let ret1 = nums1.push(4,5); 
document.write(`nums1 끝에 요소 추가 ${nums1}<br>`);

let ret2 = nums1.unshift(0);
document.write(`nums1 처음에에 요소 추가 ${nums1}<br>`);

document.write(`ret1 : ${ret1}, ret2 : ${ret2}, 추가된 nums1 : ${nums1}<br><hr>`);
</script>

<h1>요소값 제거</h1>
배열 맨 끝에 요소 제거 : 배열명.pop(요소값)<br>
배열 처음에 요소 제거 : 배열명.shift(요소값)<hr>
<script type="text/javascript">
let chars1 = ["a","b","c","d"];
let popped1 = chars1.pop();
document.write(`배열 맨 끝 요소 ${popped1} 제거, chars1 : ${chars1}<br>`);

let popped2 = chars1.shift();
document.write(`배열 처음 요소 ${popped2} 제거, chars1 : ${chars1}<br><hr>`);
</script>

<h1>원하는 위치에 요소를 추가, 삭제 splice()</h1>
원본에 변경이 일어남<br>
한 번에 요소를 2개 이상 추가하거나 제거(새로운 배열로 결과값을 반환)<br>
<script type="text/javascript">
//인수가 1개일 경우 : 지정한 인덱스 위치부터 배열의 끝 요소까지 모두 삭제 -> 새로운 배열로 만들어짐
let numbers2 = [1,2,3,4,5];
let newNumbers = numbers2.splice(2);
document.write("반환된 배열 newNumbers : " , newNumbers + "<br>"); //인덱스 2번부터 끝까지 가져와서 새로운 배열로 만듦
document.write("변경된 배열 numbers2 : " , numbers2 + "<br><hr>");

//인수가 2개일 경우 : 지정한 인덱스 위치부터 지정한 개수만큼 요소 삭제 -> 새로운 배열로 만들어짐
let study = ["html","css","javascript","web"];
let newStudy = study.splice(2, 1); //2번째 요소부터 1개 요소 삭제 : 배열명.splice(인덱스위치, 개수)
document.write(`반환된 배열 newStudy : ${newStudy}<br>`);
document.write(`변경된 배열 study : ${study}<br><hr>`);

//인수가 3개일 경우 :지정한 인덱스 위치부터 지정한 개수만큼 요소를 삭제 후 새로 추가할 요소를 지정 -> 새로운 배열로 만들어짐
let newStudy1 = study.splice(2, 1,"java"); //2번째 요소부터 1개 요소 삭제 후 "java"요소를 추가
document.write(`반환된 배열 newStudy1 : ${newStudy1}<br>`);
document.write(`변경된 배열 study : ${study}<br><hr>`);
</script>

<h1>기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice()</h1>
원본 배열에 변경이 없음<hr>
<script type="text/javascript">
//인수가 1개인 경우 : 지정한 인덱스 위치부터 지정한 개수만큼 요소를 꺼냄 -> 새로운 배열로 만들어짐
let colors = ["red","green","blue","white","black"];
let colors1 = colors.slice(2); //인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
document.write(`반환된 배열 colors1 : ${colors1}<br>`);
document.write(`변경된 배열 colors : ${colors}<br><hr>`); //원본 배열에 변경이 없음

//인수가 2개인 경우 : 지정한 개수만큼 요소 삭제가 아니고(구간을 의미) 위치 직전까지 반환
let colors2 = colors.slice(2,4); //2번째 위치로부터 4번째 위치 '직전'까지 반환함. 즉 인덱스 2에서 3까지.
let colors3 = colors.slice(2,5); //2번째 위치로부터 5번째 위치 '직전'까지 반환함. 즉 인덱스 2에서 4까지.
document.write(`반환된 배열 colors2 : ${colors2}<br>`);
document.write(`반환된 배열 colors3 : ${colors3}<br>`);
document.write(`변경된 배열 colors : ${colors}<br><hr>`); //원본 배열에 변경이 없음
</script>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Math 객체</title>
</head>
<body>
<h1>Math 객체</h1>
new 키워드로 객체를 따로 생성하지 않음<br>
형식) Math.속성명 또는 Math.메소드명<hr>
<script type="text/javascript">
document.write(Math.random()+"<br>");
document.write((Math.random()*45)+"<br>"); //0~44사이의 값을 반환 
document.write((Math.random()*45+1)+"<br><hr>"); //1~45사이의 값을 반환 

//범위를 지정해서 임의의 숫자 발생 : Math.random()*n => n(임의(난수)의 수 범위를 n까지로 제한), 0~n까지 범위의 숫자가 발생함
//만약 0부터 시작하지 않고 1부터 시작하려면 Math.random()*n+1

//로또 번호1
for(let i = 1; i<= 6; i++){	
	document.write(Math.round((Math.random()*45),0)+"<br>");
}
document.write("<hr>");
//로또 번호2
for(let i = 1; i<= 6; i++){	
	document.write(Math.floor((Math.random()*45))+"<br>");
}
</script>
<hr>
<h1>당첨자 발표</h1>
<script type="text/javascript">
let seed = prompt("전체 응모자 수 : "); //응모자 수 입력 받기
let picked = Math.floor((Math.random()*seed+1)); //무작위 수 뽑기

document.write("전체 응모자 수 : " + seed +"명<br>");
document.write("당첨자 : " + picked + "번");

</script>
</body>
</html>

2) 브라우저 객체(BOM)

특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라저와 관련된 여러가지 효과를 만들 수 있는 객체

웹 브라우저의 상태를 제어하며 자바스크립트의 모든 객체는 window 객체 안에 포함

객체 생성하지 없이 바로 사용 가능

형식) window.프로퍼티(멤버변수), window.메소드()

window

ㄴdocument - area, image, anchor, form*, ...

ㄴnavigator

ㄴhistory

ㄴlocation

ㄴscreen

form* - textarea, button, text, checkbox, fileUpload, radio,....

공지 사항 팝업창

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>공지사항</title>
</head>
<body>

<h3>공지 사항</h3>

<ol>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
<li>항목5</li>
</ol>
<button type="button">닫기</button>



</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 창</title>
</head>
<body>
<p>문서를 열면 팝업 창이 표시</p>
<script type="text/javascript">
function win(){
	window.open("open_window.html","","width=400, height=500");
}


</script>

<button type="button" onclick="win()">열기</button>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>공지사항</title>
</head>
<body>

<h3>공지 사항</h3>

<ol>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
<li>항목5</li>
</ol>

<button type="button" onclick="window.close()">닫기</button>

</body>
</html>

728x90

'KDT > JavaScript' 카테고리의 다른 글

240208 자바스크립트 (0)	2024.02.08
240207 자바스크립트 (0)	2024.02.07
240201 자바스크립트 (0)	2024.02.01
240131 자바스크립트 (0)	2024.01.31
240129 자바스크립트 (0)	2024.01.29

현재글240205 자바스크립트

001cloudid