JavaScript（基礎案例）
阿新 • • 發佈：2018-12-08
一、概述
1、 JavaScript概述和特點
概述：是一種基於物件和事件驅動的指令碼語言
特點：互動、指令碼語言，解釋性語言，邊執行邊解釋
2、什麼是指令碼語言?
-
java原始碼 ----> 編譯成.class檔案 -----> java虛擬機器中才能執行
-
指令碼語言: 原始碼 -------- > 解釋執行，js由我們的瀏覽器來解釋執行
-
HTML: 決定了頁面的框架
CSS: 用來美化我們的頁面
JS: 提供使用者的互動的
3、JS的組成:
- ECMAScript : 核心部分 ,定義js的語法規範，是一種語法標準
- DOM： document Object Model 文件物件模型 , 主要是用來管理頁面的
- BOM：Browser Object Model 瀏覽器物件模型, 前進,後退,頁面重新整理, 位址列, 歷史記錄, 螢幕寬高
4、JavaScript基本結構
<script type="text/javascript">
javascript語句
</script>
如果要引入外部js指令碼，直接在script右面新增一個src屬性即可
二、JS語法
1、語法
變數弱型別: var i = true
區分大小寫
語句結束之後的分號 ,可以有,也可以沒有，最好寫
寫在script標籤
2、JS的資料型別:
- 基本型別
- string
- number
- boolean
- undefine：未定義
- null
- 引用型別
- 物件, 內建物件
- typeof操作符來檢測變數的資料型別
- 型別轉換
- js內部自動轉換
3、JS的運算子和語句
- 運算子和java 一樣
- “===” 全等號: 值和型別都必須相等
- == 值相等就可以了
- 語句和java 一樣
4、JS的輸出
- alert() 直接彈框
- document.write() 向頁面輸出
- console.log() 向控制檯輸出
- innerHTML: 向頁面輸出
- 獲取頁面元素: document.getElementById(“id的名稱”);
- window.location=“頁面地址”，讓視窗的地址跳到指定頁面去
5、JS宣告變數:
var 變數的名稱 = 變數的值
6、JS宣告函式
var 函式的名稱 = function(){
}
function 函式的名稱(){
}
7、建立物件
-
Object
- ECMAScript提供的一種原生引用型別
- 可以通過Object引用型別的例項建立一個物件
- 可以為物件定義屬性和方法
- Object例項本身不具備多少功能，一般在應用程式中儲存和傳遞資料
-
使用Object建立物件
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //使用object建立物件 var user = new Object(); //物件的屬性 user.name="張三"; user.psd="12345566"; //物件的方法（函式） user.showInfo=function(){ document.write(this.name+"-"+this.psd) } </script> </head> <body> <input type="button" value="點我啊" onclick="user.showInfo()"/> </body> </html> -
物件字面量方式建立物件
-
物件字面量是物件定義的一種簡寫方式
-
會簡化建立包含大量屬性的物件的過程
-
在為函式傳遞大量可選引數時，可考慮使用物件字面量
-
建立程式碼實現
<script type="text/javascript"> //使用物件字面量建立物件 var user={ name="張三"; psd="12334"; showInfo:function(){ document.write(this.name+"-"+this.psd) } } //使用物件字面量建立物件的第二種方式 var user2={}; user2.name="李四"; user2.psd="123"; user2.showInfo= function () { document.write(this.name+"-"+this.psd) } </script>
-
-
工廠模式建立物件
-
工廠模式是軟體工程領域的一種設計模式
-
抽象了建立物件的過程
-
通過函式封裝建立物件的細節
-
程式碼實現
//使用object建立物件 var user = new Object(); //物件的屬性 user.name="張三"; user.psd="12345566"; //物件的方法（函式） user.showInfo=function(){ document.write(this.name+"-"+this.psd) } var user1=createUser("hhh","12312");-
弊端：看不出型別——解決建構函式
函式重複，浪費資源——解決：原型
-
-
-
建構函式
建構函式一般以大寫字元開頭
建構函式也是函式，只不過可以用來建立物件
與工程模式對比
- 沒有顯式建立物件
- 直接將屬性和方法賦給了this物件
- 沒有return
<script type="text/javascript">
//使用建構函式t建立物件
function User(name,psd){
//定義物件屬性
this.name="沾傘";
this.psd="12312";
//定義物件方法
this.showInfo=function(){
document.write(this.name+"-"+this.psd)
}
}
</script>
-
原型prototype
-
每個函式都有一個prototype（原型）屬性
-
是一個指標，指向一個物件
-
這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法
-
程式碼實現
User.prototype.showInfo=function(){ document.write(this.name+"-"+this.psd) }
-
-
用混合方式構造物件
建構函式+prototype
建構函式：屬相原型prototype：方法
//使用建構函式t建立物件 function User(name,psd){ //定義物件屬性 this.name="沾傘"; this.psd="12312"; } //原型prototype：方法 User.prototype.showInfo=function(){ document.write(this.name+"-"+this.psd) }
三、JS的開發步驟
- 確定事件
- 通常事件都會出發一個函式
- 函式裡面通常都會去操作頁面元素,做一些互動動作
四、用js完成表單驗證
1、程式碼實現
<!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_-])[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])[email protected]([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>
五、JS完成自動播放輪播圖
1、需求
有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換
切換圖片:
每個三秒鐘做一件事:
- setInterval : 每隔多少毫秒執行一次函式
- setTimeout: 多少毫秒之後執行一次函式
- clearInterval取消定時
- clearTimeout取消定時
2、步驟分析:
- 確定事件: 文件載入完成的事件 onload
- 事件要觸發 : init()
- 函式裡面要做一些事情:(通常會去操作元素,提供互動)
- 開啟定時器: 執行切換圖片的函式 changeImg()
- changeImg()
- 獲得要切換圖片的那個元素
3、程式碼實現
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var index=0
function changeImage(){
var img= document.getElementById("first");
var curindex=index%3+1;
img.src="images/"+curindex+".jpg";
index=index+1;
}
function init(){
setInterval("changeImage()",1000);
}
</script>
</head>
<body onload="init()">
<img src="images/1.jpg" id="first"/>
</body>
</html>
六、完成頁面定時彈出廣告
1、需求分析
一般網頁，當我們剛開啟的時候，它會5秒之後，顯示一個廣告，讓我們看5秒鐘，然後他的廣告就自動消失了！
2、技術分析
- 定時器
- setInterval : 每隔多少毫秒執行一次函式
- setTimeout: 多少毫秒之後執行一次函式
- clearInterval
- clearTimeout
- 顯示廣告 img.style.display = “block”
- 隱藏廣告 img.style.display = “none”
3、步驟分析
- 確定事件: 頁面載入完成的事件 onload
- 事件要觸發函式: init()
- init函式裡面做一件事:
- 啟動一個定時器 : setTimeout()
- 顯示一個廣告
- 再去開啟一個定時5秒鐘之後,關閉廣告
4、程式碼實現
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function out(){
var img=document.getElementById("first");
img.style.display="none";
}
function hide(){
var img=document.getElementById("first");
//彈出廣告
img.style.display="block";
//顯示5秒自動關閉
setTimeout("out()",5000);
}
function init(){
setTimeout("hide()",2000);
}
</script>
</head>
<body onload="init()">
<img src="images/1.jpg" id="first" style="display:none"/>
</body>
</html>
七、完成表單的校驗
1、需求分析
之前我們做了一個簡單的表單校驗，每當使用者輸入出錯的時候，我們是彈出了一個對話方塊，提示使用者去修改。這樣的使用者體驗效果非常不好好。現在就是需要來對他進行一個修改，當用戶輸入資訊有問題的時候，我們就再輸入框的後面給他一個友好提示。
2、技術分析
【HTML中innerHTML屬性】
【JS中的常用事件】
onfocus 事件: 獲得焦點事件
onblur : 失去焦點
onkeyup : 按鍵擡起事件
3、 程式碼實現
<!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 />
密碼: