JavaScript入門

1.1插入JS

1.2引用外部JS

1.3JS在頁面中的位置

放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，然後才解析頁面的其餘部分。
放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。

注意:
javascript作爲一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先後順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head裏面，因爲初始化都要求提前進行（如給頁面body設置css等）；而如果是通過事件調用執行的function那麼對位置沒什麼要求的。

1.4語句和符號

<script type="text/javascript">
   alert("hello!");
</script>

例子中的alert("hello!");就是一個JavaScript語句。

一行的結束就被認定爲語句的結束，通常在結尾加上一個分號";"來表示語句的結束，雖然也可以不寫。

1.5註釋

單行註釋，在註釋內容前加符號 “//”。

<script type="text/javascript">
  document.write("單行註釋使用'//'");  // 我是註釋，該語句功能在網頁中輸出內容
</script>

多行註釋以"/“開始，以”/"結束。

<script type="text/javascript">
   document.write("多行註釋使用/*註釋內容*/");
   /*
    多行註釋
    養成書寫註釋的良好習慣
   */
</script>

1.6變量

定義變量使用關鍵字var,語法如下：

var 變量名

變量名可以任意取名，但要遵循命名規則:

1.變量必須使用字母、下劃線(_)或者美元符($)開始。

2.然後可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。

3.不能使用JavaScript關鍵詞與JavaScript保留字。

變量要先聲明再賦值，如下：

var mychar;
mychar="javascript";
var mynum = 6;

變量可以重複賦值，如下：

var mychar;
mychar="javascript";
mychar="hello";

注意:

在JS中區分大小寫，如變量mychar與myChar是不一樣的，表示是兩個變量。
變量雖然也可以不聲明，直接使用，但不規範，需要先聲明，後使用。

1.7判斷語句（if…else）

if…else語句是在指定的條件成立時執行代碼，在條件不成立時執行else後的代碼。

語法:

if(條件)
{ 條件成立時執行的代碼 }
else
{ 條件不成立時執行的代碼 }

假設我們通過年齡來判斷是否爲成年人，如年齡大於等於18歲，是成年人，否則不是成年人。代碼表示如下:

<script type="text/javascript">
   var myage = 18;
   if(myage>=18)  //myage>=18是判斷條件
   { document.write("你是成年人。");}
   else  //否則年齡小於18
   { document.write("未滿18歲，你不是成年人。");}
</script>

1.8函數

基本語法如下:

function 函數名()
{
     函數代碼;
}

說明:

function定義函數的關鍵字。
"函數名"你爲函數取的名字。
"函數代碼"替換爲完成特定功能的代碼。

我們來編寫一個實現兩數相加的簡單函數,並給函數起個有意義的名字：“add2”，代碼如下：

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

函數調用:

函數定義好後，是不能自動執行的，所以需調用它,只需直接在需要的位置寫函數就ok了,代碼如下:

2.1輸出內容（document.write）

document.write() 可用於直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。

第一種:輸出內容用"“括起，直接輸出”"號內的內容。

<script type="text/javascript">
  document.write("I love JavaScript！"); //內容用""括起來，""裏的內容直接輸出。
</script>

第二種:通過變量，輸出內容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接寫變量名，輸出變量存儲的內容。
</script>

第三種:輸出多項內容，內容之間用+號連接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接
</script>

第四種:輸出HTML標籤，並起作用，標籤使用""括起來。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"<br>");//輸出hello後，輸出一個換行符
  document.write("JavaScript");
</script>

2.2警告（alert 消息對話框）

語法:

alert(字符串或變量);
看下面的代碼:

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

注: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>

2.3確認（confirm 消息對話框）

confirm 消息對話框通常用於允許用戶做選擇的動作，如：“你對嗎？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。

語法:

confirm(str);

參數說明:
str：在消息對話框中要顯示的文本
返回值: Boolean值

返回值:
當用戶點擊"確定"按鈕時，返回true
當用戶點擊"取消"按鈕時，返回false
注: 通過返回值可以判斷用戶點擊了什麼按鈕

看下面的代碼:

<script type="text/javascript">
    var mymessage=confirm("你喜歡JavaScript嗎?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能強大，要學習噢!");   }
</script>

結果:

注: 消息對話框是排它的，即用戶在點擊對話框按鈕前，不能進行任何其它操作。

2.4提問（prompt 消息對話框）

prompt彈出消息對話框,通常用於詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）。

語法:

prompt(str1, str2);

參數說明：

str1: 要顯示在消息對話框中的文本，不可修改
str2：文本框中的內容，可以修改

返回值:

1. 點擊確定按鈕，文本框中的內容將作爲函數返回值
2. 點擊取消按鈕，將返回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; //score變量，用來存儲用戶輸入的成績值。
	score = prompt("請輸入你的成績") ;
	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>

結果:

注:在用戶點擊對話框的按鈕前，不能進行任何其它操作。

