2021年最新H5網頁開發前端課程目錄介紹

一階段：WEB網頁基礎

1 HTML5+CSS3基礎入門

課程內容

熟悉HTML5入門基本內容（代碼文件、基本結構、注釋、編程問題規范、基本標簽等）；掌握CSS3的基礎入門知識；

項目實戰

京東登錄注冊案例（HTML+CSS）登錄界面指的是需要提供帳號密碼驗證的界面，有控制用戶權限、記錄用戶行為，保護操作安全的作用。登錄界面是所有在線系統的入口。

2 HTML5+CSS3進階

課程內容

掌握繼承與優先級；選擇器、盒子模型、布局樣式等使用方法；能夠進行合理的網頁布局。

項目實戰

個人博客（HTML5+CSS3）個人博客是學員涉足前端領域的第一個項目，運用前端基礎知識，培養項目思維，在入學2周內搭建屬于自己的個人信息分享平臺。

3 Photoshop

課程內容

采用商業案例來學習Photoshop使用，掌握Photoshop基本操作；能夠獨立的進行網頁切圖。

項目實戰

企業網站

（HTML5+CSS3+Photoshop+PxCook）企業網站作為一家公司的互聯網名片，是每家企業必備。強化學員對HTML+CSS+PS(切圖)、各種布局等初期所學全部知識的綜合應用，由于是第一個企業級項目，著重熟悉項目開發流程和培養使用HTML+CSS遇到問題時的分析和調試能力。

第二階段：WEB編程基礎

1 JavaScript基礎

課程內容

了解最前沿JavaScript知識。掌握JS基礎基本語法和基本語句以及ES6&ES7新特性，培養編程邏輯思維，實現網頁的動態交互。

2 BOM+DOM編程

課程內容

認識和了解BOM和DOM模型；掌握window、 location、 history、 navigator、document、 Form、Table等對象的使用；掌握事件處理和DOM節點。理解BOM和DOM模型：掌握各瀏覽器API的使用、熟練操作元素節點理解網站事件類型與機制

項目實戰

案例實踐-H5音樂播放器、H5小游戲（HTML5+CSS3+Javascript）通過游戲應用開發，培養學員開發興趣和參與感，強化Javascript基礎、DOM操作和事件機制在實際場景的應用。

3 JavaScript交互及動畫效果

課程內容

掌握運動框架的封裝(勻速運動緩沖運動多物體運動) 分享到案例右側邊欄滾動案例透明度運動輪播效果案例

項目實戰

企業網站交互進階（HTML5+CSS3+JavaScript）掌握動畫原理，利用原生JS技術編寫動畫交互效果實現企業站的輪播，選項卡，樓層跳轉等常規功能

4 jQuery＋交互及動畫＋jQuery優質插件

課程內容

認識jQuery；熟悉選擇器；屬性與樣式； jQuery基本DOM操作；事件處理；文檔處理；數組和對象操作。學會使用jQuery和JavaScript 和DOM編程的動畫效果制作。掌握jQuery生態圈的流行框架使用；培養學員利用前端工具解決開發過程中問題的能力。

項目實戰

案例實踐-樓層跳動&輪播&表單驗證（HTML5+ CSS3+jQuery）jQuery的流行得益于他龐大的插件生態圈，掌握jQuery插件的使用，將是前端開發者網站開發的利器。

5 版本控制工具SVN&GIT

課程內容

掌握SVN/GIT版本控制工具來維護項目的整個藍圖；熟練使用github 來管理云端代碼倉庫，快速項目組成員多人協作。

6 jQuery EasyUI

課程內容

熟悉jQueryEasyUI框架環境搭建，掌握EasyUI常用插件，使用Easy UI快速搭建后臺

項目實戰

電子購物網站（HTML5+CSS3+jQuery +EasyUI）通過本階段的學習，具備常見動畫需求的開發能力常用插件的使用及開發；逐步培養良好的編程習慣強化企業項目開發流程，培養團隊協作能力。

第三階段：響應式網站與項目自動化開發

1 HTML5、CSS3高級進階

課程內容

掌握HTML5時代多媒體、Web存儲技術及基于瀏覽器的(LBS)地理定位技術，熟悉基于高德地圖、百度地圖等地圖API的應用開發；介紹了H5圖形技術SVG和Canvas；能夠動手編寫圖形報表和使用百度 echarts地圖API的能力。掌握CSS3新選擇器，響應式原理及CSS3媒體查詢，移動端流行的伸縮布局，Web字體、漸變、過渡動畫等技術使用動畫庫實現基于網頁的酷炫動畫效果。

項目實戰

H5動效簡歷/H5原生移動商城（HTM L5+CSS3+Swiper+動畫框架）H5動效簡歷是每一

個H5er的個性化名片，H5原生移動商城和適配調試是面向前端是時代的必須技術。

2 Bootstrap4

課程內容

掌握來自Twitter工程師開發的目前流行度很高的前端響應式框架，包括內置樣式、組件和JavaScript插件；掌握基于Bootstrap 打造的電影主題頁設計。

項目實戰

電影主題頁設計（HTML5+CSS3+Bootstrap）快速打造能夠適應多端的信息展示網站

3 前端依賴管理+CSS預處理語言（Less+Sass）

課程內容

熟練使用bower來管理前端庫，達到一個命令搞定所有項目依賴。

掌握基于CSS的預處理框架Less/Sass，以最簡單的代碼實現復雜樣式；目前主流的前端框架都是基于css預處理語言搭建，學會后具備Bootstrap等框架的閱讀和使用能力。

項目實戰

響應式股票交易平臺（Bootstrap4+Sa ss+PHP+Mysql+GIT）通過本階段學習，通過Boot

strap等框架具備響應式開發能力；并使用多種版本控制工具，進行企業項目的迭代；同時使用預處理框架完成樣式重用和擴展。具備高效快速開發企業項目的能力。

4 Grunt/Gulp自動化構建工具

課程內容

了解前端自動化構建工具的原理；掌握基于Node平臺的Grunt和Gulp 兩大自動化構建工具。

5 Mysql

課程內容

了解Mysql背景，快速搭建Mysql環境，熟悉Sql基礎語法，實現對數據的CRUD操作

項目實戰

響應式股票交易平臺（Bootstrap4+Sa ss+PHP+Mysql+GIT）通過本階段學習，通過Boot

strap等框架具備響應式開發能力；并使用多種版本控制工具，進行企業項目的迭代；同時使用預處理框架完成樣式重用和擴展。具備高效快速開發企業項目的能力

第四階段：Web高級編程與框架原理

1 JavaScript高級編程

課程內容

掌握jJavaScript面向對象思想；原型設計原理及使用。了解 JavaScript程序的編譯原理；掌握遞歸、惰性載入、匿名、閉包及回調等高級函數的使用。掌握ES6前沿新特性。

2 jQuery插件開發

課程內容

學習插件開發模式,并自己動手實現動態表格查詢和表單驗證等插件。

案例實踐

原生表單驗證插件（HTML5+CSS3+ ES6）能夠通過面向對象思想開發jQuery插件，學

習實踐JS設計模式，具備初級JS框架的編寫能力。

3 NodeJS

課程內容

掌握Node服務端編程技術，Expres搭建服務器，基于Express框架編寫后端代碼，實現前端和后端全棧開發

4 WebSocket

課程內容

掌握掌握HTTP協議、客戶端數據傳輸方式，掌握WebSocket 在 HTML5 領域的應用場景，用于實現客戶端和服務器的長鏈接。

案例實戰

在線聊天室（HTML5+CSS3+JS+WebSocket）快速打造能夠多人在線聊天的聊天室案例。

5 MVVM架構源碼解析

課程內容

掌握MVC、MVP和MVVM架構的演變歷史，掌握分層開發的思想，了解雙向綁定原理，實現基于面向對象方式實現一個基于MVVM架構的 minVue框架。

案例實踐

miniVue框架（面向對象編程）動手打造第一款屬于自己的前端主流框架。

第五階段：VUE全家桶與多端項目管理

1 VUE2-VUE3

課程內容

掌握Vue2框架的環境搭建，指令，表達式，計算屬性、偵聽器、生命周期和組件開發，掌握主流的VUE2組件高階、消息通訊，熟悉Vant、 iView、MintUI移動端框架，使用Vue-cli來搭建工程和開發Vue項目。

2 ElementUI＋ Koa2(Node.js)＋Mysql

課程內容

熟練使用基于Vue2的餓了么前端視圖框架ElementUI，高效打造大型復雜的用戶界面。Koa是Express 原班人馬打造更小、更健壯、更富有表現力Node框架，使用Koa2打開更前沿的后臺開發模式，使用甲骨文公司的Mysql關系數據庫來管理更為大型并發的數據。

項目實戰

大型超市管理系統、外賣后臺管理系統（ElementUI＋Koa2＋Mysql+GIT）通過最熱門的Node+Koa2+Mysql開發模式獨立完成網站開發通過NPM生態圈通過分享和實踐編碼進行自我提升成為一名真正的全棧工程師。

3 TypeScript

課程內容

TypeScript是一種由微軟開發的自由和開源的編程語言。它是 JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程

4 webpack模塊加載器 &打包工具

課程內容

掌握最前沿模塊化打包工具，形成組件化開發思想，極大簡化項目開發的成本。

項目實戰

外賣APP、源碼音樂App （TS+Vue+Vuex+Vant+axios+GIT）熟練掌握Vue全家桶項目架構。

5 uniapp/Taro微信小程序

課程內容

微信小程序作為引爆H5時代的標識技術，通過學習了解視圖層、邏輯層相關知識，深入小程序框架和組件的使用。uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到 iOS、Android、H5、小程序等多個平臺。Taro是來自京東凹凸實驗室的多端統一開發框架Taro，可以讓你使用一套代碼打通WebApp、微信小程序、支付寶小程序、百度智能小程序、字節跳動小程序等。

項目實戰

源碼電影小程序/四海香美食小程序（WXML + WXSS + JS + 豆瓣開放接口API）通過

本階段學習，具備微信、支付寶小程序、百度智能小程序和字節跳動小程序的開發能力。

第六階段：React移動混合式開發

1 React

課程內容

掌握來自Facebook工程師開發的流行前端框架-ReactJs；熟練使用ReactJs基本語法、聲明周期、React-Router及基于ES6的 React組件開發；掌握React Redux架構在實際項目中的應用。掌握基于ReactJS衍生出來的本地化跨平臺框架；

項目實戰

源碼房產App、源碼電影App （TS+React+Redux+Webpack+Antd-mobile+ GIT）熟練掌握React全家桶項目架構

2 React Native/Flutter

課程內容

熟練搭建ReactNative環境、掌握本地化布局和常見組件。 Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面（原生應用）。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，并且Flutter是完全免費、開源的。

項目實戰

源碼生活APP（ReactNative/Flutter +AntD+DVA+高德地圖API）通過本階段學習，具

備與移動端開發人員的合作完成低成本、高性能、高健壯的App應用的能力。

第七階段：就業與服務

1 就業指導

企業通用面試技巧、知識點面試技巧、模擬面試、項目面試技巧、語言表達練習、互面總結、總結和復習面試題。

2 面試直通車

面試經驗交流、面試技術解惑、面試項目跟蹤。

3 售后服務

隨時隨地為同學們提供全方位工作問題解決方案！源碼時代是獨家具有售后的服務機構！

VG 動畫有很多種實現方法，也有很大SVG動畫庫，現在我們就來介紹 svg動畫實現方法都有哪些？

一、SVG 的 animation

SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：

set
animate
animateColor
animateTransform
animateMotion

1.1、set

set 為動畫元素設置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。

使用語法：

<set attributeName="" attributeType="" to="" begin="" />

attributeName ：是要改變的元素屬性名稱。
attributeType ：是表明attributeName屬性值的列表，支持三個固定參數 CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認值，如果你不知道該選哪個就填auto，瀏覽器自己判別。
to ：動畫結束的屬性值。
begin ：動畫延遲時間。

eg：繪制一個半徑為200的圓，4秒之后，半徑變為50。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基礎的動畫元素，實現單屬性的過渡效果。

使用語法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

from ：過渡效果的屬性開始值。
to：過渡效果的屬性結束值。
begin：動畫開始時間。
dur：動畫過渡時間，控制動畫速度。
repeatCount：動畫重復次數。

eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內從200逐漸變為50。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制顏色動畫，animate也可以實現這個效果，所以該屬性目前已被廢棄。

1.4、animateTransform

實現transform變換動畫效果，與css3的transform變換類似。實現平移、旋轉、縮放等效果。

使用語法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

repeatCount：重復次數，設置為 indefinite 表示無限循環，一直執行。
type：添加 transform 變換類型。
eg：繪制一個半徑為200的圓，4秒之后開始縮放，在2秒內從1.5縮小到0倍。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定義動畫路徑，讓SVG各個圖形，沿著指定路徑運動。

使用語法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

path：定義路徑，使用語法與《HTML5(八)——SVG 之 path 詳解》path的d屬性一致。
begin：延遲時間。
dur：動畫執行時間。

eg：繪制一個半徑為10的圓，延遲4秒從左上角運動的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠實現動畫，但是無法動態地添加事件，所以接下來我們就看看 js 如何制作動畫。

二、JavaScript 控制

上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內置形狀元素，還可以給任意元素添加事件。

給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名或者addEventListener添加。

eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現旋轉效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload = function(){
  var line = document.getElementById("line")
  line.onclick = function(){
   let start = parseInt(line.getAttribute("x1")),
       end=400,dis = start-end
   requestAnimationFrame(next)
   let count = 0;
   function next(){
    count++
    let a = count/200,cur = Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG動畫，主要利用 requestAnimationFrame 來實現一幀一幀的改變。

我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發現SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。

三、Rapha?l.js (拉斐爾)

Raphael.js是通過SVG/VML+js實現跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質還是一個javascript庫，使用簡單，容易上手。

使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創建畫布

Rapheal有兩種創建畫布的方式：

第一種：瀏覽器窗口上創建畫布

創建語法：

var paper = Raphael(x,y,width,height)

x,y是畫布左上角的坐標，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。

第二種：在一個元素中創建畫布

創建語法：

var paper = Raphael(element, width, height);

element是元素節點本身或ID width、height是畫布的寬度和高度。

3.2、繪制圖形

畫布創建好之后，該對象自帶SVG內置圖形有矩形、圓形、橢圓形。他們的方法分別為：

paper.circle(cx, cy, r); // (cx , cy)圓心坐標 r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標 width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標 rx水平半徑 ry垂直半徑

eg：在div中繪制一個圓形，一個橢圓、一個矩形。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

運行結果如下：

除了簡單圖形之外，還可以繪制復雜圖形，如三角形、心型，這時就使用path方法。

使用語法：paper.path(pathString)

pathString是由一個或多個命令組成，每個命令以字母開始，多個參數是由逗號分隔。

eg：繪制一個三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

還可以繪制文字，如果需要換行，使用 \n 。

文字語法：paper.text(x,y,text)

(x,y)是文字坐標，text是要繪制的文字。

3.3、設置屬性

圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設置屬性。

使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設置屬性。

注意：如果只設置一個屬性時，可以省略‘{}’。如：rect.attr('fill','pink')

eg：給上邊的矩形添加邊框和背景色。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 let rect = paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語法：

obj.click(function(){
 //需要操作的內容
})

3.5、添加動畫

animate為指定圖形添加動畫并執行。

使用語法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

屬性名和屬性值就根據你想要的動畫類型加就ok。

time：動畫所需時間。

type：指動畫緩動類型。常用值有：

linear - 線性漸變
ease-in | easeIn | < - 由慢到快
ease-out | easeOut | > - 由快到慢
ease-in-out | easeInOut | <> - 由慢到快再到慢
back-in | backIn - 開始時回彈
back-out | backOut - 結束時回彈
elastic - 橡皮筋
bounce - 彈跳

eg：點擊矩形，矩形緩緩變大。

<div id="box"></div>
<script>
 var paper = Raphael("box",800,500)
 let rect = paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

復制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發現都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。

目錄總覽

1、對象

在 JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字符串、數值、數組、函數等。

對象是由屬性和方法組成的：

屬性：事物的特征，在對象中用屬性來表示（常用名詞）
方法：事物的行為，在對象中用方法來表示（常用動詞）

1.1、創建對象

在 JavaScript 中，現階段我們可以采用三種方式創建對象（object）：

利用字面量創建對象
利用 new Object創建對象
利用構造函數創建對象

①利用字面量創建對象

對象字面量：就是花括號 { } 里面包含了表達這個具體事物（對象）的屬性和方法

{ } 里面采取鍵值對的形式表示

鍵：相當于屬性名
值：相當于屬性值，可以是任意類型的值（數字類型、字符串類型、布爾類型，函數類型等）

var star = {
  name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};
// 多個屬性或者方法中間用逗號隔開
// 方法冒號后面跟的是一個匿名函數

對象的調用

對象里面的屬性調用 : 對象.屬性名，這個小點 . 就理解為“ 的 ”
對象里面屬性的另一種調用方式 : 對象[‘屬性名’]，注意方括號里面的屬性必須加引號，我們后面會用
對象里面的方法調用：對象.方法名() ，注意這個方法名字后面一定加括號

console.log(star.name)     // 調用名字屬性
console.log(star['name'])  // 調用名字屬性
star.sayHi();              // 調用 sayHi 方法,注意，一定不要忘記帶后面的括號

變量、屬性、函數、方法總結

變量：單獨聲明賦值，單獨存在
屬性：對象里面的變量稱為屬性，不需要聲明，用來描述該對象的特征
函數：單獨存在的，通過==“函數名()”==的方式就可以調用
方法：對象里面的函數稱為方法，方法不需要聲明，使用==“對象.方法名()”==的方式就可以調用，方法用來描述該對象的行為和功能。

②利用 new Object 創建對象

跟之前的 new Array() 原理一致：var 對象名 = new Object();

使用的格式：對象.屬性 = 值

var obj = new Object(); //創建了一個空的對象
obj.name = '張三豐';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}

//1.我們是利用等號賦值的方法添加對象
//2.每個屬性和方法之間用分號結束
console.log(obj.name);
console.log(obj['sex']);
obj.sayHi();

③利用構造函數創建對象

構造函數 ：是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與 new 運算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個函數里面。

在 js 中，使用構造函數要時要注意以下兩點：

構造函數用于創建某一類對象，其首字母要大寫
構造函數要和 new 一起使用才有意義

//構造函數的語法格式
function 構造函數名() {
    this.屬性 = 值;
    this.方法 = function() {}
}
new 構造函數名();

//1. 構造函數名字首字母要大寫
//2. 構造函數不需要return就可以返回結果
//3. 調用構造函數必須使用 new
//4. 我們只要new Star() 調用函數就創建了一個對象
//5. 我們的屬性和方法前面必須加this
function Star(uname,age,sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}
var ldh = new Star('劉德華',18,'男');
console.log(typeof ldh) // object對象，調用函數返回的是對象

console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
//把冰雨傳給了sang

var zxy = new Star('張學友',19,'男');

構造函數名字首字母要大寫
函數內的屬性和方法前面需要添加 this ，表示當前對象的屬性和方法。
構造函數中不需要 return 返回結果。
當我們創建對象的時候，必須用 new 來調用構造函數。

構造函數和對象

構造函數，如 Stars()，抽象了對象的公共部分，封裝到了函數里面，它泛指某一大類（class）
創建對象，如 new Stars()，特指某一個，通過 new 關鍵字創建對象的過程我們也稱為對象實例化

new關鍵字

new 在執行時會做四件事:

在內存中創建一個新的空對象。
讓 this 指向這個新的對象。
執行構造函數里面的代碼，給這個新對象添加屬性和方法
返回這個新對象（所以構造函數里面不需要return）

1.2、遍歷對象的屬性

for...in 語句用于對數組或者對象的屬性進行循環操作

語法如下

for(變量 in 對象名字){
    // 在此執行代碼
}

語法中的變量是自定義的，它需要符合命名規范，通常我們會將這個變量寫為 k 或者 key。

for(var k in obj) {
    console.log(k);		//這里的 k 是屬性名
    console.log(obj[k]);//這里的 obj[k] 是屬性值
}

var obj = {
    name: '秦sir',
    age: 18,
    sex: '男',
    fn:function() {};
};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);

//for in 遍歷我們的對象
//for (變量 in 對象){}
//我們使用for in 里面的變量 我們喜歡寫k 或者key
for(var k in obj){
    console.log(k); // k 變量 輸出得到的是屬性名
    console.log(obj[k]); // obj[k] 得到的是屬性值
}

2、內置對象

JavaScript 中的對象分為3種：自定義對象、內置對象、瀏覽器對象
內置對象就是指 JS 語言自帶的一些對象，這些對象供開發者使用，并提供了一些常用的或是最基本而必要的功能
JavaScript 提供了多個內置對象：Math、 Date 、Array、String等

2.1、查文檔

學習一個內置對象的使用，只要學會其常用成員的使用即可，我們可以通過查文檔學習，可以通過MDN/W3C來查詢

MDN: https://developer.mozilla.org/zh-CN/

2.1.1、如何學習對象中的方法

查閱該方法的功能
查看里面參數的意義和類型
查看返回值的意義和類型
通過 demo 進行測試

3、Math對象

Math 對象不是構造函數，它具有數學常數和函數的屬性和方法。跟數學相關的運算（求絕對值，取整、最大值等）可以使用 Math 中的成員。

// Math數學對象，不是一個構造函數，所以我們不需要new 來調用，而是直接使用里面的屬性和方法即可
Math.PI		 			// 圓周率
Math.floor() 	 		// 向下取整
Math.ceil()             // 向上取整
Math.round()            // 四舍五入版 就近取整   注意 -3.5   結果是  -3 
Math.abs()		 		// 絕對值
Math.max()/Math.min()	// 求最大和最小值

注意：上面的方法必須帶括號

console.log(Math.PI);  
console.log(Math.max(1,99,3)); // 99

練習：封裝自己的數學對象

利用對象封裝自己的數學對象，里面有PI 最大值和最小值

var myMath = {
  PI: 3.141592653,
    max: function() {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    },
    min: function() {
        var min = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));

3.Math絕對值和三個取整方法

Math.abs() 取絕對值
三個取整方法：
Math.floor() : 向下取整
Math.ceil() : 向上取整
Matg.round() : 四舍五入，其他數字都是四舍五入，但是5特殊，它往大了取

//1.絕對值方法
console.log(Math.abs(1));  // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 1 隱式轉換，會把字符串 -1 轉換為數字型
//2.三個取整方法
console.log(Math.floor(1.1)); // 1 向下取整，向最小的取值 floor-地板
console.log(Math.floor(1.9)); //1

console.log(Math.ceil(1.1)); //2 向上取整，向最大的取值 ceil-天花板
console.log(Math.ceil(1.9)); //2 

//四舍五入 其他數字都是四舍五入，但是5特殊，它往大了取

console.log(Math.round(1.1)); //1 四舍五入
console.log(Math.round(1.5)); //2
console.log(Math.round(1.9)); //2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1

4.隨機數方法random()

random() 方法可以隨機返回一個小數，其取值范圍是 [0，1)，左閉右開 0 <= x < 1
得到一個兩數之間的隨機整數，包括第一個數，不包括第二個數

// 得到兩個數之間的隨機整數，并且包含這兩個整數
function getRandom(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));

1.隨機點名

var arr = ['張三', '李四','王五','秦六']；
console.log(arr[getRandom(0,arr.length - 1)]);

2.猜數字游戲

function getRandom(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1,10);
while(true) { //死循環 ，需要退出循環條件
     var num = prompt('請輸入1~10之間的一個整數:');
     if(num > random) {
         alert('你猜大了');
     }else if (num < random) {
         alert('你猜小了');
     }else {
         alert('你猜中了');
         break; //退出整個循環
     }
}

4、Data()日期對象

Date 對象和 Math 對象不一樣，他是一個構造函數，所以我們需要實例化后才能使用
Date 實例用來處理日期和時間

4.1、Date()方法的使用

4.1.1、獲取當前時間必須實例化

var now = new Date();
console.log(now);

4.1.2、Date()構造函數的參數

如果括號里面有時間，就返回參數里面的時間。例如日期格式字符串為 ‘2019-5-1’，可以寫成new Date('2019-5-1') 或者 new Date('2019/5/1')

如果Date()不寫參數，就返回當前時間
如果Date()里面寫參數，就返回括號里面輸入的時間

// 1.如果沒有參數，返回當前系統的當前時間
var now = new Date();
console.log(now);


// 2.參數常用的寫法 數字型 2019,10,1  字符串型 '2019-10-1 8:8:8' 時分秒
// 如果Date()里面寫參數，就返回括號里面輸入的時間 
var data = new Date(2019,10,1);
console.log(data);  // 返回的是11月不是10月

var data2 = new Date('2019-10-1 8:8:8');
console.log(data2);

4.2、日期格式化

我們想要 2019-8-8 8:8:8 格式的日期，要怎么辦？

需要獲取日期指定的部分，所以我們要手動的得到這種格式

方法名	說明	代碼
getFullYear()	獲取當年	dObj.getFullYear()
getMonth()	獲取當月(0-11)	dObj.getMonth()
getDate()	獲取當天日期	dObj.getDate()
getDay()	獲取星期幾(周日0到周六6)	dObj.getDay()
getHours()	獲取當前小時	dObj.getHours()
getMinutes()	獲取當前小時	dObj.getMinutes()
getSeconds()	獲取當前秒鐘	dObj.gerSeconds()

示例：

var date = new Date();
console.log(date.getFullYear()); // 返回當前日期的年 2019
console.log(date.getMonth() + 1);  //返回的月份小一個月 記得月份 +1
console.log(date.getDate); //返回的是幾號
console.log(date.getDay());  //周一返回1 周6返回六 周日返回0



// 寫一個 2019年 5月 1日 星期三
var date = new Date(); 
var year =  date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
console.log('今天是' + year +'年' + month + '月' + dates +'日' );

// 封裝一個函數返回當前的時分秒 格式 08:08:08
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

4.3、獲取日期的總的毫秒形式

date.valueOf() ：得到現在時間距離1970.1.1總的毫秒數
date.getTime() ：得到現在時間距離1970.1.1總的毫秒數

