JavaScript學習筆記（二）
阿新 • • 發佈：2018-09-20
pass 訪問 location inpu title 作用 小數 orm mini 本課程對應的視頻教程：http://edu.51cto.com/course/15019.html
1、BOM模型
BOM:Brower Object Model
1.1、屬性
1.1.1、Screen
根據屏幕的分辨率來決定一個div的相關屬性
<script type="text/javascript"> function init(){ var width = window.screen.width; var height = window.screen.height; //根據id來查找網頁中的元素 var divObject =document.getElementById("container"); divObject.style.width=width+"px"; divObject.style.height=height+"px"; divObject.style.border = "1px solid red"; } </script>
1.1.2、history(歷史信息)
前進：history.forward() == history.go(1)
後退：history.back() ==history.go(-1)
刷新： location.reload()== history.go(0)
參考案例代碼
demo01.html
<a href = "demo02.html">跳轉到demo02頁面</a> <input type="button" value="前進" onclick="javascript:history.go(1)"> <input type="button" value="呵呵" onclick="javascript:location.reload()">
demo02.html
<input onclick="javascript:history.go(-1)" type="button" value = "後退"/>1.1.3、location對象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function init(){ console.log(location.href); console.log(location.host); console.log(location.hostname); console.log(location.port); console.log(location.protocol); } </script> </head> <body onload="init()"> </body> </html>
location.href:獲取地址欄的信息
location.host:主機+端口號
location.reload():刷新
案例：根據地址欄的信息獲取用戶填入信息（get提交不安全）
locaiton.html
<body onload="init()">
<form action = "demo02.html" method="get">
用戶名：<input name="username"/><br/>
年齡：<input name="age"><br/>
<input type="submit" value="提交">
</form>
</body>demo02.html
<script type="text/javascript">
var href = location.href;
var info = href.split("?")[1];
var name = info.split("&")[0].split("=")[1];
alert(name)
</script>1.1.4、Navigator
Navigator：可以獲取用戶的瀏覽器相關的信息
案例：通過Navigator來獲取用戶的瀏覽器信息
<script type="text/javascript">
function init(){
var info = window.navigator.userAgent;
if(info.indexOf(‘Chrome‘)!=-1){
alert(‘用戶使用Chrome瀏覽器‘);
}else if(info.indexOf(‘Firefox‘)!=-1){
alert(‘用戶使用是firefox瀏覽器‘)
}else{
alert(‘使用的其他瀏覽器‘)
}
}
</script>1.2、方法
1.2.1、confirm方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function myconfirm(){
if(confirm(‘確定刪除此條數據嗎‘)){
alert(‘你選擇是刪除‘);
}else{
alert(‘你選擇是取消‘);
}
}
</script>
</head>
<body>
<input type="button" onclick="myconfirm()" value = "刪除"/>
</body>
</html>1.2.2、關閉
close方法在不同瀏覽器，會有兼容性問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function myconfirm(){
if(confirm(‘你確定關閉窗體嗎‘)){
window.close();
}else{
alert(‘你選擇是取消‘);
}
}
</script>
</head>
<body>
<input type="button" onclick="myconfirm()" value = "關閉窗體"/>
</body>
</html>比如火狐就不支持這個方法（可以用將當前面變成一個空白頁）
1.2.3、open方法
open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口。
語法格式
window.open(URL,name,features,replace)| 參數 | 描述 |
|---|---|
| URL | 一個可選的字符串，聲明了要在新窗口中顯示的文檔的 URL。如果省略了這個參數，或者它的值是空字符串，那麽新窗口就不會顯示任何文檔。 |
| name | 一個可選的字符串，該字符串是一個由逗號分隔的特征列表，其中包括數字、字母和下劃線，該字符聲明了新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該參數指定了一個已經存在的窗口，那麽 open() 方法就不再創建一個新窗口，而只是返回對指定窗口的引用。在這種情況下，features 將被忽略。 |
| features | 一個可選的字符串，聲明了新窗口要顯示的標準瀏覽器的特征。如果省略該參數，新窗口將具有所有標準特征。在窗口特征這個表格中，我們對該字符串的格式進行了詳細的說明。 |
| replace | 一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目。支持下面的值： true - URL 替換瀏覽歷史中的當前條目。 false - URL 在瀏覽歷史中創建新的條目。 |
featrures的特性
| channelmode=yes\ | no\ | 1\ | 0 | 是否使用劇院模式顯示窗口。默認為 no。 |
|---|---|---|---|---|
| directories=yes|no|1|0 | 是否添加目錄按鈕。默認為 yes。 | |||
| fullscreen=yes|no|1|0 | 是否使用全屏模式顯示瀏覽器。默認是 no。處於全屏模式的窗口必須同時處於劇院模式。 | |||
| height=pixels | 窗口文檔顯示區的高度。以像素計。 | |||
| left=pixels | 窗口的 x 坐標。以像素計。 | |||
| location=yes|no|1|0 | 是否顯示地址字段。默認是 yes。 | |||
| menubar=yes|no|1|0 | 是否顯示菜單欄。默認是 yes。 | |||
| resizable=yes|no|1|0 | 窗口是否可調節尺寸。默認是 yes。 | |||
| scrollbars=yes|no|1|0 | 是否顯示滾動條。默認是 yes。 | |||
| status=yes|no|1|0 | 是否添加狀態欄。默認是 yes。 | |||
| titlebar=yes|no|1|0 | 是否顯示標題欄。默認是 yes。 | |||
| toolbar=yes|no|1|0 | 是否顯示瀏覽器的工具欄。默認是 yes。 | |||
| top=pixels | 窗口的 y 坐標。 | |||
| width=pixels | 窗口的文檔顯示區的寬度。以像素計。 |
關於以上特性，對於不同的瀏覽器的兼容也不一樣
1.2.4、定時器相關方法
setTimeout(函數名, 毫秒)：表示指定毫秒後再次執行函數，每個定時器都會返回一個整數值，通過這個整數值可以做定時器的關閉 操作
clearTimeout(整數值)
setInterval（函數名，毫秒數）:表示每隔多少毫秒執行某個函數，該函數會被執行多次，同樣這個函數也有一個返回值，通過此返回值可以關閉定時器
clearInterval(整數值)
1.2.5、數字轉換相關的方法
parseInt:將字符串轉換成整數
parseFloat：將字符串轉換成小數
isNaN:不是一個數字返回true
<script type="text/javascript">
/*
var str = "123a1223";
alert(parseInt(str)); //結果為123
alert(parseInt("abc123"));//轉換失敗
var str2 = "123.222a";
alert(parseFloat(str2)); //結果為123.222
*/
if(isNaN(parseInt("abc123"))){
alert("is not a num");
}
</script>1.3、其他對象
1.3.1、event對象（重點）
當事件發生時，瀏覽器自動建立該對象，並包含該事件的類型、鼠標坐標等。
事件對象的屬性：
格式：event.屬性
1.3.2、鏈接對象
網頁中的鏈接均會被自動看作鏈接對象，並依順序，分別表示為document.links[0]，document.links[1]...
定義鏈接對象的格式：字串.link(屬性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function(){
console.log(document.links[0].href="17_calc.html");
}
</script>
</head>
<body>
<a href = "#">鏈接1</a>
<a href = "#">鏈接2</a>
<a href = "#">鏈接3</a>
<a href = "#">鏈接4</a>
</body>
</html>1.3.3、表單對象
文件對象的子對象，Javascript的runtimeengine自動為每一個表單建立一個表單對象。
格式：
document.forms[索引].屬性
document.forms[索引].方法（參數）
document.表單名稱.屬性
document.表單名稱.方法（參數）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function(){
console.log(document.forms[0]);
console.log(document.myForm.username)
}
</script>
</head>
<body>
<form name = "myForm" >
<input name = "username" type="text"/>
</form>
</body>
</html>1.3.4、cookie對象
Cookie 是一些數據, 存儲於你電腦上的文本文件中。當 web服務器向瀏覽器發送 web 頁面時，在連接關閉後，服務端不會記錄用戶的信息。Cookie 的作用就是用於解決 "如何記錄客戶端的用戶信息":當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。
在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。
寫入Cookie
格式：
document.cookie = " 關鍵字 = 值 [ ;expires = 有效日期][;...]"
有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT
每個瀏覽器可存儲300個Cookie數據，4k字節；
客戶有權禁止Cookie數據的寫入。
IE:瀏覽器，它的cookie保存多個文件中
C:\Users\Administrator\AppData\Local\Microsoft\Windows\INetCookieschrome瀏覽器中的cookie的位置,這個cookie是一個單文件
chrome瀏覽器的cookie實際上是一個sqllite文件
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default演示一個創建和獲取cookie案例
創建cookie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//獲取的是當前日期
var expires = new Date();
expires.setTime(expires.getTime()+30*1000);
document.cookie="name=zhangsan;expires="+expires.toUTCString();
</script>
</head>
<body>
</body>
</html>獲取cookie
<script type="text/javascript">
console.log(document.cookie)
if(document.cookie==null||document.cookie.trim()==‘‘) {
location.href = "login.html";
}else{
document.write("歡迎進入到本頁")
}
</script>1.3.5、練習cookie
login.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action = "do_login.html" method="get">
用戶名：<input type="text" name="username"/><br/>
密碼：<input type="password" name="pwd"/><br/>
<input type="submit" value="登錄">
</form>
</body>
</html>do_login.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//http://localhost:63342/javascript/Cookie/do_login.html?username=sa&pwd=ok
var infos = location.href.split("?")[1];
var username = infos.split("&")[0].split("=")[1];
var pwd = infos.split("&")[1].split("=")[1];
if("sa"==username&&"ok"==pwd) {
//登錄成功
var expires = new Date();
//1天
expires.setTime(expires.getTime()+24*60*60*1000);
document.cookie="name="+username+";expires="+expires.toUTCString();
}else{
alert("對不起，你的用戶名和密碼輸入錯誤");
location.href="login.html";
}
</script>
</head>
<body>
</body>
</html>list.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var cookieValue = document.cookie;
if(cookieValue==null||cookieValue==‘‘) {
location.href="login.html";
}else{
var username = cookieValue.split("=")[1];
document.write("歡迎"+username+"進入到學生列表頁面");
}
</script>
</head>
<body>
</body>
</html>1.3.6、問題
js中對於get提交，如果輸入的中文信息，此時在獲取的時候我們需要進行解碼操作
decodeURI(username)同樣，在存儲cookie的時候，如果存入的是中文，必須先進行編碼
encodeURI("張三")在獲取cookie時候，還是需要進行解碼操作
decodeURI(username)JavaScript學習筆記（二）