輸出
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
語句
document.getElementById("demo").innerHTML="Hello World";
JavaScript 擁有動態類型
<script>
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />");
document.write(person["id"] + "<br />");
</script>
JavaScript 對象
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
函數
function myFunction()
{
alert("Hello World!");
}
<button onclick="myFunction()">點擊這裡</button>
JavaScript 運算符
算數
x=y+2
x=y-2
x=y*2
x=y/2
x=y%2
x=++y
賦值
x=y
x+=y
x-=y
x*=y
x/=y
x%=y
比較運算符
x==8 為 false
x===5 為 true;x==="5" 為 false
x!=8 為 true
x>8 為 false
x<8 為 true
x>=8 為 false
x<=8 為 true
邏輯運算符
(x < 10 && y > 1) 為 true
(x==5 || y==5) 為 false
!(x==y) 為 true
條件運算符
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
判斷語句
if 語句 - 只有當指定條件為 true 時,使用該語句來執行代碼
if...else 語句 - 當條件為 true 時執行代碼,當條件為 false 時執行其他代碼
if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行
循環語句
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊
break 語句可用於跳出循環。通過標簽引用,break 語句可用於跳出任何 JavaScript 代碼塊:
continue 語句中斷循環中的迭代
JavaScript 錯誤 - Throw、Try 和 Catch
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創建自定義錯誤。
try
{
adddlert("Welcome guest!");
}
catch(err)
{
alert("error");
}
}
Throw 語句
throw 創建或拋出異常(exception)。
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
JavaScript HTML DOM 元素(節點)
添加和刪除節點(HTML 元素)。
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。23423");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
刪除已有的 HTML 元素
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
RegExp 是正則表達式 參考更多更全http://hovertree.com
當您檢索某個文本時,可以使用一種模式來描述要檢索的內容。RegExp 就是這種模式。
RegExp 對象有 3 個方法:test()、exec() 以及 compile()。
test() 方法檢索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
exec() 方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
var patt1=new RegExp("e","g");//在使用 "g" 參數時找到第一個 "e",並存儲其位置 如果再次運行 exec(),則從存儲的位置開始檢索,並找到下一個 "e",並存儲其位置
compile() 方法用於改變 RegExp。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
Window 尺寸
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏覽器的內部窗口寬度:" + w + ",高度:" + h + "。"
</script>
Window Screen 可用高度 可用寬度
<script>
document.write("可用寬度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>
Window Location
document.write(location.href);
document.write(location.pathname);
window.location.assign("http://hovertree.com")
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 (80 或 443)
location.protocol 返回所使用的 web 協議(http:// 或 https://)
Window History
history.back() - 與在浏覽器點擊後退按鈕相同
history.forward() - 與在浏覽器中點擊按鈕向前相同
警告框、確認框、提示框。
alert("文本")
confirm("文本")
prompt("文本","默認值")
JavaScript 計時
var t=setTimeout("alert('5 seconds!')",5000)
clearTimeout(setTimeout_variable)
創建和存儲 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
<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>
JAVASCRIPT 框架>>