JavaScript入門篇

https://www.imooc.com/learn/36

1.基礎語法

在HTML文件中添加JavaScript代碼，掌握必備的基礎語法，爲以後來章學習打下基礎。

1.如何寫入JavaScript代碼

內部引用：在HTML文件中插入 <script type="text/javascript"> JavaScript codes ... </script>，其中<script> type默認爲 text/javascript，可省略。
外部引用：在.js文件中編寫，在HTML文件中插入 <script src="文件路徑"></script>。
代碼位置：進行頁面初始化的代碼放在 <head> 部分，因爲初始化要求提前進行。若是通過事件調用function則對位置無要求，可以放在 <body> 中。

2.語句和符號

JavaScript codes; ，分號可省略，但是不推薦。

3.註釋

// 單行註釋
/* 多行註釋 */

4.變量

定義變量： var 變量名;
命名規則：和大多數語言相同。
- 以字母、下劃線或美元符號開頭，後面可以跟字母、下劃線、美元符號和數字。
- 不允許使用JavaScript關鍵字和保留字做變量名。
區分大小寫。

// 先聲明再賦值，不聲明直接使用的是全局變量，不規範。
var mychar;
mychar = "javascript";
var mynum = 6;

// 重複賦值
var mychar;
mychar = "javascript";
mychar = "hello";

5.判斷語句（if…else）

if(condition) { // condition is true 
	... 
}
else { // condition is false
	... 
}

6.函數

function functionName() { // 若有參數用,隔開
     ...
}

// e.g. 兩數相加
function add2(num1, num2) {
	return num1 + num2;
}

2.窗口交互

向網頁中輸入內容，與瀏覽器窗口進行交互，通過簡單的對象方法就可以輕鬆實現。

1.輸出內容

document.write() ：直接向HTML輸出流寫內容，即在網頁中輸出內容。

// 直接輸出""內的內容
document.write("Hello World!");

// 輸出變量的內容
var mystr = "Hello World!";
document.write(mystr);

// 輸出多項內容
document.write("Hello" + " World!"); 

// 輸出HTML標籤
document.write("Hello" + "<br>"); 
document.write("World!");

輸出空格

// 因爲瀏覽器顯示機制，對手動敲入的空格，將連續多個空格顯示成1個空格。
document.write("   1      2                3  "); // 1 2 3

// 解決方法一：輸出HTML標籤&nbsp
document.write("&nbsp;&nbsp;" + "1" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "23"); //   1    23

// 解決方法二：CSS樣式
document.write("<span style='white-space:pre;'>" + "1  2  3" + "</span>"); // 1  2  3

2.警告

alert(str); ，str爲顯示在消息對話框中的文本，可以是字符串或變量。
在點擊對話框"確定"按鈕前，不能進行任何其它操作。
可以用於調試程序。

3.確認

confirm(str); ，str爲顯示在消息對話框中的文本。返回Boolean值，確定返回true，取消返回false。
在點擊對話框"確定"或"取消"按鈕前，不能進行任何其它操作。
用於允許用戶做選擇的動作。

4.提問

prompt(str1, str2); ，str1爲顯示在消息對話框中的文本，不可更改；str2爲文本框中的內容，可以更改。確定返回str2，取消返回null。
在點擊對話框"確定"或"取消"按鈕前，不能進行任何其它操作。
用於詢問一些需要與用戶交互的信息。

5.打開窗口

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

參數說明

URL：可選參數，在窗口中要顯示網頁的網址或路徑。
如果省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
- 該名稱由字母、數字和下劃線字符組成，不能包含空格。
- 具有特殊意義的名稱：
  _blank：在新窗口顯示目標網頁。
  _self：在當前窗口顯示目標網頁。
  _top：框架網頁中在上部窗口中顯示目標網頁。
- 相同名稱的窗口只能創建一個，要想創建多個窗口則名稱不能相同。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。

參數	值	說明
top	Number	窗口頂部距離屏幕頂部的像素數
left	Number	窗口左端距離屏幕左端的像素數
width	Number	窗口的寬度
height	Number	窗口的高度
menubar	yes, no	窗口有沒有菜單
toolbar	yes, no	窗口有沒有工具條
scrollbars	yes, no	窗口有沒有滾動條
status	yes, no	窗口有沒有狀態欄

e.g.

