基礎知識
變量
- 申明
var 變量名
var 用來定義變量，這個用法在很多語言裏都一樣。
- 命名
- 變量名必須使用字母、下劃線或 $ 符號開頭。
- 由數字、字母、下劃線、$ 符號組成。
- 命名需要避免js的關鍵字和保留字。
- 使用
- 先申明，再賦值
var mychar;
mychar="javascript";
- 注意
- 變量名區分大小寫。
if語句
所有語言的if語句都差不多，js也一樣。
函數定義
function 函數名()
{
函數內部實現
}
function 是申明函數的關鍵字。
例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函數調用</title>
<script type="text/javascript">
function contxt() //定義函數
{
alert("哈哈，調用函數了!");
}
</script>
</head>
<body>
<form>
<input type="button" value="點擊我" onclick="contxt()" />
</form>
</body>
</html>
輸出內容
直接輸出字符串
document.write("I love JavaScript");
輸出字符串變量內容
var mystr="hello world!";
document.write(mystr); //直接寫變量名，輸出變量存儲的內容。
”+“拼接輸出
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接
輸出後換行
var mystr="hello";
document.write(mystr+"<br>");//輸出hello後，輸出一個換行符
alert消息對話框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
function rec(){
var mychar="I love JavaScript";
alert(mychar);
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="點擊我，彈出對話框" />
</body>
</html>
confirm 消息對話框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士嗎？");;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="點擊我，彈出確認對話框" />
</body>
</html>
語法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士嗎？");;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="點擊我，彈出確認對話框" />
</body>
</html>
語法
var isMeal = confirm("您是女士嗎？");
confirm()函數會觸發一個彈窗，自帶確定和取消按鈕。這個函數有個bool類型的返回值，點擊確定返回true，取消返回false。
prompt消息對話框
語法
prompt(str1,str2);
- str1: 要顯示在消息對話框中的文本，不可修改
- str2：文本框中的內容，可以修改
- 點擊確定按鈕，文本框中的內容將作爲函數返回值
- 點擊取消按鈕，將返回null
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
<script type="text/javascript">
function rec(){
var score = prompt("請輸入您的成績"); //score變量，用來存儲用戶輸入的成績值。
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不錯吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="點擊我，對成績做評價!" />
</body>
</html>
打開新窗口
window.open([URL], [窗口名稱], [參數字符串])
-
URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
-
窗口名稱：可選參數，被打開窗口的名稱。
窗口名稱可爲"_top"、"_blank"、"_self"
_blank：在新窗口顯示目標網頁
_self：在當前窗口顯示目標網頁
_top：框架網頁中在上部窗口中顯示目標網頁 -
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('http://www.baidu.com','_blank','width=400,height=600,top=100,left=0');
}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="點擊我，打開新窗口!" / >
</body>
</html>
參數列表：
關閉窗口
window.close(); //關閉本窗口
<窗口對象>.close(); //關閉指定的窗口
練習
點擊按鈕，彈窗，選擇確定打開新窗口
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
var open=confirm("是否打開？");
if (open) {
window.open('http://www.baidu.com','_blank','width=400,height=500,menubar=no,toolbar=no');
}
}
</script>
</head>
<body>
<input type="button" value="新窗口打開網站" onclick="openWindow()" />
</body>
</html>