728x90
반응형
SMALL
# 팝업창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<img src="bookImage1.jpg" usermap="#intro" alt="신간 책 소개">
<map name="intro" id="intro">
<area shape="rect" coords="230,368,280,390" href="#" alt="창닫기" onclick="window.close();">
<!--창닫기 클릭하면 현재 창 닫음-->
</map>
</p>
</body>
</html>
# 팝업창 오프너 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//window.open("url", "새창이름", "새창옵션")
window.open("winpopup.html", "pop1", "width=300, height=400, left=300, top=50");
</script>
</body>
</html>
# setInterval() 메서드 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> 일정 시간 간격으로 값 증감 시키기</h1>
콘솔 패널을 열어 확인 하세요
<script>
var addNum = 0;
var subNum = 1000;
var auto1 = setInterval(function() {
addNum++;
console.log("addNum: "+addNum);
}, 3000);
var auto2 = setInterval(function() {
subNum--;
console.log("subNum: "+subNum);
}, 3000);
</script>
<button onclick="clearInterval(auto1)">증가정지</button>
<button onclick="clearInterval(auto2)">감소정지</button>
</body>
</html>
# setTimeout() 메서드 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>일정 시간 간격으로 한번 만 값 증감시키기</h1>
콘솔 패널을 열어 확인 하세요.
<script>
var addNum = 0;
var auto = setTimeout(function(){
addNum++;
console.log("addNum : "+addNum);
}, 5000);
</script>
</body>
</html>
# 브라우저 객체 모델을 사용하여 운영체제와 스크린 정보 얻기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var info = navigator.userAgent.toLowerCase();
var os = null;
if(info.indexOf('windows')>=0) {
os = "windows.png";
} else if(info.indexOf('iphone')>=0) {
os = "iphone.png";
} else if(info.indexOf('android')>=0) {
os = "android.png";
}
document.write("<img src=\"images/"+os+"\">", "<br>");
//출력이 <img src="images/windows.png"> 이렇게 되라고
//백슬래쉬\는 다음 "를 출력하기 위해
var scr = screen; // scr에 screen 객체 참조
var sc_w = scr.width;
var sc_h = scr.height;
document.write("모니터 해상도 너비: "+sc_w+"pw", "<br>");
document.write("모니터 해상도 높이: "+sc_h+"pw", "<br>");
</script>
</body>
</html>
# 미션1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 객체 </title>
<script>
var phoneNum = "010-2345-1234";
var result_1 = phoneNum.substring(0, phoneNum.length-4);
document.write(result_1, "**** <br>");
var imgSrc = "images/bnt_out.jpg";
var result_2 = imgSrc.replace("out", "over");
document.write(result_2, "<br>");
</script>
</head>
<body>
</body>
</html>
# 미션2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 객체 </title>
<script>
var menu = ["짜장면", "돈가스", "된장국", "김치찌개", "회덮밥"];
var menuNum = Math.floor(Math.random()*menu.length);
var result = menu[menuNum];
document.write( result );
</script>
</head>
<body>
</body>
</html>
출처 : doit javascript
728x90
반응형
LIST
'JAVASCRIPT' 카테고리의 다른 글
| Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 1 (0) | 2022.05.08 |
|---|---|
| Javascript Function 자바스크립트 함수 (0) | 2022.05.08 |
| Javascript Built in Object - String Object, 자바스크립트 내장객체 - 문자열객체 (0) | 2022.05.07 |
| Javascript Built in Object - Math Object 자바스크립트 내장객체 - 수학객체 (0) | 2022.05.06 |
| Javascript Object, Built in Object - Date Object 자바스크립트 객체, 내장객체(날짜객체) (0) | 2022.05.04 |