JavaScript 教程之JS Navigator+JS PopupAlert+JS Timing+JS Cookies

Penny-聽海發表於2018-05-24
JavaScriptJSCookie

一.JavaScript Window Navigator

 

window.navigator 物件包含有關訪問者瀏覽器的資訊。

 

1.Window Navigator

window.navigator 物件在編寫時可不使用 window 這個字首。

 

程式碼

<!DOCTYPE html>
<html>
	<body>
		<div id="example"></div>

		<script>
			txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
			txt += "<p>Browser Name: " + navigator.appName + "</p>";
			txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
			txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
			txt += "<p>Platform: " + navigator.platform + "</p>";
			txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
			txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>";

			document.getElementById("example").innerHTML = txt;
		</script>

	</body>
</html>

 

 

效果

警告：來自 navigator 物件的資訊具有誤導性，不應該被用於檢測瀏覽器版本，這是因為：

  • navigator 資料可被瀏覽器使用者更改
  • 瀏覽器無法報告晚於瀏覽器釋出的新作業系統

 

 

2.瀏覽器檢測

由於 navigator 可誤導瀏覽器檢測，使用物件檢測可用來嗅探不同的瀏覽器。

由於不同的瀏覽器支援不同的物件，您可以使用物件來檢測瀏覽器。例如，由於只有 Opera 支援屬性 "window.opera"，您可以據此識別出 Opera。

例子：if (window.opera) {...some action...}

 

 

 

 

 

二.JavaScript 訊息框

 

1.警告框

警告框經常用於確保使用者可以得到某些資訊。

當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。

 

語法

alert("文字")

 

程式碼

<html>
	<head>
		<script type="text/javascript">
			function disp_alert() {
				alert("我是警告框！！")
			}
		</script>
	</head>
	<body>

		<input type="button" onclick="disp_alert()" value="顯示警告框" />

	</body>
</html>

 

 

效果

 

如果字元過長 可以

alert("再次向您問好！在這裡，我們向您演示" + '\n' + "如何向警告框新增折行。")

 

2.確認框

確認框用於使使用者可以驗證或者接受某些資訊。

當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。

如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。

 

語法

confirm("文字")

 

程式碼

<html>
	<head>
		<script type="text/javascript">
			function show_confirm() {
				var r = confirm("您確定要刪除資料？");
				if (r == true) {
					alert("確定");
				} else {
					alert("取消");
				}
			}
		</script>
	</head>
	<body>

		<input type="button" onclick="show_confirm()" value="確認框" />

	</body>
</html>

 

 

效果

 

 

3.提示框

提示框經常用於提示使用者在進入頁面前輸入某個值。

當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。

如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。

 

語法

prompt("文字","預設值")

 

程式碼

<html>
	<head>
		<script type="text/javascript">
			function disp_prompt() {
				var name = prompt("請輸入您的名字", "Penny")
				if (name != null && name != "") {
					alert("您的輸入為："+name);
				}else{
					alert("請輸入內容！");
				}
			}
		</script>
	</head>
	<body>

		<input type="button" onclick="disp_prompt()" value="顯示提示框" />

	</body>
</html>

 

 

效果

 

 

 

 

 

 

三.JavaScript 計時

通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。

 

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setTimeout()：未來的某時執行程式碼

clearTimeout()：取消setTimeout()

 

 

1.setTimeout()

 

語法

var t=setTimeout("javascript語句",毫秒)

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。

setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。

第二個引數指示從當前起多少毫秒後執行第一個引數。

提示：1000 毫秒等於一秒。

 

程式碼

<html>

	<head>
		<script type="text/javascript">
			var c = 0
			var t

			function timedCount() {
				document.getElementById('txt').value = c
				c = c + 1
				t = setTimeout("timedCount()", 1000)
			}
		</script>
	</head>

	<body>
		<form>
			<input type="button" value="Start count!" onClick="timedCount()">
			<input type="text" id="txt">
		</form>
	</body>

</html>

 

 

效果

 

 

 

2.clearTimeout()

語法

clearTimeout(setTimeout_variable)

 

程式碼

<html>

	<head>
		<script type="text/javascript">
			var c = 0
			var t

			function timedCount() {
				document.getElementById('txt').value = c
				c = c + 1
				t = setTimeout("timedCount()", 1000)
			}

			function stopCount() {
				clearTimeout(t)
			}
		</script>
	</head>

	<body>
		<form>
			<input type="button" value="Start count!" onClick="timedCount()">
			<input type="text" id="txt">
			<input type="button" value="Stop count!" onClick="stopCount()">
		</form>
	</body>

</html>

 

 

 

效果

 

 

 

 

四.JavaScript Cookies

 

cookie 用來識別使用者。

 

 

1.描述

1.1.什麼是cookie

cookie 是儲存於訪問者的計算機中的變數。每當同一臺計算機通過瀏覽器請求某個頁面時，就會傳送這個 cookie。你可以使用 JavaScript 來建立和取回 cookie 的值。

 

1.2.有關cookie的例子：

1.2.1.名字 cookie

當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會儲存於 cookie 中。當訪問者再次訪問網站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。

 

1.2.2.密碼 cookie

當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被儲存於 cookie 中。當他們再次訪問網站時，密碼就會從 cookie 中取回。

 

1.2.3.日期 cookie

當訪問者首次訪問你的網站時，當前的日期可儲存於 cookie 中。當他們再次訪問網站時，他們會收到類似這樣的一條訊息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。

 

 

 

2.建立和儲存 cookie

在這個例子中我們要建立一個儲存訪問者名字的 cookie。當訪問者首次訪問網站時，他們會被要求填寫姓名。名字會儲存於 cookie 中。當訪問者再次訪問網站時，他們就會收到歡迎詞。

 

 

程式碼

<html>
	<head>
		<script type="text/javascript">
			function getCookie(c_name) {
				if (document.cookie.length > 0) {
					c_start = document.cookie.indexOf(c_name + "=")
					if (c_start != -1) {
						c_start = c_start + c_name.length + 1
						c_end = document.cookie.indexOf(";", c_start)
						if (c_end == -1) c_end = document.cookie.length
						return unescape(document.cookie.substring(c_start, c_end))
					}
				}
				return ""
			}

			function setCookie(c_name, value, expiredays) {
				var exdate = new Date()
				exdate.setDate(exdate.getDate() + expiredays)
				document.cookie = c_name + "=" + escape(value) +
					((expiredays == null) ? "" : "; expires=" + exdate.toGMTString())
			}

			function checkCookie() {
				username = getCookie('username')
				if (username != null && username != "") {
					alert('Welcome again ' + username + '!')
				} else {
					username = prompt('Please enter your name:', "")
					if (username != null && username != "") {
						setCookie('username', username, 365)
					}
				}
			}
		</script>
	</head>
	<body onLoad="checkCookie()">
	</body>
</html>

 

 

效果

 

 

 

 

 

 

 

相關文章