// 獲取Date總的毫秒數 不是當前時間的毫秒數 而是距離1970年1月1號過了多少毫秒數
// 實例化Date對象
var date = new Date();

// 1 .通過 valueOf()  getTime() 用于獲取對象的原始值
console.log(date.valueOf());  //得到現在時間距離1970.1.1總的毫秒數
console.log(date.getTime());

// 2.簡單的寫法
var date1 = +new Date();  // +new Date()返回的就是總的毫秒數，
console.log(date1);

// 3. HTML5中提供的方法 獲得總的毫秒數 有兼容性問題
console.log(Date.now());

倒計時效果

示例：

function countDown(time) {
    var nowTime = +new Date(); //沒有參數，返回的是當前時間總的毫秒數
    var inputTime = +new Date(time); // 有參數，返回的是用戶輸入時間的總毫秒數
    var times = (inputTime - nowTime) / 1000; //times就是剩余時間的總的秒數

    var d = parseInt(times / 60 / 60 / 24); //天數
    d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //小時
    h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); //分
    m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); //秒
    s < 10 ? '0' + s : s;
    return d + '天' + h + '時' + m + '分' + s + '秒';
}
console.log(countDown('2020-11-09 18:29:00'));
var date = new Date;
console.log(date); //現在時間

5、數組對象

5.1、數組對象的創建

創建數組對象的兩種方式

字面量方式
new Array()

5.2、檢測是否為數組

instanceof 運算符，可以判斷一個對象是否屬于某種類型
Array.isArray() 用于判斷一個對象是否為數組，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

5.3、添加刪除數組元素

方法名	說明	返回值
push(參數1…)	末尾添加一個或多個元素，注意修改原數組	并返回新的長度
pop()	刪除數組最后一個元素	返回它刪除的元素的值
unshift(參數1…)	向數組的開頭添加一個或更多元素，注意修改原數組	并返回新的長度
shift()	刪除數組的第一個元素，數組長度減1，無參數，修改原數組	并返回第一個元素

示例：

// 1.push() 在我們數組的末尾，添加一個或者多個數組元素 push 推
var arr = [1, 2, 3];
arr.push(4, '秦曉');
console.log(arr);
console.log(arr.push(4, '秦曉'));
console.log(arr);
// push 完畢之后，返回結果是新數組的長度


// 2. unshift 在我們數組的開頭 添加一個或者多個數組元素
arr.unshift('red');
console.log(arr);

// pop() 它可以刪除數組的最后一個元素，一次只能刪除一個元素
arr.pop(); //不加參數
// shift() 它剋刪除數組的第一個元素,一次只能刪除一個元素
arr.shift(); //不加參數

篩選數組

有一個包含工資的數組[1500,1200,2000,2100,1800],要求把數組中工資超過2000的刪除，剩余的放到新數組里面

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

5.4、數組排序

方法名	說明	是否修改原數組
reverse()	顛倒數組中元素的順序，無參數	該方法會改變原來的數組，返回新數組
sort()	對數組的元素進行排序	該方法會改變原來的數組，返回新數組

示例：

// 1.翻轉數組
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);

// 2.數組排序(冒泡排序)
var arr1 = [3,4,7,1];
arr1.sort();
console.log(arr1);

// 對于雙位數
var arr = [1,64,9,61];
arr.sort(function(a,b) {
     return b - a;  //降序的排列
     return a - b; //升序
 	}
 )

5.5、數組索引

方法名	說明	返回值
indexOf()	數組中查找給定元素的第一個索引	如果存在返回索引號，如果不存在，則返回-1
lastIndexOf()	在數組的最后一個索引，從后向前索引	如果存在返回索引號，如果不存在，則返回-1

示例：

//返回數組元素索引號方法 indexOf(數組元素)  作用就是返回該數組元素的索引號
//它只發返回第一個滿足條件的索引號
//如果找不到元素，則返回-1
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));  // 2

console.log(arr.lastIndexOf('blue')); // 4

5.5.1、數組去重

分析：把舊數組里面不重復的元素選取出來放到新數組中，重復的元素只保留一個，放到新數組中去重。

核心算法：我們遍歷舊數組，然后拿著舊數組元素去查詢新數組，如果該元素在新數組里面沒有出現過，我們就添加，否則不添加。

我們怎么知道該元素沒有存在？利用新數組.indexOf(數組元素) 如果返回是 -1 就說明新數組里面沒有改元素

// 封裝一個去重的函數 unique 獨一無二的
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);

5.6、數組轉化為字符串

方法名	說明	返回值
toString()	把數組轉換成字符串，逗號分隔每一項	返回一個字符串
join(‘分隔符’)	方法用于把數組中的所有元素轉換為一個字符串	返回一個字符串

示例：

// 1.toString() 將我們的數組轉換為字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不寫默認用逗號分割
console.log(arr1.join('-')); //  green-blue-red
console.log(arr1.join('&')); // green&blue&red

5.7、其他方法

方法名	說明	返回值
concat()	連接兩個或多個數組不影響原數組	返回一個新的數組
slice()	數組截取slice(begin,end)	返回被截取項目的新數組
splice()	數組刪除splice(第幾個開始要刪除的個數)	返回被刪除項目的新數組，這個會影響原數組

6、字符串對象

6.1、基本包裝類型

為了方便操作基本數據類型，JavaScript 還提供了三個特殊的引用類型：String、Number和 Boolean。

