本篇內容主要是PINK老師教程匯總（主要內容如下）

1.web端布局：先講解HTML5常用標簽，接著講解CSS3常見樣式增加的H5C3新特性，新語法，最后講解PC端品優購項目。以及CSS3動畫 2d 3d效果

2. 移動端布局：主要講解視口、二倍圖、流失布局，flex布局，rem布局，響應式布局，還會增加摹客使用等工具。

3.JavaScript基礎從變量的定義與使用、流程控制語句、數組、函數、構造函數、內置對象以及對象等

4.web API 講解如何獲取DOM元素，如何操作DOM 元素，BOM操作 移動端制作網頁特效

5. 后面還會有js高級，ES6類面向對象語法，面向對象案例，原型和原型鏈等等。

6. 還有會jquery 綜合 + echarts數據可視化（待更）

教程推薦：

前端Html5+Css3+移動Web教程，前端Web入門教程，零基礎前端開發視頻教程Jav

JavaScript基礎語法-dom-bom-js-es6新語法-jQuery-數據可視化echarts黑馬pink老師前端入門基礎視頻教程(500多集)持續

?一、初識 JavaScript

1 JavaScript 是什么

布蘭登·艾奇（Brendan Eich，1961年～）。

神奇的大哥用10天完成 JavaScript 設計。

最初命名為 LiveScript，后來在與 Sun 合作之后將其改名為 JavaScript。

JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言 （Script 是腳本的意思）

腳本語言：不需要編譯，運行過程中由 js 解釋器( js 引擎）逐行來進行解釋并執行

現在也可以基于 Node.js 技術進行服務器端編程

?

2、JavaScript 的作用

1、表單動態校驗（密碼強度檢測）? （ JS 產生最初的目的 ）

2、網頁特效

3、服務端開發(Node.js)

4、桌面程序(Electron)

?5、App(Cordova)

6、控制硬件-物聯網(Ruff)

7、游戲開發(cocos2d-js)

3、?HTML/CSS/JS 的關系

HTML/CSS 標記語言--描述類語言

HTML 決定網頁結構和內容( 決定看到什么 )，相當于人的身體

CSS 決定網頁呈現給用戶的模樣( 決定好不好看 )，相當于給人穿衣服、化妝

JS 腳本語言--編程類語言

實現業務邏輯和頁面控制( 決定功能 )，相當于人的各種動作

4、瀏覽器執行 JS 簡介

瀏覽器分成兩部分：渲染引擎和 JS 引擎

渲染引擎：用來解析HTML與CSS，俗稱內核，比如 chrome 瀏覽器的 blink ，老版本的 webkit

JS 引擎：也稱為 JS 解釋器。 用來讀取網頁中的JavaScript代碼，對其處理后運行，比如 chrome? 瀏覽器的 V8

瀏覽器本身并不會執行JS代碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 代碼 。JS 引擎執行代碼時逐行解釋每一句源碼（轉換為機器語言），然后由計算機去執行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執行。

?5、JavaScript?的組成

??1、ECMAScript

ECMAScript 是由ECMA 國際（ 原歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱為 JavaScript 或 JScript，但實際上后兩者是 ECMAScript 語言的實現和擴展。

?

ECMAScript：ECMAScript 規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。

更多參看MDN:? https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

2. DOM ——文檔對象模型

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色等）。

3. BOM ——瀏覽器對象模型

BOM (Browser Object Model，簡稱BOM) 是指瀏覽器對象模型，它提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉、獲取分辨率等。

6 JavaScript?初體驗

JS 有3種書寫位置，分別為行內、內嵌和外部。

1. 行內式 JS

<input type="button" value="點我試試" onclick="alert('Hello World')" />

• 可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性），如：onclick
• 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
• 可讀性差， 在html中編寫JS大量代碼時，不方便閱讀；
• 引號易錯，引號多層嵌套匹配時，非常容易弄混；
• 特殊情況下使用

2. 內嵌 JS

<script>alert('Hello World~!');</script>

• 可以將多行JS代碼寫到 <script> 標簽中
• 內嵌 JS 是學習時常用的方式

3. 外部 JS文件

<script src="my.js"></script>

• 利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便文件級別的復用
• 引用外部 JS文件的 script 標簽中間不可以寫代碼
• 適合于JS 代碼量比較大的情況

二、JavaScript注釋

1 單行注釋

為了提高代碼的可讀性，JS與CSS一樣，也提供了注釋功能。JS中的注釋主要有兩種，分別是單行注釋和多行注釋。

單行注釋的注釋方式如下：

// 我是一行文字，不想被 JS引擎 執行，所以 注釋起來

//? 用來注釋單行文字（? 快捷鍵?? ctrl? +? /?? ）

2.?多行注釋

多行注釋的注釋方式如下：

/*獲取用戶年齡和姓名并通過提示框顯示出來*/

/* */? 用來注釋多行文字（ 默認快捷鍵? alt +? shift? + a ）

快捷鍵修改為：?? ctrl + shift? +? /?

vscode à 首選項按鈕? à? 鍵盤快捷方式 à? 查找 原來的快捷鍵? à 修改為新的快捷鍵 à 回車確認

三、JavaScript 輸入輸出語句

為了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：

注意：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息。

?

總結

以上是生活随笔為你收集整理的黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）的全部內容，希望文章能夠幫你解決所遇到的問題。

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