JS學習筆記

JavaScript：寫入 HTML 輸出

實例

document.write("<h1>This is a heading</h1>");

提示：您只能在 HTML 輸出中使用 document.write。若是您在文檔加載後使用該方法，會覆蓋整個文檔。

 

x=document.getElementById("demo")  //查找元素x.innerHTML="Hello JavaScript";    //改變內容

對代碼行進行折行

您能夠在文本字符串中使用反斜槓對代碼行進行換行。下面的例子會正確地顯示：

document.write("Hello \
World!");

不過，您不能像這樣折行：

document.write \
("Hello World!");

JavaScript 變量

• 變量必須以字母開頭

• 變量也能以 $ 和 _ 符號開頭（不過咱們不推薦這麼作）

• 變量名稱對大小寫敏感（y 和 Y 是不一樣的變量）

提示：JavaScript 語句和 JavaScript 變量都對大小寫敏感

Value = undefined

在計算機程序中，常常會聲明無值的變量。未使用值來聲明的變量，其值其實是 undefined。

在執行過如下語句後，變量 carname 的值將是 undefined：

var carname;

從新聲明 JavaScript 變量

若是從新聲明 JavaScript 變量，該變量的值不會丟失：

在如下兩條語句執行後，變量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

JavaScript 對象

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

對象屬性有兩種尋址方式：

實例

name=person.lastname;
name=person["lastname"];

聲明變量類型

當您聲明新變量時，可使用關鍵詞 "new" 來聲明其類型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 變量均爲對象。當您聲明一個變量時，就建立了一個新的對象。

原來js裏也有異常的處理,能夠trycatch,也能夠throw

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

onchange 事件

onchange 事件常結合對輸入字段的驗證來使用。

下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

實例

<input type="text" id="fname" onchange="upperCase()">

親自試一試

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的全部部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

建立 JavaScript 對象

經過 JavaScript，您可以定義並建立本身的對象。

建立新對象有兩種不一樣的方法：

1. 定義並建立對象的實例

2. 使用函數來定義對象，而後建立新的對象實例

建立直接的實例

這個例子建立了對象的一個新實例，並向其添加了四個屬性：

實例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

親自試一試

替代語法（使用對象 literals）：

實例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

親自試一試

使用對象構造器

本例使用函數來構造對象：

實例

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

親自試一試

建立 JavaScript 對象實例

一旦您有了對象構造器，就能夠建立新的對象實例，就像這樣：

var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");

極大或極小的數字可經過科學（指數）計數法來寫：

實例

var y=123e5;    var z=123e-5;

全部 JavaScript 數字均爲 64 位

setTimeout(code,millisec)

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

在下面的例子中，咱們爲日期對象設置了一個特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()
myDate.(2008,7,9)

注意：表示月份的參數介於 0 到 11 之間。也就是說，若是但願把月設置爲 8 月，則參數應該是 7。

在下面的例子中，咱們將日期對象設置爲 5 天后的日期：

var myDate=new Date()
myDate.(myDate.getDate()+5)

注意：若是增長天數會改變月份或者年份，那麼日期對象會自動完成這種轉換。

比較日期

日期對象也可用於比較兩個日期。

下面的代碼將當前日期與 2008 年 8 月 9 日作了比較：

var myDate=new Date();
myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}

若是邏輯對象無初始值或者其值爲 0、-0、null、""、false、undefined 或者 NaN，那麼對象的值爲 false。不然，其值爲 true（即便當自變量爲字符串 "false" 時）！

您能夠向 RegExp 對象添加第二個參數，以設定檢索。例如，若是須要找到全部某個字符的全部存在，則可使用 "g" 參數 ("global")。

如需關於如何修改搜索模式的完整信息，請訪問咱們的 RegExp 對象參考手冊。

在使用 "g" 參數時，exec() 的工做原理以下：

• 找到第一個 "e"，並存儲其位置

• 若是再次運行 exec()，則從存儲的位置開始檢索，並找到下一個 "e"，並存儲其位置

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

因爲這個字符串中 6 個 "e" 字母，代碼的輸出將是：

eeeeeenull

上面也是一個很好地do-while應用

window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

location應該是一個頗有用的功能

一些方法：

• history.back() - 與在瀏覽器點擊後退按鈕相同

• history.forward() - 與在瀏覽器中點擊按鈕向前相同

Window Navigator

window.navigator 對象在編寫時可不使用 window 這個前綴。

實例

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

親自試一試

警告：來自 navigator 對象的信息具備誤導性，不該該被用於檢測瀏覽器版本，這是由於：

• navigator 數據可被瀏覽器使用者更改

• 瀏覽器沒法報告晚於瀏覽器發佈的新操做系統

瀏覽器檢測

因爲 navigator 可誤導瀏覽器檢測，使用對象檢測可用來嗅探不一樣的瀏覽器。

因爲不一樣的瀏覽器支持不一樣的對象，您可使用對象來檢測瀏覽器。例如，因爲只有 Opera 支持屬性 "window.opera"，您能夠據此識別出 Opera。

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

真麻煩!!!!!!!!!!!!!!

建立和存儲 cookie

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

首先，咱們會建立一個可在 cookie 變量中存儲訪問者姓名的函數：

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())
}

上面這個函數中的參數存有 cookie 的名稱、值以及過時天數。

在上面的函數中，咱們首先將天數轉換爲有效的日期，而後，咱們將 cookie 名稱、值及其過時日期存入 document.cookie 對象。

以後，咱們要建立另外一個函數來檢查是否已設置 cookie：

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 ""
}

上面的函數首先會檢查 document.cookie 對象中是否存有 cookie。假如 document.cookie 對象存有某些 cookie，那麼會繼續檢查咱們指定的 cookie 是否已儲存。若是找到了咱們要的 cookie，就返回值，不然返回空字符串。

最後，咱們要建立一個函數，這個函數的做用是：若是 cookie 已設置，則顯示歡迎詞，不然顯示提示框來要求用戶輸入名字。

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)
    }
  }
}

CDN - 內容分發網絡

您老是但願網頁能夠儘量地快。您但願頁面的容量儘量地小，同時您但願瀏覽器儘量多地進行緩存。

若是許多不一樣的網站使用相同的 JavaScript 框架，那麼把框架庫存放在一個通用的位置供每一個網頁分享就變得頗有意義了。

CDN (Content Delivery Network) 解決了這個問題。CDN 是包含可分享代碼庫的服務器網絡。

Google 爲一系列 JavaScript 庫提供了免費的 CDN，包括：

• jQuery

• Prototype

• MooTools

• Dojo

• Yahoo! YUI

如需在您的網頁中使用 JavaScript 框架庫，只需在 <script> 標籤中引用該庫便可：

引用 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

jQuery 返回 jQuery 對象，與已傳遞的 DOM 對象不一樣。jQuery 對象擁有的屬性和方法，與 DOM 對象的不一樣。您不能在 jQuery 對象上使用 HTML DOM 的屬性和方法。