// 打開http://www.imooc.com，大小爲300px * 200px，無菜單，無工具欄，無狀態欄，有滾動條窗口。
window.open("http://www.imooc.com", "_blank", "width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes");

6.關閉窗口

關閉本窗口： window.close(); ，關閉指定窗口： <窗口對象>.close(); 。

e.g.

// 在打開窗口的同時關閉窗口
 var mywin = window.open("http://www.imooc.com"); 
 mywin.close();

3.DOM操作

用JavaScript去操作HTML元素和CSS樣式，實現簡單的動態操作。

1.DOM

DOM（Document Object Model）：文檔對象模型，定義訪問和處理HTML文檔的標準方法，將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。
節點樹
常見的DOM節點
- 元素節點：上圖中 <html> 、 <body> 、 <p> 等都是元素節點，即標籤。
- 文本節點：向用戶展示的內容，如 <li>...</li> 中的JavaScript、DOM、CSS等文本。
- 屬性節點:元素屬性，如 <a> 標籤的鏈接屬性href="http://www.imooc.com"。

2.通過ID屬性獲取元素

document.getElementById(“id”) ;
獲取的元素是一個對象，若要對元素進行操作，要通過它的屬性或方法。

3.通過innerHTML屬性獲取元素內容

Object.innerHTML
用於獲取或替換 HTML 元素的內容。

4.改變 HTML 樣式

Object.style.property = new style;

基本屬性（property）：backgroundColor、height、width、color、font、fontFamily、fontSize。

e.g.

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

Object.style.display = value;
- none：隱藏；display：顯示（爲塊級元素）。

5.控制類名

object.className = classname;
設置或返回元素的class 屬性。

4.綜合練習

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
    body {
        font-size: 12px;
    }
    
    #txt {
        height: 400px;
        width: 600px;
    	border: #333 solid 1px;
    	padding: 5px;
    }
    
    p {
    	line-height: 18px;
    	text-indent: 2em;
    }
</style>
</head>
<body>
  <h2 id="con">JavaScript課程</H2>
  <div id="txt"> 
     <h5>JavaScript爲網頁添加動態效果並實現與用戶交互的功能。</h5>
        <p>1. JavaScript入門篇，讓不懂JS的你，快速瞭解JS。</p>
        <p>2. JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
        <p>3. 學完以上兩門基礎課後，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
  </div>
  <form>
  <!--當點擊相應按鈕，執行相應操作，爲按鈕添加相應事件-->
    <input type="button" value="改變顏色" onclick="changeColor()">  
    <input type="button" value="改變寬高" onclick="changeSize()">
    <input type="button" value="隱藏內容" onclick="objHide()">
    <input type="button" value="顯示內容" onclick="objShow()">
    <input type="button" value="取消設置" onclick="offSet()">
  </form>
  <script type="text/javascript">
    var txt = document.getElementById("txt");

    // 定義"改變顏色"的函數
    function changeColor() {
        txt.style.color = "red";
        txt.style.background = "#ccc";
    }
    
    // 定義"改變寬高"的函數
    function changeSize() {
        txt.style.width = "200px";
        txt.style.height = "300px";
    }
    
    // 定義"隱藏內容"的函數
    function objHide() {
        txt.style.display = "none";
    }
    
    // 定義"顯示內容"的函數
    function objShow() {
        txt.style.display = "block";
    }
    
    function offSet() {
        var message = confirm("是否取消所有設置？");
        if(message) {
            txt.removeAttribute("style");
        }
    }
  </script>
</body>
</html>

JavaScript進階篇

http://www.imooc.com/learn/10

1.基礎語法

變量聲明、變量類型，對它們進行賦值、改變、計算等一系列操作，不同運算符的使用方法，靈活運用算術運算符、比較運算符、邏輯運算符對變量和數值進行操作。

對JavaScript入門篇1內容進行補充。

1.表達式

指具有一定的值、用操作符把常數和變量連接起來的代數式，可以包含常數或變量。
類型
- 串表達式
- 數值表達式
- 布爾表達式

2.操作符

算數操作符
- + ：除進行加法運算之外，還可以連接字符串。var str = "Java" + "Script"; // JavaScript
邏輯操作符
- && and || 具有短路運算性質。
比較操作符
運算優先級：算術操作符 → 比較操作符 → 邏輯操作符 → 賦值運算符，同級運算按從左到右次序進行，多層括號由裏向外。

