Web前端開發(fā)-交互式設(shè)計（JavaScript+jQuery） 課件 單元1 JavaScript概述_第1頁
Web前端開發(fā)-交互式設(shè)計（JavaScript+jQuery） 課件 單元1 JavaScript概述_第2頁
Web前端開發(fā)-交互式設(shè)計（JavaScript+jQuery） 課件 單元1 JavaScript概述_第3頁
Web前端開發(fā)-交互式設(shè)計（JavaScript+jQuery） 課件 單元1 JavaScript概述_第4頁
Web前端開發(fā)-交互式設(shè)計（JavaScript+jQuery） 課件 單元1 JavaScript概述_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

Web前端開發(fā)—交互式設(shè)計

（JavaScript+jQuery）主編：孫佳帝

孫文江編委：白哲佳張卓2023年電子工業(yè)出版社JavaScript概述01JavaScript語言基礎(chǔ)02JavaScript函數(shù) 03面向?qū)ο缶幊?04JavaScript內(nèi)置對象05BOM編程06DOM編程07DOM事件08利用JQuery編程09設(shè)計個性化網(wǎng)站1001單元1JavaScript概述

Web前端開發(fā)—交互式設(shè)計1.1認識JavaScript語言1.什么是JavaScript？JavaScript是一種具有函數(shù)優(yōu)先的、輕量級、解釋型或即時編譯型的編程語言，是一種基于原型編程的多范式腳本語言，并且支持面向?qū)ο?、命令式和聲明式（如函?shù)式）編程風格。2.JavaScript發(fā)展歷史

3.JavaScript用途基于HTML5開發(fā)的Brandify網(wǎng)站應(yīng)用Node.js的沃爾瑪網(wǎng)站使用Vue.js開發(fā)的餓了么App微信小程序4.JavaScript組成一個完整的JavaScript實現(xiàn)包括ECMAScript、DOM和BOM三部分。ECMAScriptDOMBOM1.2搭建JavaScript開發(fā)環(huán)境1.選擇JavaScript腳本編輯器

2.安裝與配置VisualStudioCode1.安裝并配置VisualStudioCode2.安裝常用擴展插件（1）hinese(Simplified)(簡體中文)LanguagePackforVisualStudioCode擴展插件，目的用于將VisualStudioCode轉(zhuǎn)換為簡體中文版。（2）安裝JavaScript(ES6)codesnippets擴展插件，提供了ES6語法智能提示及快速輸入功能。（3）安裝JS-CSS-HTMLFormatter擴展插件，提供了保存會自動格式化代碼功能。（4）安裝jQueryCodeSnippets擴展插件，提供了實現(xiàn)jQuery代碼智能提示功能。（5）安裝DebuggerforChrome擴展插件，它是谷歌瀏覽器自帶的一個web編寫和調(diào)試工具，提供給web開發(fā)人員深入地訪問瀏覽器內(nèi)部和web應(yīng)用的機會，可以有效地跟蹤布局問題，設(shè)置JavaScript斷點,以及進行JavaScript代碼的優(yōu)化。3.安裝Node.js1.下載并安裝Node.js訪問Node.js官網(wǎng)地址“/”，打開下載頁面，下載最新版本或穩(wěn)定版本。2.使用Node.js在命令行窗口中輸入node命令，進入node代碼執(zhí)行與編輯模式，會顯示一個箭頭和輸入光標。此時就可以輸入JavaScript代碼，也可以執(zhí)行JavaScript腳本文件。4.安裝與配置http-serverhttp-server是一個簡單的零配置的命令行http服務(wù)器，它足夠強大便于生產(chǎn)和使用，用于本地測試和開發(fā)。在命令行窗口中，使用npm安裝http-server的命令是“npminstallhttp-server-g”，安裝完成后，進入項目文件夾，通過命令行命令“http-server”啟動http服務(wù)器。1.3在HTML中使用JavaScript1.嵌入到HTML文檔中腳本<script></script>的標簽是HTML語言為引入腳本程序而定義的一個雙標簽。插入腳本的方法是將<script></script>標簽置于網(wǎng)頁的head部分或body部分中，然后在其中寫入腳本程序。語法格式：<script>//JavaScript腳本部分</script>參考【訓練1-2】2.引入外部JavaScript文件的腳本引用外部JavaScript文件的方法是使用script標簽的src屬性來指定外部文件的URL。語法格式：<scriptsrc="url"></script>說明：使用src屬性時，script標簽之間的任何內(nèi)容都將被忽略。腳本的執(zhí)行在默認情況下是同步和阻塞的。參考【訓練1-3】3.嵌入到HTML標簽事件中的腳本HTML標記內(nèi)可以將事件以屬性的形式引入，然后將JavaScript腳本寫在該事件的事件處理程序中。例如，嵌入到button標簽的事件中的腳本格式。<buttononclick="fnc"></button>參考【訓練1-4】【案例1-1】

高性能引入外部JavaScript文件【案例分析】隨著Web應(yīng)用日趨豐富，越來越多的JavaScript被運用到網(wǎng)頁中，前端性能對用戶體驗備受關(guān)注，尤其是引入JavaScript腳本時會阻塞其他資源下載的性能問題，已成為開發(fā)者必須要思考并要解決的一個重要問題。HTML頁面由定義頁面結(jié)構(gòu)與內(nèi)容的HTML、定義布局與外觀的CSS和改變交互行為的JavaScript腳本相互結(jié)合而成。依據(jù)Web標準和方獨立開發(fā)的原則，應(yīng)將JavaScript代碼獨立于HTML文件。在商業(yè)開發(fā)中，推薦使用<script>標記的src屬性引入外部JavaScript文件?！窘鉀Q方案】為了防止引入JavaScript腳本產(chǎn)生的阻塞和性能問題，推薦將所有<script>標簽放在<body>標簽的底部，以盡量少對整個頁面渲染的影響，避免用戶看到一片空白的頁面。當大型網(wǎng)站和網(wǎng)絡(luò)應(yīng)用出現(xiàn)依賴多個JavaScript腳本文件時，減少頁面渲染所需的http請求是網(wǎng)站提速的一條經(jīng)典法則。減少頁面中引入

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論