網(wǎng)頁設(shè)計基礎(chǔ)-Javascript與前端開發(fā)技術(shù)_第1頁
網(wǎng)頁設(shè)計基礎(chǔ)-Javascript與前端開發(fā)技術(shù)_第2頁
網(wǎng)頁設(shè)計基礎(chǔ)-Javascript與前端開發(fā)技術(shù)_第3頁
網(wǎng)頁設(shè)計基礎(chǔ)-Javascript與前端開發(fā)技術(shù)_第4頁
網(wǎng)頁設(shè)計基礎(chǔ)-Javascript與前端開發(fā)技術(shù)_第5頁
已閱讀5頁，還剩61頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第七章Javascript與前端開發(fā)技術(shù)(一)使用腳本語言本章目地掌握在網(wǎng)頁插入腳本語言地三種方式。掌握J(rèn)avaScript腳本語言地基本語法規(guī)則:變量,運(yùn)算符,表達(dá)式,語句以及函數(shù)。掌握J(rèn)avaScript對象,瀏覽器對象與HTMLDOM對象。熟悉JQuery與Bootstrap地基本用法。了解前端開發(fā)框架:Vue.js,React與Angular。三種插入JS地方法script標(biāo)記符直接插入腳本鏈接外部腳本謝謝！第七章Javascript與前端開發(fā)技術(shù)(二)Javascript語言地語法變量所謂變量,就是程序一個已命名地存儲單元。變量地主要作用是存取數(shù)據(jù)與提供存放信息地容器。<script>vartoday=一五;//注意JavaScript是區(qū)分大小寫地,因此today與Today是不同地today="Todayisthe一五th";</script>運(yùn)算符算術(shù)運(yùn)算符:+,-,*,/,%,++,--邏輯運(yùn)算符:&&（邏輯與）,||（邏輯或）,!（邏輯非）比較運(yùn)算符:<,<=,>,>=,==,===,!=,!==字符串運(yùn)算符:+（字符串接合操作）位操作運(yùn)算符:&（按位與）,|（按位或）,^（按位異或）,<<（左移）,>>（右移）,>>>（無符號右移）。運(yùn)算符賦值運(yùn)算符:=,+=,-=,*=,/=,%=,&=,|=,^=,<<=,>>=,>>>=條件運(yùn)算符:?:（條件?結(jié)果一:結(jié)果二,表示若"條件"值為真,則表達(dá)式地值為"結(jié)果一",否則為"結(jié)果二"）。其它運(yùn)算符:.（成員選擇運(yùn)算符）,[]（下標(biāo)運(yùn)算符）,()（函數(shù)調(diào)用運(yùn)算符）,,（逗號運(yùn)算符）,delete（刪除一個對象地屬或一個數(shù)組索引處地元素）,new（生成一個對象地實(shí)例）,typeof（返回表示操作數(shù)類型地字符串值）,void（不返回任何數(shù)值）。條件語句if(expression一)statement一;elseif(expression二)statement二;elseif(expression三)statement三;…elsestatementn;switch(expression){casevalue一:statement一;break;casevalue二:statement二;break;...default:statement;}循環(huán)語句for(initializationStatement;condition;adjustStatement){statement;}while(expression){statement;}do{statement;}while(expression);break;continue;函數(shù)functionfunctionName(parameter一,parameter二...){statements;return;}JS實(shí)例謝謝！第七章Javascript與前端開發(fā)技術(shù)(三)Javascript對象與瀏覽器對象什么是對象？對象就是客觀世界存在地特定實(shí)體。對象包含兩個要素:用來描述對象特地一組數(shù)據(jù),也就是若干變量,稱為屬;用來操作對象特地若干動作,也就是若干函數(shù),稱為方法。通過訪問或設(shè)置對象地屬,并且調(diào)用對象地方法,我們就可以對對象行各種操作,從而獲得需要地功能。document.titledocument.write()三種對象JavaScript內(nèi)部對象Array,Date,Math,String等瀏覽器對象window,screen,location等HTMLDOM對象documentArray對象Date對象Math對象常用屬:E（歐拉常數(shù),約為二.七一八）,PI（圓周率常數(shù),約為三.一四一五九）與SQRT二（二地方根,約為一.四一四）等。常用方法:abs(num)（絕對值）,cos(num)（余弦）,pow(num一,num二)（num一地num二次方）,random() （隨機(jī)數(shù)）,round(num)（四舍五入）,sin(num)（正弦）,sqrt(num)（方根）,toString()（返回表示該對象地字符串）。Math.cos(Math.PI/三));String對象vartxt="string";vartxt='string';vartxt="HelloWorld!";document.write(txt.length);varstr="請訪問我們地網(wǎng)站！"varn=str.replace("我們地網(wǎng)站","https://.ptpress../");document.write(n);瀏覽器對象window對象表示瀏覽器窗口。所有JavaScript全局對象,函數(shù)以及變量均自動成為window對象地成員（全局變量是window對象地屬,全局函數(shù)是window對象地方法）。window對象包含document,navigator,location,history等子對象,是瀏覽器對象層次地最頂級對象。屬:document,location等方法:alert(),confirm(),open(),close()等screen對象location對象navigator對象謝謝！第七章Javascript與前端開發(fā)技術(shù)(四)HTMLDOM什么是DOM？HTMLDOM定義了所有HTML元素地對象與屬,以及訪問它們地方法。它是關(guān)于如何獲取,修改,添加或刪除HTML元素（包括其內(nèi)容與屬等）地標(biāo)準(zhǔn)。在DOM,每個東西都是節(jié)點(diǎn),包括:元素節(jié)點(diǎn),屬節(jié)點(diǎn),文本節(jié)點(diǎn),注釋節(jié)點(diǎn),等等。常用父（parent）,子（child）與同胞（sibling）等術(shù)語來描述節(jié)點(diǎn)之間地關(guān)系。什么是DOM<html><head><title>文檔標(biāo)題</title></head><body><ahref="">我地鏈接</a><h一>我地標(biāo)題</h一></body></html>使用DOM方法與屬可以用特定地方法與屬引用這些節(jié)點(diǎn),以便在腳本正確地使用它們。方法是我們可以在節(jié)點(diǎn)（HTML元素）上執(zhí)行地動作,屬是我們可以在節(jié)點(diǎn)（HTML元素）設(shè)置與修改地值。document對象常用屬:body,forms,images,links,title等常用方法:getElementsByClassName(),getElementById(),getElementsByTagName(),querySelector(),querySelectorAll(),write()使用document.forms等屬,使用document.getElementById()等方法,可以訪問到DOM地具體元素,之后可以引用其屬與方法行操作。使用Console面板元素對象屬:childNodes,children,className,clientHeight,clientWidth,firstChild,id,innerHTML,lastChild,style方法:getElementsByTagName(),getElementsByClassName(),querySelector(),querySelectorAll(),setAttribute() 元素對象使用parentNode,firstChild,lastChild,nextSibling,previousSibling,children與childNodes等屬,可以遍歷HTMLDOM樹,以對相應(yīng)節(jié)點(diǎn)行操作。使用innerHTML,textContent與style等屬,可以訪問或設(shè)置HTML元素地內(nèi)容與樣式。使用appendChild(),removeChild(),replaceChild()與insertBefore()等方法,可以修改HTMLDOM樹。處理直接在DOM元素指定處理程序<inputonclick="alert('謝謝支持')"type="button"value="點(diǎn)我"/>在JavaScript用元素地屬行指定elementObject.onXXX=function(){//處理代碼}使用元素地addEventListener()方法elementObject.addEventListener(eventName,eventHandler);常見實(shí)例:Tab導(dǎo)航謝謝！第七章Javascript與前端開發(fā)技術(shù)(五)使用JQuery安裝與使用下載JS文件jquery-三.四.一.jsjquery-三.四.一.min.jsjquery-三.四.一.slim.jsjquery-三.四.一.slim.min.js鏈接JS文件<scriptsrc="jquery-三.四.一.min.js"></script>基本語法<!DOCTYPEhtml><!--表明本文檔是個HTML五文檔--><metacharset="utf-八"><!--指定文檔地字符編碼--><scriptsrc="jquery-三.四.一.min.js"></script><script><!--自定義JQuery代碼-->$(document).ready(function(){//$(function(){$("p").click(function(){$(this).hide();});});</script>基本語法JQuery選擇器JQuery選擇器JQuery方法HTML/CSS方法:append()（在被選元素地結(jié)尾插入內(nèi)容）,attr()（設(shè)置或返回被選元素地屬/值）,css()（為被選元素設(shè)置或返回一個或多個樣式屬）,html()（設(shè)置或返回被選元素地內(nèi)容）,remove(),text()等。JQuery方法:click(),dblclick(),mouseenter(),mouseleave(),hover(),keypress(),keydown(),keyup(),blur(),change(),submit(),focus(),resize(),scroll()等。JQuery方法JQuery動畫效果動畫效果方法:animate(),delay(),fadeIn(),fadeOut(),fadeTo(),fadeToggle(),finish(),hide(),show(),slideDown(),slideToggle(),slideUp(),stop(),toggle()等謝謝！第七章Javascript與前端開發(fā)技術(shù)(六)使用Bootstrap安裝與使用Bootstrap文件夾JQuery文件拷貝到Bootstrap/js文件夾使用BootstrapHTML模板網(wǎng)格系統(tǒng)Bootstrap提供了一套響應(yīng)式,移動設(shè)備優(yōu)先地流式網(wǎng)格系統(tǒng),隨著屏幕或視口（viewport）尺寸地增加,系統(tǒng)會自動分為最多一二列。Bootstrap布局Bootstrap使用一系列地容器（container）,行（row）與列（col）來對內(nèi)容行布局。容器類是container（固定寬度）或container-fluid（全屏寬度）,行類是row,列類是col-*-*（第一個星號表示響應(yīng)地設(shè)備:sm,md,lg或xl,第二個星號表示所占列數(shù),同一行地列數(shù)相加為一二）,并且可以用空格分隔多個（如類"col-sm-三col-md-六"表示在板上占三列,在桌面顯示器上占六列）。Bootstrap布局.col-任意屏幕或小屏幕-針對任意尺寸屏幕或屏幕寬度小于五七六px（容器最大寬度none(auto)）;.col-sm-板-屏幕寬度>=五七六px（容器最大寬度五四零px）;.col-md-桌面顯示器-屏幕寬度>=七六八px（容器最大寬度七二零px）;.col-lg-大桌面顯示器-屏幕寬度>=九九二px（容器最大寬度九六零px）;.col-xl-超大桌面顯示器-屏幕寬度>=一二零零px（容器最大寬度一一四零px）。Bootstrap布局Bootstrap格式設(shè)置Bootstrap組件謝謝！第七章Javascript與前端開發(fā)技術(shù)(七)使用Vue.js,React與Angularvue.js基本用法vue指令vue應(yīng)用AngularJS

溫馨提示

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

最新文檔

評論

0/150

提交評論