web前端開發筆記整理（二）

文章目錄

一.專業素養

web發展史

Mosaic，是互聯網歷史上第一個獲得普遍使用和能夠顯示圖片的網頁瀏覽器，於1993年問世。
JavaScript最初的設計目標是改善網頁的用戶體現
瀏覽器的組成

1.shell部分
(shell)英文翻譯成貝殼，是用戶看得見的，例如菜單，工具欄等
內核部分（用戶看不到）
a. 渲染引擎（包括語法規則和渲染）
”將網頁代碼渲染爲用戶視覺效果可以感知的平面文檔，且渲染是從上到下"
b. js引擎
讀取網頁中的javascript代碼，對其進行處理並運行。
c. 其他模塊

二.專業知識

JavaScript是一門

解釋性語言（不需要編譯成文件）跨平臺
單線程
單線程是指Js引擎執行Js時只分了一個線程給他執行，也就是執行js時是單線程的
小知識：
- 進程是一個工廠，工廠有它的獨立資源，工廠之間相互獨立
線程是工廠中的工人，多個工人協作完成任務，工廠內有一個或多個工人，工人之間共享空間

進程是 cpu 資源分配的最小單位（是能擁有資源和獨立運行的最小單位）

線程是 cpu 調度的最小單位（線程是建立在進程的基礎上的一次程序運行單位，一個進程中可以有多個線程）

ECMA標註
爲了統一規格JavaScript兼容於ECMA標準，因此也稱爲ECMAScript。

編譯性語言和解釋性語言的區別

1、編譯性語言

只須編譯一次就可以把源代碼編譯成機器語言，後面的執行無須重新編譯，直接使用之前的編譯結果就可以（像讀一本書全讀完再寫出自己的讀書心得體會）
優點：執行效率高
不足：比較依賴編譯器，因此跨平臺性差一些
代表：C、C++、Pascal/Object Pascal（Delphi）

不同平臺對編譯器影響較大 如：
1.16位系統下int是2個字節（16位），而32位系統下int佔4個字節（32位）；

2.32位系統下long類型佔4字節，而64位系統下long類型佔8個字節；

2、解釋性語言

源代碼不能直接翻譯成機器語言，而是先翻譯成中間代碼，再由解釋器對中間代碼進行解釋運行；（像讀一本書一行一行讀完每讀一行感受一下知識的薰陶）
程序不需要編譯，程序在運行時才翻譯成機器語言，每執行一次都要翻譯一次

優點：跨平臺性好
不足：運行效率比較低
代表：Python、JavaScript、Shell、Ruby、MATLAB等；

3、java

java語言應是編譯性-解釋性語言，因爲其同時具備編譯性和解釋性兩種特性；

java文件先編譯成與平臺無關的.class的字節碼文件
接着.class的字節碼文件既可以在Windows平臺上的java虛擬機（JVM）上進行解釋運行，也可以在Linux平臺上的JVM上解釋運行；
而JVM的翻譯過程時解釋性的，JVM從.class的字節碼文件中讀出一條指令，翻譯一條指令，然後執行一條指令，這個過程就稱爲java的解釋執行

JavaScript 三大階段

DOM（瀏覽器提供）：操作文檔、HTML/CSS
BOM（瀏覽器提供）：操作瀏覽器
ECMAScript：原生JavaScript

JS隊列

隊列是遵循先進先出原則的一組有序的項，與棧的不同的是，棧不管是入棧還是出棧操作都是在棧頂操作，隊列則是在隊尾添加元素，隊頂移除
找了兩個圖：

就像排隊服務，總是先排隊的人會先接受服務，當然不考慮插隊的情況。

三.開始學習JavaScript

語句

計算機程序是由計算機“執行”的一系列“指令”。在編程語言中，這些編程指令被稱爲語句。JavaScript 程序就是一系列的編程語句。
·在 HTML 中，JavaScript 程序由 web 瀏覽器執行。·
JavaScript 語句由以下構成：

值、運算符、表達式、關鍵詞和註釋。

以分號結尾
在運算符旁邊（ = + - * / ）添加空格是個好習慣：
可以用花括號（{…}）組合在代碼塊中

引入js的三種方式

1、內部引入：

在head或body中，定義script標籤，然後在script標籤裏面寫js代碼

< script>
Js代碼
< /script>

    <script>
        alert("這是js的內部引入");
    </script>

2、外部引入：

定義外部js文件(.js結尾的文件)

< script  type="text/javascript" src="demo.js">< /script>

script標籤一般定義在head或body中
Script標籤要單獨使用，要麼引入外部js，要麼定義內部js，不要混搭使用

外部的JS文件，它具有維護性高、可緩存(加載一次，無需加載)、方便未來擴展、複用性高等特點

