JavaScript學習筆記一20200323

今天算開篇,說一點宏觀的瞭解,我覺得了解了大的方向會對學習有一點動力。前面的文章我也在第一篇裏面至少加了一個大綱。
JavaScript 是屬於 web 的語言。
JavaScript 被設計爲向 HTML 頁面增加交互性。
通過嵌入HTML來實現各種酷炫的動態效果,爲用戶提供賞心悅目的瀏覽效果。
也可以用於控制cookies以及基於Node.js技術進行服務器端編程。
知識結構:
架構
一個小栗子體驗一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title> 
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>我的第一個 JavaScript 程序</h1>
<p id="demo">這是一個段落</p>

<button type="button" onclick="displayDate()">顯示日期</button>

</body>
</html>

例子1
點擊“顯示時間”,會出現時間:
例子2
給一個大的框架:
框架
但是不會嚴格這個順序寫。
JavaScript 能夠直接寫入 HTML 輸出流中:

<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>

YANGZI
JavaScript 用法
HTML 中的腳本必須位於 <script></script> 標籤之間。
腳本可被放置在 HTML 頁面的 <body><head> 部分中。
也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。外部 JavaScript 文件的文件擴展名是 .js。
外部腳本不能包含 <script> 標籤。
注意:
如需使用外部文件,請在 <script> 標籤的 “src” 屬性中設置該 .js 文件。這個叫做初始化。
看一下初始化的位置:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

一、JavaScript 輸出
JavaScript 沒有任何打印或者輸出的函數。
JavaScript 可以通過不同的方式來輸出數據:

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法將內容寫到 HTML 文檔中。
  • 使用 innerHTML 寫入到 HTML 元素。
  • 使用 console.log() 寫入到瀏覽器的控制檯。

使用window.alert()

<script>
window.alert(5 + 6);
</script>

效果
寫到 HTML 文檔

<script>
document.write(Date());
</script>

1
操作 HTML 元素

<p id="demo">我的第一個段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>

就會只顯示:段落已修改。
寫到控制檯
如果您的瀏覽器支持調試,你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。

<p>
瀏覽器中(Chrome, IE, Firefox) 使用 F12 來啓用調試模式, 在調試窗口中點擊 "Console" 菜單。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
alert(c)
</script>

console.log() 方法能夠讓你看到你在頁面中的輸出內容,讓你更容易調試javascript;與alert相比,console不會打斷你頁面的操作,你可以在控制檯輸入 console
二、JavaScript 字面量
一個字面量是一個常量
數字(Number)字面量
可以是整數或者是小數,或者是科學計數(e)。

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 12e5;
</script>

表示1200000
字符串(String)字面量
可以使用單引號或雙引號 :

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>

表達式字面量
用於計算:

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

數組(Array)字面量
定義一個數組:

[40, 100, 1, 5, 25, 10]

對象(Object)字面量
定義一個對象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函數(Function)字面量
定義一個函數:

function myFunction(a, b) { return a * b;}

三、JavaScript 變量
在編程語言中,變量用於存儲數據值。
JavaScript 使用關鍵字 var 來定義變量, 使用等號來爲變量賦值

<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

在指令式語言中,變量通常是可變的。字面量是一個恆定的值。
四、JavaScript 操作符
算術運算符

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>

賦值運算符

<p id="demo"></p>
<script>
var x, y, z;
x = 5
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = z;
</script>

注意:
語句是用分號分隔
JavaScript 語句通常以關鍵詞爲開頭。 var 關鍵詞告訴瀏覽器創建一個新的變量
JavaScript 保留了一些標識符爲自己所用。
JavaScript 同樣保留了一些關鍵字,這些關鍵字在當前的語言版本中並沒有使用,但在以後 JavaScript 擴展中會用到。
JavaScript 標識符必須以字母、下劃線(_)或美元符($)開始。
後續的字符可以是字母、數字、下劃線或美元符(數字是不允許作爲首字符出現的,以便 JavaScript 可以輕易區分開標識符和數字)。
JavaScript 中,常見的是駝峯法的命名規則,如 lastName (而不是lastname)。
JavaScript 是腳本語言。瀏覽器會在讀取代碼時,逐行地執行腳本代碼。而對於傳統編程來說,會在執行前對所有代碼進行編譯。
保留字:
保留字
註釋:

// 我不會執行

五、JavaScript 數據類型
數字,字符串,數組,對象等等

var length = 16;                                  // Number 通過數字字面量賦值
var points = x * 10;                              // Number 通過表達式字面量賦值
var lastName = "Johnson";                         // String 通過字符串字面量賦值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通過數組字面量賦值
var person = {firstName:"John", lastName:"Doe"};  // Object 通過對象字面量賦值

具體寫一下:
字符串(String)、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空(Null)、未定義(Undefined)。
字符串是存儲字符(比如 “Bill Gates”)的變量。


字符串可以是引號中的任意文本。可以使用單引號或雙引號。 可以在字符串中使用引號,只要不匹配包圍字符串的引號即可
JavaScript 只有一種數字類型。數字可以帶小數點,也可以不帶 極大或極小的數字可以通過科學(指數)計數法來書寫
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

布爾(邏輯)只能有兩個值:true 或 false。
創建名爲 cars 的數組:
 var cars=new Array();
 cars[0]="Saab";
 cars[1]="Volvo";
 cars[2]="BMW";
 var cars=new Array("Saab","Volvo","BMW");

對象由花括號分隔。在括號內部,對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔
 var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的對象 (person) 有三個屬性:firstname、lastname 以及 id。

var person={
 firstname : "John",
 lastname  : "Doe",
 id        :  5566
 };

Undefined 這個值表示變量不含有值。
可以通過將變量的值設置爲 null 來清空變量。
當您聲明新變量時,可以使用關鍵詞 "new" 來聲明其類型
 var carname=new String;
 var x=      new Number;
 var y=      new Boolean;
 var cars=   new Array;
 var person= new Object;

JavaScript具有隱含的全局概念,意味着你不聲明的任何變量都會成爲一個全局對象屬性。

六、JavaScript 函數
JavaScript 語句可以寫在函數內,函數可以重複引用:
引用一個函數 = 調用函數(執行函數內的語句)。

function myFunction(a, b) {
    return a * b;   // 返回 a 乘於 b 的結果
}

局部 JavaScript 變量
在 JavaScript 函數內部聲明的變量(使用 var)是局部變量,所以只能在函數內部訪問它。(該變量的作用域是局部的)。
您可以在不同的函數中使用名稱相同的局部變量,因爲只有聲明過該變量的函數才能識別出該變量。
只要函數運行完畢,本地變量就會被刪除。
局部變量比同名全局變量的優先級高,所以局部變量會隱藏同名的全局變量。
七、JavaScript 對大小寫敏感。
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時,請留意是否關閉大小寫切換鍵。
函數 getElementByIdgetElementbyID 是不同的。
同樣,變量 myVariableMyVariable 也是不同的。
八、JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆蓋了所有的字符,包含標點等字符。
HTML Unicode(UTF-8) 參考手冊


不知道大家有沒有感覺,js這個東東似乎和傳統的編程語言很相像,比如說C語言,int整型變量不就是裏面的var嘛?(雖然這句話有問題,但是打個比方嘛,哈哈哈哈哈隔) 今天到這裏了,我得去PK高數了,白白。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章