JavaScript基礎知識總結
一、概述：
JavaScript是目前web開發中不可缺乏的腳本語言，js不須要編譯便可運行，運行在客戶端，須要經過瀏覽器來解析執行JavaScript代碼。javascript
誕生於1995年，當時的主要目的是驗證表單的數據是否合法。css
JavaScript原本應該叫Livescript，可是在發佈前夕，想搭上當時超熱的java順風車，臨時把名字改成了JavaScript。（也就是說js跟java沒有關係，當時只是想借助java的名氣）。html
js組成部分：java
- ECMA： Script:構成了JS核心的語法基礎
- BOM：Brower Object Model 瀏覽器對象模型
- DOM: Document Object Model 文檔對象模型
（1）核心（ECMAScript）：這一部分主要是js的基本語法。web
（2）BOM：Brower Object Model（瀏覽器對象模型），主要是獲取瀏覽器信息或操做瀏覽器的，例如：瀏覽器的前進與後退、瀏覽器彈出提示框、瀏覽器地址欄輸入網址跳轉等操做等。瀏覽器
（3）DOM：Document Object Model（文檔對象模型），此處的文檔暫且理解爲html，html加載到瀏覽器的內存中，可使用js的DOM技術對內存中的html節點進行修改，用戶從瀏覽器看到的是js動態修改後的頁面。（增刪改查）安全
二、特色：
- 交互性（它能夠作的就是信息的動態交互）
- 安全性（不容許直接訪問本地硬盤）
- 跨平臺性（只要是能夠解析js的瀏覽器均可以執行，和平臺無關）
三、和Java區別：
- java：須要先編譯成字節碼文件，再執行
- JavaScript：直譯式腳本文件
四、做用
avaScript 被用來改進設計、驗證表單、檢測瀏覽器、建立cookies，等等。JavaScript 是因特網上最流行的腳本語言，而且可在全部主要的瀏覽器中運行，好比： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。cookie
在目前學習階段只要記住最經常使用的二個：
（1）運態修改html及css代碼
（2）驗證表單函數
五、書寫位置
5.一、內嵌式：學習
理論上js能夠書寫在頁面的任意位置。
<script>
alert("內嵌式")
</script>
5.二、外鏈式：
首先新建一個文件類型爲.js的文件，而後在該文件中寫js語句，經過script標籤對引入到html頁面中。
<script src="js文件路徑地址">這裏不能寫js語句</script>
5.三、行內式：
直接書寫在標籤身上，是一個簡寫的事件，因此又稱之爲事件屬性。 onclick單擊事件
<input type="button" value="點我呀!" onclick="alert('點我幹啥!^6^');">
<button onclick="alert('恭喜你,中 500 萬.');">點我呀!</button>
六、註釋：
單行註釋： // 註釋語句 快捷鍵ctrl+/ 多行註釋： /* 註釋語句 */ 快捷鍵ctrl+shift+/ 注意：多行註釋相互不能嵌套使用，只能在多行註釋裏面使用單行註釋！
七、數據類型：
Js中的數據類型：
數值型：number（凡是數字都是數值型，不區分整數和小數） 字符串：string（凡是引號包裹起來的內容所有都是字符串） 布爾：boolean（true、false） 對象類型：object（特殊取值null） 未定義型：undefined
對比java中的數據類型：
整數：byte short int long 小數：float double 字符：char 布爾：boolean 字符串：String
八、變量：
8.一、定義：就是存放數據的、內療能夠存儲任意數據
8.二、聲明變量：
var 變量名稱 = 存儲的數據; (variable 變量)
8.三、變量命名規範：
1. 只能由字母、數字、_（下劃線）、$（美圓符號）組成。 2. 不能以數字開頭。 3. 命名中不能出現-（js會理解成減號進行減法的操做），不能和關鍵字衝突。
js是弱類型語言，不重視類型的定義，但js會根據爲變量賦值的狀況自定判斷該變量是何種類型：
數值型：var i = 1; var d = 2.35; 字符串：var str = "用心學習"; 布爾型：var b = true;
對比Java:java是強類型的語言，注重類型的定義，Java定義類型以下：
整型：int i = 1; 浮點型：double d = 2.35; 字符串：String str = 「用心學習」; 布爾型：boolean b = true;
總結：js中變量的定義。只要加一個var就行。java則使用什麼類型的變量就要定義什麼類型的。
九、檢測數據類型：
typeof(value); 或者typeof value; 返回這個變量的類型. 說明 : 同一個變量, 能夠進行不一樣類型的數據賦值.
<script type="text/javascript"> var a; alert(typeof a); // undefined a = 998; alert(typeof a); // number a = "用心學習"; alert(typeof a); // string a = true; alert(typeof a); // boolean </script>
十、算術運算符
+ - * / % ++ --
注意：
1. 因爲js中的小數和整數都是number類型，不存在相似整數除以整數仍是整數的結論。 2. 字符串和其餘的數據使用+號運算，會鏈接成一個新的字符串。 3. 字符串使用除了+之外的運算符：若是字符串自己是一個數字，那麼會自動轉成number進行運算，不然就會返回一個NaN的結果，表示這不是一個數字。NaN：not a number
<script>
alert(1234 / 1000 * 1000); // 1234
var s = "12";
s -= 10;
alert(s); // 2
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一個數字
var s = "12";
s += 10;
alert(s); // 1210
</script>
十一、關係（比較）運算符
> >= < <= != == 等於（只比較內容） === 恆等於（比較內容的同時還要比較數據類型） 注意：關係運算符返回的結果只有兩個：true / false
<script>
// 請問1 : 3 > 5, 結果爲 ?
alert(3 > 5); // false
// 請問2 : 「22」 == 22 結果爲 ?
alert("22" == 22); // true (僅僅判斷數值)
// 請問3 : 「22」 === 22 結果爲 ?
alert("22" === 22); // false (恆等於, 數值和類型都要相等)
</script>
十二、邏輯運算符
&& 與 true&&false ====>false || 或 true||false ====>true ！ 非 !true ====>false false（理解）：false, 0, null, undefined true（理解）：true, 非0, 非null, 非undefined 針對 && 順口溜: 找第一個出現的假值. (一假即假) 針對 || 順口溜: 找第一個出現的真值. (一真即真)
演示一：
<script>
// 短路與 (一假即假)
// 口訣 : 找第一個爲假的值.
// 請問1 : 8 < 7 && 3 < 4, 結果爲 ?
alert(8 < 7 && 3 < 4); // false
// 請問2 : -2 && 6 + 6 && null 結果爲 ?
alert(-2 && 6 + 6 && null); // null
// 請問3 : 1 + 1 && 0 && 5 結果爲 ?
alert(1 + 1 && 0 && 5); // 0
</script>
演示二:
<script>
// 短路或 : 一真即真.
// 口訣 : 找第一個爲真的值.
// 請問1 : 0 || 23 結果爲 ?
alert(0 || 23); // 23
// 請問2 : 0 || false || true 結果爲 ?
alert(0 || false || true); // true
// 請問3 : null || 10 < 8 || 10 + 10結果爲 ?
alert(null || 10 < 8 || 10 + 10); // 20
// 請問4 : null || 10 < 8 || false結果爲 ?
alert(null || 10 < 8 || false); // false
</script>
1三、三元運算符：
條件？表達式1：表達式2 若是條件爲true，返回表達式1的結果 若是條件爲false，返回表達式2的結果
演示：
<script>
// 請問1 : 3 ? 「aaa」 : 「bbb」 結果爲 ?
alert(3 ? "aaa" : "bbb"); // aaa
// 請問2 : 0 ? 「ccc」 : 「ddd」 結果爲 ?
alert(0 ? "ccc" : "ddd"); // ddd
</script>
1四、if條件語句
這個和Java中if語句同樣。
演示：
<script>
var score = 59;
if (score >= 90) {
alert("優秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>
1五、switch分支結構
這個和java中switch結構同樣。只是Java中表達式爲：常量 整型（去long）、字符、字符串
演示：
<script>
var score = 59;
// 需求 : 將須要一個整型數值, 不想要小數點.
// window 對象的 parseInt 方法.
score = window.parseInt(score / 10 + "");
// alert(score);
switch (score) {
case 10:
case 9:
alert("優秀!");
break;
case 8:
alert("良好!");
break;
case 7:
case 6:
alert("及格!");
break;
default:
alert("不及格!");
break;
}
</script>
1六、循環結構 while、do-while. for;
while(循環條件){循環體;}
do{循環體;}while(循環條件);
for(循環變量賦初值；循環條件；循環變量增值){循環語句;}
console.log（...）; 以日誌的形式在控制檯輸出結果！
演示：
<script>
// 需求 : 統計 1~100 之間可以被3和7整除的數字個數
var count = 0;
// 1\. 遍歷 1~100 之間的全部整型數值
for (var i = 1; i <= 100; i++) {
// 2\. 判斷
if (i % 3 == 0 && i % 7 == 0) {
// alert(i);
console.log(i);
// 3\. 累加個數
count++;
}
}
// 4\. 查看結果
// alert(count);
console.log(count);
1七、循環嵌套
演示案例9*9乘法表
<style>
table {
/* 將 table 表格的線變成了細線 */
border-collapse: collapse;
/*color: red;*/
border-color: red;
}
</style>
<script>
// 需求 : 九九乘法口訣表
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
document.write("<caption>九九乘法口訣表</caption>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
1八、自定義函數
函數是命名的獨立的語句段，這個語句段能夠被看成一個總體來引用和執行：
格式：
function 函數名(形式參數){函數體}
調用函數：函數名(實際參數);
18.一、函數只有被調用後纔會執行
18.二、若是函數須要返回值、直接使用return 返回、不會像java同樣要考慮返回值的類型
<script type="text/javascript">
// 定義一個函數 : function
function demo2() {
return 666;
}
// 調用函數 :
alert(demo2());
</script>
18.三、若是函數須要傳遞參數、不須要指定參數的類型、直接使用變量便可
<script type="text/javascript">
// 定義一個函數 : function function demo3(a, b) {
return a + b;
}
// 調用函數 :
alert(demo3(10, 20));//顯示30
</script>
18.四、js中出現二個重名的函數名、後者會把前面的覆蓋掉
對比java、java有重載（同名不一樣參）、重寫（同名同參同返回值類型、方法體不同）
演示：
<script type="text/javascript">
// 定義一個函數 : function
function demo4(a, b) {
alert("調用1...");
}
function demo4() {
alert("調用2...");
}
demo4(10, 20);
demo4();
</script>
1九、匿名函數
匿名函數是沒有名字的函數
function(形式參數){函數體}
調用方式：將匿名函數賦值給一個變量，經過變量名調用函數
定義函數並賦值給變量：var fn = function(形式參數){函數體}
調用函數：fn(實際參數);
演示：
<script type="text/javascript">
// 匿名函數 : 沒有名稱的函數
var func = function(i, u) {
alert(i + " love " + u);
}
// 調用函數 :
func("柳巖", "小白");//顯示柳巖love小白
</script>
20、案例-輪播圖
說明1 : script 標籤須要放在 body 標籤以後. 說明2 : window.setInterval(「字符串函數名稱()」, 時間毫秒數); 說明3 : window.setInterval(函數名稱, 時間毫秒數); 說明4 : window.setInterval(匿名函數, 時間毫秒數); 推薦使用
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
div {
width: 80%;
margin: 50px auto;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="../img/01.jpg" alt="圖片">
</div>
</body>
實現一：
<script>
// 需求 : 動態獲取頁面中的 img 標籤, 而後修改 img 標籤的 src 屬性.
// 1\. 獲取 img 標籤
var img = document.getElementById("img");
// alert(img);
// 定義一個變量
var count = 1;
// 1.2 定義一個函數 function changeImageSrc() {
count++;
img.src = "../img/0"+count+".jpg";
// 判斷
if (count == 8) {
count = 0;
}
}
// 2\. 循環切換圖片
// window.setInterval(函數, 時間毫秒); 在指定的時間毫秒間隔, 不斷調用第一個參數傳入的函數.
// 調用方式一 :
// window.setInterval("changeImageSrc()", 1000);
// 調用方式二 :
window.setInterval(changeImageSrc, 1000);
</script>
實現二：
<script>
// 需求 : 動態獲取頁面中的 img 標籤, 而後修改 img 標籤的 src 屬性.
// 1. 獲取 img 標籤 var img = document.getElementById("img");
// alert(img); // 定義一個變量 var count = 1;
// 2. 循環切換圖片
// window.setInterval(匿名函數, 時間毫秒); 在指定的時間毫秒間隔, 不斷調用第一個參數傳入的匿名函數.
window.setInterval(function() {
count++;
img.src = "../img/0"+count+".jpg";
// 判斷
if (count == 8) {
count = 0;
}
}, 1000);
</script>
2一、js事件
21.一、事件概述：
事件三要素： 1. 事件源：被監聽的html元素（就是這個事件加給誰），就是某個（某些）html標籤 2. 事件類型：某類動做，例如點擊事件，移入移除事件，敲擊鍵盤事件等 3. 執行指令：事件觸發後須要執行的代碼，通常使用函數進行封裝 語法格式：事件源.事件類型=執行指令
21.二、經常使用的事件：
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
// 窗口 : window 對象提供了一個事件類型 onload 頁面加載完成事件.
// 事件源 : window 事件類型 : 頁面加載完成事件 (onload) 執行指令: 就是賦值的 function 函數.
window.onload = function () {
// 獲取頁面的 btn 按鈕
var btn = document.getElementById("btn");
// alert(btn);
// 給 btn 按鈕綁定一個事件 (單擊事件 onclick)
// 事件源 : btn按鈕 事件類型 : 單擊事件 (onclick) 執行指令: 就是賦值的 function 函數.
btn.onclick = function () {
alert("恭喜你, 中了 500 萬!");
}
}
</script>
</head>
<body>
<button id="btn">按鈕</button>
</body>
</html>
相關文章
- 1. JavaScript基礎知識總結
- 2. javascript基礎知識總結
- 3. javascript基礎知識點總結
- 4. JavaScript中BOM的基礎知識總結
- 5. JavaScript基礎知識易錯點總結
- 6. 【JavaScript】基礎知識點總結
- 7. javascript基礎知識總結（概念篇）
- 8. javascript基礎知識點總結（二）
- 9. JavaScript基礎知識總結筆記
- 10. javascript基礎知識點總結（一）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 算法總結-雙指針
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
