天天看點

學習JavaScript

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

    &nbsp表示空格

    alert()用于實作彈出警告小視窗(隻有确定鍵) 文法:

alert(字元串或變量);      

    confirm 消息對話框通常用于允許使用者做選擇的動作(有确定和取消按鍵)文法:

    confirm(字元串或變量);   //傳回值為true或false

    prompt彈出消息對話框,通常用于詢問一些需要與使用者互動的資訊。彈出消息對話框(包含一個确定按鈕、取消按鈕與一個文本輸入框)。

文法:

prompt(str1, str2);

參數說明:

str1: 要顯示在消息對話框中的文本,不可修改

str2:文本框中的内容,可以修改

傳回值:

1. 點選确定按鈕,文本框中的内容将作為函數傳回值

2. 點選取消按鈕,将傳回null

open()方法可以查找一個已經存在或者建立的浏覽器視窗。

    文法:window.open([URL],[視窗名稱],[參數字元串])

URL:可選參數,在視窗中藥顯示網頁的網址或路徑。如果省略這個參數,或者他的值是空字元串,那麼視窗就不顯示任何文檔。

視窗名稱:可選參數,被打開視窗的名稱。

  1. 該名稱由字母、數字和下劃線字元組成。
  2. "_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屬性來設定。

繼續閱讀