基本包裝類型就是把簡單數據類型包裝成為復雜數據類型，這樣基本數據類型就有了屬性和方法。

我們看看下面代碼有什么問題嗎？

var str = 'andy';
console.log(str.length);

按道理基本數據類型是沒有屬性和方法的，而對象才有屬性和方法，但上面代碼卻可以執行，這是因為 js 會把基本數據類型包裝為復雜數據類型，其執行過程如下：

// 1.生成臨時變量,把簡單類型包裝為復雜數據類型
var temp = new String('andy');
// 2.賦值給我們聲明的字符變量
str = temp;
// 3.銷毀臨時變量
temp = null;

6.2、字符串的不可變

指的是里面的值不可變，雖然看上去可以改變內容，但其實是地址變了，內存中新開辟了一個內存空間。

var str = 'abc';
str = 'hello';
// 當重新給 str 賦值的時候，常量'abc'不會被修改，依然在內存中
// 重新給字符串賦值，會重新在內存中開辟空間，這個特點就是字符串的不可變
// 由于字符串的不可變，在大量拼接字符串的時候會有效率問題
var str = '';
for(var i = 0; i < 10000;  i++){
    str += i;
}
console.log(str);
// 這個結果需要花費大量時間來顯示，因為需要不斷的開辟新的空間

6.3、根據字符返回位置

字符串所有的方法，都不會修改字符串本身(字符串是不可變的)，操作完成會返回一個新的字符串

方法名	說明
indexOf(‘要查找的字符’，開始的位置)	返回指定內容在元字符串中的位置，如果找不到就返回-1，開始的位置是index索引號
lastIndexOf()	從后往前找，只找第一個匹配的

// 字符串對象  根據字符返回位置  str.indexOf('要查找的字符', [起始的位置])
var str = '改革春風吹滿地，春天來了';
console.log(str.indexOf('春')); //默認從0開始查找 ，結果為2
console.log(str.indexOf('春', 3)); // 從索引號是 3的位置開始往后查找，結果是8

6.3.1、返回字符位置

查找字符串 “abcoefoxyozzopp” 中所有o出現的位置以及次數

核心算法：先查找第一個o出現的位置
然后只要 indexOf返回的結果不是 -1 就繼續往后查找
因為 indexOf 只能查找到第一個，所以后面的查找，一定是當前索引加1，從而繼續查找

var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出現的次數是: ' + num);

6.4、根據位置返回字符

方法名	說明	使用
charAt(index)	返回指定位置的字符(index字符串的索引號)	str.charAt(0)
charCodeAt(index)	獲取指定位置處字符的ASCII碼(index索引號)	str.charCodeAt(0)
str[index]	獲取指定位置處字符	HTML,IE8+支持和charAt()等效

返回字符位置

判斷一個字符串 “abcoefoxyozzopp” 中出現次數最多的字符，并統計其次數

核心算法：利用 charAt() 遍歷這個字符串
把每個字符都存儲給對象，如果對象沒有該屬性，就為1，如果存在了就 +1
遍歷對象，得到最大值和該字符

<script>
  // 有一個對象 來判斷是否有該屬性 對象['屬性名']
    var o = {
        age: 18
    }
    if (o['sex']) {
        console.log('里面有該屬性');

    } else {
        console.log('沒有該屬性');

    }

    //  判斷一個字符串 'abcoefoxyozzopp' 中出現次數最多的字符，并統計其次數。
    // o.a = 1
    // o.b = 1
    // o.c = 1
    // o.o = 4
    // 核心算法：利用 charAt() 遍歷這個字符串
    // 把每個字符都存儲給對象， 如果對象沒有該屬性，就為1，如果存在了就 +1
    // 遍歷對象，得到最大值和該字符
    var str = 'abcoefoxyozzopp';
    var o = {};
    for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i); // chars 是 字符串的每一個字符
        if (o[chars]) { // o[chars] 得到的是屬性值
            o[chars]++;
        } else {
            o[chars] = 1;
        }
    }
    console.log(o);
    // 2. 遍歷對象
    var max = 0;
    var ch = '';
    for (var k in o) {
        // k 得到是 屬性名
        // o[k] 得到的是屬性值
        if (o[k] > max) {
            max = o[k];
            ch = k;
        }
    }
    console.log(max);
    console.log('最多的字符是' + ch);
</script>

6.5、字符串操作方法

方法名	說明
concat(str1,str2,str3…)	concat() 方法用于連接兩個或對各字符串。拼接字符串
substr(start,length)	從 start 位置開始(索引號), length 取的個數。
slice(start,end)	從 start 位置開始，截取到 end 位置，end 取不到 (兩個都是索引號)
substring(start,end)	從 start 位置開始，截取到 end 位置，end 取不到 (基本和 slice 相同，但是不接受負)

示例：

<script>
    // 1. concat('字符串1','字符串2'....)
    var str = 'andy';
    console.log(str.concat('red'));

    // 2. substr('截取的起始位置', '截取幾個字符');
    var str1 = '改革春風吹滿地';
    console.log(str1.substr(2, 2)); // 第一個2 是索引號的2   第二個2 是取幾個字符
</script>

6.6、replace()方法

replace() 方法用于在字符串中用一些字符替換另一些字符

其使用格式：replace(被替換的字符,要替換為的字符串)

