javaScript筆記

學習JavaScript（一）通過W3School學習
- js輸出
- js陳述句
- js語法
- JavaScript 識別符號
- JavaScript 算數運算子
- JavaScript 賦值運算子
- JavaScript 邏輯運算子型別運算子位運算子
- JavaScript 資料型別
- JavaScript 函式
- JavaScript 物件
- js事件
- JavaScript 字串
- JavaScript 陣列
- JavaScript 陣列排序
- JavaScript 陣列迭代方法
- - JavaScript 獲取日期方法

學習JavaScript（一）通過W3School學習

js輸出

1.使用 window.alert() 寫入警告框
2.document.write() 寫入 HTML 輸出
3.innerHTML 寫入 HTML 元素
4.console.log() 寫入瀏覽器控制臺

<p id="demo"></p>
 <button type="button" onclick="document.write(5 + 6)">試一試</button>
<script>
//輸出
 document.getElementById("demo").innerHTML = 5 + 6;
 //彈框
 window.alert(5 + 6);
 //輸出控制臺，通過 F12查看
 console.log(5 + 6);
</script>

js陳述句

JavaScript 陳述句由以下構成：值、運算子、運算式、關鍵詞和注釋，

js語法

var x, y;	// 如何宣告變數
x = 7; y = 8;	// 如何賦值
z = x + y;	// 如何計算值
//實列
<p id="demo"></p>
<script>
var x, y;
x = 7;
y = 8;
document.getElementById("demo").innerHTML = x + y;
</script>

JavaScript 識別符號

所有 JavaScript 變數必須以唯一的名稱的標識，

這些唯一的名稱稱為識別符號，
識別符號可以是短名稱（比如 x 和 y），或者更具描述性的名稱（age、sum、totalVolume），
構造變數名稱（唯一識別符號）的通用規則是：
名稱可包含字母、數字、下劃線和美元符號
名稱必須以字母開頭
名稱也可以 $ 和 _ 開頭（但是在本教程中我們不會這么做）
名稱對大小寫敏感（y 和 Y 是不同的變數）
保留字（比如 JavaScript 的關鍵詞）無法用作變數名稱

JavaScript 算數運算子

一個簡單的表格是這么創建的：

運算子	描述
+	加法
-	減
*	乘法
/	除法
%	取模（余數）
++	遞加
–	遞減

JavaScript 賦值運算子

運算子	例子	等同于
=	x=y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 運算子</h1>

<p>對數字和字串相加，會回傳字串，</p>

<p id="demo"></p>

<script>
var x = 7 + 8;
var y = "7" + 8;
var z = "Hello" + 7;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>

</body>
</html>

JavaScript 邏輯運算子型別運算子位運算子

1.邏輯運算子
&& 邏輯與
|| 邏輯或
! 邏輯非
2.型別運算子
typeof 回傳變數的型別，
instanceof 回傳 true，如果物件是物件型別的實體，
3.位運算子

運算子	描述	例子	等同于	結果	十進制
&	與	5 & 1	0101 & 0001	0001	1
	或	5 1	0101 0001	0101	5
~	非	~ 5	~0101	1010	10
^	異或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符號右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

第二行是"| " 或，‘|”因為表格原因顯示不出來

JavaScript 資料型別

字串值，數值，布林值，陣列，物件，

var length = 7;                             // 數字
var lastName = "Gates";                      // 字串
var cars = ["Porsche", "Volvo", "BMW"];         // 陣列
var x = {firstName:"Bill", lastName:"Gates"};    // 物件 
//超大或超小的數值可以用科學計數法來寫：
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

JavaScript 函式

函式是被設計為執行特定任務的代碼塊,會在某代碼呼叫它時被執行，
JavaScript 函式語法
JavaScript 函式通過 function 關鍵詞進行定義，其后是函式名和括號 ()，
函式名可包含字母、數字、下劃線和美元符號（規則與變數名相同），
一個具有注腳的文本，

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函式</h2>

<p>本例呼叫了一個執行計算的函式，然后回傳結果：</p>

<p id="demo"></p>

<script>
var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
    return a * b;
}
</script>

</body>
</html>

JavaScript 物件

和Java中的面向物件一樣的，舉列在真實生活中，汽車是一個物件，

汽車有諸如車重和顏色等屬性，也有諸如啟動和停止的方法，
物件名.屬性名

js事件

HTML 事件可以是瀏覽器或用戶做的某些事情，

下面是 HTML 事件的一些例子：

HTML 網頁完成加載
HTML 輸入欄位被修改
HTML 按鈕被點擊
通常，當事件發生時，用戶會希望做某件事，

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<button onclick="this.innerHTML=Date()">時間是？</button>

</body>
</html>