2.數組

數組的概念，創建、賦值、使用數組，獲得數組長度，二維數組。

1.概念

定義：數組是一組值的集合，每個值都有一個索引號（從0開始）。
存儲類型：數組存儲的數據可以是任何類型（數字、字符、布爾值等）。

2.創建

不指定長度：var myarray = new Array();
指定長度：var myarray = new Array(n); // 創建數組，存儲n個數據 ，但由於數組是變長的，仍可存儲>n個數據。
創建的新數組爲空，默認值是 undefined 。

3.賦值

// 方法一：逐個賦值
var myarray = new Array(); 
myarray[0] = 0; 
myarray[1] = 1; 
myarray[2] = 2; 
myarray[3] = 3; 
myarray[4] = 4; 

// 方法二：創建數組同時賦值
var myarray = new Array(0, 1, 2, 3, 4);

// 方法三：直接輸入一個數組（稱 “字面量數組”）
var myarray = [0, 1, 2, 3, 4];

4.使用數組元素

通過索引引用數組變量：myarr[n]

5.獲得數組長度

myarray.length

e.g.

var arr = [0, 1, 2];
document.write(arr.length); // 3
document.write(arr[1]); // 1

// 數組length屬性可變
arr.length = 5;
document.write(arr.length); // 5

// 隨元素的增加，數組長度也會發生改變。
arr[10] = 10;
document.write(arr.length); // 11

6.二維數組

// 創建並賦值 2 * 3 的二維數組，方法類似一維數組。
// 方法一
var myarr = new Array();  
for(var i = 0; i < 2; i++) {  
   myarr[i] = new Array();  
   for(var j = 0;j < 3; j++) {
       myarr[i][j] = i + j;   
   }
}

// 方法二
var myarr = new Array([0 , 1 , 2 ],[1 , 2 , 3]);

// 方法二
var myarr = [[0 , 1 , 2 ],[1 , 2 , 3]];

3.流程控制語句

控制語句的執行順序。

1.if...else ：見JavaScript入門篇1.5

2.switch

switch(表達式) {
	case 值1:
  		執行代碼塊 1
  		break;
	case值2:
  		執行代碼塊 2
  		break;
	...
	case值n:
  		執行代碼塊 n
  		break;
	default:
  		與 case 值1 、 case 值2 ... case值n 不同時執行的代碼
}

3.循環

for

for(初始化變量; 循環條件; 循環迭代) {     
    循環語句 
}

while

while(判斷條件) {
    循環語句
}

do...while ：先執行後判斷，保證循環體至少被執行一次。
```
do {
    循環語句
}
while(判斷條件)
```
break ：退出當前循環，執行之後的代碼。
continue ：跳過本次循環，整個循環體繼續執行。

4.函數

函數是一段JavaScript代碼，它只定義一次，可被執行或調用任意次。函數的定義、引用。

對JavaScript入門篇1.6內容進行補充。

1.調用

在 <script> 中調用
在HTML文件中調用，如：<input type="button" value="click it" onclick="add2() /">

2.返回值

return 返回值;

5.事件

JavaScript和HTML之間的交互是通過用戶和瀏覽器操作界面引發的事件來處理，本章介紹事件處理的概念，常用觸發事件。

1.定義

可以被JavaScript偵測到的行爲。網頁中的每個元素都可以產生某些可以觸發JavaScript函數或程序的事件。
e.g. 當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。

2.主要事件

鼠標點擊（onclick）
鼠標經過（onmouseover）
鼠標移開（onmouseout）
文本框內容改變（onchange）
文本框內容被選中（onselect）
光標聚集（onfocus）
光標離開（onblur）
網頁導入（onload）
- 加載頁面時觸發，寫在 <body> 中。
網頁關閉（onunload）

6.內置對象

Date、String、Math、Array對象的屬性和方法。

1.概念

訪問對象屬性：objectName.propertyName
訪問對象方法：objectName.methodName()

2.Date

創建對象

// 創建Date對象，初始值爲當前時間。
var d = new Date();
// 自定義初始值
var d = new Date(2012, 10, 1);  // 2012年10月1日
var d = new Date('Oct 1, 2012'); // 2012年10月1日

返回/設置年份：get/setFullYear()，4位數字。

返回星期：getDay()，返回值是0-6的數字。

var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
document.write("今天是："+ weekday[new Date().getDay()]);