3.行內引入:

<開始標籤 on+事件類型=“js代碼”></結束標籤>

行內引入方式必須結合事件來使用，但是內部js和外部js可以不結合事件

  <body>
    <input type="button" οnclick="alert('行內引入')" value="button" name="button">
    <button οnclick="alert(123)">點擊我</button>
    </body>

變量

變量是存儲數據值的容器

通過 var 關鍵詞來聲明 JavaScript 變量：

var carName;

聲明之後，變量是沒有值的。（技術上，它的值是 undefined。）

如需賦值給變量，請使用等號：

carName = "porsche";

可以在聲明變量時向它賦值：

var carName = "porsche";

提示：在腳本的開頭聲明所有變量是個好習慣！
那麼多個變量怎麼寫呢？
以 var 作爲語句的開頭，並以逗號分隔變量：

var person = "Bill Gates", carName = "porsche", price = 15000;

但是在實際開發環境中我們一般會習慣跨行寫：

var 
person = "Bill Gates", 
carName = "porsche", 
price = 15000;

JavaScript 標識符

所有 JavaScript 變量必須以唯一的名稱的標識，這些唯一的名稱稱爲標識符。

標識符可以是短名稱（比如 x 和 y），或者更具描述性的名稱（age、sum、totalVolume）。

構造變量名稱（唯一標識符）的通用規則是：

名稱可包含字母、數字、下劃線和美元符號
名稱必須以字母開頭
名稱也可以 $ 和 _ 開頭（不推薦！）
名稱對大小寫敏感（y 和 Y 是不同的變量）
保留字（比如 JavaScript 的關鍵詞）無法用作變量名稱

提示：JavaScript 標識符對大小寫敏感。

重複聲明JavaScript變量

如果再次聲明某個 JavaScript 變量，將不會丟它的值。
重複聲明後賦值，值會被覆蓋；

var name= "mike";
name="Amy";
document.write(name);

輸出覆蓋的值

JavaScript算術

字符串使用加號表示級聯

var x ="name"+1+2 +"mike"+1+2;
document.getElementById('demo').innerHTML=x;

var x = 3 + 5 + "8"
document.getElementById("demo").innerHTML = x;

+= 賦值運算符也可用於相加（級聯）字符串：

txt1 = "Hello ";
txt1 += "Kitty!";

這裏再加一點如何輸出JS

使用 window.alert() 寫入警告框（使用警告框顯示數據）
使用 document.write() 寫入 HTML 輸出
在 HTML 文檔完全加載後使用 document.write() 將刪除所有已有的 HTML （document.write() 方法僅用於測試）
使用 innerHTML 寫入 HTML 元素
使用 console.log() 寫入瀏覽器控制檯
來都試一遍：

// JavaScript Document
 window.alert("我是警告框");

<body>
<button type="button" onclick="document.write(1+2)">try it</button>
</body>

<script>
console.log(5 + 6);
</script>

<body>

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

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

</body>

輸出11

運算符

小應用：實現瀏覽器兼容

function(event){

var e=event?event||window.event;

}

任何數據類型加字符串都等於字符串

·=的優先級最低，（）的優先級最高·

Infinity 無窮算number 類型
parseInt(true/false/null) => NaN
undefined / null 不能作爲 toString 的對象

parseInt(para, radix) 把目標進制轉換爲十進制
para.toString(radix) 把十進制轉換爲目標進制

隱式轉換Number

1.isNaN
2.++/–（加加/減減）
3. +/-（正/負）

這裏提一下注釋，註釋可以給代碼添加備註，也可以用於測試改錯（註釋掉覺得有問題的代碼運行排錯）
JavaScript裏註釋分爲單行註釋和多行註釋

單行註釋以 // 開頭。
多行註釋以 /* 開頭，以 */ 結尾。

數據類型

字符串值，數值，布爾值，數組，對象

var length = 7;                             // 數字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 數組
var x = {firstName:"Bill", lastName:"Gates"};    // 對象

當數值和字符串相加時，JavaScript 將把數值視作字符串。

JavaScript 擁有動態類型。這意味着相同變量可用作不同類型：

var x;               // 現在 x 是 undefined
var x = 7;           // 現在 x 是數值
var x = "Bill";      // 現在 x 是字符串值

字符串類型用單引號或者雙引號都可
與其他語言語法不同的是：
JavaScript 只有一種數值類型,寫數值時用不用小數點均可
是不是更方便了
布爾值只有兩個值：true 或 false。
JavaScript 數組用方括號書寫。數組的項目由逗號分隔。

下面的代碼聲明（創建）了名爲 cars 的數組，包含三個項目（汽車品牌）：