onchange HTML 元素已被改變
onclick 用戶點擊了 HTML 元素
onm ouseover 用戶把滑鼠移動到 HTML 元素上
onm ouseout 用戶把滑鼠移開 HTML 元素
onkeydown 用戶按下鍵盤按鍵
onl oad 瀏覽器已經完成頁面加載

JavaScript 字串

使用單引號或雙引號：
var carname = “Porsche 911”;
var carname = ‘Porsche 911’;
字串方法
1.length 屬性回傳字串的長度：
2.indexOf() 方法回傳字串中指定文本首次出現的索引（位置）：
3.如果未找到文本， indexOf() 和 lastIndexOf() 均回傳 -1，
4.lastIndexOf() 方法向后進行檢索（從尾到頭），這意味著：假如第二個引數是 50，則從位置 50 開始檢索，直到字串的起點，
5.檢索字串中的字串search() 方法搜索特定值的字串，并回傳匹配的位置：
6.slice() 方法提取字串的某個部分并在新字串中回傳被提取的部分，
7.substring() 方法substring() 類似于 slice()，不同之處在于 substring() 無法接受負的索引，該方法設定兩個引數：起始索引（開始位置），終止索引（結束位置），
8.substr() 方法substr() 類似于 slice()，不同之處在于第二個引數規定被提取部分的長度，
9.替換字串內容replace() 方法用另一個值替換在字串中指定的值：
10.toUpperCase() 把字串轉換為大寫：
11. toLowerCase() 把字串轉換為小寫：
12. concat() 連接兩個或多個字串：
13. trim() 方法洗掉字串兩端的空白符：警告：Internet Explorer 8 或更低版本不支持 trim() 方法，
14. charAt() 方法回傳字串中指定下標（位置）的字串：
15. charCodeAt() 方法回傳字串中指定索引的字符 unicode 編碼：
16. split() 將字串轉換為陣列：

JavaScript 陣列

陣列用于在單一變數中存盤多個值，和Java基本是一樣的，陣列是物件
陣列是一種特殊型別的物件，在 JavaScript 中對陣列使用 typeof 運算子會回傳 “object”，
創建陣列
var cars = [“Saab”, “Volvo”, “BMW”];或者 var cars = new Array(“Saab”, “Volvo”, “BMW”);是一樣的
陣列的方法，把陣列轉換為字串
JavaScript 方法 toString() 把陣列轉換為陣列值（逗號分隔）的字串，

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

pop() 方法從陣列中洗掉最后一個元素：
join() 方法也可將所有陣列元素結合為一個字串，
push() 方法（在陣列結尾處）向陣列添加一個新的元素：
shift() 方法會洗掉首個陣列元素，并把所有其他元素“位移”到更低的索引，位移與彈出等同，但處理首個元素而不是最后一個，
unshift() 方法（在開頭）向陣列添加新元素，并“反向位移”舊元素，
splice() 方法可用于向陣列添加新項：
concat() 方法通過合并（連接）現有陣列來創建一個新陣列，concat() 方法也可以將值作為引數（將陣列與值合并），
該方法會從開始引數選取元素，直到結束引數（不包括）為止，
slice() 方法用陣列的某個片段切出新陣列，
length 屬性提供了向陣列追加新元素的簡易方法：
delete 運算子來洗掉：delete 陣列[0];

JavaScript 陣列排序

sort() 方法以字母順序對陣列進行排序，但是對數字排列不準確，通過一個比值函式來修正此問題

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 陣列排序</h1>

<p>單擊按鈕以升序對陣列進行排序，</p>

<button onclick="myFunction()">試一試</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
	//升序
  points.sort(function(a, b){return a - b});
  //降序
  //points.sort(function(a, b){return b - a}); 
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

JavaScript 陣列迭代方法

forEach() 方法為每個陣列元素呼叫一次函式（回呼函式），

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.forEach()</h1>

<p>為每個元素呼叫一次函式，</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

JavaScript 獲取日期方法

1.getTime() 方法回傳自 1970 年 1 月 1 日以來的毫秒數：
var d = new Date();
document.getElementById(“demo”).innerHTML = d.getTime();
2.getFullYear() 方法以四位數字形式回傳日期年份：
3.getMonth() 以數字（0-11）回傳日期的月份：
4.getDate() 方法以數字（1-31）回傳日期的日：
5.getHours() 方法以數字（0-23）回傳日期的小時數：
6.getSeconds() 方法以數字（0-59）回傳日期的秒數：
7.getMilliseconds() 方法以數字（0-999）回傳日期的毫秒數：
8.getDay() 方法以數字（0-6）回傳日期的星期名（weekday）：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292977.html

標籤：其他

上一篇：使用JavaScript從當前URL的QueryString中獲取指定的引數

下一篇：手把手教你制作簡易的計算器

2021-08-09打卡js筆記