javascript
如何寫入JS代碼
使用<script>標籤在HTML網頁中插入JavaScript代碼
<script type=”text/javascript”></script> 文本類型
將js文件嵌入到html文件中
<script src=”script.js”></script>
js位置
一般在head或body裏
javascript作爲一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先後順序的，所以前面的script就先被執行。
比如進行頁面顯示初始化的js必須放在head裏面，因爲初始化都要求提前進行（如給頁面body設置css等）；
而如果是通過事件調用執行的function那麼對位置沒什麼要求的。
語句格式
<script type="text/javascript">
alert("hello!");
</script>
註釋
//單行註釋
/*多行
註釋*/
變量
var
變量必須使用字母、下劃線(_)或者美元符($)開始
然後可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成
不能使用JavaScript關鍵詞與JavaScript保留字
var my char;
mychar=”javascript”;
var mynum =6;
判斷語句 if else
var score =60;
if(score>=60)
{document.write(“很棒成績及格了。”)；}
else
{document.write(“加油，成績不及格。“)；}
函數
function 函數名()
{
函數代碼;
}
function定義函數的關鍵字。
"函數名"你爲函數取的名字。
"函數代碼"替換爲完成特定功能的代碼。
function add2(){
var sum =3+2;
alert(sum);
}
add2(); //調用函數，直接寫函數名
輸出內容 document.write
<script type=”text/javascript”>
//第一種方法 用“”括起，直接輸出“”內容
document.write(“I love javascript !”); //內容用“”引起來
//第二種方法 通過變量輸出內容
var mystr=”hello world!”;
document.write(mystr); //直接寫變量名
//第三種方法 多項內容之間用加號連接
var mystr=”hello”;
document.write(mystar+”I love javascript”);
//第四種方法 輸出html標籤，並起作用，標籤使用“”括起來
var mystr=”hello”;
document.write(mystar+”<br>”);
document.write(“javascript”);
</script>
js中如何輸出空格
在寫JS代碼的時候，大家可以會發現這樣現象:
document.write(" 1 2 3 ");
結果: 12 3
無論在輸出的內容中什麼位置有多少個空格，顯示的結果好像只有一個空格。
這是因爲瀏覽器顯示機制，對手動敲入的空格，將連續多個空格顯示成1個空格。
解決方法:
1. 使用輸出html標籤 來解決
document.write(" "+"1"+" "+"23");
結果: 1 23
2. 使用CSS樣式來解決
document.write("<spanstyle='white-space:pre;'>"+" 1 2 3 "+"</span>");
結果: 1 2 3
在輸出時添加“white-space:pre;”樣式屬性。這個樣式表示"空白會被瀏覽器保留"
警告 alert消息對話框
alert（字符串或變量）
<script type="text/javascript">
var mynum = 30;
alert("hello!");
alert(mynum);
</script>
按順序彈出消息對話框（包含一個確定按鈕）
在點擊對話框"確定"按鈕前，不能進行任何其它操作
消息對話框通常可以用於調試程序
alert輸出內容，可以是字符串或變量，與document.write 相似
確認 confirm消息對話框
confirm(str);
str：在消息對話框中要顯示的文本
返回值: Boolean值
確認 true
取消 false
<script type=”text/javascript”>
var mymessage=confirm(“你喜歡javascript嗎？“)；
if(mymessage==true)
{document.write(“很好，加油！“)；}
else
{document.wrrite(“js功能強大，要學習哦！“)；}
</script>
提問 prompt消息對話框
prompt (str1,str2)
str1 要顯示在消息對話框中的文本，不可修改
str2 文本框中的內容，可修改
var myname=prompt(“請輸入你的姓名：“)；
if(myname!=null)
{alert（”你好”+myname）;
}
else
{alert(“你好 my friend.”);}
打開新窗口 window.open([URL],[窗口名稱]，[參數字符串])
URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔
窗口名稱：可選參數，被打開窗口的名稱。
由字母、數字和下劃線字符組成，不能有空格
_blank：在新窗口顯示目標網頁
_self：在當前窗口顯示目標網頁
_top：框架網頁中在上部窗口中顯示目標網頁
相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開
<script type="text/javascript">window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes')
</script>
關閉窗口 window.close
window.close(); //關閉本窗口
<窗口對象>.close(); //關閉指定窗口
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com');
mywin.close();
</script>
完整代碼實例
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function openwindow(){
var newwindow=confirm("確定要打開新窗口嗎？");
if(newwindow==true)
{
var window_new=prompt("請輸入網址：","http：//www.imooc.com/");
if(window_new!=null)
{
window.open(window_new,'_blank','height=500,wight=400,toolbar=no,menubar=no');
}
else
{
alert("感謝您的使用");
}
}
else
{
alert("感謝您的使用");
}
}
</script>
</head>
<body>
<input type="button"
value="新窗口打開網站"
onclick="openwindow()"
/>
</body>
</html>
DOM 文檔對象模型
HTML文檔可以說由節點構成的集合，三種常見的DOM節點:
元素節點：<html>、<body>、<p>等都是元素節點，即標籤
文本節點:向用戶展示的內容，如<li>...</li>中的文本
屬性節點:元素屬性，如<a>標籤的鏈接屬性href="http://www.imooc.com"。
<a href="http://www.imooc.com">JavaScriptDOM</a>
通過id獲取元素
document.getElementById(“id”)
結果:null或[objectHTMLParagraphElement]
注:獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法
innerHTML屬性 用於獲取或替換HTML元素的內容
object.innerHTML
Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素
innerHTML區分大小寫
改變HTML樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式
Object.style.property=new style;
Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
基本屬性表
改變 <p>元素的樣式，將顏色改爲紅色，字號改爲20,背景顏色改爲藍：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor="blue";
</script>
顯示和隱藏 display屬性
object.style.display=value
Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
value的取值
取消設置
object.removeAttribute("style");
控制類名 className屬性 設置或返回元素的class屬性
object.className=classname
獲取元素的class 屬性
爲網頁內的某個元素指定一個css樣式來更改該元素的外觀