一.專業素養
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)
先更到這,學習愉快 😃