Front-End
JavaScript-Object
NellKiM
2024. 11. 10. 20:48
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
rel="stylesheet">
<title>Bootstrap Example</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- End Example Code -->
<script>
var f = function() {};
//이벤트이름: load 이벤트 속성 : 이벤트 와 onload 이벤트 핸들러 : 동작 , function(){}
//익명함수 : 이름이 없는 함수
//선언적함수 : 이름이 있는 함수 (일반적)
window.onload = f_load;
function f_load(){
var obj = document.querySelector("#btn-review");
var obj2= document.querySelector("#obj2");
var obj3 = document.querySelector("#btn-array");
var obj4 = document.querySelector("#btn-array2");
var obj5 = document.querySelector("#btn-array3");
var obj6 = document.querySelector("#btn-array4");
var obj7 = document.querySelector("#btnmath");
var obj8 = document.querySelector("#btn-object");
//BOM
var bom1 = document.querySelector("#btn-window");
var bom2 = document.querySelector("#btn-document");
var bom3 = document.querySelector("#btn-navigator");
var bom4 = document.querySelector("#btn-history");
var bom5 = document.querySelector("#btn-location");
var bom6 = document.querySelector("#btn-screen");
//BOM TEST LOCATION
var bom7 = document.querySelector("#btn-location-test");
var bom8 = document.querySelector("#btn-location-reload");
//callback 함수 (함수를 다른함수에 전달, 호출은 받은쪽에서 한다)
obj.onclick = f1;
obj2.onclick = f2;
obj3.onclick = f3;
obj4.onclick = f4;
obj5.onclick = f5;
obj6.onclick = f6;
obj7.onclick = f7;
obj8.onclick = f8;
bom1.onclick = bom_f1;
bom2.onclick = bom_f2;
bom3.onclick = bom_f3;
bom4.onclick = bom_f4;
bom5.onclick = bom_f5;
bom6.onclick = bom_f6;
bom7.onclick = bom_f7;
bom8.onclick = bom_f8;
};
function bom_f7(){
//다른 페이지로 이동하기 <a href=""></a>
var pathname = location.pathname;
var getUrl = location.origin+"/" + pathname.split("/")[1];
var url = getUrl+"/emp/empAll.jsp";
location.href = url;
}
function bom_f6(){
//screen의 모든속성과 그값을 확인
var output = "<ul>";
for(let prop in screen)
{
output += `<li>${prop}속성....${screen[prop]}</li>`;
}
document.querySelector("#here").innerHTML = output + "<ul>";
}
function bom_f5(){
//location의 모든속성과 그값을 확인
var output = "<ul>";
for(let prop in location)
{
output += `<li>${prop}속성....${location[prop]}</li>`;
}
document.querySelector("#here").innerHTML = output + "<ul>";
}
function bom_f4(){
//history의 모든속성과 그값을 확인
var output = "<ul>";
for(let prop in history)
{
output += `<li>${prop}속성....${history[prop]}</li>`;
}
document.querySelector("#here").innerHTML = output + "<ul>";
}
function bom_f3(){
//navigator의 모든속성과 그값을 확인
var output = "<ul>";
for(let prop in navigator)
{
output += `<li>${prop}속성....${navigator[prop]}</li>`;
}
document.querySelector("#here").innerHTML = output + "<ul>";
//이 사이트를 접속한 Browser 가 스마트폰인지? DESKTOP 인지
var str = navigator.userAgent;
if(str.includes("iPhone") || str.includes("Android")){
document.querySelector("#here").innerHTML +="<h1>스마트폰 접속함 </h1>"
screen.lockOrientation("landscape");
}else{
document.querySelector("#here").innerHTML +="<h1>desktop 접속함 </h1>"
}
console.log(navigator.userAgent);
}
function bom_f2(){
//document의 모든속성과 그값을 확인
var output = "<ul>";
for(let prop in document)
{
output += `<li>${prop}속성....${window[prop]}</li>`;
}
document.querySelector("#here").innerHTML = output + "<ul>";
}
function bom_f1(){
//window의 모든속성과 그값을 확인
var output = "<ul>";
for(let prop in window)
{
output += `<li>${prop}속성....${window[prop]}</li>`;
}
document.querySelector("#here").innerHTML = output + "<ul>";
}
function f8(){
//사용자 정의 Object : 속성 , 행위의 묶음
var obj = {name: "홍길동", age:20 , study:function(){
document.querySelector("#here").innerHTML = `열심히 공부합니다.`;
}};
console.log(obj.name);
console.log(obj["name"]);
var colName = "name";
console.log(obj[colName]);
console.log(obj.colName); //불가
obj.study();
for(let prop in obj){
console.log (prop,obj[prop]);
}
}
function f7(){
var a = Math.floor(4.9);//4
var b = Math.ceil(4.1);//5
var c = Math.max(a,b);
var d = Math.random();//0 <= < 1
var e = Math.floor(Math.random()*45)+1; // 1<= <=45
var lucky = [];
while (lucky.length<6){
let su = Math.floor(Math.random()*45)+1;
if(lucky.includes(su)) continue;
lucky.push(su);
}
//번호 6개가 중복되지 않도록 만들기
document.querySelector("#here").innerHTML = `
<p>a: ${a}</p>
<p>b: ${b}</p>
<p>c: ${c}</p>
<p>d: ${d}</p>
<p>lucky: ${lucky.join("★")}</p>
`;
}
function f6(){
var arr = ["봄","여름","가을","겨울"];
var arr2 = arr.slice(3); //["겨울"]
var arr3 = arr.slice(2);//["가을","겨울"]
var arr4 = arr2.concat(arr3);
document.querySelector("#here").innerHTML = `
`;
}
function f5(){
var arr = [1,2,3,4];
var arr2 =arr.splice(2);//[1,2] 가 남음
var arr3 =arr.splice(1,1,"JavaScript");//시작 , 갯수 , 삽입할 내용
document.querySelector("#here").innerHTML =`
<p>삭제된 배열: arr2</p>
<p>삭제된 배열: arr3 </p>
<p>원래배열 : ${arr} </p>
`
}
function f4(){
var arr=[1,2,3,4] ; Array()
arr.push(10,20);
arr.push(call());
arr.unshift("봄","여름","가을","겨울");
console.log(arr);
var before = arr.shift();//앞에서 꺼냄
var after = arr.pop();
document.querySelector("#here").innerHTML=`
<p>배열: ${arr}</p>
<p>before: ${before}</p>
<p>after: ${after}</p>
`;
}
function call(){
return ["a","b"];
}
function f3(){
var arr1 = [1,2,3];
var arr2 = ["봄","여름","가을","겨울"];
var arr3 = arr1.concat(arr2);
var arrStr = arr2.join("**");
document.querySelector("#here").innerHTML = `<p>배열1: ${arr1}</p>
<p>배열2: ${arr2}</p>
<p>배열3: ${arr3}</p>
<p>요소 문자열 만들기 :${arrStr}</p>
`;
}
function f2(){
console.log(this.innerText);
//객체는 속성(특징)과 행위(함수,기능)를 갖는다.
//1.사용자정의 객체
//2.내장객체(Date....)
var d = new Date();
var dt_string = d.toISOString();
var arr = dt_string.split("T");
d.toLocaleDateString();
document.querySelector("#here").innerHTML =`<p>${d}</p>
<p>${d.toLocaleDateString()}</p>
<p>${d.toISOString()}</p>
<p>일자 : ${arr[0]}</p>
<p>시간 : ${arr[1]}</p>
`;
//3.DOM(Document Object Model)
//4.BOM(Browser Object Model)
}
function f1(){
console.log(this.innerText);
//내부함수 : 함수 내에서만 접근가능
var result = innerFunc();
console.log("return 값" + result);
function innerFunc(){
console.log("내부함수 : 함수 내에서만 접근가능");
return 100;
}
};
</script>
</head>
<body
class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row bd-example-row-flex-cols">
<!-- Example Code -->
<div class="container text-center">
<div class="row align-items-center">
<div class="col">
<button id="btn-review" class="btn btn-primary">함수 복습</button>
<button class="btn btn-success" id="obj2">Object</button>
</div>
<div class="col">
<button class="btn btn-success" id="btn-array">배열</button>
<button class="btn btn-success btn-array2" id="btn-array2">배열2</button>
<button class="btn btn-success btn-array3" id="btn-array3">배열3</button>
<button class="btn btn-success btn-array3" id="btn-array4">배열4</button>
</div>
<div class="col">
<button class="btn btn-success" id="btnmath">Math객체</button>
<button class="btn btn-success" id="btn-object">Object 객체</button>
</div>
<div class="col">
<h2>BOM(Browser object model)</h2>
<button class="btn btn-success" id="btn-window">window</button>
<button class="btn btn-success" id="btn-document">Document</button>
<button class="btn btn-success" id="btn-navigator">navigator</button>
<button class="btn btn-success" id="btn-history">history</button>
<button class="btn btn-success" id="btn-location">location</button>
<button class="btn btn-success" id="btn-screen">screen</button>
<button class="btn btn-success" onclick="history.back()">뒤로가기</button>
</div>
<div class="col">
<button class="btn btn-success" id="btn-location-test">location 확인</button>
<button class="btn btn-success" id="btn-location-reload">리로드</button>
</div>
</div>
</div>
<div class="row align-items-start" id="here">
<div class="col">여기</div>
</div>
</body>
</html>