var cars = ["Porsche", "Volvo", "BMW"];

數組索引基於零，這意味着第一個項目是 [0]，第二個項目是 [1]，以此類推。
JavaScript 對象用花括號來書寫對象屬性是 name:value 對，由逗號分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

使用 JavaScript 的 typeof 來確定 JavaScript 變量的類型：

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"

任何變量均可通過設置值爲 undefined 進行清空。其類型也將是 undefined。
空值（null)不等於undefined,值相等，類型不想等
原始數據值是一種沒有額外屬性和方法的單一簡單數據值。
<
交換ab的值
引入第三變量

部分條件語句例子

if 語句 - 只有當指定條件爲 true 時，使用該語句來執行代碼
if…else 語句 - 當條件爲 true 時執行代碼，當條件爲 false 時執行其他代碼
if…else if…else 語句- 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

if else循環語句

// JavaScript Document
var time=parseInt(window.prompt('input'));
if (time<10)
{
	document.write("<b>開始學習了嗎</b>");
}
else if (time>=10 && time<16)
{
	document.write("<b>學習到哪了</b>");
}
else
{
	document.write("<b>今天你博學了嗎·</b>");
}

運行結果：

- 輸入abc，判斷abc哪個數更大

// JavaScript Document
var a=parseInt(window.prompt('請輸入a'));
var b=parseInt(window.prompt('請輸入b'));
var c=parseInt(window.prompt('請輸出c'));

if(a>b){
	if(a>c){
		document.write(a);
	}
	else{
		document.write(b);
	}
}else{
	if(b>c){
		document.write(b);
	}
	else{
		document.write(c);
	}
	
}

for循環

- 求2的階乘

// JavaScript Document
var n=parseInt(window.prompt('input'));
mul=1;
for(var i=0;i<n;i++){
	mul*=2;
}
document.write(mul);

求n的階乘

// JavaScript Document
var n=parseInt(window.prompt('input'));
mul=1;
for(var i=1;i<=n;i++){
	mul*=i;
}
document.write(mul);

輸入任意三位數反向輸出

// JavaScript Document
var a=parseInt(window.prompt('請輸入任意三位數'));
var one,
    two,
    three;

one=(a%10);
two=(a%100)-one;
three=a-(a%100);
a=one*100+two+three/100;
document.write(a);

判斷1-100以內有多少個質數

// JavaScript Document
var count=0;
for(var i=1;i<100;i++){
	for(var j=1;j<=i;j++){
		if(i%j==0){
			count++;
		}
		
	}
	if(count==2){
		document.write(i+ " ");
	}
	//for循環結束後count清0方便下一次計算
	count=0;
}

- 提升一下利用平方數

// JavaScript Document
var count=0;
for(var i=2;i<100;i++){
	for(var j=1;j<=Math.sqrt(i);j++){
		if(i%j==0){
			count++;
		}
		
	}
	//只除一次，減少循環圈
	if(count==1){
		document.write(i+ " ");
	}
	//for循環結束後count清0方便下一次計算
	count=0;
}

瞭解控制檯的用法例如：

var a=1;
document.write(a);

面向對象與面向對象的區別

1.面向對象：

簡單來說對象就是現實世界存在的任何事務都可以稱之爲對象，有着自己獨特的個性

面向對象就是構成問題事務分解成各個對象，建立對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲。

2.面向過程

過程就是步驟，是解決問題的按部就班

面向過程不同於面向對象，面向過程分析出解決問題所需要的步驟，然後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就可以了

分享一個看過的小比喻
用面向過程的方法寫出來的程序是一份蛋炒飯，而用面向對象寫出來的程序是一份蓋澆飯。蛋炒飯最後的一道工序肯定是把米飯和雞蛋混在一起炒勻。蓋澆飯呢，則是把米飯和蓋菜分別做好，你如果要一份紅燒肉蓋飯呢，就給你澆一份紅燒肉；如果要一份青椒土豆蓋澆飯，就給澆一份青椒土豆絲。

蛋炒飯中如果恰巧你不愛吃雞蛋，只愛吃青菜的話，那麼唯一的辦法就是全部倒掉，重新做一份青菜炒飯了。蓋澆飯就沒這麼多麻煩，你只需要把上面的蓋菜撥掉，更換一份蓋菜就可以了。蓋澆飯的缺點是入味不均，可能沒有蛋炒飯那麼香。

