初識 JavaScript
文章目錄
初識 JavaScript
1.JavaScript 是什麼
2 JavaScript的作用
JS初體驗
一.引入js文件
二. JavaScript註釋
三.單行註釋
四. 多行註釋
五.輸入輸出語句
六. 聲明變量
1. 賦值
2. 變量的初始化
3. 變量語法擴展
4. 變量命名規範
三. 數字類型
1.數字型 Number
2.字符串型 String
3.字符串轉義符
4.字符串長度
5. 字符串拼接
四.獲取變量數據類型
五.數據類型轉換
1.轉換爲字符串
2. 轉換爲數字型
六.常見關鍵字+保留字
1.關鍵字：
2.保留字：
1.JavaScript 是什麼
- JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言 （Script 是腳本的意思）
- 腳本語言：不需要編譯，運行過程中由 js 解釋器( js 引擎）逐行來進行解釋並執行
2 JavaScript的作用
- 表單動態校驗（密碼強度檢測） （ JS 產生最初的目的 ）
- 網頁特效
- 服務端開發(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物聯網(Ruff)
- 遊戲開發(cocos2d-js)
JS初體驗
一.引入js文件
-
行內式
<input type="button" value="點我試試" onclick="alert('Hello World')" />- 可以將單行或少量 JS 代碼寫在HTML標籤的事件屬性中（以 on 開頭的屬性），如：onclick
- 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
- 可讀性差， 在html中編寫JS大量代碼時，不方便閱讀；
- 引號易錯，引號多層嵌套匹配時，非常容易弄混；
- 特殊情況下使用
-
內嵌式
<script> alert('Hello World~!'); </script>- 可以將多行JS代碼寫到 script 標籤中
-
外部JS文件
<script src="this.js"></script>
二. JavaScript註釋
- flex子項目佔的份數
- align-self控制子項自己在側軸的排列方式
- order屬性定義子項的排列順序（前後順序）
三.單行註釋
單行註釋的註釋方式如下：
// 我是一行註釋
// 用來註釋單行文字（ == 快捷鍵 ctrl + / == ）
四. 多行註釋
多行註釋的註釋方式如下：
/*
這個是
多行註釋
*/
/* */ 用來註釋多行文字（ 默認快捷鍵== alt + shift + a== ）
五.輸入輸出語句
| 方法 | 說明 | 歸屬 |
|---|---|---|
| alert(msg) | 瀏覽器彈出警示框 | 瀏覽器 |
| console.log(msg) | 瀏覽器控制檯打印輸出信息 | 瀏覽器 |
| prompt(info) | 瀏覽器彈出輸入框，用戶可以輸入 | 瀏覽器 |
注：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息。
六. 聲明變量
// 聲明變量
var age;
- var 是一個 JS關鍵字，用來聲明變量( variable 變量的意思 )。
- age 是程序員定義的變量名
1. 賦值
age = 10; // 給 age 這個變量賦值爲 10
- = 用來把右邊的值賦給左邊的變量空間中 此處代表賦值的意思
- 變量值是程序員保存到變量空間裏的值
2. 變量的初始化
var age = 2; // 聲明變量同時賦值爲 2
// 聲明一個變量並賦值， 我們稱之爲變量的初始化。
3. 變量語法擴展
-
更新變量
一個變量被重新復賦值後，它原有的值就會被覆蓋，變量值將以最後一次賦的值爲準。
var age = 18; age = 81; // 最後的結果就是81因爲18 被覆蓋掉了 -
同時聲明多個變量，只需要寫一個 var， 多個變量名之間使用英文逗號隔開。
var age = 10, name = 'zs', sex = 2; -
聲明變量特殊情況
| 情況 | 說明 | 結果 |
|---|---|---|
| var age ; console.log (age); | 只聲明 不賦值 | undefined |
| console.log(age) | 不聲明 不賦值 直接使用 | 報錯 |
| age = 10; console.log (age); | 不聲明 只賦值 | 10 |
4. 變量命名規範
- 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號
( $ )組成，如：usrAge, num01, _name - 嚴格區分大小寫。var app; 和 var App; 是兩個變量
- 不能 以數字開頭。
- 不能 是關鍵字、保留字。例如：var、for、while
- 遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。
三. 數字類型
1.數字型 Number
JavaScript 數字類型既可以保存整數，也可以保存小數(浮點數）。
var age = 21; // 整數
var Age = 21.3747; // 小數
1 . 數字型進制
最常見的進制有二進制、八進制、十進制、十六進制。
// 1.八進制數字序列範圍：0~7
var num1 = 07; // 對應十進制的7
var num2 = 019; // 對應十進制的19
var num3 = 08; // 對應十進制的8
// 2.十六進制數字序列範圍：0~9以及A~F
var num = 0xA;
2 . 數字型三個特殊值
-
Infinity ，代表無窮大，大於任何數值
-
-Infinity ，代表無窮小，小於任何數值
-
NaN ，Not a number，代表一個非數值
3 . isNaN，判斷一個變量是否爲非數字的類型，返回 true 或者 false。
2.字符串型 String
字符串型可以是引號中的任意文本，其語法爲 雙引號 “” 和 單引號’’
var strMsg = "週末去郊遊"; // 使用雙引號表示字符串
var strMsg2 = '週一再去吧！'; // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 好的！; // 報錯，沒使用引號，會被認爲是js代碼，但js沒有這些語法
3.字符串轉義符
| 轉義符 | 解釋說明 |
|---|---|
| \n | 換行符，n 是 newline 的意思 |
| \ \ | 斜槓 \ |
| ’ | ’ 單引號 |
| " | ”雙引號 |
| \t | tab 縮進 |
| \b | 空格 ，b 是 blank 的意思 |
4.字符串長度
通過字符串的 length 屬性可以獲取整個字符串的長度。
var strMsg = "我有多少個字符呢";
alert(strMsg.length);
5. 字符串拼接
-
多個字符串之間可以使用 + 進行拼接，其拼接方式爲 字符串 + 任何類型 = 拼接之後的新字符串
-
拼接前會把與字符串相加的任何類型轉成字符串，再拼接成一個新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 數值字符串 "相加" alert('100' + '100'); // 100100 //1.3 數值字符串 + 數值 alert('11' + 12); // 1112
布爾型Boolean
布爾類型有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯）。
布爾型和數字型相加的時候， true 的值爲 1 ，false 的值爲 0。
console.log(true + 1); // 2
console.log(false + 1); // 1
四.獲取變量數據類型
獲取檢測變量的數據類型
typeof 可用來獲取檢測變量的數據類型
var num = 2;
console.log(typeof num) // 結果 number 數字類型
五.數據類型轉換
1.轉換爲字符串
2. 轉換爲數字型
六.常見關鍵字+保留字
1.關鍵字：
是指 JS本身已經使用了的字，不能再用它們充當變量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。
2.保留字：
實際上就是預留的“關鍵字”，意思是現在雖然還不是關鍵字，但是未來可能會成爲關鍵字，同樣不能使用它們當變量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
5-4,打卡,儘快入門JS基礎,加油,後續持續出學習筆記整理…
之前的HTML+CSS整理筆記可以點擊<html+css知識點整理>