<script>
  // 1. 替換字符 replace('被替換的字符', '替換為的字符')  它只會替換第一個字符
    var str = 'andyandy';
    console.log(str.replace('a', 'b'));
    // 有一個字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替換為 *
    var str1 = 'abcoefoxyozzopp';
    while (str1.indexOf('o') !== -1) {
        str1 = str1.replace('o', '*');
    }
    console.log(str1);
</script>

6.7、split()方法

split() 方法用于切分字符串，它可以將字符串切分為數組。在切分完畢之后，返回的是一個新數組。

例如下面代碼：

var str = 'a,b,c,d';
console.log(str.split(','));
// 返回的是一個數組 ['a', 'b', 'c', 'd']

<script>
// 2. 字符轉換為數組 split('分隔符')    前面我們學過 join 把數組轉換為字符串
    var str2 = 'red, pink, blue';
    console.log(str2.split(','));
    var str3 = 'red&pink&blue';
    console.log(str3.split('&'));
</script>

6.8、大小寫轉換

toUpperCase() 轉換大寫
toLowerCase() 轉換小寫

7、簡單類型于復雜類型

簡單類型又叫做基本數據類型或者值類型，復雜類型又叫做引用類型。

值類型：簡單數據類型/基本數據類型，在存儲時變量中存儲的是值本身，因此叫做值類型

string ，number，boolean，undefined，null

引用類型：復雜數據類型，在存儲時變量中存儲的僅僅是地址（引用），因此叫做引用數據類型

通過 new 關鍵字創建的對象（系統對象、自定義對象），如 Object、Array、Date等

7.1、堆和棧

堆棧空間分配區別：

棧（操作系統）：由操作系統自動分配釋放存放函數的參數值、局部變量的值等。其操作方式類似于數據結構中的棧；

簡單數據類型存放到棧里面

2，堆（操作系統）：存儲復雜類型(對象)，一般由程序員分配釋放，若程序員不釋放，由垃圾回收機制回收。

復雜數據類型存放到堆里面

注意：JavaScript中沒有堆棧的概念，通過堆棧的方式，可以讓大家更容易理解代碼的一些執行方式，便于將來學習其他語言。

7.2、簡單類型的內存分配

值類型（簡單數據類型）： string ，number，boolean，undefined，null
值類型變量的數據直接存放在變量（棧空間）中

引用類型（復雜數據類型）：通過 new 關鍵字創建的對象（系統對象、自定義對象），如 Object、Array、Date等
引用類型變量（棧空間）里存放的是地址，真正的對象實例存放在堆空間中

<script>
    // 簡單數據類型 null  返回的是一個空的對象  object 
    var timer = null;
    console.log(typeof timer);
    // 如果有個變量我們以后打算存儲為對象，暫時沒想好放啥， 這個時候就給 null 
    // 1. 簡單數據類型 是存放在棧里面 里面直接開辟一個空間存放的是值
    // 2. 復雜數據類型 首先在棧里面存放地址 十六進制表示  然后這個地址指向堆里面的數據
</script>

7.3、簡單類型傳參

函數的形參也可以看做是一個變量，當我們把一個值類型變量作為參數傳給函數的形參時，其實是把變量在棧空間里的值復制了一份給形參，那么在方法內部對形參做任何修改，都不會影響到的外部變量。

<script>
   // 簡單數據類型傳參
    function fn(a) {
        a++;
        console.log(a);
    }
    var x = 10;
    fn(x);
    console.log(x);
</script>

7.4、復雜類型傳參

函數的形參也可以看做是一個變量，當我們把引用類型變量傳給形參時，其實是把變量在棧空間里保存的堆地址復制給了形參，形參和實參其實保存的是同一個堆地址，所以操作的是同一個對象。

在線咨詢

上一篇：9個視覺感出彩的網頁首屏設計「心」作者：Maxim Nilov
下一篇：HTML培訓：如何在HTML中更改文本大小

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

2021年最新H5網頁開發前端課程目錄介紹

一、SVG 的 animation

二、JavaScript 控制

三、Rapha?l.js (拉斐爾)

目錄總覽

1、對象

1.1、創建對象

①利用字面量創建對象

對象的調用

變量、屬性、函數、方法總結

②利用 new Object 創建對象

③利用構造函數創建對象

構造函數和對象

new關鍵字

1.2、遍歷對象的屬性

2、內置對象

2.1、查文檔

2.1.1、如何學習對象中的方法

3、Math對象

3.Math絕對值和三個取整方法

4.隨機數方法random()

4、Data()日期對象

4.1、Date()方法的使用

4.1.1、獲取當前時間必須實例化

4.1.2、Date()構造函數的參數

4.2、日期格式化

4.3、獲取日期的總的毫秒形式

倒計時效果

5、數組對象

5.1、數組對象的創建

5.2、檢測是否為數組

5.3、添加刪除數組元素

篩選數組

5.4、數組排序

5.5、數組索引

5.5.1、數組去重

5.6、數組轉化為字符串

5.7、其他方法

6、字符串對象

6.1、基本包裝類型

6.2、字符串的不可變

6.3、根據字符返回位置

6.3.1、返回字符位置

6.4、根據位置返回字符

返回字符位置

6.5、字符串操作方法

6.6、replace()方法

6.7、split()方法

6.8、大小寫轉換

7、簡單類型于復雜類型

7.1、堆和棧

7.2、簡單類型的內存分配

7.3、簡單類型傳參

7.4、復雜類型傳參

您的項目需求