黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）
本篇內(nèi)容主要是PINK老師教程匯總（主要內(nèi)容如下）
1.web端布局：先講解HTML5常用標(biāo)簽，接著講解CSS3常見樣式增加的H5C3新特性，新語法，最后講解PC端品優(yōu)購項(xiàng)目。以及CSS3動(dòng)畫 2d 3d效果
2. 移動(dòng)端布局：主要講解視口、二倍圖、流失布局，flex布局，rem布局，響應(yīng)式布局，還會(huì)增加摹客使用等工具。
3.JavaScript基礎(chǔ)從變量的定義與使用、流程控制語句、數(shù)組、函數(shù)、構(gòu)造函數(shù)、內(nèi)置對(duì)象以及對(duì)象等
4.web API 講解如何獲取DOM元素，如何操作DOM 元素，BOM操作 移動(dòng)端制作網(wǎng)頁特效
5. 后面還會(huì)有js高級(jí)，ES6類面向?qū)ο笳Z法，面向?qū)ο蟀咐?#xff0c;原型和原型鏈等等。
6. 還有會(huì)jquery 綜合 + echarts數(shù)據(jù)可視化（待更）
教程推薦：
前端Html5+Css3+移動(dòng)Web教程，前端Web入門教程，零基礎(chǔ)前端開發(fā)視頻教程Jav
JavaScript基礎(chǔ)語法-dom-bom-js-es6新語法-jQuery-數(shù)據(jù)可視化echarts黑馬pink老師前端入門基礎(chǔ)視頻教程(500多集)持續(xù)
?一、初識(shí) JavaScript
1 JavaScript 是什么
布蘭登·艾奇（Brendan Eich，1961年～）。
神奇的大哥用10天完成 JavaScript 設(shè)計(jì)。
最初命名為 LiveScript，后來在與 Sun 合作之后將其改名為 JavaScript。
JavaScript 是世界上最流行的語言之一，是一種運(yùn)行在客戶端的腳本語言 （Script 是腳本的意思）
腳本語言：不需要編譯，運(yùn)行過程中由 js 解釋器( js 引擎）逐行來進(jìn)行解釋并執(zhí)行
現(xiàn)在也可以基于 Node.js 技術(shù)進(jìn)行服務(wù)器端編程
?
2、JavaScript 的作用
1、表單動(dòng)態(tài)校驗(yàn)（密碼強(qiáng)度檢測）? （ JS 產(chǎn)生最初的目的 ）
2、網(wǎng)頁特效
3、服務(wù)端開發(fā)(Node.js)
4、桌面程序(Electron)
?5、App(Cordova)
6、控制硬件-物聯(lián)網(wǎng)(Ruff)
7、游戲開發(fā)(cocos2d-js)
3、?HTML/CSS/JS 的關(guān)系
HTML/CSS 標(biāo)記語言--描述類語言
HTML 決定網(wǎng)頁結(jié)構(gòu)和內(nèi)容( 決定看到什么 )，相當(dāng)于人的身體
CSS 決定網(wǎng)頁呈現(xiàn)給用戶的模樣( 決定好不好看 )，相當(dāng)于給人穿衣服、化妝
JS 腳本語言--編程類語言
實(shí)現(xiàn)業(yè)務(wù)邏輯和頁面控制( 決定功能 )，相當(dāng)于人的各種動(dòng)作
4、瀏覽器執(zhí)行 JS 簡介
瀏覽器分成兩部分：渲染引擎和 JS 引擎
渲染引擎：用來解析HTML與CSS，俗稱內(nèi)核，比如 chrome 瀏覽器的 blink ，老版本的 webkit
JS 引擎：也稱為 JS 解釋器。 用來讀取網(wǎng)頁中的JavaScript代碼，對(duì)其處理后運(yùn)行，比如 chrome? 瀏覽器的 V8
瀏覽器本身并不會(huì)執(zhí)行JS代碼，而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 。JS 引擎執(zhí)行代碼時(shí)逐行解釋每一句源碼（轉(zhuǎn)換為機(jī)器語言），然后由計(jì)算機(jī)去執(zhí)行，所以 JavaScript 語言歸為腳本語言，會(huì)逐行解釋執(zhí)行。
?5、JavaScript?的組成
??1、ECMAScript
ECMAScript 是由ECMA 國際（ 原歐洲計(jì)算機(jī)制造商協(xié)會(huì)）進(jìn)行標(biāo)準(zhǔn)化的一門編程語言，這種語言在萬維網(wǎng)上應(yīng)用廣泛，它往往被稱為 JavaScript 或 JScript，但實(shí)際上后兩者是 ECMAScript 語言的實(shí)現(xiàn)和擴(kuò)展。
?
ECMAScript：ECMAScript 規(guī)定了JS的編程語法和基礎(chǔ)核心知識(shí)，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn)。
更多參看MDN:? https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
2. DOM ——文檔對(duì)象模型
文檔對(duì)象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口。通過 DOM 提供的接口可以對(duì)頁面上的各種元素進(jìn)行操作（大小、位置、顏色等）。
3. BOM ——瀏覽器對(duì)象模型
BOM (Browser Object Model，簡稱BOM) 是指瀏覽器對(duì)象模型，它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等。
6 JavaScript?初體驗(yàn)
JS 有3種書寫位置，分別為行內(nèi)、內(nèi)嵌和外部。
1. 行內(nèi)式 JS
<input type="button" value="點(diǎn)我試試" onclick="alert('Hello World')" />- 可以將單行或少量 JS 代碼寫在HTML標(biāo)簽的事件屬性中（以 on 開頭的屬性），如：onclick
- 注意單雙引號(hào)的使用：在HTML中我們推薦使用雙引號(hào), JS 中我們推薦使用單引號(hào)
- 可讀性差， 在html中編寫JS大量代碼時(shí)，不方便閱讀；
- 引號(hào)易錯(cuò)，引號(hào)多層嵌套匹配時(shí)，非常容易弄混；
- 特殊情況下使用
2. 內(nèi)嵌 JS
<script>alert('Hello World~!');</script>- 可以將多行JS代碼寫到 <script> 標(biāo)簽中
- 內(nèi)嵌 JS 是學(xué)習(xí)時(shí)常用的方式
3. 外部 JS文件
<script src="my.js"></script>- 利于HTML頁面代碼結(jié)構(gòu)化，把大段 JS代碼獨(dú)立到 HTML 頁面之外，既美觀，也方便文件級(jí)別的復(fù)用
- 引用外部 JS文件的 script 標(biāo)簽中間不可以寫代碼
- 適合于JS 代碼量比較大的情況
二、JavaScript注釋
1 單行注釋
為了提高代碼的可讀性，JS與CSS一樣，也提供了注釋功能。JS中的注釋主要有兩種，分別是單行注釋和多行注釋。
單行注釋的注釋方式如下：
// 我是一行文字，不想被 JS引擎 執(zhí)行，所以 注釋起來//? 用來注釋單行文字（? 快捷鍵?? ctrl? +? /?? ）
2.?多行注釋
多行注釋的注釋方式如下：
/*獲取用戶年齡和姓名并通過提示框顯示出來*//* */? 用來注釋多行文字（ 默認(rèn)快捷鍵? alt +? shift? + a ）
快捷鍵修改為：?? ctrl + shift? +? /?
vscode à 首選項(xiàng)按鈕? à? 鍵盤快捷方式 à? 查找 原來的快捷鍵? à 修改為新的快捷鍵 à 回車確認(rèn)
三、JavaScript 輸入輸出語句
為了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：
注意：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運(yùn)行時(shí)的消息。
?
總結(jié)
以上是生活随笔為你收集整理的黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： alfresco源代码的编译
- 下一篇： Web全栈~01.HTML基础元素