재밌는 이벤트의 세계, JavaScript
navigator 객체를 통해 웹 브라우저의 정보를 알 수 있어요.
<!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>
let info = "<h1>웹 브라우저 정보 확인</h1>"
info += "<p>브라우저 이름 : " + navigator.appName + "</p>";
info += "<p>플랫폼 정보 : " + navigator.platform + "</p>";
info += "<p>사용자정보(포괄적인 정보) : " + navigator.userAgent + "</p>";
info += "<p>브라우저 버전 : " + navigator.appVersion + "</p>";
document.write(info);
</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>
// 모바일 = true, 아니면 = false를 리턴하는 사용자 정의 함수
function isMobile(){
let tmpUser = navigator.userAgent;
let isMobile = false;
// indexOf 의 값이 -1 tempUser의 값 안에 "Android"가 포함되어 있지 않은 것이다.
if( tmpUser.indexOf("Android" > -1)){
isMobile = true;
}
return isMobile;
}
let isMobileWeb = isMobile();
if( !isMobileWeb ){
document.write("<h1>모바일 웹 브라우저로 접속하셨습니다.</h1>");
}else{
document.write("<h1>pc 웹 브라우저로 접속하셨습니다.</h1>");
}
</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>
<input type="button" value="네이버로 이동하기" onclick="goNaver()">
<script>
function goNaver(){
if(confirm("정말 네이버로 이동하겠습니까?")){
location.href="https://www.naver.com";
}
}
</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>
<!--
onclick="refresh()" : 버튼 클릭 시 refresh() 함수를 실행한다.
-->
<input type="button" value="인증번호 새로받기" onclick="refresh()">
<script>
function refresh(){
// location.reload() : 페이지 새로고침
location.reload();
}
</script>
</body>
</html>
출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif