Java Web程序設(shè)計 課件 第3章 CSS；第4章 Javascript_第1頁
Java Web程序設(shè)計 課件 第3章 CSS；第4章 Javascript_第2頁
Java Web程序設(shè)計 課件 第3章 CSS；第4章 Javascript_第3頁
Java Web程序設(shè)計 課件 第3章 CSS；第4章 Javascript_第4頁
Java Web程序設(shè)計 課件 第3章 CSS；第4章 Javascript_第5頁
已閱讀5頁，還剩115頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第3章CSS主講人：2025/2/61主要內(nèi)容2025/2/6《Web程序設(shè)計》21CSS簡介2基本語法3常用樣式4DIV+CSS布局本章課程目標(biāo)知識目標(biāo)掌握CSS樣式的基本語法、常用樣式以及使用方法；能力要求：能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計中的基礎(chǔ)知識與工作原理，將知識與原理應(yīng)用于開發(fā)過程中的問題分析；2025/2/6《Web程序設(shè)計》32.1HTML簡介CSS（CascadingStyleSheets層疊樣式表）是W3C協(xié)會為了彌補HTML在樣式排版功能上的不足而制定的一套擴展樣式標(biāo)準(zhǔn)，也由于CSS可以豐富網(wǎng)站的視覺效果，使網(wǎng)頁設(shè)計者能夠以更有效的方式設(shè)計出更具表現(xiàn)力的網(wǎng)頁效果。2025/2/6《Web程序設(shè)計》4CSS特點豐富的樣式定義：CSS提供了豐富的文檔樣式外觀內(nèi)容和樣式分離：使網(wǎng)頁設(shè)計簡潔明了，分工明確易于使用和修改：CSS可以將樣式定義在專門的CSS文件中多頁面應(yīng)用：可以在多個頁面中使用同一個CSS樣式表層疊：就是對一個元素多次設(shè)置同一個樣式，將使用優(yōu)先級最高方式設(shè)置的屬性值。頁面壓縮：樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少2025/2/6《Web程序設(shè)計》5CSS一鍵設(shè)置黑白頁面2025/2/6《Web程序設(shè)計》6主要內(nèi)容2025/2/6《Web程序設(shè)計》71CSS簡介2基本語法3常用樣式4DIV+CSS布局CSS基本語法CSS的每個規(guī)則都包括三部分：選擇器、樣式屬性和屬性值。使用語法規(guī)范如下所示：2025/2/6《Web程序設(shè)計》8selector{property:value;property:value;...property:value}參數(shù)說明：selector，選擇器，選擇樣式要作用的HTML元素，可以是多個，以逗號分隔；property，樣式的屬性，即樣式的名稱；value，樣式的值，與property為一對。樣式說明2025/2/6《Web程序設(shè)計》9簡單示例2025/2/6《Web程序設(shè)計》10<html><head><title>CSS簡單示例</title><style>h1{color:red;font-size:14px}</style></head><body><div><h1>網(wǎng)頁標(biāo)題1</h1></div></body></html>選擇器選擇器是控制CSS樣式作用的對象，通?？梢赃x擇一個或多個HTML元素。CSS選擇器包括了：元素選擇器類選擇器ID選擇器屬性選擇器派生選擇器。2025/2/6《Web程序設(shè)計》11元素選擇器元素選擇器是CSS選擇器中最基本的一種選擇器，通過直接指定HTML元素標(biāo)簽，設(shè)置CSS樣式要作用的元素。2025/2/6《Web程序設(shè)計》12<style>html{background-color:black;}p{font-size:30px;backgroud-color:gray;}h2{background-color:red;}</style>實現(xiàn)的效果分別是：對整個文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。元素選擇器也可以對多個元素使用同一組樣式允許使用“*”通配符，讓網(wǎng)頁中所有元素的字體都設(shè)置為“黑體”如果font-size屬性對于某些元素是無效的話，那么該效果將被忽略。2025/2/6《Web程序設(shè)計》13h1,h2,h3,h4,h5,h6,p{font-family:黑體;}*{font-family:黑體;font-size:12px}類(class)選擇器類選擇器用于描述一組元素的樣式，這組元素指定了相同的樣式名稱，這樣就允許了樣式定義可以應(yīng)用于多個元素中。class選擇器在HTML中以class屬性表示,在CSS定義中，類選擇器以一個點"."號顯示。2025/2/6《Web程序設(shè)計》14<style>.center{text-align:center}</style><body>.....<divclass=”center”>...</div><pclass=”center”>...</p></body>類(class)選擇器CSS還允許使用多類選擇器，即對于一個元素的class聲明中使用了多個class，必須要同時滿足這個多個class。2025/2/6《Web程序設(shè)計》15<style>.bold{font-weight:bold;}.italic{font-style:italic;}.bold.italic{background:#eeeeee;}</style><pclass="bolditalic">這段文本將會受多個CSS樣式作用</p>將僅作用于class聲明為“.bold.italic”的元素。ID選擇器ID選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。HTML元素可以設(shè)置ID屬性來定義某個元素的ID，CSS樣式定義中ID選擇器以"#"來定義。2025/2/6《Web程序設(shè)計》16<style>#ref{text-align:center;color:red;}</style><body><p>第一個段落</p><pid=”ref”>第二個段落</p></body>ID選擇器“#ref”將只會作用于第二個P元素上。屬性選擇器屬性選擇器允許使用某個屬性名稱作為選擇器，選擇具有該屬性的所有HTML元素，而無論其屬于哪種元素。2025/2/6《Web程序設(shè)計》17<style>*[title]{color:red}</style><style>a[href][title]{color:red;}</style><body><ahref=”#”title=”鏈接1”>測試鏈接1</a><ahref=”#”>測試鏈接2</a>......</body>該選擇器只會對測試鏈接1生效，而對測試鏈接2無效。屬性選擇器的模式匹配屬性選擇器還支持模式匹配的方式2025/2/6《Web程序設(shè)計》18模式匹配類型描述[attr^="str"]選擇attr屬性值以"str"開頭的所有元素[attr$="str"]選擇attr屬性值以"str"結(jié)尾的所有元素[attr*="str"]選擇attr屬性值中包含子串"str"的所有元素[attr|="str"]選擇attr屬性值中等于”str”或以"str"開頭的所有元素派生選擇器派生選擇器是在以上幾種基本選擇器之外的衍生選擇器，充分利用元素之間的層級關(guān)系、順序關(guān)系、組合關(guān)系等，支持更靈活的選擇器。包括：后代選擇器（Descendantselectors）子元素選擇器（Childselectors）相鄰兄弟選擇器（Adjacentsiblingselector）2025/2/6《Web程序設(shè)計》19后代選擇器后代選擇器可以選擇某元素后代的元素，可以根據(jù)上下文關(guān)系或?qū)蛹夑P(guān)系來選擇。2025/2/6《Web程序設(shè)計》20<style>h1em{color:red;}</style><body><h1>這是一段非常<em>重要</em>的標(biāo)題.</h1><p>這是一段非常<em>重要</em>的文本.</p></body>該樣式僅對h1標(biāo)題行生效，對第二行p文本行不生效。后代選擇器允許兩個元素之間的層次間隔可以是無限的，而不必局限于上下級。子元素選擇器與后代選擇器類似但又不同，子元素選擇器允許選擇某個元素的子元素，即相鄰層次上的上下層子元素，而不是任意的后代元素。子元素選擇器通過“>”符號指定上下層間關(guān)系。2025/2/6《Web程序設(shè)計》21<style>h1>strong{color:red;}</style><body><h1>

這是一段<strong>非常</strong><strong>非常</strong>重要的標(biāo)題.</h1><h1>這是一段<em>非常<strong>重要</strong></em>的標(biāo)題.</h1></body>第二行的h1不會生效，因為第二行的h1與strong元素之間還有一層em元素。相鄰兄弟選擇器相鄰兄弟選擇器允許選擇屬于同一父元素下的兩個相鄰的兄弟元素。2025/2/6《Web程序設(shè)計》22<style>h1+p{margin-top:50px;}</style><body><h1>這是標(biāo)題</h1><p>這是第一個段落</p><p>這是第二個段落</p></body><style>li+li{font-weight:bold}</style><div><ul><li>Listitem1</li><li>Listitem2</li><li>Listitem3</li></ul><ol><li>Listitem1</li><li>Listitem2</li><li>Listitem3</li></ol></div>以上兩個示例中的最后一個元素都不生效選擇器的組合CSS選擇器在使用時，可以將多個選擇器進行組合，用于更準(zhǔn)確的定位要作用的元素。2025/2/6《Web程序設(shè)計》23<style>.classA.classB{border:1pxsolidred;}.classa.classb{border:1pxsolidblue;}</style><body><inputtype="text"class="classAclassB"value="選擇器為.classA.classB"/><divclass="classa"><inputclass="classb"type="text"value="選擇器為.classa.classb"/></div></body>第一組選擇器“.classA.classB”中間沒有空格，表示兩個類選擇器同時出現(xiàn)于某個元素的class屬性中；第二組選擇器“.classa.classb”中間有空格，表示為后代選擇器。CSS作用方式CSS作用方式是指CSS代碼嵌入HTML代碼中的方式主要有以下三種：內(nèi)聯(lián)樣式內(nèi)部樣式表外部連接方式2025/2/6《Web程序設(shè)計》24內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式直接對HTML標(biāo)簽元素使用style屬性，樣式的屬性與值均寫在style屬性的值中，同樣以“屬性-值”對出現(xiàn)。但使用這種方法定義樣式時，效果只可以控制某一個HTML標(biāo)記，無法通用。2025/2/6《Web程序設(shè)計》25<pstyle="color:red;margin-left:20px">這是一段示例文本</p>使用內(nèi)聯(lián)方式進行樣式定義時需要注意：

需要在標(biāo)簽內(nèi)使用樣式，style屬性值中可以包含任何CSS屬性；HTML標(biāo)簽的style定義僅對該位置上的標(biāo)簽生效；style的多個“屬性-值”對之間用分號分隔。內(nèi)部樣式表內(nèi)部樣式表一般位于HTML文件的頭部，即<head>與</head>標(biāo)簽內(nèi)，并且以<style>開始，以</style>結(jié)束，然后在整個HTML文件中可以直接調(diào)用該樣式，這種方式適合單個文檔的樣式定義。2025/2/6《Web程序設(shè)計》26<head><styletype="text/css">h1{color:red;}p{margin-left:20px;}</style></head>使用內(nèi)部樣式表定義CSS樣式時，需要注意：定義的樣式僅對當(dāng)前頁面生效，不能共享至其它頁面；樣式將會對該頁面中的所有符合條件的元素生效；外部樣式文件鏈接外部樣式表是在網(wǎng)頁中調(diào)用已經(jīng)定義好的樣式表來實現(xiàn)樣式表的應(yīng)用，它是一個單獨的文件，然后在頁面中進行引用。這種方式適合于大型項目的編程，可以很好地實現(xiàn)樣式文件的共享，提高樣式代碼的復(fù)用效率。外部樣式文件的引用方式有兩種，<link>鏈接方式和@import引入方式。2025/2/6《Web程序設(shè)計》27<link>鏈接方式在頁面中用<link>標(biāo)記鏈接到這個樣式表文件，這個<link>標(biāo)記必須放在頁面的<head>區(qū)內(nèi)。2025/2/6《Web程序設(shè)計》28<head><linkrel="stylesheet"type="text/css"href="../css/mystyle.css"/></head>rel="stylesheet"指調(diào)用的相關(guān)文件為樣式表文件；type="text/css"指引入的文件類型是樣式表文本；CSS文件一定是純文本格式；

再修改外部樣式表時，引用它的所有外部頁面也會自動更新；css文件的位置在上一級文件夾的css目錄中。通過@import方式引入導(dǎo)入外部樣式表是指在內(nèi)部樣式表的<style>里導(dǎo)入一個外部樣式表，導(dǎo)入時用@import。被導(dǎo)入的HTML文件在初始化時會將該CSS文件導(dǎo)入HTML文件中，作為此HTML文件的一部分，類似于內(nèi)嵌式的效果。2025/2/6《Web程序設(shè)計》29示例例如，css目錄下有一個外部樣式文件mystyle.css2025/2/6《Web程序設(shè)計》30<styletype="text/css">

@importurl("../css/mystyle.css");</style>使用<style>標(biāo)簽來嵌入，type聲明了類型為text/css，表示為樣式；@import放在<style>標(biāo)簽中的第一行，表示引入外部樣式文件，CSS規(guī)范中規(guī)定該代碼必須放在第一行；url中給出了樣式文件的具體位置，可以使用相對位置或絕對位置；樣式的繼承性CSS中，部分樣式具有一定的繼承性。如果一個標(biāo)簽本身未設(shè)置過某些樣式，而它的某個祖先級設(shè)置過，則該標(biāo)簽在瀏覽器中也會加載這些樣式，這些樣式都是從祖先級繼承而來，這種現(xiàn)象就是繼承性。當(dāng)前，能夠被繼承的樣式僅為所有的文字相關(guān)樣式屬性，其他的樣式都不能被繼承。2025/2/6《Web程序設(shè)計》31實例分析2025/2/6《Web程序設(shè)計》32<head><style>.box1{

width:200px;

height:200px;

background-color:pink;

color:green;

font-family:"宋體";

font-size:14px;}</style></head><body>

<h2>這是一個二級標(biāo)題</h2>

<divclass="box1">

<p>這是box1標(biāo)簽內(nèi)的段落</p>

<p>這是box1標(biāo)簽內(nèi)的段落</p>

<p>這是box1標(biāo)簽內(nèi)的段落</p>

<p>這是box1標(biāo)簽內(nèi)的段落</p>

</div></body>可以看到，雖然P標(biāo)簽未定義任何CSS樣式，但顯示時，仍然顯示了樣式的效果，這是由于其父標(biāo)簽DIV定義了字體樣式，被P標(biāo)簽繼承了。然而寬度width和高度height的樣式并未繼承。樣式的層疊CSS的本意就是樣式層疊表，即樣式可以層疊顯示。層疊可以理解為樣式的覆蓋，當(dāng)一個元素被運用上多種樣式，并且出現(xiàn)重名的樣式屬性時，瀏覽器必須從中選擇一個屬性值生效，這個過程就叫“層疊”。由于樣式有多種定義方式，如行內(nèi)樣式、頁面嵌入式、鏈接到外部樣式文件等，因此，樣式間難免會出現(xiàn)重復(fù)或沖突的情況。為此，CSS規(guī)范中規(guī)定了樣式的層疊規(guī)則。2025/2/6《Web程序設(shè)計》33HTML頁面CSS定義CSS定義CSS定義層疊規(guī)則規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時，最近祖先獲勝。2025/2/6《Web程序設(shè)計》34<head><title>規(guī)則1</title><style>body{color:black;}p{color:blue;}</style></head><body><p>這是一段<strong>測試</strong>文本。</p></body>strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。層疊規(guī)則規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時，直接指定的樣式獲勝。2025/2/6《Web程序設(shè)計》35<head><title>規(guī)則2</title><style>body{color:black;}p{color:blue;}strong{color:red;}</style></head><body><p>這是一段<strong>測試</strong>文本。</p></body>由于為strong標(biāo)簽指定了樣式“color:red”，優(yōu)先級高于繼承自p的樣式，因此，該標(biāo)簽最終顯示的效果為紅色字體。層疊規(guī)則規(guī)則三：直接指定的樣式發(fā)生沖突時，樣式權(quán)值高者獲勝。2025/2/6《Web程序設(shè)計》36內(nèi)聯(lián)樣式的權(quán)值>>ID選擇器>>類選擇器>>標(biāo)簽選擇器。組合選擇器的權(quán)值為每項權(quán)值之和，例如“#nav.currenta”的權(quán)值為100+10+1=111。CSS選擇器權(quán)值標(biāo)簽選擇器1類選擇器10ID選擇器100內(nèi)聯(lián)樣式1000偽元素(:first-child等)1偽類(:link等)10層疊規(guī)則規(guī)則四：樣式權(quán)值相同時，后者獲勝。2025/2/6《Web程序設(shè)計》37<head><title>規(guī)則4</title><style>body{color:black;}p.test{color:blue;}.parastrong{color:red;}</style></head><body><pclass=”para”>這是一段<strongclass=”test”>測試</strong>文本。</p></body>strong標(biāo)簽元素同時受兩個定義的樣式作用，“p.test”與“.parastrong”，且兩者的權(quán)值都是11，后者“.parastrong”獲勝，最終顯示為紅色字體。層疊規(guī)則規(guī)則五：!important的樣式屬性不被覆蓋。2025/2/6《Web程序設(shè)計》38如果一定要使某個樣式屬性生效，而不讓它被覆蓋，可以在屬性值后加上!important，以規(guī)則四的例子為例，”p.test{color:blue!important;}”可以強行使文本顯示藍色。特別要注意，不能濫用!important，大多數(shù)情況下都可以通過其他方式來控制樣式的覆蓋。主要內(nèi)容2025/2/6《Web程序設(shè)計》391CSS簡介2基本語法3常用樣式4DIV+CSS布局樣式的取值(1)長度相關(guān)取值長度相關(guān)的取值有兩種單位：相對長度單位與絕對長度單位，典型的應(yīng)用有font-size、width、height等2025/2/6《Web程序設(shè)計》40相對長度單位說明px像素值，最常用單位em倍數(shù)，繼承自祖先元素設(shè)置的字號的倍數(shù)%百分比，繼承自祖先元素設(shè)置的字號的百分比絕對長度單位說明in英寸cm厘米mm毫米pt磅樣式的取值(2)顏色相關(guān)取值CSS中有許多與顏色相關(guān)的樣式屬性，例如color、background-color、border-color等，CSS的顏色可以通過以下幾種方法指定：十六進制顏色RGB顏色RGBA顏色HSL色彩顏色名稱2025/2/6《Web程序設(shè)計》41顏色說明十六進制顏色＃RRGGBB，其中RR（紅色），GG（綠色）和BB（藍色）。所有值必須介于0和FF之間。RGBRGB（紅，綠，藍）。每個參數(shù)（紅色，綠色和藍色）定義顏色的亮度，可在0和255之間，或一個百分比值（從0％到100％）之間的整數(shù)。RGBARGBA（紅，綠，藍，alpha），alpha通道的延伸。Alpha參數(shù)是一個介于0.0（完全透明）和1.0（完全不透明）之間的參數(shù)。HSLHSL（色調(diào)，飽和度，明度）色相是在色輪上的程度（從0到360）。飽和度是一個百分比值;0％意味著灰色和100％是全彩。亮度也是一個百分點;0％是黑色的，100％是白色的。顏色名稱定義了147顏色名稱，17個標(biāo)準(zhǔn)色文本樣式文本樣式主要用于設(shè)置HTML中文本顯示的字體、大小、形態(tài)等。2025/2/6《Web程序設(shè)計》42屬性描述color設(shè)置文本顏色direction設(shè)置文本方向。letter-spacing設(shè)置字符間距l(xiāng)ine-height設(shè)置行高text-align對齊元素中的文本text-decoration向文本添加修飾text-indent縮進元素中文本的首行text-shadow設(shè)置文本陰影text-transform控制元素中的字母unicode-bidi設(shè)置或返回文本是否被重寫vertical-align設(shè)置元素的垂直對齊white-space設(shè)置元素中空白的處理方式word-spacing設(shè)置字間距字體樣式字體樣式是用于設(shè)置HTML頁面中文字顯示的字體相關(guān)效果，包括了字體、大小、加粗、斜體等。2025/2/6《Web程序設(shè)計》43屬性描述font簡寫屬性，一條屬性設(shè)置所有屬性值font-family指定字體名稱font-size字體大小font-weight字體加粗font-style字體斜體line-height行高font-variant是否以小型大寫字母的字體顯示文本英文的字體有幾種類型：

通用字體系列-擁有相似外觀的字體系統(tǒng)組合（如“Serif”或“Monospace”）

特定字體系列-一個特定的字體系列（如“Times”或“Courier”）2025/2/6《Web程序設(shè)計》44Genericfamily字體系列說明SerifSerif字體中字符在行的末端擁有額外的裝飾Georgia"Sans"是指無-這些字體在末端沒有額外的裝飾Sans-serif所有的等寬字符具有相同的寬度背景樣式CSS背景樣式屬性用于定義HTML元素的背景效果，主要包括背景顏色、圖片、圖片的重復(fù)、背景圖片位置等。2025/2/6《Web程序設(shè)計》45樣式屬性描述background簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動。background-color設(shè)置元素的背景顏色。background-image把圖像設(shè)置為背景。background-position設(shè)置背景圖像的起始位置。background-repeat設(shè)置背景圖像是否及如何重復(fù)。邊框樣式邊框樣式屬性允許為某個元素指定邊框的樣式屬性，主要包括邊框的寬度、顏色、樣式等，2025/2/6《Web程序設(shè)計》46屬性描述border簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。border-style用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。border-width簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。border-color簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或為4個邊分別設(shè)置顏色。border-bottom簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。border-bottom-color設(shè)置元素的下邊框的顏色。border-bottom-style設(shè)置元素的下邊框的樣式。border-bottom-width設(shè)置元素的下邊框的寬度。border-left簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。border-left-color設(shè)置元素的左邊框的顏色。border-left-style設(shè)置元素的左邊框的樣式。border-left-width設(shè)置元素的左邊框的寬度。border-right簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。border-right-color設(shè)置元素的右邊框的顏色。border-right-style設(shè)置元素的右邊框的樣式。border-right-width設(shè)置元素的右邊框的寬度。border-top簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。border-top-color設(shè)置元素的上邊框的顏色。border-top-style設(shè)置元素的上邊框的樣式。border-top-width設(shè)置元素的上邊框的寬度。外邊距與填充樣式外邊距（margin）屬性用于定義元素周圍的空間，即邊框向外擴展的距離。外邊距范圍內(nèi)沒有背景顏色，是完全透明的。填充（padding）屬性用于定義元素邊框與元素內(nèi)容之間的空間，即邊框內(nèi)上下左右的內(nèi)邊距。區(qū)域的顏色通過background-color進行設(shè)置。2025/2/6《Web程序設(shè)計》47margin的取值通常可以是指定的數(shù)值寬度或百分比寬度，指明了外邊距的大小，還有一種特殊的值“auto”，其意義是自動設(shè)置瀏覽器的邊距，這個自動將依賴于瀏覽器，即不同瀏覽器的顯示效果可能不一樣。margin的取值可以使用一個值，也可以使用四個值，分別表示上右下左四個邊。2025/2/6《Web程序設(shè)計》48/*設(shè)置四個外邊距，分別對應(yīng)上、右、下、左*/margin:{25px50px75px100px}/*設(shè)置三個外邊距，分別對應(yīng)上、右、下，左默認取右值*/margin:{25px50px75px}/*設(shè)置兩個，分別對應(yīng)上、右，下默認取上值，左默認取右值*/margin:{25px50px}/*設(shè)置一個，則表示四個外邊距都一樣*/margin:{25px}其它常用樣式（1）display屬性用于設(shè)置元素為塊元素或內(nèi)聯(lián)元素。塊元素是一個占據(jù)整行的元素，其前后都有換行符。例如<h1>、<p>、<div>等。內(nèi)聯(lián)元素只需要有必要的寬度，不強制換行。例如<span>、<a>等。block：將元素顯示為塊元素，顯示占一整行；inline：將元素顯示為內(nèi)聯(lián)元素，只占必要的寬度，由元素內(nèi)容自動決定，無法設(shè)置；inline-block：將元素顯示為內(nèi)聯(lián)塊元素，只占必要的寬度，可以手動設(shè)置；none：不顯示；2025/2/6《Web程序設(shè)計》49（2）position屬性用于元素的定位，有以下幾種定位類型：static：默認值，沒有定位，遵循正常的文檔流對象；fixed：元素的位置相對于瀏覽器窗口是固定位置，即當(dāng)窗口的滾動條向上或向下滾動時，元素的位置也不會移動，該元素不占據(jù)文檔流中其它元素位置；relative：元素位置是相對定位，即以父元素的左上角為定位點，相對于這個點的位置；absolute：元素位置是絕對定位，即以最近已定位的父元素來定位，如果沒有，則以HTML文檔的左上角來定位。2025/2/6《Web程序設(shè)計》50（3）overflow屬性overflow屬性主要用于控制元素中內(nèi)容溢出時的顯示方式，主要包含以下幾種設(shè)置：visible：默認的顯示設(shè)置。內(nèi)容不會被隱藏，會顯示在元素范圍之外，即保持溢出狀態(tài)；hidden：溢出的內(nèi)容會被隱藏，只顯示元素范圍內(nèi)的內(nèi)容；scroll：會出現(xiàn)滾動條，可以通過滾動條查看溢出的內(nèi)容；auto：如果內(nèi)容超出元素的范圍，會出現(xiàn)滾動條，否則不會出現(xiàn)滾動條，正常顯示；inherit：從父元素處繼承overflow屬性的值。2025/2/6《Web程序設(shè)計》51（4）float屬性float屬性會使元素脫離原來的布局，向上浮起來，其周圍的元素也會重新排列，通常用于布局。float屬性的值通常有l(wèi)eft或right兩種取值，表示元素浮動的方向。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。2025/2/6《Web程序設(shè)計》52主要內(nèi)容2025/2/6《Web程序設(shè)計》531CSS簡介2基本語法3常用樣式4DIV+CSS布局盒模型所有HTML元素可以看作方形盒子，CSS盒模型正是基于這點，構(gòu)建了一個內(nèi)容盒子，封裝周圍的HTML元素，它包括：外邊距，邊框，填充，和實際內(nèi)容。2025/2/6《Web程序設(shè)計》54DIV+CSS布局DIV+CSS是一種布局方式，div是這種布局方式的主要對象，使頁面布局不再依賴表格，只需要div和css。2025/2/6《Web程序設(shè)計》55<body><divclass="container"><divid="top">上</div><divid="main">中</div><divid="footer">下</div></div></body><style>.container{width:1200px;height:600px;margin:5pxauto;text-align:center}#top{width:100%;height:120px;background:lightblue;}#main{width:100%;height:500px;background-color:lime;}#footer{width:100%;height:50px;background-color:#7FFFD4;}</style>兩列自適應(yīng)布局（1）寬度自適應(yīng)兩列布局兩列布局通?？梢允褂酶觼硗瓿?，左列設(shè)置左浮動，右列設(shè)置右浮動，這樣就不用再設(shè)置外邊距。2025/2/6《Web程序設(shè)計》56<body><divid="header">頁頭區(qū)域</div><divclass="left">左側(cè)區(qū)域</div><divclass="main">主區(qū)域</div><divid="footer">頁腳區(qū)域</div></body><style>*{margin:0;padding:0;}#header{height:50px;background:blue;}.left{width:30%;height:800px;background:red;float:left;}.main-right{width:70%;height:800px;background:pink;float:right;}#footer{clear:both;height:50px;background:gray;}</style>兩列自適應(yīng)布局（2）固定寬度兩列布局要實現(xiàn)固定寬度的兩列布局，只需要把左右兩列包裹起來，也就是給他們增加一個父容器，然后固定父容器的寬度，父容器的寬度固定了，那么這兩列的寬度值也就固定了，就實現(xiàn)了固定寬度的兩列布局。2025/2/6《Web程序設(shè)計》57<body><divid="header">頁頭區(qū)域</div><divid="main"><divclass="main-left">左側(cè)區(qū)域</div><divclass="main-right">主區(qū)域</div></div><divid="footer">頁腳區(qū)域</div></body>*{margin:0;padding:0;}#header{height:50px;background:blue;}#main{width:960px;margin:0auto;overflow:hidden;}#main.main-left{width:288px;height:800px;background:red;float:left;}#main.main-right{width:672px;height:800px;background:pink;float:right;}#footer{width:960px;height:50px;background:gray;margin:0auto;}三列自適應(yīng)布局三列自適應(yīng)布局是指左右兩側(cè)的寬度固定，中間區(qū)域根據(jù)窗口自適應(yīng)調(diào)整大小。實現(xiàn)方式可參考上節(jié)中提到的兩列布局，也可采用Flex布局實現(xiàn)。2025/2/6《Web程序設(shè)計》58采用flex模式布局的思路如下：將父元素container設(shè)為display:flex;可將container設(shè)置為彈性盒模型進行布局。2025/2/6《Web程序設(shè)計》59<body><divid="container"><divid="left">左側(cè)區(qū)域</div><divid="center">主區(qū)域</div><divid="right">右側(cè)區(qū)域</div></div></body><style>#container{width:100%;height:600px;display:flex;margin:10px;}#left,#right{width:150px;height:600px;margin:10px;background-color:#999999;}#center{flex:1;height:600px;margin:10px;/*左右margin不會疊加*/background-color:#ff0000;}</style>2025/2/6《Web程序設(shè)計》60本章結(jié)束第4章Javascript主講人：2025/2/661主要內(nèi)容2025/2/6《Web程序設(shè)計》621Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理本章課程目標(biāo)知識目標(biāo)掌握Javascript的基本語法、DOM對象以及事件處理方法；能力要求：能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計中的基礎(chǔ)知識與工作原理，將知識與原理應(yīng)用于開發(fā)過程中的問題分析；2025/2/6《Web程序設(shè)計》634.1Javascript簡介Javascript是一種動態(tài)類型、弱類型、基于原型的腳本語言。是一種解釋性腳本語言，代碼不進行預(yù)編譯而直接執(zhí)行。JavaScript也有自己的基本語法、數(shù)據(jù)類型、運算符和流程控制語句。它的解釋器通常被稱為JavaScript引擎。JavaScript與Java語言在命名上有些相似，但與Java不是同一公司的產(chǎn)品，它是Netscape（網(wǎng)景）公司為擴充NetscapeNavigator瀏覽器的功能而開發(fā)的一種可以嵌入Web網(wǎng)頁的編程語言，前身叫LiveScript。2025/2/6《Web程序設(shè)計》64JavaScript腳本語言具有以下特點：

腳本語言。JavaScript是一種解釋型的腳本語言,不需要編譯，它是在程序的運行過程中逐行進行解釋的。

基于對象。JavaScript是一種基于對象的腳本語言,它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。

弱數(shù)據(jù)類型。JavaScript腳本語言中采用的是弱類型的變量類型。動態(tài)性。JavaScript是一種采用事件驅(qū)動的腳本語言，它可以在瀏覽器端不需要經(jīng)過Web服務(wù)器直接對用戶的輸入做出響應(yīng)?？缙脚_性。JavaScript腳本語言僅需要瀏覽器的支持，不依賴于操作系統(tǒng)。2025/2/6《Web程序設(shè)計》65主要內(nèi)容2025/2/6《Web程序設(shè)計》661Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理語法Javascript代碼一般嵌入到網(wǎng)頁中的<script></script>標(biāo)簽之內(nèi)，或保存一個單獨的js文件中。2025/2/6《Web程序設(shè)計》67<scripttype=”text/javascript”>vari,sum=0;for(i=0;i<=100;i++){sum+=i;}window.alert(‘總和為：’+sum);</script>JavaScript在編寫時，仍需注意以下事項：JavaScript區(qū)分大小寫。例如，變量Number與變量number是兩個不同的變量。Javascript中變量是弱類型的，因此在定義變量的時，只使用關(guān)鍵字var就可以將變量初始化任意的值。JavaScript可以使用雙斜線“//”開頭的單行注釋，也可以使用“/*”開頭，以“*/”結(jié)尾的多行注釋。JavaScript的變量名不能是系統(tǒng)的保留字（或關(guān)鍵字，如var、for、null等）數(shù)據(jù)類型Javascript雖然是弱數(shù)據(jù)類型，但仍然有數(shù)據(jù)類型及其運算規(guī)則。Javascript有6種數(shù)據(jù)類型，它們分別是：int（整型）float（浮點型）string（字符串類型）boolean（布爾型）object（對象類型）null（空類型）undefined（未定義類型）其中int型和float型為數(shù)值型。2025/2/6《Web程序設(shè)計》68字符串類型字符串是用雙引號（“”）或單引號（‘’）作為分界符的，字符的個數(shù)為字符串的長度。單雙引號也可嵌套使用。例如，“He’sakindman！”轉(zhuǎn)義字符用反斜杠“\”開頭2025/2/6《Web程序設(shè)計》69轉(zhuǎn)義字符含義轉(zhuǎn)義字符含義\b退格\t表示TAB符號\f換頁\'單引號\n換行\(zhòng)"雙引號\r回車\\反斜杠空類型與未定義類型空類型的值就是null，表示空值，這種空值通常是人為賦予的，例如在初始化時將該變量設(shè)置為null。未定義類型即undefined，指變量被聲明，但未給該變量賦值。undefined與null不同的是，undefined是變量聲明后自動具有的值，null是人為賦值的。2025/2/6《Web程序設(shè)計》70變量JavaScript中變量的命名規(guī)則如下：

必須以字母或下劃線開頭

變量名不能包含空格、加號或減號等一些特殊符號

不能使用JavaScript中的關(guān)鍵字JavaScript變量名是嚴(yán)格區(qū)分大小寫的。例如，Nchu與nchu表示兩個不同的變量在JavaScript中，使用變量之前可以先聲明變量，所有的變量都由關(guān)鍵字var聲明。2025/2/6《Web程序設(shè)計》71vara,b,c;//同時聲明a，b，c三個變量由于JavaScript采用弱類型的形式，所以在定義時可以不管變量的數(shù)據(jù)類型，把任意類型的數(shù)據(jù)賦值給變量，JavaScript將根據(jù)實際的值來確定變量的類型。例如：2025/2/6《Web程序設(shè)計》72varnumber=100;//數(shù)值數(shù)據(jù)類型varstr=“南昌航空大學(xué)”;//字符串類型varstatus=true;//布爾類型number=false;//修改number中的值為布爾類型主要內(nèi)容2025/2/6《Web程序設(shè)計》731Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理一個最簡單的程序是由若干條語句構(gòu)成的，程序按語句位置的先后次序，逐條按順序執(zhí)行，這種程序被稱為順序結(jié)構(gòu)。除了順序結(jié)構(gòu)外，還有用于判斷和重復(fù)執(zhí)行的控制流程，分別稱為選擇和循環(huán)結(jié)構(gòu)，這三種結(jié)構(gòu)都是用來控制程序執(zhí)行的流程。Javascript與C、Java等語言類似，也提供了相同的流程控制語句。2025/2/6《Web程序設(shè)計》74if語句2025/2/6《Web程序設(shè)計》75<html><head><metacharset="UTF-8"><title>if語句的簡單應(yīng)用</title></head><body><script>vardate=newDate();varhour=date.getHours();if(hour>=6&&hour<8)alert("當(dāng)前時間為："+date.toLocaleString()+""+"早上好！");if(hour>=8&&hour<12)alert("當(dāng)前時間為："+date.toLocaleString()+""+"上午好！");if(hour>=12&&hour<18)alert("當(dāng)前時間為："+date.toLocaleString()+""+"下午好！");if(hour>=18&&hour<23)alert("當(dāng)前時間為："+date.toLocaleString()+""+"晚上好！");if(hour>=23&&hour<=24||hour>0&&hour<6)alert("當(dāng)前時間為："+date.toLocaleString()+""+"夜深了，休息吧");</script></body></html>循環(huán)whiledo-whilefor2025/2/6《Web程序設(shè)計》76<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>while語句的應(yīng)用</title><script>//求1+2+3+...+100的和varnum=1,sum=0;while(num<=100){sum=sum+num;num++;}document.write("1+2+3+...+100的和為："+sum);</script></head><body></body></html>主要內(nèi)容2025/2/6《Web程序設(shè)計》771Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理模塊化在解決復(fù)雜的問題時或較大的程序一般分為若干個較小的程序模塊，每一個模塊實現(xiàn)特定的功能。在Javascript語言中，每一個模塊就是一個函數(shù)。有時將常用的模塊編寫成函數(shù)，然后可以在程序中需要的地方重復(fù)調(diào)用，以增強代碼的重用性，提高代碼的可維護性。2025/2/6《Web程序設(shè)計》78模塊模塊模塊模塊模塊模塊函數(shù)定義參數(shù)說明如下：

函數(shù)名：函數(shù)的名稱，命名規(guī)范與變量名一致，不能與系統(tǒng)保留字沖突；

參數(shù)1，參數(shù)2：參數(shù)的名稱，可選的，是函數(shù)的形參，這里的參數(shù)只需要名稱，不需要數(shù)據(jù)類型；

代碼塊：函數(shù)的主體，即函數(shù)中要執(zhí)行的數(shù)據(jù)處理邏輯；return返回值：用于返回函數(shù)的計算結(jié)果，可選的，適用于需要返回的情形，如果不需要返回，則可省略。2025/2/6《Web程序設(shè)計》79function函數(shù)名（[參數(shù)1，參數(shù)2，…]）{代碼塊;[return返回值;]}<body><script>functiongetToday()//定義函數(shù){vartoday=newDate();returntoday.toLocaleString();}</script><h3>今天是：<span><scripttype=”text/javascript”>document.write(getToday());//調(diào)用函數(shù)</script></span></h3></body>函數(shù)參數(shù)參數(shù)是函數(shù)向內(nèi)部傳遞數(shù)據(jù)的通道。在函數(shù)定義的時候確定的參數(shù)稱為形式參數(shù)（形參），而真正的參數(shù)值（稱為實際參數(shù)，簡稱實參）是在調(diào)用該函數(shù)時，由調(diào)用方傳遞給所定義的函數(shù)，從而實現(xiàn)調(diào)用函數(shù)向被調(diào)用函數(shù)的數(shù)據(jù)傳遞。Javascript的函數(shù)參數(shù)不需要指定參數(shù)的類型，這是因為變量類型默認是自動識別的。2025/2/6《Web程序設(shè)計》80functionmyFunc(x,y){//判斷y是否傳入實際值if(y===undefined){y=0;......}}調(diào)用時，如果沒有給y傳入值，則y的值默認為0。這句代碼也可直接寫為“y=y||0”//EMCAScript6//支持默認參數(shù)functionmyFunc(x,y=0){......}JavaScript函數(shù)有個內(nèi)置的對象arguments對象，包含了函數(shù)調(diào)用的參數(shù)數(shù)組。2025/2/6《Web程序設(shè)計》81functionsumAll(){vari,sum=0;for(i=0;i<arguments.length;i++){sum+=arguments[i];}returnsum;}......x=sumAll(1,123,500,115,44,88);主要內(nèi)容2025/2/6《Web程序設(shè)計》821Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理基于對象（Object-based）Javascript語言是基于對象（Object-based）的程序設(shè)計語言，采用的是對象、事件驅(qū)動的編程機制。與Java類似的是，Javascript中的對象也具有一定的屬性和方法，可以根據(jù)需要進行聲明。但在類的聲明與實例時，與Java有較大的區(qū)別。2025/2/6《Web程序設(shè)計》83對象的定義Javascript對象是一種復(fù)合值：它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值。對象也可看做是屬性的無序集合，每個屬性都是一個名/值對。2025/2/6《Web程序設(shè)計》84var對象名={屬性名：值,屬性名：值,......}對象名：要定義的對象名稱；屬性名：對象中的屬性名稱；值：為該屬性設(shè)置的值。定義時屬性名和值通常成對出現(xiàn)，也稱為“屬性-值”對，多個“屬性-值”對之間用逗號分隔。varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};對象方法的定義Javascript中對象方法是通過函數(shù)的定義方式實現(xiàn)的，也可以將其看作是一個屬性，這個屬性是一個函數(shù)。2025/2/6《Web程序設(shè)計》85var對象名={/*屬性列表*/....../*方法列表*/

函數(shù)名:function(){

函數(shù)體;},......};對象名：聲明的對象名稱；函數(shù)名：聲明的函數(shù)名稱，是對象的成員函數(shù)；函數(shù)體：函數(shù)的具體實現(xiàn)邏輯代碼。varperson={fullName:“John”,lastName:“Doe”,showFullName:function(){returnfullName+lastName;}}內(nèi)置對象JavaScript腳本語言提供了一些內(nèi)置對象，這些內(nèi)置對象通常是一些工具對象，利用這些對象以及提供的方法可以輔助完成特定的功能。常用的內(nèi)置對象主要包括：Date對象String對象Math對象Array對象......2025/2/6《Web程序設(shè)計》86Date對象屬性/方法說

