第50天學習打卡(JavaScript)

豆豆tj發表於2021-02-27

前端三要素

HTML(結構):超文字標記語言(Hyper Text Markup Language),決定網頁的結構和內容。

CSS(表現):層疊樣式表(Cascading Style Sheets),設定網頁的表現樣式。

JavaScript(行為):是一種弱型別指令碼語言,其原始碼不需經過編譯,而是由瀏覽器解釋執行,用於控制網頁行為。

表現層(CSS)

CSS層疊樣式表是一門標記語言,並不是程式語言。因此不可以自定義變數,不可以引用等,。換句話說就是不具備任何語法支援,它主要缺陷如下:

語法不夠強大,比如無法巢狀書寫,導致模組化開發中需要書寫很多重複的選擇器;

沒有變數和合理的樣式複用機制,使得邏輯上相關的屬性值必須以字面量的形式重複輸出,導致難以維護;

這就導致了在工作中增加了許多工作量。為了解決這個問題,前端開發人員會使用一種稱之為【CSS前處理器】的工具,提供CSS缺失的樣式層複用機制,減少冗餘程式碼,提高樣式程式碼的可維護性。大大提高了前端的樣式上的開發效率。

什麼是CSS前處理器

CSS前處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為CSS增加了一些程式設計特性,將CSS作為目標生成檔案,然後開發者就只要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是用專門的程式語言,進行web頁面樣式設計,再通過編譯器轉化為正常 的CSS檔案,以供專案使用

常用的CSS前處理器有哪些

SASS:基於Ruby,通過服務端處理,功能強大,解析率高,需要學習Ruby語言,上手難度高於LESS.

LESS:基於NodeJS,通過客戶端處理,使用簡單,功能比SASS簡單,解析效率也低於SASS,但在實際開發中足夠了,所以後臺人員如果需要的話,建議使用LESS.

行為層(JavaScript)

JavaScript 一門弱型別指令碼語言,其原始碼在發往客戶端執行之前不需要經過編譯,而是將文字格式的字元程式碼傳送給瀏覽器由瀏覽器解釋執行。

原生JS開發,也就是讓我們按照[ECMAScript]標準的開發方式,簡稱ES,特點是所有瀏覽器都支援。

TypeScript微軟的標準

TypeScript 是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個超集,而且本質上向這個語言新增了可選的靜態型別和基於類的物件導向程式設計。

該語言的特點就是除了具備ES的特性之外還納入了許多不在標準範圍內的新特性,所有會導致很多瀏覽器不能直接支援TypeScript語法,需要編譯後(編譯成JS)才能被瀏覽器正確執行。

JavaScript框架

jQuery:大家熟知的JavaScript庫,優點是簡化了DOM操作,缺點是DOM操作太頻繁,影響前端效能,在前端眼裡使用它僅僅是為了相容IE6 、7、8;

Angular:Google收購的前端框架, 由一群Java程式設計師開發,其特點是將後臺的MVC模式搬到了前端並增加了模組化開發 的概念,與微軟合作,採用TypeScript語法開發;對後臺程式設計師友好,對前端程式設計師不太友好;最大的缺點是版本迭代不合理。

React:Facebook出品,一款高效能的JS前端框架;特點是提出了新概念【虛擬DOM】用於減少真實DOM操作,在記憶體中模擬DOM操作,有效的提升了前端渲染效率;缺點是使用複雜,因為要額外學習一門【JSX】語言。

Vue:一款漸進式JavaScript框架,所謂漸進式就是逐步實現新特性的意思,如實現模組化、路由、狀態管理等新特性。其特點是綜合了Angular(模組化)和React(模擬DOM)的優點;

Axios:前端通訊框架;因為Vue的邊界很明確,就是為了處理DOM,所以並不具備通訊能力,此時就需要額外使用一個通訊框架與伺服器互動;當然也可以直接選擇使用jQuery提供的AJAX通訊功能。

1.什麼是JavaScript

JavaScript是一門世界上最流行的指令碼語言

一個合格的後端人員,必須要精通JavaScript

ECMAScript它可以理解為是JavaScript的一個標準

但是大部分瀏覽器還只停留在支援es5程式碼上!

開發環境...線上環境,版本不一致。

2 快速入門

2.1 引入JavaScript

1.內部標籤

 <script>
     //註釋方式
 </script>

 

 

2.外部引入

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
 
 <!--   script標籤內,寫Javascript程式碼
           alert 彈窗-->
 <!--   <script>-->
 <!--       alert('hello,world');-->
 
 <!--   </script>-->
 <!--   外部引入-->
 <!--   注意:script標籤必須成對出現-->
     <script src="js/qjjs.js"></script>
 
 <!--不用顯示定義type,也預設就是javascript-->
     <script type="text/javascript"></script>
 
 <!--這裡也可以放script-->
 </head>
 <body>
 
 </body>
 </html>

 

相關文章