計算機編程基礎、初識JavaScript、變量、數據類型、擴展閱讀
計算機編程基礎
- 編程語言
- 計算機基礎
1. 編程語言
1.1 編程
編程：就是讓計算機爲解決某個問題而使用某種程序設計語言編寫程序代碼，並最終得到結果的過程。計算機程序：就是計算機所執行的一系列的 指令集合，而程序全部都是用我們所掌握的語言來編寫的，所以人們要控制計算機一定要通過計算機語言向計算機發出命令。
注意：上面所定義的計算機指的是 任何能夠執行代碼的設備，可能是智能手機、ATM機、黑莓PI、服務器等等。
1.2 計算機語言
計算機語言 指用於 人與計算機之間通訊的語言，它們是人與計算機之間傳遞信息的 媒介。計算機語言的種類非常的多，總的來說可以分成 機器語言 ， 彙編語言 和 高級語言 三大類。
實際上計算機最終所執行的都是 機器語言，它是由"0"和"1"組成的二進制數，二進制是計算機語言的基礎。
0 = 00000000 1 = 00000001 2 = 00000010 3 = 00000011 4 = 00000100
5 = 00000101 6 = 00000110 7 = 00000111 8 = 00001000 9 = 00001001 10 = 00001010
1.3 編程語言
可以通過類似於人類語言的"語言"來控制計算機，讓計算機爲我們做事情，這樣的語言就叫做編程語言。編程語言是用來控制計算機的一系列指令，它有固定的格式和詞彙（不同編程語言的格式和詞彙不一樣），必須遵守。
如今通用的編程語言有兩種形式： 彙編語言 和 高級語言 。
-
彙編語言 和機器語言實質是相同的，都是直接對硬件操作，只不過指令採用了英文縮寫的標識符，容易識別和記憶。
-
高級語言 主要是相對於低級語言而言，它並不是特指某一種具體的語言，而是包括了很多編程語言，常用的有c語言、c++、Java、C#、python、PHP、JavaScript、Go語言、Objective-C、Swift等。
C語言：pus("你好"); PHP：echo "你好"; Java：System.out.println("你好"); JavaScript：alert("你好");
1.4 翻譯器
高級語言所編制的程序不能直接被計算機識別，必須經過轉換才能被執行，爲此，我們需要一個翻譯器。
翻譯器可以將我們所編寫的源代碼爲機器語言，這也被稱爲二進制化。記住1和0。
1.5 編程語言和標記語言區別
-
編程語言 有很強的邏輯和行爲能力。在編程語言裏，你會看到很多if else、for、while等具有邏輯性和行爲能力的指令，這是主動的。
-
標記語言（html）不用於向計算機發出指令，常用於格式化和鏈接。標記語言的存在是用來被讀取的，他是被動的。
總結
-
計算機可以幫助人類解決某些問題
-
程序員利用編程語言編寫程序發出指令控制計算機來實現這些任務
-
編程語言有機器語言、彙編語言、高級語言
-
高級語言需要一個翻譯器轉換爲計算機識別的機器語言
-
編程語言是主動的有很強的邏輯性
2. 計算機基礎
2.1 計算機組成
2.2 數據存儲
-
計算機內部使用二進制 0 和 1 來表示數據。
-
所有數據，包括文件、圖片等最終都是以二進制數據（0和1）的形式存放在硬盤中的。
-
所有程序，包括操作系統，本質都是各種數據，也以二進制數據的形式存放在硬盤中。 平時我們所說的安裝軟件，其實就是把程序文件複製到硬盤中。
-
硬盤、內存都是保存的二進制數據。
2.3 數據存儲單位
bit < byte < kb < GB < TB < …
- 位(bit): 1kb可以保存一個0或者1（最小的存儲單位）
- 字節(Byte): 1Byte = 8bit
- 千字節(KB): 1KB = 1024B
- 兆字節(MB): 1MB = 1024KB
- 吉字節(GB): 1GB = 1034MB
- 太字節(TB): 1TB = 1024GB
…
2.4 程序運行
- 打開某個程序時，先從硬盤中把程序的代碼加載到內存中
- CPU執行內存中的代碼
注意：之所以要內存的一個重要原因，是因爲cpu運行太快了，如果只從硬盤中讀數據，會浪費cpu性能，
所以，才使用存取速度更快的內存來保存運行時的數據。（內存是電，硬盤是機械）
01 - 編程語言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01 - 編程語言</title>
<script type="text/javascript">
alert('我是編程語言，來控制電腦網頁彈出你好');
alert('我是編程語言，來控制電腦網頁彈出你好');
</script>
</head>
<body>
</body>
</html>
初識JavaScript
- 初識JavaScript
- JavaScript 註釋
- JavaScript 輸入輸出語句
1. 初始JavaScript
1.1 JavaScript是什麼
- 布蘭登·艾奇 1961~
- 神奇的大哥用10天完成JavaScript設計。
- 最初命名爲LiveScript，後來在與Sun合作之後將其改名爲JavaScript。
![在這裏插入圖片描述]()
- JavaScript是世界上最流行的語言之一，是一種運行在客戶端的腳-本語言（Script是腳本的意思）
- 腳本語言：不需要編譯，運行過程中的js解釋器（js引擎）逐行來進行解釋並執行
- 現在也可以基於 Node.js技術進行服務器端編程
爲了閱讀方便，我們後面把JavaScript 簡稱爲 JS。
1.2 JavaScript的作用
- 表單動態校驗（密碼強度檢測）（JS產生最初的目的）
- 網頁特效
- 服務端開發（Node.js）
- 桌面程序（Electron）
- App(Cordova)
- 控制硬件-物聯網（Ruff）
- 遊戲開發（cocos2d-js）
1.3 HTML/CSS/JS的關係
1.4 瀏覽器執行JS簡介
瀏覽器分成兩部分：渲染引擎和JS引擎
- 渲染引擎：用來解析HTML與CSS，俗稱內核，比如chrome瀏覽器的blink，老版本的webkit
- JS引擎：也稱爲JS解釋器。用來讀取網頁中的JavaScript代碼。對其處理後運行，比如chrome瀏覽器的V8
瀏覽器本身並不會執行JS代碼，而是通過內置JavaScript引擎（解釋器）來執行JS代碼。JS引擎執行代碼時逐行解釋每一句源碼（轉換爲機器語言），然後由計算機去執行，所以JavaScript語言歸爲腳本語言，會逐行解釋執行。
1.5 JS的組成
-
ECMAScript
ECMAScript 是由ECMA國際（歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱爲JavaScript或JScript，但實際上後兩者是ECMAScript語言的實現和擴展。
![在這裏插入圖片描述]()
ECMAScript：ECMAScript規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。更多參看MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
-
DOM - 文檔對象模型
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程接口。
通過DOM提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色等）。 -
BOM - 瀏覽器對象模型
BOM（Browser Object Model，簡稱BOM）是指瀏覽器對象模型，它提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉、獲取分辨率等。
1.6 JS初體驗
JS有3種書寫位置，分別爲行內、內嵌和外部。
- 行內式JS
<input type="button" value="點我試試" onclick="alert('Hello World')">
- 可以將單行或少量JS代碼寫在HTML標籤的事件屬性中（以on開頭的屬性），如：onclick
- 注意單雙引號的使用：在HTML中我們推薦使用雙引號，JS中我們推薦使用單引號
- 可讀性差，在html中編寫JS大量代碼時，不方便閱讀
- 引號易錯，引號多層嵌套匹配時，非常容易弄混
- 特殊情況下使用
JS 有3種書寫位置，分別爲行內、內嵌和外部。
- 內嵌JS
<script>
alert('Hello World~!');
</script>
- 可以將多行JS代碼寫到 <script> 標籤中
- 內嵌JS是學習時常用的方式
JS 有3種書寫位置，分別爲行內、內嵌和外部。
- 外部JS文件
<script src="my.js"></script>
- 利用HTML頁面代碼結構化，把大段JS代碼獨立到HTML頁面之外，既美觀，也方便文件級別的複用
- 引用外部JS文件的 script 標籤中間不可以寫代碼
- 適合於JS代碼量比較大的情況
02 - JS初體驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02 - JS初體驗</title>
<!-- 2. 內嵌式的js -->
<script type="text/javascript">
alert('Hello World');
</script>
<!-- 3. 外部js script 雙標籤 -->
<script src="my.js"></script>
</head>
<body>
<!-- 1. 行內式的js 直接寫到元素的內部 -->
<input type="button" value="點我試試" onclick="alert('Hello World')">
</body>
</html>
my.js
alert('如果我是DJ，你還愛我嗎？');
2. JavaScript註釋
2.1 單行註釋
爲了提高代碼的可讀性，JS與CSS一樣，也提供了註釋功能。JS中的註釋主要有兩種，分別是單行註釋和多行註釋。
單行註釋的註釋方式如下：
// 我是一行文字，不想被JS引擎執行，所以註釋起來
// 用來註釋單行文字（ 快捷鍵 ctrl + / ）
2.2 多行註釋
多行註釋的註釋方式如下：
/*
獲取用戶年齡和姓名
並通過提示框顯示出來
*/
/* */ 用來註釋多行文字（ 默認快捷鍵alt + shift + a ）
快捷鍵修改爲：ctrl + shift + /
03 - JS註釋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03 - JS註釋</title>
<script>
// 1. 單行註釋 ctrl + /
/*
2. 多行註釋
*/
</script>
</head>
<body>
</body>
</html>
3. JavaScript輸入輸出語句
爲了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：
| 方法 | 說明 | 歸屬 |
|---|---|---|
| alert(msg) | 瀏覽器彈出警示框 | 瀏覽器 |
| console.log(msg) | 瀏覽器控制檯打印輸出信息 | 瀏覽器 |
| prompt(info) | 瀏覽器彈出輸入框，用戶可以輸入 | 瀏覽器 |
注意：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息。
04 - JS輸入輸出語句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04 - JS輸入輸出語句</title>
<script>
// 這是一個輸入框
prompt('請輸入您的年齡');
// alert 彈出警示框 輸出的 展示給用戶的
alert('計算的結果是');
// console 控制檯輸出 給程序員測試用的
console.log('我是程序員能看到的');
</script>
</head>
<body>
</body>
</html>
變量
- 變量概述
- 變量的使用
- 變量語法擴展
- 變量命名規範
- 交換變量案例
1. 變量概述
1.1 什麼是變量
白話：變量就是一個裝東西的盒子。
通俗：變量是用於存放數據的 容器 。 我們通過 變量名 獲取數據，甚至數據可以修改。
1.2 變量在內存中的存儲
本質：變量是程序在內存中申請的一塊用來存放數據的空間。類似我們酒店的房間，一個房間就可以看做是一個變量。
2. 變量的使用
變量在使用分爲兩步：1. 聲明變量 2. 賦值
2.1 聲明變量
// 聲明變量
var age; // 聲明一個 名稱爲age 的變量
- var 是一個JS關鍵字，用來聲明變量（variable變量的意思）。使用該關鍵字聲明變量後，計算機會自動爲變量分配內存空間，不需要程序員管
- age 是程序員定義的變量名，我們要通過變量名來訪問內存中分配的空間
2.2 賦值
age = 10; // 給age這個變量賦值爲10
- = 用來把右邊的值賦給左邊的變量空間中 此處代表賦值的意思
- 變量值是程序員保存到變量空間裏的值
2.3 變量的初始化
var age = 18; // 聲明變量同時賦值爲 18
聲明一個變量並賦值，我們稱之爲 變量的初始化。
05 - 變量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05 - 變量</title>
<script>
// 1. 聲明瞭一個age的變量
var age;
// 2. 賦值 把值存入這個變量中
age = 18;
// 3. 輸出結果
console.log(age);
// 4. 變量的初始化
var myname = 'bing';
console.log(myname);
</script>
</head>
<body>
</body>
</html>
06 - 變量案例
案例：變量的使用
有個叫卡卡西的人在旅店登記的時候前臺讓他填一張表，這張表裏的內容要存到電腦上，表中的內容有：姓名、年齡、郵箱、家庭住址和工資，存儲之後需要把這些信息顯示出來，所顯示的內容如下：我叫旗木卡卡西，我住在火影村，我今年30歲了，我的郵箱是 [email protected]，我的工資2000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06 - 變量案例</title>
<script>
var myname = '旗木卡卡西';
var address = '火影村';
var age = 30;
var email = '[email protected]';
var gz = 2000;
console.log(myname); // 旗木卡卡西
console.log(address); // 火影村
console.log(age); // 30
console.log(email); // [email protected]
console.log(gz); // 2000
</script>
</head>
<body>
</body>
</html>
07 - 變量案例彈出用戶名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07 - 變量案例彈出用戶名</title>
<script>
// 1. 用戶輸入姓名 存儲到一個 myname的變量裏面
var myname = prompt('請輸入您的名字');
// 2. 輸出這個用戶名
alert(myname);
</script>
</head>
<body>
</body>
</html>
3. 變量語法擴展
3.1 更新變量
一個變量被重新賦值後，它原有的值就會被覆蓋，變量值將以最後一次賦的值爲準。
var age = 18;
age = 81; // 最後的結果就是81因爲18被覆蓋掉了
3.2 同時聲明多個變量
同時聲明多個變量時，只需要寫一個var，多個變量名之間使用英文逗號隔開。
var age = 10, name = 'zs', sex = 2;
3.3 聲明變量特殊情況
| 情況 | 說明 | 結果 |
|---|---|---|
| var age; console.log(age); | 只聲明 | 不賦值 undefined |
| console.log(age); | 不聲明 不賦值 直接使用 | 報錯 |
| age = 10;console.log(age); | 不聲明 只賦值 | 10 |
08 - 變量的語法擴展
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08 - 變量的語法擴展</title>
<script>
// 1. 更新變量
var myname = 'bing';
console.log(myname); // bing
myname = 'yuan';
console.log(myname); // yuan
// 2. 聲明多個變量
// var age = 18;
// var address = '火影村';
// var gz = 2000;
var age = 18,
address = '火影村';
gz = 2000;
// 3. 聲明變量的特殊情況
// 3.1 只聲明不賦值 結果是？ 程序也不知道里面存的是啥 所以結果是 undefined 未定義的
var sex;
console.log(sex); // undefined
// 3.2 不聲明 不賦值 直接使用某個變量會報錯滴
// console.log(tel); // error
// 3.3 不聲明直接賦值使用
qq = 110;
console.log(qq); // 110
</script>
</head>
<body>
</body>
</html>
4. 變量命名規範
- 由字母（A-Z a-z）、數字（0-9）、下劃線（_）、美元符號（$）組成，如：usrAge，num01，_name
- 嚴格區分大小寫。var app; 和 var App; 是兩個變量
- 不能以數字開頭。 18age 是錯誤的
- 不能是關鍵字、保留字。例如：var、for、while
- 變量名必須有意義。MMD BBD nl-age
- 遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。myFirstName
以下哪些是合法的變量名？
| 第一組 | 第二組 | 第三組 |
|---|---|---|
| var a | var userName | var theWorld |
| var 1 | var $name | var the world |
| var age18 | var _sex | var the_world |
| var 18age | var &_sex | var for |
09 - 變量命名規範
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>09 - 變量命名規範</title>
<script>
var app = 10;
var App = 100;
console.log(app); // 10
console.log(App); // 100
// var 18age;
// var var; 因爲var 有特殊意義了，這個叫做關鍵字 不能作爲變量名的 for while if
// name 我們儘量不要直接使用name作爲變量名
// console.log(tel); // error
console.log(name);
</script>
</head>
<body>
</body>
</html>
5. 交換變量案例
10 - 交換兩個變量值
要求：交換兩個變量的值（實現思路：使用一個臨時變量用來做中間存儲）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>10 - 交換兩個變量值</title>
<script>
var temp; // 聲明一個臨時變量爲空
var apple1 = '青蘋果';
var apple2 = '紅蘋果';
temp = apple1; // 把右邊給左邊
apple1 = apple2;
apple2 = temp;
console.log(apple1); // 紅蘋果
console.log(apple2); // 青蘋果
</script>
</head>
<body>
</body>
</html>
小結
-
爲什麼需要變量？
因爲我們一些數據需要保存，所以需要變量 -
變量是什麼？
變量就是一個容器，用來存放數據的。方便我們以後使用裏面的數據 -
變量的本質是什麼？
變量是內存裏的一塊空間，用來存儲數據 -
變量怎麼使用的？
我們使用變量的時候，一定要聲明變量，然後賦值
聲明變量本質是去內存申請空間。 -
什麼是變量的初始化？
聲明變量並賦值我們稱之爲變量的初始化 -
變量命名規範有哪些？
變量名儘量要規範，見名知意——駝峯命名法 -
交換2個變量值的思路？
js 是編程語言有很強的邏輯性在裏面： 實現這個要求的思路 先怎麼做後怎麼做
- 我們需要一個臨時變量幫我們
- 把apple1 給我們的臨時變量 temp
- 把apple2 裏面的蘋果給 apple1
- 把臨時變量裏面的值 給 apple2
數據類型
- 數據類型簡介
- 簡單數據類型
- 獲取變量數據類型
- 數據類型轉換
1. 數據類型簡介
1.1 爲什麼需要數據類型
在計算機中，不同的數據所需佔用的存儲空間是不同的，爲了便於把數據分成所需內存大小不同的數據，
充分利用存儲空間，於是定義了不同的數據類型。
簡單來說，數據類型就是數據的類別型號。比如姓名"張三"，年齡18，這些數據的類型是不一樣的。
1.2 變量的數據類型
變量是用來存儲值的所在處，它們有名字和數據類型。變量的數據類型決定了如何將代表這些值的位存儲到計算機的內存中。JavaScript 是一種弱類型或者說動態語言。這意味着不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。
var age = 10; // 這是一個數字型
var areYouOk = '是的'; // 這是一個字符串
在代碼運行時，變量的數據類型是由JS引擎 根據 = 右邊變量值的數據類型來判斷的，運行完畢之後， 變量就確定了數據類型。
JavaScript擁有動態類型，同時也意味着相同的變量可用作不同的類型：
var x = 6; // x爲數字
var x = 'Bing'; // x爲字符串
1.3 數據類型的分類
JS把數據類型分爲兩類：
- 簡單數據類型（Number，String，Boolean，Undefined，Null）
- 複雜數據類型（object）
11 - 變量的數據類型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11 - 變量的數據類型</title>
<script>
// int num = 10; java
// var num; // 這裏的num我們是不確定屬於哪種數據類型的
var num = 0; // num 屬於數字型
// js的變量數據類型是隻有程序運行過程中，根據等號右邊的值來確定的
var str = 'bing'; // str 字符串型
// js是動態語言 變量的數據類型是可以變化的
var x = 10; // x 是數字型
x = 'bing'; // x 字符串型
</script>
</head>
<body>
</body>
</html>
2. 簡單數據類型
2.1 簡單數據類型（基本數據類型）
JavaScript中的簡單數據類型及說明如下：
| 簡單數據類型 | 說明 | 默認值 |
|---|---|---|
| Number | 數字型，包含整型值和浮點型值，如21、0.21 | 0 |
| Boolean | 布爾值類型，如true、false，等價於1和0 | false |
| String | 字符串類型，如"張三"注意js裏面，字符串都帶引號 | " " |
| Undefined | var a;聲明瞭變量a但是沒有給值，此時a=Undefined | undefiend |
| Null | var a = null;聲明瞭變量a爲空值 | null |
2.2 數字型 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;
現階段我們只需要記住，在JS中八進制前面加0，十六進制前面加0x
2. 數字型範圍
JavaScript中數值的最大和最小值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
- 最大值：Number.MAX_VALUE，這個值爲：1.7976931348623157e+308
- 最小值：Number.MIN_VALUE，這個值爲：5e-324
3. 數字型三個特殊值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
- Infinity，代表無窮大，大於任何數值
- -Infinity，代表無窮小，小於任何數值
- NaN，Not a number，代表一個非數值
12 - 數字型Number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12 - 數字型Number</title>
<script>
var num = 10; // num 數字型
var PI = 3.14; // PI 數字型
// 1. 八進制 0 ~ 7 我們程序裏面數字前面加0 表示八進制
var num1 = 010;
console.log(num1); // 010八進制 轉換爲 十進制就是8
var num2 = 012;
console.log(num2); // 10
// 2. 十六進制 0 ~ 9 a ~ f #ffffff 數字的前面加0x表示十六進制
var num3 = 0x9;
console.log(num3); // 9
var num4 = 0xa;
console.log(num4); // 10
// 3. 數字型的最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 4. 數字型的最小值
console.log(Number.MIN_VALUE); // 5e-324
// 5. 無窮大
console.log(Number.MAX_VALUE * 2); // Infinity 無窮大
// 6. 無窮小
console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮大
// 7. 非數字
console.log('bing' - 100); // NaN
</script>
</head>
<body>
</body>
</html>
4. isNaN()
用來判斷一個變量是否爲非數字的類型，返回true或者false
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false 21 不是一個非數字
var usrName = "andy";
console.log(isNaN(userName)); // true "andy"是一個非數字
13 - isNaN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>13 - isNaN</title>
<script>
// isNaN() 這個方法用來判斷非數字並且返回一個值 如果是數字返回的是false 如果不是數字返回的是true
console.log(isNaN(12)); // false
console.log(isNaN('bing')); // true
</script>
</head>
<body>
</body>
</html>
2.3 字符串型 String
字符串型可以是引號中的任意文本，其語法爲 雙引號" " 和 單引號 ‘’
var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串
var strMsg2 = '我愛喫豬蹄~'; // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 我愛大肘子; // 報錯 沒使用引號，會被認爲是js代碼，但js沒有這些語法
因爲HTML標籤裏面的屬性使用的是雙引號，JS這裏我們更 推薦使用單引號。
1. 字符串引號嵌套
JS 可以用 單引號嵌套雙引號 ，或者用 雙引號嵌套單引號 (外雙內單，外單內雙)
var strMsg = '我是"高帥富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含''
// 常見錯誤
var badQuotes = 'What on earth?"; // 報錯，不能 單雙引號搭配
2. 字符串轉義符
類似HTML裏面的特殊字符，字符串中也有特殊字符，我們稱之爲轉義符。
轉義符都是 \ 開頭的，常用的轉義符及其說明如下：
| 轉義符 | 解釋說明 |
|---|---|
| \n | 換行符 n是newline的意思 |
| \\ | 斜槓 \ |
| \’ | 單引號 ‘’ |
| \" | 雙引號 " |
| \t | 縮進tab |
| \b | 空格 b是blank 的意思 |
14 - 字符串型String
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>14 - 字符串型String</title>
<script>
// 'bing' 'bing冰' '12' 'true'
var str = '我是一個"高富帥"的程序員';
console.log(str);
// 字符串轉義字符 都是用 \ 開頭 但是這些轉義字符寫道引號裏面
var str1 = "我是一個'高富帥'的\n程序員";
console.log(str1);
</script>
</head>
<body>
</body>
</html>
15 - 彈出警示框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 - 彈出警示框案例</title>
<script>
alert('酷熱難耐，火辣的太陽底下，我挺拔的身姿，成爲了最爲獨特的風景。\n我審視四周，這裏，是我的舞臺，我就是天地間的王者。\n這一刻，我豪氣沖天，終於大喊一聲："收破爛啦～"');
</script>
</head>
<body>
</body>
</html>
3. 字符串長度
字符串是由若干字符組成的，這些字符的數量就是字符串的長度。
通過字符串的 length 屬性可以獲取整個字符串的長度。
var strMsg = "我是帥氣多金的程序猿！";
alert(strMsg.length); // 顯示 11
4. 字符串拼接
- 多個字符串之間可以使用 + 進行拼接，其拼接方式爲 字符串 + 任何類型 = 拼接之後的新字符串
- 拼接前會把與字符串相加的任何類型轉成字符串，再拼接成一個新的字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 數值字符串 + 數值
alert('11' + 12); // 1112
+ 號總結口訣：數值相加 ，字符相連
16 - 字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16 - 字符串拼接</title>
<script>
// 1. 檢測獲取字符串的長度 length
var str = 'my name is andy';
console.log(str.length); // 15
// 2. 字符串的拼接 + 只要有字符串和其他類型相拼接 最終的結果是字符串類型
console.log('沙漠' + '駱駝'); // 字符串的 沙漠駱駝
console.log('bing' + 18); // 'bing18'
console.log('bing' + true); // bingtrue
console.log(12 + 12); // 24
console.log('12' + 12); // '1212'
</script>
</head>
<body>
</body>
</html>
5. 字符串拼接加強
console.log('bing' + 18); // 只要有字符就會相連
var age = 18;
// console.log('bingage歲啦'); // 這樣不行哦
console.log('bing' + age); // bing18
console.log('bing' + age + '歲啦'); // bing18歲啦
- 我們經常會將字符串和變量來拼接，因爲變量可以很方便地修改裏面的值
- 變量是不能添加引號的，因爲加引號的變量會變成字符串
- 如果變量兩側都有字符串拼接，口訣 " 引引加加 " ,刪掉數字，變量寫加中間
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17 - 字符串拼接加強</title>
<script>
console.log('bing' + 18); // bing18
console.log('bing' + 18 + '歲'); // bing18歲
var age = 19;
console.log('bingage歲'); // bingage歲
// 我們變量不要寫到字符串裏面，是通過和字符串相連的方式實現的
console.log('bing' + age + '歲'); // bing19歲
// 變量和字符串相連的口訣： 引引加加
console.log('bing' + age + '歲'); // // bing19歲
</script>
</head>
<body>
</body>
</html>
18 - 顯示年齡案例
彈出一個輸入框，需要用戶輸入年齡，之後彈出一個警示框顯示“您今年 xx 歲啦”（xx 表示剛纔輸入的年齡）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18 - 顯示年齡案例</title>
<script>
// 彈出一個輸入框（prompt)，讓用戶輸入年齡（用戶輸入）
// 把用戶輸入的值用變量保存起來,把剛纔輸入的年齡與所要輸出的字符串拼接 （程序內部處理）
// 使用alert語句彈出警示框（輸出結果）
var age = prompt('請輸入您的年齡');
var str = '您今年已經 ' + age + ' 歲了';
alert(str);
</script>
</head>
<body>
</body>
</html>
2.4 布爾型 Boolean
布爾類型有兩個值：true和false，其中true表示真（對），而false表示假（錯）。
布爾型和數字型相加的時候，true的值爲1 ，false的值爲0。
console.log(true + 1); // 2
console.log(false + 1); // 1
2.5 Undefined和Null
一個聲明後沒有被賦值的變量會有一個默認值 undefined(如果進行相連或者相加時，注意結果）
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
一個聲明變量給 null 值，裏面存的值爲空（學習對象時，我們繼續研究null)
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
19 - 布爾型Boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19 - 布爾型Boolean</title>
<script>
var flag = true; // flag 布爾型
var flag1 = false; // flag1 布爾型
console.log(flag + 1); // 2 true 參與加法運算當1來看
console.log(flag1 + 1); // 1 false 參與加法運算當0來看
// 如果一個變量聲明未賦值 就是undefined未定義數據類型
var str;
console.log(str); // undefined
var variable = undefined;
console.log(variable + 'bing'); // undefinedbing
console.log(variable + 1); // NaN undefined 和數字相加 最後的結果是 NaN
// null 空值
var space = null;
console.log(space + 'bing'); // nullbing
console.log(space + 1); // 1
</script>
</head>
<body>
</body>
</html>
3. 獲取變量數據類型
3.1 獲取檢測變量的數據類型
typeof 可用來獲取檢測變量的數據類型
var num = 18;
console.log(typeof num) // 結果 number
不同類型的返回值
| 類型 | 例 | 結果 |
|---|---|---|
| String | typeof "小白" |
"string" |
| Number | typeof 18 | "number" |
| Boolean | typeof true | "boolean" |
| ``Undefined | typeof undefined | "undefined" |
| Null | typeof null | "object" |
20 - 獲取變量數據類型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20 - 獲取變量數據類型</title>
<script>
var num = 10;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object
// prompt 取過來的值是 字符型的
var age = prompt('請輸入您的年齡');
console.log(age);
console.log(typeof age); // string
</script>
</head>
<body>
</body>
</html>
3.2 字面量
字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值。
- 數字字面量：8，9，10
- 字符串字面量：
'程序員'，"大前端" - 布爾字面量：true，false
21 - 字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>21 - 字面量</title>
<script>
console.log(18); // 18
console.log('18'); // 18
console.log(true); // true
console.log(undefined); // undefiend
console.log(null); // null
</script>
</head>
<body>
</body>
</html>
4. 數據類型轉換
4.1 什麼是數據類型轉換
使用表單、prompt 獲取過來的數據默認是字符串類型的，此時就不能直接簡單的進行加法運算，而需要轉換變量的數據類型。通俗來說，就是把一種數據類型的變量轉換成另外一種數據類型。
我們通常會實現3種方式的轉換：
- 轉換爲字符串類型
- 轉換爲數字型
- 轉換爲布爾型
4.2 轉換爲字符串
| 方式 | 說明 | 案例 |
|---|---|---|
| toString() | 轉成字符串 | var num=1; alert(num.toString()); |
| String()強制轉換 | 轉成字符串 | var num=1; alert(String(num)); |
| 加號拼接字符串 | 和字符串拼接的結果都是字符串 | var num=1; alert(num+“我是字符串”); |
- toString() 和 String()使用方式不一樣。
- 三種轉換方式，我們更喜歡用第三種加號拼接字符串轉換方式，這一種方式也稱之爲隱式轉換。
22 - 轉換爲字符型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>22 - 轉換爲字符型</title>
<script>
// 1. 把數字型轉換爲字符串型 變量.toString()
var num = 10;
var str = num.toString();
console.log(str); // 10
console.log(typeof str); // string
// 2. 我們利用 String(變量)
console.log(String(num)); // 10
// 3. 利用 + 拼接字符串的方法實現轉換效果 隱式轉換
console.log(num + ''); // 10
</script>
</head>
<body>
</body>
</html>
4.3 轉換爲數字型（重點）
| 方式 | 說明 | 案例 |
|---|---|---|
| parseInt(String)函數 | 將string類型轉成整數數值型 | parseInt(‘78’) |
| parseFloat(String)函數 | 將string類型轉成浮點數數值型 | parseFloat(‘78.21’) |
| Number()強制轉換函數 | 將string類型轉成數值型 | Number(‘12’) |
| js隱式轉換（- * /） | 利用算術運算隱式轉換爲數值型 | ‘12’ - 0 |
- 注意parseInt和parseFloat 單詞的大小寫，這2個是重點
- 隱式轉換是我們在進行算數運算的時候，JS自動轉換了數據類型
23 - 轉換爲數字型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23 - 轉換爲數字型</title>
<script>
var age = prompt('請輸入您的年齡');
// 1. parseInt(變量) 可以把字符型的轉換爲數字型得到是 整數
console.log(parseInt(age)); // 19
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('120px')); // 120 會去到這個px單位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(變量) 可以把字符型的轉換爲數字型得到是小數 浮點數
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 會去掉這個px單位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(變量)
var str = '123';
console.log(Number(str)); // 123
console.log(Number('12')); // 12
// 4. 利用了算數運算 - * / 隱式轉換
console.log('12' - 0); // 12
console.log('123' - '120'); // 3
console.log('123' * 1); // 123
</script>
</head>
<body>
</body>
</html>
案例 1：計算年齡
此案例要求在頁面中彈出一個輸入框，我們輸入出生年份後， 能計算出我們的年齡。
案例分析
- 彈出一個輸入框（prompt)，讓用戶輸入出生年份（用戶輸入）
- 把用戶輸入的值用變量保存起來，然後用今年的年份減去變量值，結果就是現在的年齡（程序內部處理）
- 彈出警示框（alert) ，把計算的結果輸出（輸出結果）
24 - 計算年齡案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>24 - 計算年齡案例</title>
<script>
// 1. 彈出輸入框，輸入出生年份，並存儲在變量中
var year = prompt('請您輸入您的出生年份'); // 用戶輸入
// 2. 用今年減去剛纔輸入的年份
var age = 2020 - year; // year取過來的是字符串型 但是這裏用的減法有隱式轉換
// 3. 彈出提示框
alert('您今年已經' + age + '歲了'); // 輸出結果
</script>
</head>
<body>
</body>
</html>
案例 2：簡單加法器
計算兩個數的值， 用戶輸入第一個值後，繼續彈出第二個輸入框並輸入第二個值，
最後通過彈出窗口顯示出兩次輸入值相加的結果。
案例分析
- 先彈出第一個輸入框，提示用戶輸入第一個值 保存起來
再彈出第二個框，提示用戶輸入第二個值 保存起來 - 把這兩個值相加，並將結果賦給新的變量（注意數據類型轉換）
- 彈出警示框（alert) ，把計算的結果輸出（輸出結果）
25 - 簡單加法器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25 - 簡單加法器案例</title>
<script>
// 1. 先彈出第一個輸入框，提示用戶輸入第一個值
var num1 = prompt('請您輸入第一個值：');
// 2. 再彈出第二個框，提示用戶輸入第二個值
var num2 = prompt('請您輸入第二個值：');
// 3. 將輸入的值轉換爲數字型後，把這兩個值相加，並將結果賦給新的變量
var result = parseFloat(num1) + parseFloat(num2);
// 4. 彈出結果
alert('您的結果是:' + result);
</script>
</head>
<body>
</body>
</html>
4.4 轉換爲布爾型
| 方式 | 說明 | 案例 |
|---|---|---|
| Boolean()函數 | 其他類型轉換成布爾值 | Boolean(‘true’); |
- 代表 空、否定的值 會被轉換爲false，如 ‘’、0、NaN、null、undefined
- 其餘值都會被轉換爲 true
26 - 轉換爲布爾型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>26 - 轉換爲布爾型</title>
<script>
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log('------------------------------');
console.log(Boolean('123')); // true
console.log(Boolean('你好嗎')); // true
console.log(Boolean('我很好')); // true
</script>
</head>
<body>
</body>
</html>
擴展閱讀
- 解釋型語言和編譯型語言
- 標識符、關鍵字、保留字
1. 解釋型語言和編譯型語言
1.1 概述
計算機不能直接理解任何除機器語言以外的語言，所以必須要把程序員所寫的程序語言翻譯成機器語言才能執行程序。程序語言翻譯成機器語言的工具，被稱爲翻譯器。
- 翻譯器翻譯的方式有兩種：一個是 編譯，另外一個是 解釋。兩種方式之間的區別在於 翻譯的時間點不同
- 編譯器是在 代碼執行之前進行編譯，生成中間代碼文件
- 解釋器是在 運行時進行及時解釋，並立即執行(當編譯器以解釋方式運行的時候，也稱之爲解釋器)
1.2 執行過程
類似於請客喫飯：
編譯語言：首先把所有菜做好，才能上桌喫飯
解釋語言：好比喫火鍋，邊喫邊涮，同時進行
2. 標識符、關鍵字、保留字
1. 標識符
標識(zhi)符：就是指開發人員爲變量、屬性、函數、參數取的名字。
標識符不能是關鍵字或保留字。
2. 關鍵字
關鍵字：是指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 等。
3. 保留字
保留字：實際上就是預留的“關鍵字”，意思是現在雖然還不是關鍵字，但是未來可能會成爲關鍵字，同樣不
能使用它們當變量名或方法名。
包括：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 等。
注意：如果將保留字用作變量名或函數名，那麼除非將來的瀏覽器實現了該保留字，否則很可能收不到任何錯
誤消息。當瀏覽器將其實現後，該單詞將被看做關鍵字，如此將出現關鍵字錯誤。
問答
- 1GB = ?MB
1GB = 1024MB - 1MB = ?KB
1MB = 1024KB
-
ECMAScript的含義？
ECMAScript規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。 -
DOM的含義？
通過DOM提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色等）。 -
BOM的含義？
通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉、獲取分辨率等。
- JavaScript可以書寫在HTML頁面中哪些位置？
<html>
<head>
<!-- here? -->
<link rel="stylesheet" href="style.css">
<!-- here? -->
</head>
<body>
<!-- here? -->
<p>All the page content ...</p>
<!-- or here? -->
</body>
</html>
將腳本放在頁面底部
儘量把可以放在底部的js放在底部，因爲加載js的時候會阻塞DOM渲染，
如果大量的js放在頭部，用戶打開網頁時，就會看到一片白色，要等待js加載完成後，才能繼續渲染DOM，用戶才能看到頁面內容。所以爲了優化用戶體驗，一般把可以放在底部的js放在底部。
至於那些不能放在底部的js就不要放在底部：舉例，一個網站的頭部的元素標籤他是由js輸出的，那麼這個js就不能放在底部，不然的話，你會發現渲染內容完成後，網站頭部會慢半拍出現，這個也是不好的用戶體驗
- 四種輸出語句的輸出數據的方式有哪些不同 ？
- window.alert() 把小括號裏的內容，以彈窗的方式顯示出來
window是BOM對象，指的是整個瀏覽器，可以省略不寫 - console，會在控制檯輸出內容
console.log('控制檯.日誌()'); console.warn('控制檯.警告()'); console.error('控制檯.錯誤()'); prompt('請輸入年齡');瀏覽器彈出輸入框
document.write()，直接在頁面上輸出內容
document 指的是我們所寫的HTML文檔
write() 把小括號裏的內容輸出到頁面上
- 三種方式中哪個方法可以讓用戶輸入內容？
prompt('輸入年齡');
-
var age; var Age; 兩個變量是不是同一個變量？
不是 -
代碼 var 1user = “tom”; 是否正確？？
否 -
交換兩個變量值的七種方案
1. 交換變量值方案一
var t;
t = a;
a = b;
b = t;
首先把a的值存儲到臨時變量中，然後b賦值給a，最後拿出臨時變量中的a值賦給b
2. 交換變量值方案二
a = a + b;
b = a - b;
a = a - b;
讓a先變成a與b的和（也可以換成a和b的差，一樣的） ，和減去b巧妙的得到了a的變量值賦予b ，再通過和減去a的值得到了b的值賦予a，或者是下面的變式（差的形式）
3. 交換變量值方案三
通過底層位運算來進行交換變量值
a ^= b;
b ^= a;
a ^= b;
// 還可以這樣寫
a = (b^=a^=b)^a;
4. 交換變量值方案四
把a先變成了一個對象，這個對象保存着應該交換後的鍵值對，最後賦值搞定
a = {a:b,b:a};
b = a.b;
a = a.a;
5. 交換變量值方案五
數組
a = [a,b];
b = a[0];
a = a[1];
6. 交換變量值方案六
簡單粗暴一行代碼交換了a和b的變量值
a = [b,b=a][0];
根據運算符優先級，首先執行b=a，此時的b直接得到了a的變量值，然後一步數組索引讓a得到了b的值（簡直不能再厲害）
7. 交換變量值方案七
利用了ES6的解構賦值語法，它允許我們提取數組和對象的值，對變量進行賦值
[a,b] = [b,a];
-
isNaN(1)的結果是什麼？
false -
isNaN(“1”)的結果是什麼？
false -
isNaN(“test”)的結果是什麼？
true -
空字符串的長度是多少？
0 -
11 + "12"+ 13的結果是什麼？111213 -
true + false + 1 + ""的結果是什麼？2 -
如果兩次收集到的數據沒有轉化爲數值型，得到的結果是什麼？
NaN
知識總結
-
變量可以保存數據
-
使用關鍵字var聲明一個變量
-
使用"="對聲明的變量進行賦值
-
什麼是更新變量？
變量多次賦值之後，以最後一次的賦值爲準 -
如何同時聲明多個變量？
通過var 變量名1，變量名2，變量名3;可以同時生命多個變量 -
變量聲明後未賦值，變量保存的數據是什麼？
變量只聲明而不賦值的話，變量的值默認是undefined -
是否可以直接使用未聲明直接賦值的變量？
可以給未聲明的變量直接賦值（但是不推薦這樣做）
不可以使用未聲明且未賦值的變量