2.5打開新窗口（window.open）

open() 方法可以查找一個已經存在或者新建的瀏覽器窗口。

語法：

window.open([URL], [窗口名稱], [參數字符串])

參數說明:

URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
    1.該名稱由字母、數字和下劃線字符組成。
    2."_top"、"_blank"、"_self"具有特殊意義的名稱。
       _blank：在新窗口顯示目標網頁
       _self：在當前窗口顯示目標網頁
       _top：框架網頁中在上部窗口中顯示目標網頁
    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>

注意：運行結果考慮瀏覽器兼容問題。

2.6關閉窗口（window.close）

close()關閉窗口

用法：

window.close();   //關閉本窗口

或

<窗口對象>.close();   //關閉指定的窗口

例如:關閉新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象，存儲在變量mywin中
   mywin.close();
</script>

注意:上面代碼在打開新窗口的同時，關閉該窗口，看不到被打開的窗口。

2.7編程練習

1、新窗口打開時彈出確認框，是否打開
提示: 使用 if 判斷確認框是否點擊了確定，如點擊彈出輸入對話框，否則沒有任何操作。

2、通過輸入對話框，確定打開的網址，默認爲 http：//www.imooc.com/

3、打開的窗口要求，寬400像素，高500像素，無菜單欄、無工具欄。

<!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 mywin = confirm("是否打開窗口");//新窗口打開時彈出確認框，是否打開
        if (mywin = true){
            var url=prompt("通過輸入對話框，點擊確定打開窗口"，"http：//www.imooc.com/")// 通過輸入對話框，確定打開的網址，默認爲 http：//www.imooc.com/

            if(url !=null){
                window.open(url,"_blank",'width=400px,height=500px,menubar=no,toolbar=no') //打開的窗口要求，寬400像素，高500像素，無菜單欄、無工具欄。
            }else{
                alert('拜拜了')
            }
            
        }else{
            alert("拜拜了")
        }
    }

  </script> 
 </head> 
 <body> 
	  <input type="button" value="新窗口打開網站" onclick="openWindow()" /> 
 </body>
</html>

3.1DOM

文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。

先來看看下面代碼:

將HTML代碼分解爲DOM節點層次圖:

HTML文檔可以說由節點構成的集合，三種常見的DOM節點:

元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
屬性節點:元素屬性，如<a>標籤的鏈接屬性href="http://www.imooc.com"。

看下面代碼:

<a href="http://www.imooc.com">JavaScript DOM</a>

3.2通過ID獲取元素

學過HTML/CSS樣式，都知道，網頁由標籤將信息組織起來，而標籤的id屬性值是唯一的，就像是每人有一個身份證號一樣，只要通過身份證號就可以找到相對應的人。那麼在網頁中，我們通過id先找到標籤，然後進行操作。

語法:

 document.getElementById("id")

看看下面代碼:

結果:null或[object HTMLParagraphElement]

注:獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法。

3.3innerHTML 屬性

innerHTML 屬性用於獲取或替換 HTML 元素的內容。

語法:

Object.innerHTML

注意:

1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。

2.注意書寫，innerHTML區分大小寫。

我們通過id="con"獲取<p> 元素，並將元素的內容輸出和改變元素內容，代碼如下:

結果:

3.4改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？

語法:

Object.style.property=new style;

注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

基本屬性表（property）:

注意:該表只是一小部分CSS樣式屬性，其它樣式也可以通過該方法設置和修改。

看看下面的代碼:

改變 <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>

結果:

3.5顯示與隱藏（display屬性）

網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。

語法：

Object.style.display = value

注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

value取值:

看看下面代碼:

3.6控制類名（className 屬性）

className 屬性設置或返回元素的class 屬性。

語法：

object.className = classname

作用:

1.獲取元素的class 屬性

爲網頁內的某個元素指定一個css樣式來更改該元素的外觀

看看下面代碼，獲得 <p> 元素的 class 屬性和改變className：

結果:

以上學習內容來自慕課網https://www.imooc.com/，僅供學習交流！

1.1插入JS

1.2引用外部JS

1.3JS在頁面中的位置

1.4語句和符號

1.5註釋

1.6變量

1.7判斷語句（if…else）

1.8函數

2.1輸出內容（document.write）

2.2警告（alert 消息對話框）

2.3確認（confirm 消息對話框）

2.4提問（prompt 消息對話框）

2.5打開新窗口（window.open）

2.6關閉窗口（window.close）

2.7編程練習

3.1DOM

3.2通過ID獲取元素

3.3innerHTML 屬性

3.4改變 HTML 樣式

3.5顯示與隱藏（display屬性）

3.6控制類名（className 屬性）

Numpy基礎知識總結

Django基礎知識隨筆

騰訊雲-英文識別(本地圖片)

python爬蟲--實戰英雄聯盟LOL壁紙下載

python爬蟲--實戰豆瓣電影TOP250

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結