明getDate()獲取當(dāng)前的日期getYear()獲取當(dāng)前的年份（2000年以前返回年份數(shù)后兩位，2000年以后返回后四位）getFullYear()返回以4位整數(shù)表示的年份數(shù)getMonth()獲取當(dāng)前的月份getDay()獲取當(dāng)周的第幾天，即星期幾getHours()獲取當(dāng)前的小時getMinutes()獲取當(dāng)前的分鐘getSeconds()獲取當(dāng)前的秒setDate()設(shè)置當(dāng)前的日期setYear()設(shè)置當(dāng)前的年份setMonth()設(shè)置當(dāng)前的月份setHours()設(shè)置當(dāng)前的小時setMinutes()設(shè)置當(dāng)前的分鐘setSeconds()設(shè)置當(dāng)前的秒setTime()設(shè)置當(dāng)前的時間（單位是毫秒）toLocaleString()以本地時區(qū)格式顯示，并以字符串表示2025/2/6《Web程序設(shè)計》87String對象屬性/方法說

明length求字符串的長度charAt(下標(biāo))字符對象指定位置的字符indexOf(目標(biāo)字符串)目標(biāo)字符串在字串對象中首次出現(xiàn)的位置lastIndexOf(目標(biāo)字符串)目標(biāo)字符串在字串對象中最后一次出現(xiàn)的位置substr(開始位置[,長度])截取子串substring(索引值I,索引值j)截取從索引值i到j(luò)-1的字串split(分隔符)把字符串按分隔符拆成字符串?dāng)?shù)組replace(被代替的字符串,新字符串)用新的字符串代替舊的字符串toLowerCase()變?yōu)樾懽帜竧oUpperCase()變?yōu)榇髮懽帜竧oString()獲取String對象的字符串值2025/2/6《Web程序設(shè)計》88Math對象屬性/方法說