返回/設置時間：get/setTime()，單位毫秒數，計算從 1970 年 1 月 1 日零時到日期對象所指日期的毫秒數。

3.String

創建對象：直接賦值
返回字符串的長度：stringObject.length
字符大小寫轉換：stringObject.toUpperCase() // 大寫，stringObject.toLowerCase() // 小寫
返回指定位置的字符：stringObject.charAt(index)，返回長度爲1的字符串。
返回指定字符串首次出現的位置：stringObject.indexOf(substring, startpos)

分割字符串：stringObject.split(separator, limit)，返回字符串數組。如果把空字符串 ("") 用作 separator，那麼 stringObject 中的每個字符之間都會被分割。

var str = "www.imooc.com";
document.write(str.split("") + "<br />"); // w,w,w,.,i,m,o,o,c,.,c,o,m
document.write(str.split(".") + "<br />"); // www,imooc,com
document.write(str.split(".", 2)); // www,imooc

提取指定位置字符串：stringObject.substring(startPos, stopPos)
提取指定長度字符串：stringObject.substr(startPos, length)

4.Math

創建對象：Math 對象是一個固有的對象，無需創建它，直接把 Math 作爲對象使用就可以調用其所有屬性和方法。
屬性
方法

5.Array
對JavaScript進階篇2.數組內容進行補充。

方法

數組連接：arrayObject.concat(array1, array2, ..., arrayN)，返回一個被連接數組的副本，不改變原來的數組。

var arr = new Array(1, 2, 3);
document.write(arr.concat(4, 5) + "<br />"); // 1,2,3,4,5

var arr1 = new Array("hello!")
var arr2 = new Array("I", "love");
var arr3 = new Array("JavaScript", "!");
document.write(arr1.concat(arr2, arr3)); // hello!,I,love,JavaScript,!

指定分隔符連接數組元素：arrayObject.join(separator)

 var myarr = new Array(3);
 myarr[0] = "I";
 myarr[1] = "love";
 myarr[2] = "JavaScript";
 document.write(myarr.join()); // separator默認爲 ","

顛倒數組元素：arrayObject.reverse()，會改變原數組。
選定元素：arrayObject.slice(start, end)

數組排序：arrayObject.sort(sortMethod)，如果不指定<方法函數>，則按Unicode碼順序排列。

function sortAsc(a, b) { // 升序
	return a - b;
}

function sortDes(a, b) { // 降序
	return b - a;
}

var arr = new Array("80", "16", "50", "6", "100", "1");
document.write(arr.sort() + "<br />"); // 1,100,16,50,6,80
document.write(arr.sort(sortAsc) + "<br />"); // 1,6,16,50,80,100
document.write(arr.sort(sortDes)); // 100,80,50,16,6,1

6.編程練習

// 輸出當前時間信息：年、月、日、星期
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var date = new Date();
document.write(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + weekday[date.getDay()]);

// 將字符串分割爲字符串數組
var scoreStr = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var scoreArr = scoreStr.split(";");

// 從數組中提取成績並計算平均值
var score = 0;
for(var i = 0; i < scoreArr.length; i++) {
    score += parseInt(scoreArr[i].substring(scoreArr[i].indexOf(":") + 1));
}
document.write("--班級平均分爲:" + score/scoreArr.length);

慕課網前端學習筆記—JavaScript入門篇&進階篇

JavaScript入門篇

1.基礎語法

2.窗口交互

3.DOM操作

4.綜合練習

JavaScript進階篇

1.基礎語法

2.數組

3.流程控制語句

4.函數

5.事件

6.內置對象

爲什麼要⽤ Foundry

【筆記】動手學深度學習-預備知識

py發送email

MySQL 分庫分表方案，總結太全了。。

Qt/C++音視頻開發71-指定mjpeg/h264格式採集本地攝像頭/存儲文件到mp4/設備推流/採集推流

WPF開源輕便、快速的桌面啓動器

公司來了個新同事，把 DDD 運用得爐火純青！

JavaWeb-Demo1：用戶登錄

JavaScript 實現二級聯動&三級聯動下拉列表

VirtualBox Issue: 不能爲虛擬電腦 xxx 打開一個新任務. The VM session was aborted.

JavaWeb-Demo2：文件下載

JQuery-Demo3：圖片的功能：高亮/隱藏

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

linux以太網驅動總結