01-JavaScript基礎

核心知識點

javaScript書寫位置

javaScript變量

javaScript數據類型

javaScript數據類型轉換

javaScript運算符

今日學習目標

能夠定義一個變量并完成變量的賦值

能夠說出每一種具體的數據類型

能夠數據類型之間的相互轉化

能夠掌握各種運算符的作用

序言

JavaScript發展歷史(js)

1. 1994年，網景公司(Netscape)發布了Navigator瀏覽器0.9版，這是世界上第一款比較成熟的網絡瀏覽器，轟動一時。但是這是一款名副其實的瀏覽器--只能瀏覽頁面，瀏覽器無法與用戶互動,當時解決這個問題有兩個辦 法，一個是采用現有的語言,許它們直接嵌入網頁。另一個是發明一種全新的語言。2. 1995年Sun公司將Oak語言改名為Java，正式向市場推出。Sun公司大肆宣傳，許諾這種語言可以"一次編寫，到處運 行"(Write Once, Run Anywhere)，它看上去很可能成為未來的主宰。3. 網景公司動了心，決定與Sun公司結成聯盟4. 34歲的系統程序員Brendan Eich登場了。1995年4月，網景公司錄用了他,他只用10天時間就把Javascript設計出來了。 （多肽語言）5. (1)借鑒C語言的基本語法; (2)借鑒Java語言的數據類型和內存管理; (3)借鑒Scheme語言，將函數提升到"第一等公民"(first class)的地位; (4)借鑒Self語言，使用基于原型(prototype)的繼承機制。

JavaScript是什么？

JavaScript： 基于對象和事件驅動，運行在瀏覽器客戶端的腳本語言。[js]? js的運行環境： 運行在瀏覽器端的一種語言? 最后將所有的js代碼都要以對象的形式去執行，都要通過事件的方式去觸發執行【DOM】對象： 現實世界中的對象： 將任何一個具體的事物都是一個對象【萬事萬物皆對象】編程中的對象： 對現實中對象的抽象描述面向對象特征： 封裝 繼承 多態編程思想：?面向對象：【推薦】代碼執行都要以一個具體的對象為整體去執行?面向過程：代碼執行的時候，一行一行執行的。

JavaScript能干什么？

? 常見的網頁效果【表單驗證，輪播圖。。。】? 與H5配合實現游戲【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】? 實現應用級別的程序【 http://naotu.baidu.com】? 實現統計效果【http://echarts.baidu.com/examples/】? 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】? 在線學編程【https://codecombat.163.com/play/】? js可以實現人工智能 【面部識別】? 可以實現服務端功能 nodejs

JavaScript組成

? ECMASCRIPT 定義了javascript的語法規范,描述了語言的基本語法和數據類型? BOM （Browser Object Model） 即瀏覽器對象模型。瀏覽器對象模型,一套操作瀏覽器功能的API,通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉、獲取分辨率等? DOM (Document Object Model) 文檔對象模型,一套操作頁面元素的API,DOM可以把HTML看做是文檔樹，通過 DOM提供的API可以對樹上的節點進行操作 【js+HTMl+css】

JavaScript書寫位置

內嵌式寫法

? 在html頁面內部設置<script type="text/javascript">js</script>注意：該標簽可以放到head標簽中或者body標簽中

外聯式寫法[推薦寫法]

? 1. 新建js文件2. 通過script標簽引用到當前頁面中<script type="text/javascript" src="test.js"></script>注意：1. 不能將代碼寫到外聯式標簽中。2. 一個網頁中可以同時調用多個外部js文件<script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script>

行內式寫法（不推薦）

? 將js代碼寫到標簽內部 <div onclick="js代碼"></div>注意：onclick 是一個點擊事件： 當點擊div的時候，會觸發該事件，執行該事件中的代碼

JavaScript中輸入消息方式

alert();document.write('<h1>我是一段文字</h1>'); 在網頁中輸出信息prompt("請輸入姓名","測試"); //接收用戶輸入的confirm("確定不聽課么");console.log("adsadsfafds"); //在控制臺中輸出消息總結：1. 在js中如果希望輸出一個具體的文本信息，必須帶引號2. 在使用document.write();的時候，可以在方法內輸出html標簽，加引號。

