javasscript基礎

時間 2019-12-07

標籤 javasscript 基礎欄目 Java 简体版

原文原文鏈接

1、使用JS完成註冊表單數據校驗

1.需求分析

用戶在進行註冊的時候會輸入一些內容，可是有些用戶會輸入一些不合法的內容，這樣會致使服務器的壓力過大，此時咱們須要對用戶輸入的內容進行一個校驗(前端校驗和後臺校驗)，前端校驗防君子不防小人。javascript

2.技術分析

2.1 javasscript的介紹

Javascript與java沒有關係(雷鋒和雷峯塔)，它不是編程語言(腳本語言)php

2.2 javascript的做用？

HTML：它是整個網站的骨架。html

CSS：它是對整個網站骨架的內容進行美化(修飾)前端

Javascript：它能夠讓整個頁面具備動態效果。java

2.3 javascript的組成部分

ECMAScript:它是javascript的核心(語法、變量、數據類型、語句、函數……)node

DOM:document object model 整個文檔對象正則表達式

BOM:瀏覽器對象編程

2.4 javascript語法

區分大小寫數組

變量是弱類型的(String str=」aaa」 ,var str=」123」;)瀏覽器

每行結尾的分號無關緊要(建議你們寫上)

註釋與java、php等語言相同。

2.5javascript的變量

變量能夠不用聲明，變量是弱類型。統一使用var來定義！定義變量的時候不要使用關鍵字和保留字。

2.6 javascript數據類型

Javascript數據類型分爲原始數據類型和引用數據類型

原始數據類型：

string、number、boolean、null、undefined

引用數據類型：

2.7 javascript運算符

其它運算符與java大致一致，須要注意其等性運算符。

== 它在作比較的時候會進行自動轉換。

=== 它在作比較的時候不會進行自動轉換。

2.8 javascript語句

全部語句與java大致一致。

2.9 獲取元素內容

獲取元素

document.getElementById(「id名稱」);

獲取元素裏面的值

document.getElementById(「id名稱」).value;

2.10 javascript事件

表單提交事件：onsubmit

2.11 javascripte的輸出

警告框：alert();

向頁面指定位置寫入內容：innerHTML(屬性)

向頁面寫入內容：document.write(「」);

3.步驟分析

第一步：肯定事件(onsubmit)併爲其綁定一個函數

第二步：書寫這個函數(獲取用戶輸入的數據)

第三步：對輸入的數據進行判斷(非空)

第四步：若是輸入的內容爲空，給出錯誤提示信息(alert),不讓表單提交

第五步：若是輸入的內容合法，讓表單提交。

4.代碼實現

Html部分代碼：

爲表單綁定一個事件

對須要校驗的輸入項目定義id

Javascript部分代碼

function checkForm(){

/*校驗用戶名*/

//alert("aa");

//獲取用戶輸入的數據

var uValue = document.getElementById("user").value;

//alert(uValue);

if(uValue==""){

//給出錯誤提示信息

alert("用戶名不能爲空！");

return flase;

}

/*校驗郵箱*/

var Evalue = document.getElementById("email").value;

if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){

//給出錯誤提示信息

alert("郵箱格式不正確！");

return false;

}

</script>

2、使用JS完成首頁輪播圖效果案例

1.需求分析

咱們但願在首頁完成對輪播圖的效果實現：

2.技術分析

獲取元素 document.getElementById(「id名稱」)

事件(onload)

定時操做：setInterval(「changeImg()」,3000);

3.步驟分析

第一步：肯定事件(頁面加載事件onload)併爲其綁定一個函數

第二步：書寫這個函數(設置一個定時操做);

第三步：書寫定時操做裏面的函數

第四步：獲取圖片的位置

第五步：爲該圖片設置src屬性值。

4.代碼實現

Javascript部分代碼

function init(){

setInterval("changeImg()",3000);

}

var i=1;

