Xiaoqiang의 HTML5 모바일 개발 로드(32) - JavaScript 검토 7
- 黄舟원래의
- 2017-02-04 14:35:311190검색
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('day05_03','wi_1',
'width=400,height=400');
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($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
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('你喜欢钱吗？');
alert(flag);
}
function f4(){
var info = prompt('请输入手机号');
alert('你输入的手机号是：' + 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('hello world<br/>');
}
</script>
</body>
</html>3, Location 객체: encapsulated 관련 정보 브라우저 주소 표시줄
href 속성: 로드할 페이지 지정
reload 방법: 현재 페이지를 다시 로드합니다.
<html>
<!-- location对象 -->
<head></head>
<body>
<input type="button"
value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><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 + ';' +navigator[propName] + '<br/>';
}
document.write(info); //在当前页面输出
</script>
</body>
</html><html>
<!--检测浏览器类型-->
<head>
<script>
function f1(){
if((navigator.userAgent).indexOf('Firefox')>0){
alert("当前浏览器是Firefox");
}else if(navigator.userAgent.indexOf('MSIE')>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 + ' ' +
screen.height);
}
</script>
</head>
<body>
<input type="button"
value="获得screen相关信息" onclick="f2();"/>
</body>
</html>
위는 Xiaoqiang의 HTML5 모바일 개발 로드(32) - JavaScript 리뷰 내용입니다. 7. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!