變量（重點）

變量概念

? 變量： 變量指的是在程序中保存數據的一個容器

定義變量及賦值

? 定義變量var 變量名;? 賦值變量名 = 值;? 總結：1. 一個變量一次只能保存一個值2. 最后一次的賦值結果3. 變量是區分大小寫（js區分大小寫）

變量命名規范

? 規則 必須遵守的，不遵守的話 JS引擎 發現并報錯 1. 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：var usrAge, num01, _name2. 區分大小寫 強調：JS 嚴格區分大小寫 ，var app; 和 var App; 是兩個變量3. 不能 以數字開頭，或者漢字定義變量名4. 不能 是關鍵字、保留字 和 代碼符號，例如：var、for、while、&, class5. 不能出現空格? 規范 建議遵守的，不遵守的話 JS引擎 也不會報錯1. 變量名必須有意義2. 遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。

課堂測試

1.下面四個變量聲明語句中，哪一個變量的命名是正確的？A．var for B．var txt_name C．var myname myval D．var 2s2.下面哪一個語句定義了一個名為 Myval 的變量并將它的值賦為2205？A．var myval=2205 B．var MyVal = 2205C．var Myval=2205 D．Myval=2205 【不規范】3. 氣溫表示方式有兩種：攝氏度和華氏度華氏度=9/5*攝氏度+32請使用代碼完成：讓用戶輸入任意的攝氏度，得到對應的華氏度。4. 交換兩個變量的值var a = 1;var b = 2;最后通過程序的方式將變量a的值改為 2，變量b的值改為15. 定義兩個變量，求和

數據類型（重點）

數據類型

? 數據類型： 數據類型指的是變量的數據類型

簡單數據類型

• 數字類型(number)

? 凡是數字都屬于該類型【整數，小數，負數】? 只要變量的值是一個具體的數字，那么當前變量的數據類型就是數值類型? number類型表示的數字大小： 最大值是±1.7976931348623157乘以10的308次方 Number.MAX_VALUE 最小值是±5 乘以10的-324次方 Number.MIN_VALUE

• 字符串類型(string)

? 字符串可以是引號中的任意文本。可以使用單引號或雙引號? 在js中一般寫字符串類型的變量時候，推薦使用單引號。? 注意：1. 單引號和雙引號之間的嵌套例如： 輸出 我是"高帥富"程序猿; 2. 轉義字符\n 換行\\ 斜杠\' 單引號\" 雙引號\r 回車符例如：var strMsg = 'I'm the GOD of my world ~!'; //輸出：I'm the GOD of my world ~!var strMsg2 = "I"m the GOD of my world ~!"; //輸出：I"m the GOD of my world ~!var strMsg3 = '反斜杠是這個 \\，神奇！'; //輸出：反斜杠是這個 \，神奇！

• 布爾類型(boolean)

? true 和 false

• undefined類型（了解）

//如果一個變量沒有賦值，該變量的默認是undefinedvar n1;//如果一個變量的值是undefined，那么該變量的數據類型就是undefined類型

復雜數據類型（目前不講）

• object類型

課堂測試

請說出如下變量分別對應的數據類型是什么？var a1=123; var a2="123"; var a3=true; var a4="false"; var a5="1.63";var a6; var a8="null"

數據類型判斷

? 使用 typeof 變量 可以得到對應變量的數據類型? 例如：var n1 = 123;//獲取n1的數據類型console.log(typeof n1);var n2 = '123';console.log(typeof n2);var n3 = true;console.log(typeof n3);

判斷一個變量是不是數字

isNaN(x) 方法例如：var usrAge = 21;var isOk = isNaN(usrAge);console.log(isNum); // false ，21 不是一個 非數值var usrName = "James";console.log(isNaN(usrName));//true ，"James"是一個 非數值

數據類型轉換

• 轉數值類型

