目錄
JavaScript概述
什麼是javascript: JavaScript一種直譯式腳本語言，
什麼是腳本語言?
java源代碼 ----> 編譯成.class文件 -----> java虛擬機中才能執行
腳本語言: 源碼 -------- > 解釋執行
js由我們的瀏覽器來解釋執行
HTML: 決定了頁面的框架
CSS: 用來美化我們的頁面
JS: 提供用戶的交互的
JS的組成
ECMAScript : 核心部分 ,定義js的語法規範
DOM: document Object Model 文檔對象模型 , 主要是用來管理頁面的
BOM : Browser Object Model 瀏覽器對象模型, 前進,後退,頁面刷新, 地址欄, 歷史記錄, 屏幕寬高
JS的語法
變量弱類型: var i = true
區分大小寫
語句結束之後的分號 ,可以有,也可以沒有
寫在script標籤
JS的數據類型
-
基本類型
-
string
-
number
-
boolean
-
undefine
-
null
-
-
引用類型
-
對象, 內置對象
-
-
類型轉換
-
js內部自動轉換
-
JS的運算符和語句
-
運算符和java 一樣
-
"===" 全等號: 值和類型都必須相等
-
== 值相等就可以了
-
-
語句和java 一樣
JS的輸出
-
alert() 直接彈框
-
document.write() 向頁面輸出
-
console.log() 向控制檯輸出
-
innerHTML: 向頁面輸出
-
獲取頁面元素: document.getElementById("id的名稱");
JS聲明變量
var 變量的名稱 = 變量的值
JS聲明函數:
var 函數的名稱 = function(){
}
function 函數的名稱(){
}
JS的開發步驟
1. 確定事件
2. 通常事件都會出發一個函數
3. 函數裏面通常都會去操作頁面元素,做一些交互動作
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. 確認事件: 表單提交事件 onsubmit事件
2. 事件所要觸發的函數: checkForm
3. 函數中要乾點事情
1. 校驗用戶名, 用戶不能爲空, 長度不能小於6位
1.獲取到用戶輸入的值
*/
function checkForm(){
//獲取用戶名輸入項
var inputObj = document.getElementById("username");
//獲取輸入項的值
var uValue = inputObj.value;
// alert(uValue);
//用戶名長度不能6位 ""
if(uValue.length < 6 ){
alert("對不起,您的長度太短!");
return false;
}
//密碼長度大於6 和確認必須一致
//獲取密碼框輸入的值
var input_password = document.getElementById("password");
var uPass = input_password.value;
if(uPass.length < 6){
alert("對不起,您還是太短啦!");
return false;
}
//獲取確認密碼框的值
var input_repassword = document.getElementById("repassword");
var uRePass = input_repassword.value;
if(uPass != uRePass){
alert("對不起,兩次密碼不一致!");
return false;
}
//校驗手機號
var input_mobile = document.getElementById("mobile");
var uMobile = input_mobile.value;
//
if(!/^[1][3578][0-9]{9}$/.test(uMobile)){
alert("對不起,您的手機號無法識別!");
return false;
}
//校驗郵箱: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
alert("對不起,郵箱不合法");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="JS開發步驟.html" onsubmit="return checkForm()">
<div>用戶名:<input id="username" type="text" /></div>
<div>密碼:<input id="password" type="password" /></div>
<div>確認密碼:<input id="repassword" type="password" /></div>
<div>手機號碼:<input id="mobile" type="number" /></div>
<div>郵箱:<input id="email" type="text" /></div>
<div><input type="submit" value="註冊" /></div>
</form>
</body>
</html>
javascript : 它是一門腳本語言 , 直接解釋執行的語言
javascript:
ECMAScript : 定義的語法
DOM: document Object Model
BOM: 瀏覽器對象模型
會定義變量: var 變量的名稱 = 變量的值
會定義函數:
function 函數的名稱(參數的名稱){
}
使用JS完成圖片的輪播效果
需求分析
在我們的網站首頁,通常需要有一塊區域,用來顯示廣告,但是這塊區域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要採用動態循環播放我們所有的廣告. 顯示效果照抄黑馬程序員的網站首頁
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 當頁面加載完成的時候, 動態切換圖片
1.確定事件:
2.事件所要觸發的函數
*/
var index = 1;
//切換圖片的函數
function changeAd(){
//獲取要操作的img
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg"; //0,1,2 //1,2,3
index++;
}
function init(){
//啓動定時器
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html>
輪播圖自動播放
需求:
有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換
技術分析:
切換圖片:
每個三秒鐘做一件事:
步驟分析:
1. 確定事件: 文檔加載完成的事件 onload
2. 事件要觸發 : init()
3. 函數裏面要做一些事情:(通常會去操作元素,提供交互)
1. 開啓定時器: 執行切換圖片的函數 changeImg()
4. changeImg()
1. 獲得要切換圖片的那個元素
完成頁面定時彈出廣告
需求分析
一般網頁，當我們剛打開的時候，它會5秒之後，顯示一個廣告，讓我們看5秒鐘，然後他的廣告就自動消失了！
技術分析
-
定時器
-
setInterval : 每隔多少毫秒執行一次函數
-
setTimeout: 多少毫秒之後執行一次函數
-
clearInterval
-
clearTimeout
-
-
顯示廣告 img.style.display = "block"
-
隱藏廣告 img.style.display = "none"
步驟分析
-
確定事件: 頁面加載完成的事件 onload
-
事件要觸發函數: init()
-
init函數裏面做一件事:
-
啓動一個定時器 : setTimeout()
-
顯示一個廣告
-
再去開啓一個定時5秒鐘之後,關閉廣告
-
-
代碼實現
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要獲取要操作的img
var img = document.getElementById("img1");
//顯示廣告
img.style.display = "block";
//再開啓定時器,關閉廣告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要獲取要操作的img
var img = document.getElementById("img1");
//隱藏廣告
img.style.display = "none";
}
</script>
完成完成表單的校驗
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 確定事件 : onfocus
2. 事件要驅動函數
3. 函數要幹一些事情: 修改span的內容
*/
function showTips(spanID,msg){
//首先要獲得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校驗用戶名:
1.事件: onblur 失去焦點
2.函數: checkUsername()
3.函數去顯示校驗結果
*/
function checkUsername(){
//獲取用戶輸入的內容
var uValue = document.getElementById("username").value;
//對輸入的內容進行校驗
//獲得要顯示結果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//顯示校驗結果
span.innerHTML = "<font color='red' size='2'>對不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密碼校驗
*/
function checkPassword(){
//獲取密碼輸入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//對密碼輸入進行校驗
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>對不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,夠用</font>";
return true;
}
}
/*
確認密碼校驗
* */
function checkRePassword(){
//獲取密碼輸入
var uPass = document.getElementById("password").value;
//獲取確認密碼輸入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//對密碼輸入進行校驗
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>對不起,兩次密碼不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校驗郵箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//對郵箱輸入進行校驗
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>對不起,郵箱格式貌似有問題</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自動輪播圖片/圖片自動輪播.html" onsubmit="return checkForm()" >
用戶名:<input type="text" id="username" onfocus="showTips('span_username','用戶名長度不能小於6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密碼:<input type="password" id="password" onfocus="showTips('span_password','密碼長度不能小於6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
確認密碼:<input type="password" id="repassword" onfocus="showTips('span_repassword','兩次密碼必須一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
郵箱:<input type="text" id="email" onfocus="showTips('span_email','郵箱格式必須正確')" onblur="checkMail()" /><span id="span_email"></span><br />
手機號:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
表格隔行換色
需求分析
我們商品分類的信息太多，如果每一行都顯示同一個顏色的話會讓人看的眼花，爲了提高用戶體驗，減少用戶看錯的情況，需要對錶格進行隔行換色
技術分析
改變行的顏色
步驟分析
-
確定事件: 文檔加載完成 onload
-
事件要觸發函數: init()
-
函數:操作頁面的元素 要操作表格中每一行 動態的修改行的背景顏色
-
-
代碼實現
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然後根據奇數 偶數
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
複選框的全選和全不選
需求分析
商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品
技術分析
事件 : onclick點擊事件
步驟分析
全選和全不選步驟分析:
確定事件: onclick 單機事件 2.事件觸發函數: checkAll() 3.函數要去做一些事情: 獲得當前第一個checkbox的狀態 獲得所有分類項的checkbox 修改每一個checkbox的狀態
代碼實現
function checkAll(){
// 獲得當前第一個checkbox的狀態
var check1 = document.getElementById("check1");
//得到當前checked狀態
var checked = check1.checked;
// 獲得所有分類項的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一個checkbox的狀態
var checkone = checks[i];
checkone.checked = checked;
}
}
HTML中的DOM操作
一些常用的 HTML DOM 方法：
getElementById(id) - 獲取帶有指定 id 的節點（元素）
appendChild(node) - 插入新的子節點（元素）
removeChild(node) - 刪除子節點（元素）
一些常用的 HTML DOM 屬性：
innerHTML - 節點（元素）的文本值
parentNode - 節點（元素）的父節點
childNodes - 節點（元素）的子節點
attributes - 節點（元素）的屬性節點
查找節點：
getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點數組）。
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。
增加節點：
createAttribute() 創建屬性節點。
createElement() 創建元素節點。
createTextNode() 創建文本節點。
insertBefore() 在指定的子節點前面插入新的子節點。
appendChild() 把新的子節點添加到指定節點。
刪除節點：
removeChild() 刪除子節點。
replaceChild() 替換子節點。
修改節點：
setAttribute() 修改屬性
setAttributeNode() 修改屬性節點
省市聯動
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
準備工作 : 準備數據
*/
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
/*
1. 確定事件: onchange
2. 函數: selectProvince()
3. 函數裏面要搞事情了
得到當前操作元素
得到當前選中的是那一個省份
從數組中取出對應的城市信息
動態創建城市元素節點
添加到城市select中
*/
function selectProvince(){
var province = document.getElementById("province");
//得到當前選中的是哪個省份
//alert(province.value);
var value = province.value;
//從數組中取出對應的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
// alert(cities[i]);
var cityText = cities[i];
//動態創建城市元素節點 <option>東莞市</option>
//創建option節點
var option1 = document.createElement("option"); // <option></option>
//創建城市文本節點
var textNode = document.createTextNode(cityText) ;// 東莞市
//將option節點和文本內容關聯起來
option1.appendChild(textNode); //<option>東莞市</option>
// 添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<!--選擇省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--請選擇--</option>
<option value="0">廣東省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--選擇城市-->
<select id="city"></select>
</body>
</html>
使用JS控制下拉列表左右選擇
需求分析:
在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裏面能夠修改分類的名稱,分類的描述,以及分類的商品
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步驟分析
1. 確定事件: 點擊事件 :onclick事件
2. 事件要觸發函數 selectOne
3. selectOne要做一些操作
(將左邊選中的元素移動到右邊的select中)
1. 獲取左邊Select中被選中的元素
2. 將選中的元素添加到右邊的Select中就可以
-->
<script>
function selectOne(){
// 1. 獲取左邊Select中被選中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右側的Select
var rightSelect = document.getElementById("rightSelect");
//遍歷找出被選中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 將選中的元素添加到右邊的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//將左邊所有的商品移動到右邊
function selectAll(){
// 1. 獲取左邊Select中被選中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右側的Select
var rightSelect = document.getElementById("rightSelect");
//遍歷找出被選中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分類名稱</td>
<td><input type="text" value="手機數碼"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text" value="這裏面都是手機數碼"/></td>
</tr>
<tr>
<td>分類商品</td>
<td>
<!--左邊-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>華爲</option>
<option>小米</option>
<option>錘子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右邊-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>蘋果6</option>
<option>腎7</option>
<option>諾基亞</option>
<option>波導</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>