Xiaoqiang의 HTML5 모바일 개발 로드(32) - JavaScript 검토 7-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

Xiaoqiang의 HTML5 모바일 개발 로드(32) - JavaScript 검토 7

黄舟

Feb 04, 2017 pm 02:35 PM

BOM 모델 브라우저 객체 모델(browser object model), 브라우저 자체는 브라우저에 내장된 일부 객체를 통해 동작할 수 있습니다.
DOM은 페이지를 조작하는 데 사용되고, BOM은 브라우저 자체를 조작하는 데 사용됩니다.

BOM은 표준화되어 있지 않지만 대부분의 브라우저는 다음 개체를 지원합니다.

1. Window 개체: 전체 창을 나타냅니다.

(1) open 메서드: (이름 , 특성, 높이 및 너비, 도구 모음, 스크롤 막대)

(2) setTimeout 메서드: setTimeout(fn, milliseconds); //첫 번째 매개 변수는 함수 이름이어야 합니다(괄호는 허용되지 않음) )

<html>  
    <head>  
        <script>  
            function f1(){  
            //win指向了新打开的窗口   
                    var win = window.open(&#39;day05_03&#39;,&#39;wi_1&#39;,  
                    &#39;width=400,height=400&#39;);  
                    setTimeout(function(){  
                    win.close();  
                }, 5000);         
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="f1();"/>  
    </body>  
</html>

로그인 후 복사

(3) setInterval 메소드

var taskId = setInterval(fn, milliseconds); //지정된 시간 간격 후에 함수 실행

(4)clearInterval 메소드

clearInterval(taskId); //setInterval 작업 취소

<html>  
    <head>  
        <style>  
            #d1{  
                width:80px;  
                height:80px;  
                background-color:blue;  
                position:relative;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function f2(){  
                var v1 = parseInt($(&#39;d1&#39;).style.left);  
                $(&#39;d1&#39;).style.left = v1 + 50 + &#39;px&#39;;  
            }  
            function f1(){  
                var taskId = setInterval(f2, 500);  
                setTimeout(function(){  
                    clearInterval(taskId);  
                },5000)  
            }  
        </script>  
    </head>  
    <body>  
        <div id="d1" style="left:10px;"></div>  
        <input type="button" value="click me"  
        onclick="f1();"/>  
    </body>  
</html>

로그인 후 복사

(5) Alert() 메소드 경고 대화상자 팝업

(6) verify() 메서드

var flag = verify(string); //문자열은 프롬프트 정보, 플래그는 true 또는 false를 반환합니다

(7) 프롬프트 메소드

var info = 프롬프트(string)

<html>  
    <head>  
        <script>  
            function f3(){  
                var flag = confirm(&#39;你喜欢钱吗？&#39;);  
                alert(flag);  
            }  
            function f4(){  
                var info = prompt(&#39;请输入手机号&#39;);  
                alert(&#39;你输入的手机号是：&#39; + info);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me"  
        onclick="f4();"/>  
    </body>  
</html>

로그인 후 복사

2. Document 객체: 전체 문서의 루트를 나타냅니다.

getElementById (id);
createElement(tagName);

write(string); 지정된 위치에 관련 정보를 출력

<html>  
    <!-- document对象 -->  
    <head></head>  
    <body style="font-size:30px;">  
        开始输出helloword<br/>  
        <script>  
            for(i=0; i<100; i++){  
                document.write(&#39;hello world<br/>&#39;);  
            }  
        </script>  
    </body>  
</html>

로그인 후 복사

3, Location 객체: encapsulated 관련 정보 브라우저 주소 표시줄
href 속성: 로드할 페이지 지정
reload 방법: 현재 페이지를 다시 로드합니다.

<html>  
    <!-- location对象 -->  
    <head></head>  
    <body>  
        <input type="button"   
        value="跳转到另外一个页面" onclick="location.href = &#39;day05_04.html&#39;;"/><br/>  
        <input type="button"  
        value="刷新当前页面" onclick="location.reload();"/>  
    </body>  
</html>

로그인 후 복사

새로 고침과 동일합니다. 4, History 개체: 브라우저가 방문한 내용을 캡슐화합니다. 관련 정보 지난 페이지 정보
back(): 뒤로 가기
forward(): 앞으로 가기
go(매개변수): 양수로 앞으로, 음수로 뒤로

<html>  
    <!-- history对象    -->  
    <head></head>  
    <body>  
        <input type="button"  
        value="点这里后退" onclick="history.back();"/>  
        <input type="button"  
        value="点这里前进" onclick="history.forward();"/>  
        <input type="button"  
        value="点这儿后退"  onclick="history.go(-1);"/>  
    </body>  
</html>

로그인 후 복사

5 , Navigator 객체 : 브라우저 관련 정보를 캡슐화합니다(예: 유형, 버전)

<html>  
    <!--navigator对象-->  
    <head></head>  
    <body>  
        现在访问的浏览器的相关信息如下：<br/>  
        <script>  
        var info;  
        //for in循环：主要用于遍历对象   
            for(propName in navigator){  //propName是任意变量  
        // 将navigator对象的属性名保存到propName变量里  
                info += propName + &#39;;&#39; +navigator[propName] + &#39;<br/>&#39;;  
            }  
            document.write(info);  //在当前页面输出  
        </script>  
    </body>  
</html>

로그인 후 복사

<html>  
    <!--检测浏览器类型-->  
    <head>  
        <script>  
            function f1(){  
                if((navigator.userAgent).indexOf(&#39;Firefox&#39;)>0){  
                    alert("当前浏览器是Firefox");  
                }else if(navigator.userAgent.indexOf(&#39;MSIE&#39;)>0){  
                    alert("当前浏览器是IE");  
                }else{  
                    alert("其他浏览器");  
                }  
            }     
        </script>  
    </head>  
    <body>  
        <input type="button"  
        value="获得当前浏览器的类型" onclick="f1();"/>  
    </body>  
</html>

로그인 후 복사

6, Screen 객체: 브라우저가 위치한 화면의 관련 정보

<html>  
    <head>  
        <script>  
            function f2(){  
                alert(screen.width + &#39; &#39; +  
                screen.height);  
            }     
        </script>  
    </head>  
    <body>  
        <input type="button"  
        value="获得screen相关信息" onclick="f2();"/>  
    </body>  
</html>

로그인 후 복사

위는 Xiaoqiang의 HTML5 모바일 개발 로드(32) - JavaScript 리뷰 내용입니다. 7. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.