JS入門
1-1 本章大綱
Js階段 學習的特色 入門很重要，重複練習，模仿，難，bug（工做生涯），調試出來。javascript
開發工具： Hbuilder（中國）； webstorm ： 體積大 速度相對慢一點；php
npp （notepad++） sublime 體積小 速度快；css
l JavaScript簡介html
l 第一個程序開發前端
l 變量java
l 運算符node
l 代碼規範python
1-2 寫在前面
1-2.1 JavaScript是什麼？
JavaScript是web端的編程語言，最先是在html網頁上使用，用來給HTML網頁增長一些動態功能。後續發展過程當中主要出現兩個方向的JS開發：客戶端JS、服務器端（node.js）JS；（php，java，python）全棧工程師css3
1-2.2 爲何學習JavaScript
讓HTML（css3.0）網頁顯示效果更加炫麗，同時添加各類動態數據的驗證和處理，提高用戶使用的感知度。git
1-2.3 學習以前須要掌握的知識
（1） HTML網頁開發基本知識
（2） CSS樣式表基礎知識
1-3 JavaScript簡介
JavaScript是一種輕量級的編程語言，是一些簡單指令的集合，可將JS代碼插入到HTML網頁標籤中解釋執行（直譯）。(編譯 把高級語言轉爲 電腦只認識 0 1 )
| JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。【百度百科】 |
1-3.1 發展歷史
JavaScript誕生於1995年，起初它的目的是：處理之前由服務器端負責的一些表單驗證，當時的軟件環境，都是由服務器進行數據的驗證等處理的。在那個年代走在最前端的網景(Netscape)公司決定着手開發一種客戶端驗證的語言。
（1） 起源：Nombas公司的C-- 嵌入式腳本語言，是以後嵌入網頁中的腳本的理念的基礎原型。
計劃1995年2月發佈LiveScript
布蘭登·艾奇（Brendan Eich，1961年～），JavaScript之父主導，迎合當時的Java熱潮，LiveScript完善並更名JavaScript；
1997年，JavaScript1.1提交ECMA（歐洲計算機制造商協會），該協會負責將這種腳本語言標準化à ECMAScript
ECMAScript主要規範語言的組成部分以下：
語法
類型
語句
關鍵字
保留字
操做符
對象
ECMAScript標準， JavaScript / Jscript 實現es5,es6,es7,er8
一般開發中，ECMAScript和JavaScript一般表示一個意思；
（2）發展歷程：
1998年6月：ECMAScript2.0發佈
1999年12月：ECMAScript3.0發佈，成爲JS通行標準
2007年10月：ECMAScript4.0發佈，改動較大，引發分歧。
2008年7月：分歧太大，停止ECMAScript4.0，改善後發佈爲ECMAScript3.1版本，並起名爲Harmony(和諧)，以後不長時間ECMAScript3.1改名爲ECMASciprt5；
2015年6月17日，ECMAScript6正式發佈，即ECMAScript2015;
JavaScript 誕生於 1995 年。 它當時的目的是爲了驗證表單輸入的驗證。 由於在 JavaScript問世以前，表單的驗證都是經過服務器端驗證的。而當時都是電話撥號上網的年代，服務器驗證數據是一件很是痛苦的事情。
1995 年， 當時工做在 Netscape(網景)公司的布蘭登(Brendan Eich)爲解決相似於 「向服務器提交數據以前驗證」的問題。在 Netscape Navigator 2.0 與 Sun 公司聯手開發一個稱之爲LiveScript 的腳本語言。爲了營銷便利，以後改名爲 JavaScript
後來者:
由於 JavaScript1.0 如此成功，因此微軟也決定進軍瀏覽器，發佈了 IE3.0 並搭載了一 個 JavaScript 的克隆版，叫作 JScript（這樣命名是爲了不與 Netscape 潛在的許可糾紛）， 而且也提供了本身的 VBScript。
標準的重要:
在微軟進入後，有 3 種不一樣的 JavaScript 版本同時存在：NetscapeNavigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。與 C 和其餘編程語言不一樣的是， JavaScript 並無一個標準來統一其語法或特性，而這 3 種不一樣的版本偏偏突出了這個問題。 隨着業界擔憂的增長，這個語言標準化顯然已經勢在必行。
靈敏的微軟、遲鈍的網景:
雖然網景開發了 JavaScript 並首先提交給 ECMA 標準化，但因計劃改寫整個瀏覽器引擎 的緣故，網景晚了整整一年才推出「徹底遵循 ECMA 規範」的 JavaScript1.3。而微軟早在一 年前就推出了「徹底遵循 ECMA 規範」的 IE4.0。這致使一個直接惡果：JScript 成爲 JavaScript 語言的事實標準。
標準的發展:
在接下來的幾年裏，國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣程度的成功和失 敗）將 ECMAScript 做爲 JavaScript 實現的基礎。
山寨戰勝原創:
JScript 成爲 JavaScript 語言的事實標準，加上 Windows 綁定着 IE 瀏覽器，幾乎佔據全 部市場份額，所以，1999 年以後，全部的網頁都是基於 JScript 來開發的。而 JavaScript1.x
變成可憐的兼容者。
網景的沒落與火狐的崛起:
網景在微軟強大的攻勢下，1998 年全面潰敗。但，星星之火能夠燎原。同年成立 Mozilla 項目中 (開源)Firefox(火狐瀏覽器)在支持 JavaScript 方面無可比擬，在後來的時間裏一步步蠶食 IE 的市場，成爲全球第二大瀏覽器。 開發者頭條 github.com
谷歌的野心:
GoogleChrome，又稱 Google 瀏覽器，是一個由 Google（谷歌）公司開發的開放原始碼 網頁瀏覽器。他以簡潔的頁面，極速的瀏覽，一舉成爲全球第三大瀏覽器。隨着移動互聯網 的普及，嵌有 Android 系統的平板電腦和智能手機，在瀏覽器這塊將大有做爲。
蘋果的戰略:
Safari 瀏覽器是蘋果公司各類產品的默認瀏覽器，在蘋果的一體機(iMac)、筆記本(Mac)、 MP4(ipod)、iphone(智能手機)、ipad(平板電腦)，而且在 windows 和 Linux 平臺都有相應版 本。目前市場份額全球第四，但隨着蘋果的產品不斷的深刻人心，具備稱霸之勢。
倖存者 Opera 的全球市場份額第五，2%左右。它的背後沒有財力雄厚的大公司，但它從「瀏覽 器大戰」存活下來的，有着很是大的潛力。
1-3.2 組成部分
一般狀況下JavaScript和ECMAScript被人用來表達相同的意思，可是須要明確的是，JavaScript是ECMAScript的實現，而且在實現的同時擴展了更多功能，一個完整的JavaScript一般由三部分組成
(1) 核心——ECMAScript
(2)文檔對象模型——DOM（文件File/ Document文件/文檔 html網頁 html文檔）
關於DOM(Document Object Model)：文檔對象模型，是W3C的標準，當網頁被加載時，就會建立頁面的文檔對象模型。
(3)瀏覽器對象模型——BOM
關於BOM：瀏覽器對象模型，主要和處理瀏覽器窗口和框架。
萬物皆對象，類（抽象）---——》人類-》張三 李四（對象） 狗-》泰迪-》旺財
對象是類的實例（實際的例子）,類是對象的抽象；
1-3.3 開發工具
JavaScript是一種腳本語言，是以文字的形式呈現出來進行編輯開發的，因此常規的文本編輯器均可以進行開發，可是爲了提升開發人員的開發效率，一般會使用一些優秀的開發軟件，常規開發軟件以下：
記事本
超級記事本：SublineText、Editplus、UltraEdit notepad++等等[快速運維]
網頁編輯開發工具：Dreamweaver、Hbuilder（國產的）、WebStrom（外國）等等[網頁開發]
軟件開發工具：eclipse、Intellij、MyEclipse,xcode等等[後臺開發打包]
1-4 入門程序
代碼案例：
| <!DOCTYPE html> |
1-4.1 擴展計算機知識（瞭解）
域名 baidu.com-> 一個ip 192.168.1.1
http://localhost:63342/ 本地服務器
http://127.0.0.1:8020/zz1705/day01/01.html
http協議 超文本傳輸協議：
http:// news.china.com /news100/11038989/20170513/30521113.html
https://github.com/racaljk/hosts
www(萬維網).baidu.com
超文本傳輸協議：
http協議 Baidu.com:80( 默認 端口號)
https 協議 443
(IPv4)192.168.1.111:80 0-255 256^4
（IPv6 2001:0000:9d38:953c:2cf8:2d5d:3f57:c3c2（16^32)
Ipconfig 查看ip地址
Nslookup www.baidu.com
V7.0.1.407
1-4.2 註釋
註釋：是用來解釋說明的文字
一般JavaScript中會出現三種註釋狀況
| 單行註釋 |
// 註釋內容 |
主要對一行或者多行代碼作簡短說明來使用的。 |
| 多行註釋 |
/* 註釋內容 */ |
主要對一行或者多行代碼作詳細說明，包括使用注意事項等等。 |
| 文檔註釋 |
/** 註釋內容 */ |
主要對方法/函數或者類型等進行詳細解說的說明，包括參數類型及說明的意義等各方面的信息。 |
1-4.3 引入JS文件
一般JS代碼會出如今三個地方
l 標籤內嵌——使用特別少，根據具體需求而定
l 頁面內嵌——使用比較廣泛
l 外部JS文件——使用最多
代碼案例：
| 標籤內嵌 |
| <div style="width:100px;height:30px;background-color:#ccc;line-height: 30px;" |
| 頁面內嵌 |
| <head> |
| 外部JS |
| <!—引入一個HTML網頁以外的JS文件 --> <script src="js/demo.js"></script> |
| 注意： <script>標籤必須以</script>結束 <script></script>標籤中間不能出現其餘代碼 |
1-4.4 <script>標籤屬性
<script language=」…」 src=」…」 type=」…」></script>
l language：已廢棄。原來用於指定代碼使用的腳本語言，因爲大多數瀏覽器忽略它，因此基本不用了。
l src：表示要引入的外部JS文件的路徑
l type：表示腳本語言的類型（能夠不寫）
代碼案例——內嵌JS腳本：
|
|
代碼案例——引入JS文件：
|
|
1-4.5 特殊字符處理
因爲網頁顯示內容是經過HTML進行格式化的，因此一般會出現一些特殊的字符不能正確顯示或者讓網頁自己產生一些問題。如<、>
一般這樣的符號，會經過特殊的格式字符來進行替代
| < |
< |
| > |
> |
|
|
空格符號 |
代碼案例：頁面中輸出標籤
|
|
1-4.6 對話框處理
l 警告對話框
n alert(「message」);
代碼案例：
|
|
1-5 變量
1-5.1 變量賦值操做
l 定義變量初始化數據 = （等號）是賦值運算符
| var x = 12; |
l 定義變量，數據賦值
| var x ; Console.log（x） x = 23; Console.log(x) |
1-5.2 命名規則
l 見名知意：變量是用來保存程序中要使用的重要數據的，因此一般狀況下，變量的命名最好是讓查看代碼的人經過變量名稱就能讀懂變量的意義。
l 駝峯命名法，一個或者多個英文單詞組成，第一個英文單詞首字母小寫，後面的每一個英文單詞首字母大寫。
l 默認規則：字母、下劃線、$符號開頭，數字不能作變量開頭。(不能關鍵字和保留字)
l 代碼案例：變量聲明和賦值
|
|
l 代碼案例：變量聲明和簡單運算(+ - * / %)
|
|
1-6 數據類型
l JavaScript提供了5中基本數據類型和1中複雜類型(引用類型)
l ECMAScript表示不支持任何建立自定義類型的機制，全部值都是如下6種數據類型之一。
| 類型 |
描述 |
| undefined |
未定義，歷來沒有聲明過或者使用var聲明瞭可是沒有初始化 |
| boolean |
布爾類型，只有兩個值,true或者false |
| Number |
數字類型，表示整數或者浮點數，另外還有一個特殊的值：NaN(not A number)。 |
| String |
字符串類型 |
| Null |
空類型，只有一個值null |
| Object |
複雜類型 |
l 查看數據類型——typeof操做符
n 使用typeof關鍵字來檢測變量的數據類型
n 一般檢測結果以下
| 檢測結果 |
描述 |
| undefined |
未定義 |
| Boolean |
布爾類型 |
| String |
字符串 |
| Number |
數值 |
| Object |
對象或者null |
| function |
函數/方法 |
l undefined類型
n 這個類型只有一個值undefined，使用歷來沒有聲明過的變量，或者使用了var聲明的可是沒有初始化的變量時，就會出現這個值。
l null類型
n 只有一個值null，表示一個空對象引用，typeof檢測會出現object對象類型
n 注意：undefined是從null派生出來的，因此 == 判斷會返回true結果
l boolean類型
n 只有兩個值true或者false
n 注意：其餘類型的值，都和boolean類型有相互等價的值，能夠經過Boolean(param)進行轉換。同時也能夠在條件中進行隱式轉換，可是不推薦使用。
l number類型
n 包含兩種數值，整數或者浮點數
n 重點：爲了支持不一樣的數值類型，定義了不一樣類型的數值表示方式
u var i = 100;//十進制整數
u var i = 070;// 0開頭的數字，默認8進制，56
u var i = 079;// 0開頭，可是無效的8進制。79
u var i = 08;// 0開頭，無效8進制。8
u var i = 0xA;//16進制，10
u var num = 1.8;// 浮點數類型
u var num = 0.9;
u var num = .9;//有效，可是不推薦這樣的寫法
n 難點：類型轉換
u 一般網頁上操做的過程當中，會涉及到類型轉換的問題，將字符串轉換成數字的形式。
u Number(value);將value轉換成數字，更經常使用的是parseInt(value)或者parseFloat(value);
1-7 數據類型轉換
Javascript中的變量是鬆散類型的（弱類型），能夠存儲任何支持的數據類型
var x = 200;// x是number類型
x = 「I am string」;// x是string類型
x = false;// x是boolean類型
這樣處理操做，在程序實際執行過程當中沒有任何好處，因此不建議在程序中動態的改變變量的數據類型，對於程序的錯誤查找【調試】百害而無一利！
Javascript是一門具備動態特性的語言，因此程序在執行的過程當中就會出現類型轉換的概念。類型轉換分爲隱式轉換和顯示轉換
l 顯示轉換：開發人員對數據類型強制進行轉換
Javascript提供瞭如下的方法進行轉換
轉換爲數值類型：Number(param), parseInt(param), parseFloat(param)
轉換爲字符串類型：toString(param)，String(param)
轉換爲布爾類型：Boolean(param)
l 隱式轉換：程序運行的過程當中自動進行轉換
某些狀況下，javascript會自動對數據類型進行轉換操做【如下操做了解便可】。
>> isNaN(param);方法用於判斷param參數是否不是一個數字，在進行判斷的時候會自動調用Number(param)進行轉換操做。非數值返回true，不然返回false
>> 遞增、遞減操做、取正取負操做
>> 加法運算操做
>> 乘除、減法運算、取摸運算
>> 邏輯運算、關係運算
1-8 關鍵字和保留字
1-8.1 關鍵字
| Break |
Else |
new |
var |
| case |
finally |
return |
void |
| Catch |
For |
switch |
while |
| continue |
function |
this |
with |
| default |
If |
throw |
|
| Delete |
In |
try |
|
| Do |
instanceof |
typeof |
|
1-8.2 保留字
| abstract |
Enum |
int |
short |
| boolean |
Export |
interface |
static |
| Byte |
Extends |
long |
super |
| Char |
Final |
native |
synchronized |
| Class |
Float |
package |
throws |
| Const |
Goto |
private |
transient |
| debugger |
implements |
protected |
volatile |
| Double |
Import |
public |
|
1-9 運算符
1-9.1 算數運算符
| 運算符 |
描述 |
| + |
加法運算 |
| - |
減法運算 |
| * |
乘法運算 |
| / |
除法運算 |
| % |
取餘運算 |
| i++ ++i |
自增長運算 |
| --i i-- |
自減運算 |
1-9.2 關係運算符
| 運算符 |
描述 |
| > |
大於 |
| >= |
大於等於 |
| < |
小於 |
| <= |
小於等於 |
| != |
不等於 |
| == |
相等 |
| === |
全等（值相等的同時判斷類型一致） |
代碼案例：
|
|
1-9.3 邏輯運算符
| 運算符 |
描述 |
| && |
與運算符 |
| || |
或運算符 |
| ！ |
非運算符，表示取反 |
代碼案例：
|
|
1-9.4 賦值運算符
| 運算符 |
描述 |
| = |
直接賦值操做 |
| += |
運行加法以後賦值 x += y 等同於x = x + y; |
| -= |
運行減法以後賦值 |
| *= |
運行乘法以後賦值 |
| /= |
運行除法以後賦值 |
| %= |
運行取餘以後賦值 |
代碼案例：
|
|
1-10 重點講解
1-10.1 自增自減運算
l 自增運算符++
代碼案例：x++ 先運算x進行賦值等操做，而後進行自增運算
代碼案例：++x 先運算x自增運算，而後進行賦值運算等操做
| var i = 1; i = i ++;// 第一種狀況 i = ++i;//第二種狀況 alert(i); |
l 自減運算符--
相似自增運算符的操做
1-10.2 八進制和十六進制
l 八進制表示法
八進制，逢8進位，因此全部數字中，不會出現超過8的數字,表示方式以下：
0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20...
JS程序中，數字的開頭若是是0，而且數字中沒有出現超過8的數字，就是八進制表示
| var num1 = 075;//八進制 var num2 = 080;//[八進制無效]十進制 |
l 十六進制表示法
十六進制，逢16進位，表示方式以下
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,.
JS程序中，數字的開頭若是是0x，而且數字中沒有出現超過範圍的字符，就是十六進制
| var num1 = 0xa;//十六進制 var num2 = 0xh;//無效十六進制 |
l 八進制--十進制轉換
12->2*8^0+1*8^1=10
l 十六進制--十進制轉換
12->2*16^0+1*16^1 = 18
1-10.3 isNaN()和NaN
l isNaN();
方法用來判斷，指定的數據不是數字【不是數字返回true/不然返回false】
| var x = 12; alert(isNaN(x)); |
l NaN:不是一個數字，如數據類型轉換時，轉換失敗
| var x = 「a12」; alert(parseInt(x)); |
1-10.4 Number處理
l toString()
toString()方法，把一個Number對象轉換爲一個字符串
| var num = 12; var str = num.toString(); |
l toString(radis);
根據指定的radis參數，將整數轉換成指定的進制進行展現
| var num = 16; var s0 = num.toString(); var s1 = num.toString(10);// 默認 var s2 = num.toString(2);// 二進制 var s3 = num.toString(8);// 八進制 var s4 = num.toString(16);// 十六進制 |
l toFixed(radis)
四捨五入保留小數位數，保留的位數由參數radis指定
| var x = 3.1415926; var s1 = x.toFixed(2);保留2位小數 var s2 = x.toFixed(5);//保留5位小數 |
1-11 代碼規範
l 代碼縮進
n 不一樣級別的代碼縮進4個空格。
l 操做符兩邊添加空格
n = 賦值操做符
n 運算符
l 代碼末尾的分號
n 代碼末尾添加分號，增長代碼的可讀性
l 小括號使用
n 涉及運算時，會有代碼運算的優先級問題，一概使用小括號進行解決，增長代碼可讀性
l 雙引號、單引號嵌套
n 引號中若是出現須要引號包含的字符，單引號和雙引號能夠互相嵌套出現。
1-12 做業
n 課堂案例，抄寫兩遍
n 爲抵抗洪水，展現連續做戰89小時，編程計算共多少天零多少小時？ parseInt()
n 小明要到美國旅遊，但是那裏的溫度是華氏溫度爲單位記錄的。小明須要一個程序將華氏溫度轉換爲攝氏度，而且同時展現華氏溫度數值和攝氏溫度數值。請計算華氏80度，爲攝氏多少度(保留3位小數)？
攝氏度和華氏度計算公式：攝氏度=5/9.0*(華氏度-32)；
n 計算兩個文本框的和
n 理解var k = 0; console.log(k++ + ++k + k + k++);
n 掌握邏輯運算的意義
n 掌握八進制、十六進制的寫法
n 掌握NaN的含義（not a number）
n 掌握Number函數
l 綜合應用
n 后羿攻擊780，護甲90，血量2400；亞瑟攻擊620，護甲470，血量3100；一般狀況下，對方的攻擊減去當前人物的護甲值，是真實傷害值。請計算：
u 后羿攻擊亞瑟，攻擊多少次才能殺掉亞瑟
u 亞瑟攻擊后羿，攻擊多少次才能殺掉后羿
n 計算兩個文本框中的數值的加減乘除。
u 要求1：使用parseInt進行類型轉換
u 計算結果使用Math.round()進行四捨五入操做。
- 1. 【轉】js入門
- 2. js入門
- 3. Node Js入門
- 4. D3.js入門
- 5. JS入門
- 6. js入門-one
- 7. JS入門02
- 8. js——javascript入門
- 9. Ext JS入門
- 10. Node Js 入門
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【轉】js入門
- 2. js入門
- 3. Node Js入門
- 4. D3.js入門
- 5. JS入門
- 6. js入門-one
- 7. JS入門02
- 8. js——javascript入門
- 9. Ext JS入門
- 10. Node Js 入門