?Number(變量)：總結：1. 可以通過該方法將數據類型轉換為數值類型var n1 = '123';console.log(typeof n1);//方法一：通過Number()n1 = Number(n1);console.log(typeof n1);2. 在轉換的過程中可以將原來的值保留，遇到小數直接保留下來，不會舍去3. 如果變量無法轉換為數值類型，那么返回的結果是NaN； 對應的數據類型依然是數值類4. 如果將布爾類型轉換為數值類型，true 轉化后的結果是 1 false 轉化后的結果是0?parseInt(變量)var num1 = parseInt("12.3abc"); // 返回12，如果第一個字符是數字會解析知道遇到非數字結束var num2 = parseInt("abc123"); // 返回NaN，如果第一個字符不是數字或者符號就返回NaN備注：1 只會保留整數部分，通過該方式進行數據類型轉換后得到就是一個整數2. 如果一個變量中的值無法轉換為具體數字，那么返回的結果是一個 NaN 的值3. NaN (not a number) ----NaN對應的數據類型是數值類型4. 通過該方法可以將其他數據類型轉為數值類型?parseFloat(變量)總結：1. 通過該方法可以將其他數據類型轉換為數值類型2. 在轉換過程中，如果遇到小數，那么會直接將小數部分保留3. 如果轉化不成功過，返回的結果NaNparseFloat()把字符串轉換成浮點數

• 轉字符串類型

? 變量.toString()var num = 5;console.log(num.toString());? String(變量)備注：String()函數存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null

• 轉布爾類型

? Boolean() 備注：0 |''(空字符串) | null | undefined | NaN 會轉換成false 其它都會轉換成 true

算數運算符

+ 運算總結：1. 如果是數值類型的變量相加，結果就是一個數值類型的結果2. 如果是一個字符串類型的變量相加，最后的結果就是字符串（加號起到的作用就是拼接字符串的功能）-運算總結：1. 如果是數值類型的變量相減，結果就是一個數值類型的結果2. 如果是數字的字符串相減，得到的結果也是一個數值類型結果（發生了隱式類型轉化）var n1 = '123';var n2 = '123';3. 如果是非數字的字符串相減，得到的結果是NaN*運算/運算1.如果是數值類型的變量相除，結果就是一個數值類型的結果2. 如果是數字的字符串相除，得到的結果也是一個數值類型結果（發生了隱式類型轉化）3. 如果是非數字的字符串相除，得到的結果是NaN4. 如果除數是0 ，得到的結果是 Infinity （無窮大的值）%取余（獲取余數）

賦值運算符

+= | -= | *= | /= | %= var a += b ; =====> 等價于 a = a+b;

一元運算符

• 前置++ 和 后置 ++

• 前置-- 和 后置–

比較運算符

1. > 2. <3. >= 大于 或者 等于，只要有一個滿足即可4. <= 小于 或者 等于，只要滿足一個即可5. == 只用來比較變量中的值是否相等，不考慮數據類型6. === 用來判斷值和數據類型必須同時相等7. != 判斷值是否不相等，不考慮數據類型8. !== 判斷值和數據類型? 總結：? 通過比較運算符得到的結果只有兩個結果，一個是正確的，一個是錯誤的? 通過比較運算符得到的結果 只有 true[正確] 和 false[錯誤]

邏輯運算符

1. || 或： 條件只要有一個滿足即可總結：1. 如果條件中有一個結為true(代表有一個條件滿足了)，那么通過或運算后最后的結果為true2. 如果條件中結果都不滿足，那么通過或運算后結果為false2. && 且： 要求所有的條件都必須滿足才可以總結：1. 如果條件都為真（true），那么通過且運算后最后的結果也是真（true）2. 如果條件中自少有一個條件不滿足（false），那么通過且運算后的結果為false3. ! 非（取反） :

運算符優先級（了解）

優先級從高到底1. () 優先級最高2. 一元運算符 ++ -- !3. 算數運算符 先* / % 后 + -4. 關系運算符 > >= < <=5. 相等運算符 == != === !==6. 邏輯運算符 先 && 后 ||7. 賦值運算符

總結

以上是生活随笔為你收集整理的javaScript第一天（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。