蓋澆飯的好處就是”菜”“飯”分離，從而提高了製作蓋澆飯的靈活性。飯不滿意就換飯，菜不滿意換菜。用軟件工程的專業術語就是”可維護性“比較好，”飯” 和”菜”的耦合度比較低。蛋炒飯將”蛋”“飯”攪和在一起，想換”蛋”“飯”中任何一種都很困難，耦合度很高，以至於”可維護性”比較差。軟件工程追求的目標之一就是可維護性，可維護性主要表現在3個方面：可理解性、可測試性和可修改性。面向對象的好處之一就是顯著的改善了軟件系統的可維護性。

typeof運算符

使用 typeof 操作符來檢測變量的數據類型。

typeof 運算符可返回以下原始類型之一：

string
number
boolean
undefined
function
object
typeof 運算符把對象、數組或 null 返回 object。
在 JavaScript 中數組即對象，因此例如typeof [1,2,3,4] 返回 object。

NULL表示一個空對象引用，typeof檢測NULL返回的是object

var num=null;
console.log(typeof(num));

undefined 是一個沒有設置值的變量，typeof 一個沒有值的變量會返回 undefined。
任何變量都可以通過設置值爲 undefined 來清空。類型爲 undefined.

var num=2;
var num=undefined;

console.log(typeof(num));

null與undefined的區別

undefined：是所有沒有賦值變量的默認值，自動賦值。
null：主動釋放一個變量引用的對象，表示一個變量不再指向任何對象地址。

何時使用null?

當使用完一個比較大的對象時，需要對其進行釋放內存時，設置爲 null。

null 與 undefined 的異同點是什麼呢？

共同點：都是原始類型，保存在棧中變量本地。

不同點：
undefined——表示變量聲明過但並未賦過值。
它是所有未賦值變量默認值，例如：

var a;    // a 自動被賦值爲 undefined

null——表示一個變量將來可能指向一個對象。一般用於主動釋放指向對象的引用，例如：

var emps = ['ss','nn'];
emps = null;     // 釋放指向數組的引用

延伸——垃圾回收站

它是專門釋放對象內存的一個程序。
在底層，後臺伴隨當前程序同時運行；引擎會定時自動調用垃圾回收期；
總有一個對象不再被任何變量引用時，才釋放。
注意注意：
NaN 的數據類型是 number

數組(Array)的數據類型是 object

日期(Date)的數據類型爲 object

null 的數據類型是 object

未定義變量的數據類型爲 undefined

如果對象是 JavaScript Array 或 JavaScript Date ，
我們就無法通過 typeof 來判斷他們的類型，因爲都是返回 object

進制轉換

只能發生在Number類型，parseInt(string , radix)
從數字位看到非數字位截止返回數字

var demo="100022";
var num =parseInt(demo,2);
console.log(typeof(num)+":"+num);

var demo="1010px";
var num =parseInt(demo,2);
console.log(typeof(num)+":"+num);

取出數字

parseFloate看到點後面的非數字位截止

String轉成字符串

Number轉成數字

toString

null和undefined不能用

把一個 Number 對象轉換爲一個字符串，並返回結果

var demo=1010;
var num =demo.toString();
console.log(typeof(num)+":"+num);

以10進制位基地轉成8進制

var demo=10;
var num =demo.toString(8);
console.log(typeof(num)+":"+num);

二進制轉成16進制

var num=10000;
var test =parseInt(num,2);
console.log(test.toString(16));

在js中，當運算符在運算時，如果兩邊數據不統一，CPU就無法計算，這時我們編譯器會自動將運算符兩邊的數據做一個數據類型轉換，轉成一樣的數據類型再計算

這種無需程序員手動轉換，而由編譯器自動轉換的方式就稱爲隱式轉換

1.轉成string類型： +（字符串連接符）

2.轉成number類型：++/–(自增自減運算符) + - * / %(算術運算符) > < >= <= == != === !=== (關係運算符)

3.轉成boolean類型：!（邏輯非運算符）

–字符串連接符+,調用String（）方法轉成字符串然後拼接；

–算數連接符+，調用number（）方法轉成數字然後做加法

關係運算符：會把其他數據類型轉換成number之後再比較關係
字符串類型轉成對應的unicode編碼比如2就是數字50，10是數字49
多個字符從左往右依次比較，這裏先比較a和b不想等則得出結果；a數字97，b是數字98
特殊情況：undefined和null得出固定結果
NaN和任何數據比較就是false

不發生類型轉換 === 和！==
未定義的變量當且僅當放在typeof裏面不報錯

console.log(typeof(typeof));

返回string

邏輯非隱式轉換與關係運算符隱式轉換搞混淆
空數組的toString()方法會得到空字符串，而空對象的toString()方法會得到字符串[object Object] （注意第一個小寫o，第二個大寫O喲）

隱式轉換部分來自[隱式類型轉換](https://blog.csdn.net/itcast_cn/article/details/82887895)

先更到這，學習愉快 😃