function changeImg(){

i++;

var imgEl = document.getElementById("img1");

imgEl.src="../img/"+i+".jpg";

if(i==3){

i=0;

}

</script>

Html部分代碼

肯定事件：onload 加在body裏面！

給指定的圖片位置定義一個id

3、使用JS完成頁面定時彈出廣告

1.需求分析

咱們但願在首頁中的頂部作一個定時彈出廣告圖片。其實現效果以下：

2.技術分析

獲取圖片的位置(document.getElementById(「」))

隱藏圖片：display：none

定時操做：setInterval(「顯示圖片的函數」，3000);

3.步驟分析

第一步：肯定事件(頁面加載事件onload)並爲其綁定一個函數init()

第二步：在init函數中設置一個顯示圖片的定時操做。

第三步：書寫顯示圖片的函數(獲取圖片元素，設置其display屬性爲block)

第四步：設置一個隱藏圖片的定時操做

第五步：書寫隱藏圖片的函數(獲取圖片元素，設置其display屬性爲none)

4.代碼實現

Javascript部分代碼：

var time;

function init(){

//設置顯示圖片的定時操做

time = setInterval("showAd()",3000);

}

//顯示圖片的函數

function showAd(){

//獲取廣告圖片的

var imgEl = document.getElementById("img1");

//設置圖片的屬性(display)讓其顯示

imgEl.style.display="block";

//清除顯示圖片的定時操做

clearInterval(time);

//設置隱藏廣告圖片的定時操做

time = setInterval("hiddenAd()",3000);

}

//書寫隱藏廣告圖片的函數

function hiddenAd(){

//獲取廣告圖片並設置隱藏的屬性

document.getElementById("img1").style.display="none";

//清除隱藏圖片的定時操做

clearInterval(time);

}

</script>

Html部分代碼：

肯定事件(<body onload="init()">)

5.總結

5.1 javascript的引入方式

Ø 內部引入方式

直接將javascript代碼寫到<script type=」text/javascript」></script>

Ø 外部引入方式

須要建立一個.js文件，在裏面書寫javascript代碼，而後在html文件中經過script標籤的src屬性引入該外部的js文件

5.2 BOM對象

BOM對象：瀏覽器對象模型(操做與瀏覽器相關的內容)

Ø Window對象

Window 對象表示瀏覽器中打開的窗口。

setInterval():它有一個返回值，主要是提供給clearInterval使用。

setTimeout():它有一個返回值，主要是提供給clearTimeout使用。

clearInterval():該方法只能清除由setInterval設置的定時操做

clearTimeout():該方法只能清除由setTimeout設置的定時操做

彈出框的幾個方法：

//警告框

//alert("aaa");

//確認按鈕

//confirm("您確認刪除嗎？");

//提示輸入框

prompt("請輸入價格：");

</script>

</head>

Ø Location對象

Location 對象包含有關當前 URL 的信息。

href:該屬性能夠完成經過JS代碼控制頁面的跳轉。

<html>

<head>

<title>location對象</title>

function tiao(){

window.location.href="http://www.itcast.cn";

}

</script>

</head>

<body>

<a href="#" onclick="tiao()">跳轉到傳智播客首頁</a>

</body>

</html>

Ø History對象

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

歷史頁面：使用location頁面(把href屬性值改成當前的history)

History頁面代碼：

go(參數)

參數：-1 返回上一個歷史記錄頁面；-2返回上上一個歷史記錄頁面，1進入下一個歷史記錄頁面。

讓按鈕點擊失效：

onclick=」javascript:volid(0)」

Ø Navigator對象

Navigator 對象包含有關瀏覽器的信息。(該對象開發中不怎麼經常使用)

Ø Screen對象

Screen 對象包含有關客戶端顯示屏幕的信息。(該對象開發中不怎麼經常使用)

4、使用JS完成註冊頁面表單校驗

1.需求分析

以前咱們已經使用彈出框的方式實現了表單校驗的功能，可是此種方式用戶體驗效果極差！咱們但願作成以下這種效果：

2.技術分析

使用事件(聚焦事件onfocus和離焦事件onblur),以前使用onsubmit也須要！

使用<span></span>

向頁面指定位置寫入內容：innerHTML屬性(該屬性的值存在覆蓋現象)

3.步驟分析

第一步：肯定事件(給出提示信息使用聚焦事件，給出校驗結果信息使用離焦事件)並爲其綁定函數

第二步：聚焦事件綁定的函數中(獲取span給出提示信息)

第三步：離焦事件綁定的函數中(獲取用戶輸入的內容進行判斷)

第四步：若是失敗，在span位置給出錯誤提示信息，若是成功，讓span內容爲空。

4.代碼實現

Javascript部分代碼：

function showTips(id,info){

//獲取span元素，給出提示信息

document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";

}

function check(id,info){

//獲取用戶輸入的數據

var uValue = document.getElementById(id).value;

//進行判斷

if(uValue==""){

//在span位置給出錯誤提示信息

document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";

}else{

document.getElementById(id+"span").innerHTML="";

}

</script>

Html部分代碼

5.總結

5.1 javascript的事件

咱們以前已經學習過的事件(onsubmit/onload/onfocus/onblur/onclick)

其它事件：

事件案例演示

5、使用JS完成表格的一個隔行換色

1.需求分析

咱們但願在後臺頁面中實現一個隔行換色的效果顯示全部的用戶信息，顯示效果以下：

2.技術分析

新標籤的學習

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

肯定事件(頁面加載事件onload)

獲取元素：獲取表格(document.getElementById()),最終是爲了獲取表格中tbody裏面的行數(長度)。

Tbody裏面的行數(rows.length)

JS的遍歷(for循環)

獲取奇數行和偶數行(對遍歷中角標對2取餘)

設置背景顏色(.style.backgroundColor)

3.步驟分析

第一步：肯定事件(onload)併爲其綁定一個函數

第二步：書寫函數(獲取表格)

第三步：獲取tbody裏面的行數

第四步：對tbody裏面的行進行遍歷

第五步：獲取奇數行和偶數行(角標對2取餘)

第六步：分別對奇數行和偶數行設置背景顏色

4.代碼實現

JS代碼：

window.onload = function(){

//1.獲取表格

var tblEle = document.getElementById("tbl");

//2.獲取表格中tbody裏面的行數(長度)

var len = tblEle.tBodies[0].rows.length;

//alert(len);

//3.對tbody裏面的行進行遍歷

for(var i=0;i<len;i++){

if(i%2==0){

//4.對偶數行設置背景顏色

tblEle.tBodies[0].rows[i].style.backgroundColor="pink";

}else{

//5.對奇數行設置背景顏色

tblEle.tBodies[0].rows[i].style.backgroundColor="gold";

}

</script>

HTML代碼：

給table裏面添加一個id=「tbl」,在table裏面添加新標籤<thead></thead>和<tbody></tbody>

5.實現一個表格的高亮顯示

爲了增強對事件的學習，添加此案例：

分析：

第一步：肯定事件(onmouseover和onmouseout)並分別爲其綁定一個函數

第二步：獲取鼠標移上去的那行，對其設置背景顏色

代碼：

JS代碼：

function changeColor(id,flag){

if(flag=="over"){

document.getElementById(id).style.backgroundColor="red";

}else if(flag=="out"){

document.getElementById(id).style.backgroundColor="white";

}

</script>

HTML代碼

6.總結

回顧以前已經使用過的事件

(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)

onfocus/onblur:聚焦離焦事件，用於表單校驗的時候比較合適。

onclick/ondblclick:鼠標單擊和雙擊事件

onkeydown/onkeypress：搜索引擎使用較多

onload：頁面加載事件，全部的其它操做(匿名方式)均可以放到這個綁定的函數裏面去。若是是有名稱，那麼在html頁面中只能寫一個。

onmouseover/onmouseout/onmousemove：購物網站商品詳情頁。

onsubmit：表單提交事件，有返回值，控制表單是否提交。

onchange:當用戶改變內容的時候使用這個事件(二級聯動)

6、使用JS完成全選和選不選操做

1.需求分析

咱們但願在後臺系統實現一個批量刪除的操做(全選全部的複選框)，顯示效果以下：

2.技術分析

肯定事件(鼠標單擊事件onclick)，事件綁定到編號前面的複選框裏面

獲取編號前面的複選框的狀態(是否選中)

獲取複選框：var checkAllEle = document.getElementById(「id」)

獲取複選框的狀態：checkAllEle.checked?

獲取下面全部的複選框：

document.getElementsByName(「name」);

3.步驟分析

第一步：肯定事件(onclick)併爲其綁定一個函數

第二步：書寫函數(獲取編號前面的複選框，獲取其狀態)

第三步：判斷編號前面複選框的狀態(若是爲選中，獲取下面全部的複選框，並將其狀態置爲選中)

第四步：判斷編號前面複選框的狀態(若是爲未選中，獲取下面全部的複選框，並將其狀態置爲未選中)

4.代碼實現

JS部分代碼：

function checkAll(){

//1.獲取編號前面的複選框

var checkAllEle = document.getElementById("checkAll");

//2.對編號前面複選框的狀態進行判斷

if(checkAllEle.checked==true){

//3.獲取下面全部的複選框

var checkOnes = document.getElementsByName("checkOne");

//4.對獲取的全部複選框進行遍歷

for(var i=0;i<checkOnes.length;i++){

//5.拿到每個複選框，並將其狀態置爲選中

checkOnes[i].checked=true;

}

}else{

//6.獲取下面全部的複選框

var checkOnes = document.getElementsByName("checkOne");

//7.對獲取的全部複選框進行遍歷

for(var i=0;i<checkOnes.length;i++){

//8.拿到每個複選框，並將其狀態置爲未選中

checkOnes[i].checked=false;

}

</script>

HTML代碼：

複選框前面的：

下面全部的複選框：

5.總結

5.1 javascript的DOM操做

Document:整個html文件都成爲一個document文檔

Element:全部的標籤都是Element元素

Attribute：標籤裏面的屬性

Text：標籤中間夾着的內容爲text文本

Node:document、element、attribute、text統稱爲節點node.

Ø Document對象

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。

後面兩個方法獲取以後須要遍歷！

如下兩個方法很重要，可是在手冊中查不到！

建立文本節點：document.createTextNode()

建立元素節點：document.createElement()

Ø Element對象

咱們所認知的html頁面中全部的標籤都是element元素

element.appendChild()	向元素添加新的子節點，做爲最後一個子節點。
element.firstChild	返回元素的首個子節點。
element.getAttribute()	返回元素節點的指定屬性值。
element.innerHTML	設置或返回元素的內容。
element.insertBefore()	在指定的已有的子節點以前插入新節點。
element.lastChild	返回元素的最後一個子元素。
element.setAttribute()	把指定屬性設置或更改成指定值。
element.removeChild()	從元素中移除子節點。
element.replaceChild()	替換元素中的子節點。

Ø Attribute對象

咱們所認知的html頁面中全部標籤裏面的屬性都是attribute

5.2 DOM練習

在頁面中使用列表顯示一些城市

<ul>

</ul>

咱們但願點擊一個按鈕實現動態添加城市。

分析：

事件(onclick)

獲取ul元素節點

建立一個城市的文本節點

建立一個li元素節點

將文本節點添加到li元素節點中去。

使用element裏面的方法appendChild()來添加子節點

代碼：

JS代碼

window.onload = function(){

document.getElementById("btn").onclick = function(){

//1.獲取ul元素節點

var ulEle = document.getElementById("ul1");

//2.建立城市文本節點

var textNode = document.createTextNode("深圳");//深圳

//3.建立li元素節點

var liEle = document.createElement("li");//<li></li>

//4.將城市文本節點添加到li元素節點中去

liEle.appendChild(textNode);//<li>深圳</li>

//5.將li添加到ul中去

ulEle.appendChild(liEle);

}

</script>

HTML代碼

</ul>

7、使用JS完成省市二級聯動

1.需求分析

咱們但願在註冊頁面中添加一個字段(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態加載該省份下全部的城市。顯示的效果以下：

2.技術分析

事件(onchange)

使用一個二維數組來存儲省份和城市(二維數組的建立？)

獲取用戶選擇的省份(使用方法傳參的方式：this.value)

遍歷數組(獲取省份與用戶選擇的省份比較，若是相同了，繼續遍歷該省份下全部的城市)

建立文本節點和元素節點並進行添加操做

createTextNode()

createElement()

appendChild()

3.步驟分析

第一步：肯定事件(onchange)併爲其綁定一個函數

第二步：建立一個二維數組用於存儲省份和城市

第三步：獲取用戶選擇的省份

第四步：遍歷二維數組中的省份

第五步：將遍歷的省份與用戶選擇的省份比較

第六步：若是相同，遍歷該省份下全部的城市

第七步：建立城市文本節點

第八步：建立option元素節點

第九步：將城市文本節點添加到option元素節點中去

第十步：獲取第二個下拉列表，並將option元素節點添加進去

第十一步：每次操做前清空第二個下拉列表的option內容。

4.代碼實現

JS代碼：

//1.建立一個二維數組用於存儲省份和城市

var cities = new Array(3);

cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");

cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");

cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");

cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");

function changeCity(val){

//7.獲取第二個下拉列表

var cityEle = document.getElementById("city");

//9.清空第二個下拉列表的option內容

cityEle.options.length=0;

//2.遍歷二維數組中的省份

for(var i=0;i<cities.length;i++){

//注意，比較的是角標

if(val==i){

//3.遍歷用戶選擇的省份下的城市

for(var j=0;j<cities[i].length;j++){

//alert(cities[i][j]);

//4.建立城市的文本節點

var textNode = document.createTextNode(cities[i][j]);

//5.建立option元素節點

var opEle = document.createElement("option");

//6.將城市的文本節點添加到option元素節點

opEle.appendChild(textNode);

//8.將option元素節點添加到第二個下拉列表中去

cityEle.appendChild(opEle);

}

</script>

Html代碼：

</select>

</select>

5.總結

5.1 javascript內置對象

Ø Array對象

數組的建立：

數組的特色：

長度可變！數組的長度=最大角標+1

Ø Boolean對象

對象建立：

若是value 不寫，那麼默認建立的結果爲false

Ø Date對象

getTime()

返回 1970 年 1 月 1 日至今的毫秒數。

解決瀏覽器緩存問題

Ø Math和number對象

與java裏面的基本一致。

Ø String對象

match()	找到一個或多個正則表達式的匹配。
substr()	從起始索引號提取字符串中指定數目的字符。
substring()	提取字符串中兩個指定的索引號之間的字符。