明abs(x)返回x的絕對值max(x,y)返回兩數(shù)間的較大值exp(x)返回x的e次方log(x)返回以e為底的對數(shù)值pow(x,y)返回x的y次方sqrt(x)返回x的平方根random()返回0和1之間的一個隨機數(shù)round(x)返回x四舍五入后的整數(shù)sin(x)、cos(x)、tan(x)分別返回x的正弦、余弦、正切值asin(x)、acos(x)、atan(x)分別返回x的反正弦、反余弦、反正切值2025/2/6《Web程序設(shè)計》89Array對象Array對象是Javascript中一個特殊的對象，專門用于數(shù)組的聲明。2025/2/6《Web程序設(shè)計》90對

象屬性/方法說

明Arraypush(元素1，元素2，…)添加元素，返回數(shù)組的長度reverse()倒序數(shù)組<head><metacharset="UTF-8"><title>Array對象應(yīng)用示例</title></head><body><script>varapple="蘋果",banana="香蕉",orange="橘子";vararray=newArray();array.push(apple,banana,orange);document.write("數(shù)組為："+array+"<br/>");varreverse_array=array.reverse();document.write("倒序數(shù)組為："+reverse_array);</script></body>瀏覽器對象瀏覽器對象也稱為瀏覽器內(nèi)置對象（BrowserObjectModel），這些內(nèi)置對象是瀏覽器自身已定義好的，可以直接使用。BOM可實現(xiàn)功能主要有：彈出新的瀏覽器窗口，移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小，頁面的前進、后退等。因此，瀏覽器對象主要有：window,location,history等。2025/2/6《Web程序設(shè)計》91window對象window對象表示一個瀏覽器窗口或一個框架。在該對象結(jié)構(gòu)圖中，窗口對象window是所有對象中的最高層對象。window對象會在<body>或<frameset>出現(xiàn)時自動創(chuàng)建。window對象是一個全局對象，在同一個窗口訪問其他對象時，可以省略2025/2/6《Web程序設(shè)計》92方法描述alert(信息字串)顯示帶消息和“確定”按鈕的對話框confirm(確認信息字串)確認對話框，有“確認”和“取消”兩個按鈕，單擊“確認”返回true，單擊“取消”返回falseprompt(提示字串,[默認值])提示輸入信息對話框，返回用戶輸入信息open(URL,窗口名稱[,窗口規(guī)格])打開新窗口scroll(x坐標(biāo),y坐標(biāo))窗口滾動到指定坐標(biāo)位置setTimeout(函數(shù),毫秒)指定毫秒時間后調(diào)用函數(shù)setInterval(函數(shù),毫秒)每隔指定毫秒時間調(diào)用一次函數(shù)clearTimeout(定時器對象)清除以setTimeout定義的定時程序clearInterval(定時器對象)清除以setInterval定義的定時程序close()關(guān)閉當(dāng)前瀏覽器窗口stop()停止加載網(wǎng)頁moveTo(x坐標(biāo),y坐標(biāo))將窗口移動到設(shè)置的位置moveBy(水平像素值,垂直像素值)按設(shè)置的值相對地移動窗口resizeTo(寬度像素值,高度像素值)按指定的寬度和高度調(diào)整窗口resizeBy(寬度像素值,高度像素值)按指定的值相對的調(diào)整窗口大小2025/2/693屬性描述document提供窗口的文檔對象只讀引用location包含有關(guān)當(dāng)前URL的信息navigator提供窗口的瀏覽器對象引用history提供窗口的歷史對象只讀引用defaultStatus設(shè)置狀態(tài)欄的默認信息status設(shè)置狀態(tài)欄的臨時信息screen提供窗口的屏幕對象引用frames提供窗口的框架對象引用name設(shè)置或返回存放窗口的名稱event提供窗口的事件對象引用self返回對當(dāng)前窗口的引用top返回最頂層的先輩窗口parent返回父窗口window對象使用示例(alert方法)2025/2/6《Web程序設(shè)計》94<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>警告對話框的應(yīng)用</title><script>functioncheckPasswod(object){if(object.value.length<6)alert("密碼長度不得小于6位"); }</script></head><body>//當(dāng)失去焦點時發(fā)生密碼：<inputtype="password"onblur="checkPasswod(this)"/></body></html>window對象使用示例(confirm方法)2025/2/6《Web程序設(shè)計》95<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionConfirm(){if(confirm("確認刪除嗎？"))alert("已刪除");elsealert("您取消了刪除");}</script></head><body><inputtype="button"value="刪除"onclick="Confirm()"/></body></html>定時器應(yīng)用示例2025/2/6《Web程序設(shè)計》96<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionshowtime(){document.getElementById("mytime").innerText=newDate().toLocaleString();}//每隔一秒種調(diào)用一次showtime()函數(shù)setInterval("showtime()",1000);</script></head><body><spanid="mytime"></span></body></html>location對象location對象是window對象的子對象，是瀏覽器內(nèi)置的一個靜態(tài)對象，它包含有關(guān)當(dāng)前URL（統(tǒng)一資源定位符）信息。2025/2/6《Web程序設(shè)計》97屬性/方法描述href設(shè)置或返回完整的URLhost設(shè)置或返回URL的主機名和端口號hostname設(shè)置或返回URL的主機名port設(shè)置或返回URL的端口號pathname設(shè)置或返回URL的路徑部分protocol設(shè)置或返回URL的協(xié)議search設(shè)置或返回從“？”開始的URL部分（查詢部分）hash設(shè)置或返回從“#”開始的URL部（錨）reload()重新加載當(dāng)前網(wǎng)頁replace(url)用url指定的網(wǎng)址代替當(dāng)前的網(wǎng)頁assign(url)用url指定的網(wǎng)址加載新的網(wǎng)頁主要內(nèi)容2025/2/6《Web程序設(shè)計》981Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理DOM（DocumentObjectModel，文檔對象模型），是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問、更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型。HTMLDOM模型被結(jié)構(gòu)化為對象樹如圖所示。2025/2/6《Web程序設(shè)計》99DOM用途通過這個對象模型，JavaScript可以完成以下內(nèi)容：JavaScript能改變頁面中的所有HTML元素JavaScript能改變頁面中的所有HTML屬性JavaScript能改變頁面中的所有CSS

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論