<script type="text/javascript">表示在<script></script>之間的是文本類型(text),javascript是為了告訴浏覽器裡面的文本是屬于JavaScript語言。
<script>标簽要成對出現,并把JavaScript代碼寫在<script></script>之間
可以把HTML檔案和JS代碼分開,并單獨建立一個JavaScript檔案(簡稱JS檔案),其檔案字尾通常為.js,然後将JS代碼直接寫在JS檔案中
在JS檔案中,不需要<script>标簽,直接編寫JavaScript代碼就可以了。
JS檔案不能直接運作,需嵌入到HTML檔案中執行,我們需在HTML中添加如下代碼,就可将JS檔案嵌入HTML檔案中。
<script src="script.js"></script>
我們可以将JavaScript代碼放在html檔案中任何位置,但是我們一般放在網頁的head或者body部分。
放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素,浏覽器解析head部分就會執行這個代碼,然後才解析頁面的其餘部分。
放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。
定義變量要用var。
 表示空格
alert()用于實作彈出警告小視窗(隻有确定鍵) 文法:
alert(字元串或變量);
confirm 消息對話框通常用于允許使用者做選擇的動作(有确定和取消按鍵)文法:
confirm(字元串或變量); //傳回值為true或false
prompt彈出消息對話框,通常用于詢問一些需要與使用者互動的資訊。彈出消息對話框(包含一個确定按鈕、取消按鈕與一個文本輸入框)。
文法:
prompt(str1, str2);
參數說明:
str1: 要顯示在消息對話框中的文本,不可修改
str2:文本框中的内容,可以修改
傳回值:
1. 點選确定按鈕,文本框中的内容将作為函數傳回值
2. 點選取消按鈕,将傳回null
open()方法可以查找一個已經存在或者建立的浏覽器視窗。
文法:window.open([URL],[視窗名稱],[參數字元串])
URL:可選參數,在視窗中藥顯示網頁的網址或路徑。如果省略這個參數,或者他的值是空字元串,那麼視窗就不顯示任何文檔。
視窗名稱:可選參數,被打開視窗的名稱。
- 該名稱由字母、數字和下劃線字元組成。
- "_top"、"_blank"、"_self"具有特殊意義的名稱。
_top:架構網頁中在上部視窗中顯示目标網頁
_blank:在新視窗顯示目标網頁
_self在目前視窗顯示目标網頁
3.相同name的視窗隻能建立一個,要想建立多個視窗則name不能相同
4.name不能包含有空格
參數字元串:可選參數,設定視窗參數,各參數用逗号隔開
例如:打開http://www.imooc.com網站,大小為300px * 200px,無菜單,無工具欄,無狀态欄,有滾動條視窗:
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
關閉視窗:
視窗對象.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 result = confirm("是否要打開新網頁?");
// if(result == true){
// window.open("http://www.imooc.com");
// }
// 新視窗打開時彈出确認框,是否打開
// var result = prompt("是否确定要打開下列網址","http://www.imooc.com");
// window.open(result);
// 通過輸入對話框,确定打開的網址,預設為 http://www.imooc.com/
var result = prompt("是否确定要打開下列網址","http://www.imooc.com");
window.open(result,"慕課網","width=400,height=500");
//打開的視窗要求,寬400像素,高500像素,無菜單欄、無工具欄。
}
</script>
</head>
<body>
<input type="button" value="新視窗打開網站" />
</body>
</html>
文檔對象模型DOM(Document Object Model)定義通路和處理HTML文檔的标準方法。DOM将HTML文檔呈現為帶有元素、屬性和文本的數結構(節點樹)。
學過HTML/CSS樣式,都知道,網頁由标簽将資訊組織起來,而标簽的id屬性值是唯一的,就像是每人有一個×××号一樣,隻要通過×××号就可以找到相對應的人。那麼在網頁中,我們通過id先找到标簽,然後進行操作。
document.getElementById(“id”)
innerHTML 屬性用于擷取或替換 HTML 元素的内容。
Object.innerHTML
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢?
Object.style.property=new style;
<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屬性來設定。