{
document.querySelector(".btn1-1").addEventListener("click", function(){
alert("알림창을 표시합니다.");
});
}
여기는 텍스트 영역입니다.
{
const btn = document.querySelector(".btn2-1");
btn.addEventListener("click", () => {
const text = confirm("오늘 공부할 준비가 되었나요?"); //true, false를 반환(boolean)
document.querySelector(".text2").innerHTML = text;
//만약에 true가 나오면 "오늘 공부할 준비가 되었습니다."
//만약에 false가 나오면 "오늘 몸이 안 좋아요."
if(text){
document.querySelector(".text2").innerHTML = "오늘 공부할 준비가 되었습니다."
} else {
document.querySelector(".text2").innerHTML = "오늘 몸이 안 좋아요"
};
});
}
여기는 텍스트 영역입니다.
{
document.querySelector(".btn3-1").addEventListener("click", () => {
const text = prompt("오늘 공부할 준비가 되었나요?");
document.querySelector(".text3").innerHTML = text;
});
}
{
const btn1 = document.querySelector(".btn4-1");
const btn2 = document.querySelector(".btn4-2");
const btn3 = document.querySelector(".btn4-3");
const btn4 = document.querySelector(".btn4-4");
const btn5 = document.querySelector(".btn4-5");
const btn6 = document.querySelector(".btn4-6");
const btn7 = document.querySelector(".btn4-7");
const btn8 = document.querySelector(".btn4-8");
const innerW = window.innerWidth;
const innerH = window.innerHeight;
const outerW = window.outerWidth;
const outerH = window.outerHeight;
const screenT = window.screenTop;
const screenL = window.screenLeft;
const screenY = window.screenY;
const screenX = window.screenX;
btn1.addEventListener("click", () => {
document.querySelector(".text4-1").innerHTML = "당신이 보고 있는 브라우저 화면 가로 값(innerWidth)은 " + innerW + "px 입니다.";
});
btn2.addEventListener("click", () => {
document.querySelector(".text4-2").innerHTML ="당신이 보고 있는 브라우저 화면 세로 값(innerHeight)은 " + innerH + "px 입니다.";
});
btn3.addEventListener("click", () => {
document.querySelector(".text4-3").innerHTML = "당신이 보고 있는 브라우저 전체의 가로 값(outerWidth)은 " + outerW + "px 입니다.";
});
btn4.addEventListener("click", () => {
document.querySelector(".text4-4").innerHTML = "당신이 보고 있는 브라우저 전체의 세로 값(outerHeight)은 " + outerH + "px 입니다.";
});
btn5.addEventListener("click", () => {
document.querySelector(".text4-5").innerHTML = "당신이 보고 있는 브라우저 윗쪽의 위치 값(screenTop)은 " + screenT + "px 입니다.";
});
btn6.addEventListener("click", () => {
document.querySelector(".text4-6").innerHTML = "당신이 보고 있는 브라우저 왼쪽의 위치 값(screenLeft)은 " + screenL + "px 입니다.";
});
btn7.addEventListener("click", () => {
document.querySelector(".text4-7").innerHTML = "당신이 보고 있는 브라우저 윗쪽의 위치 값(screenY)은 " + screenY + "px 입니다.";
});
btn8.addEventListener("click", () => {
document.querySelector(".text4-8").innerHTML = "당신이 보고 있는 브라우저 왼쪽의 위치 값(screenX)은 " + screenX + "px 입니다.";
});
//브라우저 화면의 크기가 바뀔때?
window.addEventListener("resize", () => {
const innerW = window.innerWidth;
const innerH = window.innerHeight;
const outerW = window.outerWidth;
const outerH = window.outerHeight;
const screenT = window.screenTop;
const screenL = window.screenLeft;
const screenY = window.screenY;
const screenX = window.screenX;
document.querySelector(".text4-1").innerHTML = "당신이 보고 있는 브라우저 화면 가로 값(innerWidth)은 " + innerW + "px 입니다.";
document.querySelector(".text4-2").innerHTML ="당신이 보고 있는 브라우저 화면 세로 값(innerHeight)은 " + innerH + "px 입니다.";
document.querySelector(".text4-3").innerHTML = "당신이 보고 있는 브라우저 전체의 가로 값(outerWidth)은 " + outerW + "px 입니다.";
document.querySelector(".text4-4").innerHTML = "당신이 보고 있는 브라우저 전체의 세로 값(outerHeight)은 " + outerH + "px 입니다.";
document.querySelector(".text4-5").innerHTML = "당신이 보고 있는 브라우저 윗쪽의 위치 값(screenTop)은 " + screenT + "px 입니다.";
document.querySelector(".text4-6").innerHTML = "당신이 보고 있는 브라우저 왼쪽의 위치 값(screenLeft)은 " + screenL + "px 입니다.";
document.querySelector(".text4-7").innerHTML = "당신이 보고 있는 브라우저 윗쪽의 위치 값(screenY)은 " + screenY + "px 입니다.";
document.querySelector(".text4-8").innerHTML = "당신이 보고 있는 브라우저 왼쪽의 위치 값(screenX)은 " + screenX + "px 입니다.";
});
}
{
const btn51 = document.querySelector(".btn5-1");
const btn52 = document.querySelector(".btn5-2");
const btn53 = document.querySelector(".btn5-3");
const btn54 = document.querySelector(".btn5-4");
const btn55 = document.querySelector(".btn5-5");
const btn56 = document.querySelector(".btn5-6");
let screenWidth = screen.width;
let screenHeight = screen.height;
let screenAvailWidth = screen.availWidth;
let screenAvailHeight = screen.availHeight;
let colorDepth = screen.colorDepth;
let pixelDepth = screen.pixelDepth;
// btn51.addEventListener("click", function(){
// document.querySelector(".text5-1").innerHTML = screenWidth;
// })
// btn52.addEventListener("click", function(){
// document.querySelector(".text5-2").innerHTML = screenHeight;
// })
// btn53.addEventListener("click", function(){
// document.querySelector(".text5-3").innerHTML = screenAvailWidth;
// })
// btn54.addEventListener("click", function(){
// document.querySelector(".text5-4").innerHTML = screenAvailHeight;
// })
// btn55.addEventListener("click", function(){
// document.querySelector(".text5-5").innerHTML = colorDepth;
// })
// btn56.addEventListener("click", function(){
// document.querySelector(".text5-6").innerHTML = pixelDepth;
// })
const name = [screenWidth, screenHeight, screenAvailWidth, screenAvailHeight, colorDepth, pixelDepth];
// for(let i=1; i<=name.length; i++){
// document.querySelector(".btn5-"+i).addEventListener("click", () => {
// document.querySelector(".text5-"+i).innerHTML = name[i-1];
// });
// }
// for(let i=1; i<=6; i++){
// document.querySelector(`.btn5-${i}`).addEventListener("click", () => {
// document.querySelector(`.text5-${i}`).innerHTML = name[i-1]
// })
// }
name.forEach((element, index) => {
document.querySelector(`.btn5-${index+1}`).addEventListener("click", () => {
document.querySelector(`.text5-${index+1}`).innerHTML = name[index];
})
});
}
{
const btn61 = document.querySelector(".btn6-1");
const btn62 = document.querySelector(".btn6-2");
const btn63 = document.querySelector(".btn6-3");
const btn64 = document.querySelector(".btn6-4");
const btn65 = document.querySelector(".btn6-5");
const btn66 = document.querySelector(".btn6-6");
const btn67 = document.querySelector(".btn6-7");
const btn68 = document.querySelector(".btn6-8");
const btn69 = document.querySelector(".btn6-9");
var nowAppCodeName = navigator.appCodeName;
var nowAppName = navigator.appName;
var nowAppVersion = navigator.appVersion;
var nowCookieEnabled = navigator.cookieEnabled;
var nowLanguage = navigator.language;
var nowOnLine = navigator.onLine;
var nowPlatform = navigator.platform;
var nowProduct = navigator.product;
var nowUserAgent = navigator.userAgent;
// btn61.addEventListener("click", () => {
// document.querySelector(".text6-1").innerHTML = nowAppCodeName;
// })
// btn62.addEventListener("click", () => {
// document.querySelector(".text6-2").innerHTML = nowAppName;
// })
// btn63.addEventListener("click", () => {
// document.querySelector(".text6-3").innerHTML = nowAppVersion;
// })
// btn64.addEventListener("click", () => {
// document.querySelector(".text6-4").innerHTML = nowCookieEnabled;
// })
// btn65.addEventListener("click", () => {
// document.querySelector(".text6-5").innerHTML = nowLanguage;
// })
// btn66.addEventListener("click", () => {
// document.querySelector(".text6-6").innerHTML = nowOnLine;
// })
// btn67.addEventListener("click", () => {
// document.querySelector(".text6-7").innerHTML = nowPlatform;
// })
// btn68.addEventListener("click", () => {
// document.querySelector(".text6-8").innerHTML = nowProduct;
// })
// btn69.addEventListener("click", () => {
// document.querySelector(".text6-9").innerHTML = nowUserAgent;
// })
const name1 = [nowAppCodeName, nowAppName, nowAppVersion, nowCookieEnabled, nowLanguage, nowOnLine, nowPlatform, nowProduct, nowUserAgent];
// for(let i=1; i<=9; i++){
// document.querySelector(".btn6-"+i).addEventListener("click", () => {
// document.querySelector(".text6-"+i).innerHTML = name1[i-1];
// })
// }
name1.forEach((el, index) => {
document.querySelector(".btn6-"+(index+1)).addEventListener("click", () => {
document.querySelector(".text6-"+(index+1)).innerHTML = name1[index];
})
})
}