Javaweb第三天筆記
[TOC]
內容回顧
什么是CSS：層疊樣式表
CSS的作用：對網頁進行美化
-
CSS選擇器：
- 元素選擇器：
div{ border:1px solid blue; width:40px; height:45px; } - ID選擇器：
#d1{ border:2px solid red; } - 類選擇器：
.divClass{ border:2px solid yellow; }
- 元素選擇器：
CSS浮動
div是塊級元素單獨一行，span是行級元素多個一行
要想讓div一行顯示多個，可以使用浮動
標簽 float：left/right
清除浮動clear:both-
CSS盒子模型
如果一個頁面布局復雜的情況下，我們可以把每一塊都封裝成一個小盒子，然后可以把多個小盒子放到一個大盒子里面，然后用大盒子在頁面上布局
今日要點
- 什么是Javascript?
- ==Javascript實現表單校驗==
- Javascript實現圖片輪播
- ==掌握Javascript定時器的使用==
- BOM對象
要求: 會使用Javascript實現表單校驗
-
01-案例三：使用JS完成注冊,頁面的數據簡單校驗：需求和JS的概述.avi
問：什么是Javascript，它有哪些特點？
答：JS是一種腳本語言(腳本語言是解釋執行語言。特點是較容易上手，編程功能上相對簡單一些。例如：JS語言、python語言等。編程語言功能較強大，可以用來開發規模較大的系統軟件，或者做系統底層的開發。：例如 C 語言、C# 語言等)，針對咱們瀏覽器。
特點: 交互性，安全性，跨平臺性。
==問：JS有幾部分組成==
ECMAScript：JavaScript的基本的語法
BOM：Browser Object Model 瀏覽器對象模型
DOM：Document Object Model 文檔對象模型 -
02-案例三：使用JS完成注冊頁面的數據簡單校驗：JS的基本語法.avi
問：怎么聲明一個變量
var a = 10; 自動推導
int b = 10;
問：JS的數據類型
答：原始類型：- 數值型：number(使用isNaN(變量)判斷是否是數值類型)
- 字符型：string(單引號或者雙引號)
- 布爾型：boolean
- 未定義型：undefined(為賦值的變量) var a;
- 空型：null 針對對象的默認值 var b = null; 清空變量
檢測數據類型 typeof a; 不是函數 運算符
引用了類型 Object問：
==和===的區別
答：==：判斷值是否相等
===：判斷值相等類型也相同
=賦值，==等于，===全等于 -
03-案例三：使用JS完成注冊頁面的數據簡單校驗：JS的通常開發的步驟.avi
問: JS的開發步驟
答:- JS通常都由一個事件觸發.
- onload事件：瀏覽器加載完成觸發
- onclick事件：鼠標單擊觸發
- 觸發一個函數,定義一個函數.
function 函數名稱(){ //操作 } - 獲得要操作的對象的控制權.
var uValue = document.getElementById("username").value; if(uValue == ""){ alert("用戶名不能為空！"); return false; }
- JS通常都由一個事件觸發.
-
04-案例三：使用JS完成注冊頁面的數據簡單校驗：代碼實現.avi
問: JS的兩種引入方式
- 頁面內直接編寫JS代碼,JS代碼需要使用
<script></script>.理論上可以寫在HTML中的任意位置 - 將JS的代碼編寫到一個.js的文件中,在HTML中引入該JS代碼即可.
<script src=”文件路徑”></script>
問: 代碼實現步驟
- 在表單標簽中定義 onsubmit事件
<form onsubmit=”return checkForm()”></form>
注意：當返回值為true則提交表單 - 定義checkForm()函數，實現校驗數據功能
問: JS校驗正則表達式就有兩個方法:- String對象中的match方法
- 正則對象：/正則表達式/.test(String) 是正則對象中的test方法.
- 數組：
str.match("正則表達式"); 正則.test("字符串"); - Java 返回Boolean matches()
- 頁面內直接編寫JS代碼,JS代碼需要使用
-
05-案例三：使用JS完成注冊頁面的數據簡單校驗：總結.avi
問: JS 的外部引入方式寫法
<script src="../js/文件.js"></script>案例三總結：
功能: 完成表單數據校驗：- 在form標簽中定義事件
onsubmit要return 函數() - 獲得標簽
document.getElementById(“ID”)
document.getElementsByName();返回數組 - JS引入的兩種方式
- 外部JS文件
.js通過<script type=”text/javascript” src=”路徑”></script> - HTML內部寫在
<head></head>內部
- 外部JS文件
- ==練習==
- 在form標簽中定義事件
-
06-案例四：使用JS完成圖片的滾動效果：需求和JS的定時介紹.avi
問: 定時器的使用
- 周期執行
setInterval(“函數名稱()”,time) - 執行一次（到時則執行）
setTimeout(“”,time)
- 周期執行
-
01-案例一：使用JS實現圖片輪播效果：需求和分析.avi
問: 如何清除定時器
答:clearInterval()clearTimeout()
分析圖片輪播實現步驟：- 創建一個HTML文件
- 當頁面加載的時候開始計時..使用
onload事件..(onload表示頁面加載完成之后執行觸發) - 編寫onload事件觸發的函數.
- 獲得操作圖片的控制權..
document.getElementById() - 修改圖片的src的屬性..
<img src=””/>
-
02-案例一：使用JS實現圖片輪播效果：代碼實現.avi
==練習==
-
03-案例二：使用JS實現定時彈出廣告：需求和分析.avi
- 使用定時函數
- 清除定時函數
- 修改CSS屬性
display:顯示block/隱藏none
-
04-案例二：使用JS實現定時彈出廣告：代碼實現.avi
- 創建一個HTML頁面
- 確定事件：頁面的加載事件
- 觸發一個函數，編寫該函數.
- 在函數中設置定時操作..定時執行一個顯示的函數.
- 操作CSS：
對象.style.display = ""對象.style.backgroundColor ="" - 獲得ID執行清除定時，重新設置定時，5秒鐘隱藏.
注意：一個頁面只能有一個onload
-
05-案例二：使用JS實現定時彈出廣告：總結：BOM的window對象.avi
問: 什么是BOM
答: BOM(Browser Object Model,瀏覽器對象模型)
問: BOM中window對象的常用方法- 彈框
alert() 彈出警告框confirm() 確認框prompt() 對話框 - 計時器
setTimeout()setInterval()clearTimeoutclearInterval() - 打開新的窗口
open(“url”)
注意：window中的對象屬性函數在調用時可以省略window不寫
window.alert(123)===alert(123) - 彈框
-
06-案例二：使用JS實現定時彈出廣告：總結：BOM的其他對象.avi
問: BOM中對象都有哪些
- Navigator對象: 瀏覽器基本信息
- Screen對象: 瀏覽器的屏幕信息
- History對象: 瀏覽器歷史記錄信息
- Location對象: 瀏覽器地址欄
href跳轉
通過JS訪問網站地址有兩種：window.open(地址)location.href = “地址”
今日總結
什么是Javascript以及作用？
Javascript是一種腳本語言，針對瀏覽器開發，可以實現網頁的動態效果
交互性，安全性，跨平臺性-
表單數據校驗
JS編程的流程：- 確定事件（onclick鼠標點擊事件，onsubmit表單的提交事件，onload頁面加載完成事件）
- 定義函數實現功能
function 函數名(參數){ js代碼 }- 獲取標簽的控制權, 修改標簽樣式和屬性
給標簽定義ID屬性，通過document.getElementById(ID值)
<div id=”d1”> XXXX </div> var div = document.getElementById(“d1”); // 可以修改標簽的樣式 .style.樣式 = “…..”; // 可以修改標簽的屬性 .屬性名稱 = “…..”; -
圖片輪播
- 通過onload事件調用加載輪播函數
注意：onload事件要寫在body標簽中 - 定義功能函數
- 計時器周期性的改變圖片
setInterval(“函數調用”,ms)周期性的計時器
setTimeout(“函數調用”,ms)一次性的計時器
改變圖片：圖片標簽.src = “xxxxxx”
- 通過onload事件調用加載輪播函數
-
計時器
var id = setInterval(“函數調用”,ms) //周期性的計時器 var id = setTimeout(“函數調用”,ms) //一次性的計時器 // 清除計時器： clearInterval(ID) clearTimeout(ID) -
BOM(Broswer Object Model,瀏覽器對象模型)
- window: 瀏覽器中的窗口
特點：API調用不需要書寫window
三個框：警告框alert(), 確認框confirm(), 對話框prompt()
三個函數：
setInterval(“函數調用”,ms)周期性的計時器
setTimeout(“函數調用”,ms)一次性的計時器
open()打開新的窗口訪問地址 - location: 瀏覽器的地址欄
屬性：href 改變瀏覽器地址欄的值
location.href = “” - history: 瀏覽器歷史記錄
- screen: 瀏覽器顯示的屏幕
- navigator: 瀏覽器的信息
- window: 瀏覽器中的窗口
