JavaScript와 친해지길 바래 🙏(9) - Navigator, reload

joyfulwave·2022년 9월 23일

JavaScript와 친해지길 바래

목록 보기

10/11

재밌는 이벤트의 세계, JavaScript

💡 Navigator

navigator 객체를 통해 웹 브라우저의 정보를 알 수 있어요.

⚫ (1)

<!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>

⚫ (2)

<!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>

💡 location 객체

⚫ location.reload()

페이지 새로 고침을 할 수 있어요.

<!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>

⚫ location.href = "url"

페이지 이동를 이동할 수 있어요.

<!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>