Web基礎之JavaScript實戰

一、JavaScript基本概念：

1.JS的執行環境

宿主環境：客戶端的JS代碼的執行需要宿主環境，一般來說，客戶端的瀏覽器就是JS的宿主環境

解析器：JS代碼的執行需要一個解析器來解析JS代碼，即JS是一種解釋性語言，沒有編譯，運行時由解析器負責解釋運行，現在的主流瀏覽器一般多帶有解析器 IE瀏覽器 V8版本後都支持JS；

2.注意：

2.1 <script>標籤可以寫在文檔的任何位置

2.2 JavaScript的執行順序：按照在HTML文件中出現的順序依次執行

二、JS語法簡介：

（推薦下載谷歌瀏覽器，很多人會覺得用什麼瀏覽器都一樣，其實不然，谷歌瀏覽器的強大的Debug功能非常好用，下面你就會見識到，相信我，我現在已經喜歡上用谷歌瀏覽器了）

2.1 JavaScript 類型：undefined、null、String、Boolean、Number、Object(注意，function是Object的子類)

2.2在JS中，一個未初始化的變量，它的值就是undefined

2.3 如果一個變量預計將要指向一個對象，可以設置初始值爲null

2.4 雙引號或者單引號包裹的內容就是字符串String

2.5 Boolean: true、false

2.6 Number:

正無窮大：Infinity

負無窮大：-Infinity

不是一個數字(Not a Number)：NaN，用isNaN()判斷是否是一個數字

在JS除0：正數/0會得到正無窮大，負數/0會得到負無窮大，0/0會等到NaN

字符串轉爲Number類型：parseInt, parseFloat

2.7 Object:

定義一個對象：

var obj = {}; 或者

var obj = {age:20, name:"Peter", address:"南華大學計算機學員"};

或者

var obj = new Object();

給對象加屬性：

obj.name = "張三";

obj.sex = "Female";

給對象加方法：

obj.toString = function() {

console.log("name=" + this.name + ", sex=" + this.sex);

};

對象屬性訪問：

用點號(.) 訪問，如：obj.sex ; obj.address

用方括號([])訪問，如:obj["address"]

2.8 Fuction：

函數定義:

function name () {}

或者

var name = function(){};

2.9 Array: Array不是定長的，定義的時候不需要指明長度（指明也不會報錯，但是呢如果超過這個長度，也不會報錯），類比java.util.ArrayLIst，另外，由於JS是弱類型語言，所以不要求數組中的元素都是同一類型

定義：

var arr = [‘ele1’, ‘ele2’, 1];

或者：

var arr = new Array(‘ele1’, ‘ele2’, 1);

使用谷歌瀏覽器測試（打開谷歌瀏覽器，按下F12進入，選擇Console選項卡，在這裏我們可以盡情測試，還有很多API可以在這裏查找）

測試undefined、null、string類型

三、常用API：

3.1 document.getElementById(eleId) ：獲取當前頁面的 id屬性爲eleId的元素

3.2document.getElementsByClassName(className)：獲取當前頁面所有的class屬性爲className的元素，返回一個JS數組

3.3 document.getElementsByTagName(tagName): 獲取當前頁面所有的元素名爲tagName的元素，返回一個JS數組

3.4 [htmlElement].innerHTML: 獲取htmlElement的內部HTML文本，有可能是純文本。例如：

document.getElementsByTagName(“pre”)[0].innerHTML;

如果要改變 htmlElement 的內部HTML，直接給innerHTML賦值即可：

document.getElementsByTagName("pre")[0].innerHTML="測試"；

3.5 動態創建元素，並添加到指定的父元素下：

var inputObj = document.createElement("input");

inputObj.type = "text";

var divs = document.getElementsByTagName("div");

divs[0].appendChild(inputObj);

3.6 獲取input的值：

var inputObj = document.getElementsByName("userName")[0];

inputObj.value;

3.7 [htmlElement].addEventListener(eventName, function): 給htmlElement元素添加事件監聽器，eventName要監聽的事件名稱，function處理該事件的函數。

例如：

// 給 id爲provinceSelect 的下拉列表，註冊change事件的監聽

var provinceSelectObj = document.getElementById("provinceSelect");

provinceSelectObj.addEventListener("change", function(){});

3.8 setInterval(function, milliseconds)：設置每隔 millisenconds毫秒數，執行一個function

3.9 setTimeout(function, milliseconds): 設置 millisenconds 毫秒數之後，執行一個funciton，只執行一次

四、注意的問題：

由於瀏覽器對HTML 的解析是從上到下解析的，所以放在 <head> 標籤裏的<script>裏的JS代碼，要注意不要直接去獲取<body>中的元素（因爲瀏覽器此時還沒有解析到<body>，所以body中的元素此時都是null），而應該放到<body>元素的load事件中去獲取，或者把<script>代碼放到文檔的最後（即</body>之後，</html>之前）。

五、JS實戰項目：

項目框架：

實戰一：JS註冊界面

效果圖：當沒有輸入信息的時候，文本框會顯示提示消息，當有輸入的時候就不會有提示消息

源代碼：

regist.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>註冊界面</title>
		<!--外部引入註冊界面CSS樣式-->
		<link rel="stylesheet" type="text/css" href="css/regesit.css" />
		<!--引入外部的JS代碼文件-->
		<script src="js/regesit.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--頁面展示效果-->
		<div class="topwelcome"><span class="weltext">歡迎註冊華信會員</span></div>
		<div class="regesit">
			<span class="info">請輸入用戶名：</span>
			<input id="userName" type="text" value="請輸入用戶名" οnfοcus="fouced1()" οnblur="lostfocus1()" /><br />
			<span class="info">請輸入密    碼：</span>
			<input id="pwd" type="text" value="請輸入密   碼" οnfοcus="fouced2()" οnblur="lostfocus2()" /><br/>
		</div>
		<div class="bottomdiv"><span class="bottontext">&copy;衡陽市華信科技教育有限公司</span></div>
	</body>

</html>

regist.css

.topwelcome{
	margin-top: 40px;
	text-align: center;
}

.weltext{
	font-size: 30px;
	font-family:"微軟雅黑";
	color:deepskyblue;
	font-weight: bold;
}

.regesit{
	margin-top: 10px;
	text-align: center;
}

.info{
	font-size: 15px;
	font-family:"華文行楷";
	font-weight: bold;
}
span{
	margin-top: 40px;
	text-align: center;
}

input{
	margin-top: 30px;
	height: 25px;
	color:lightgray;
	font-family: "微軟雅黑";
	font-size: 15px;
}



.bottomdiv{
	margin-top: 20px;
	text-align: center;
}

.bottontext{
	font-size: 15px;
	font-family:"華文行楷";
	color: gainsboro;
}

regist.js

//第一個文本獲得焦點邏輯處理
function fouced1(){
	var userName =document.getElementById("userName");
	if(userName.onfocus && userName.value=="請輸入用戶名"){
		userName.value="";
	}
}

//第二個文本框獲得焦點邏輯處理
function fouced2(){
	var pwd =document.getElementById("pwd");
	if(pwd.onfocus && pwd.value=="請輸入密   碼"){
		pwd.value="";
	}
	
}

//第一個文本框失去焦點邏輯處理
function lostfocus1(){
	var userName =document.getElementById("userName");
	if(userName.value==""){
		userName.value="請輸入用戶名"
	}
}

function lostfocus2(){
	var pwd =document.getElementById("pwd");
	if(pwd.value==""){
		pwd.value="請輸入密   碼"
	}
}

實戰二：JS省市聯動效果

效果圖：當選擇一個省的時候，會自動出現該省下的市級

provinceandcity.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>省市聯動效果</title>
		<!--引入CSS樣式和JS文件-->
		<script src="js/provinceandcity.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/provinceandcity.css"/>
	</head>
	<body>
		<div>
			<!--界面展示-->
			<span>省份：</span>
			<select id="province" οnchange="city()">
				<option value="" selected="selected">--請選擇--</option>
				<option value="beijing" >北京</option>
				<option value="jiangxi" >江西</option>
				<option value="hunan" >湖南</option>
			</select>
			<span>城市：</span>
			<select id="city">
				<option value="" selected="selected">--請選擇--</option>
			</select>
		</div>
	</body>
</html>

provinceandcity.css

div {
	width: 80%;
	height: 50px;
	text-align: center;
	margin-top: 50px;
}

span {
	font-size: 16px;
}

select {
	width: 150px;
	height: 30px;
	font-size: 15px;
	margin: 20px;
}

option {
	width: 150px;
	height: 100px;
	font-size: 15px;
}

provinceandcity.js

function city() {
	//通過Id獲取選擇的省份
	var provinceObj = document.getElementById('province');
	//根據id獲取市級標籤
	var cityObj = document.getElementById('city');
	var selectProvince = provinceObj.value;
	//根據選擇的省份設置市級標籤中的內容
	if(selectProvince == "") {
		cityObj.innerHTML = '<option value="" selected="selected">--請選擇--</option>';
	} else if(selectProvince == "beijing") {
		cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝陽區</option>' +
			'<option value="tiananmen" >天安門</option>' +
			'<option value="yiheyuan" >頤和園</option>' +
			'<option value="zijincheng" >紫禁城</option>';
	} else if(selectProvince == "jiangxi") {
		cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +
			'<option value="ganzhou" >贛州</option>' +
			'<option value="jiujiang" >九江</option>' +
			'<option value="shangrao" >上饒</option>';
	} else if(selectProvince == "hunan") {
		cityObj.innerHTML =
			'<option value="changsha" selected="selected">長沙</option>' +
			'<option value="hy" >衡陽</option>' +
			'<option value="zz" >株洲</option>' +
			'<option value="sy" >邵陽</option>';
	}
}

實戰三：JS圖片滾動效果

效果圖：每隔一段時間切換到下一張圖片

imagescroll.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圖片滾動</title>
		<!--引入css樣式文件和js文件-->
		<link rel="stylesheet" type="text/css" href="css/imagescroll.css"/>
		<script src="js/imagescroll.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!--body的onload（）事件-->
	<body οnlοad="imagechange()">
		<!--承載圖片的DIV並試着第一張圖片-->
		<div class="div1">
			<img id="imagescroll" src="img/pic1.jpg"/>
		</div>
	</body>
</html>

imagescroll.css

.div1{
	margin: 50px auto;
	width: 80%;
	height:300px;
	text-align: center;
}

#imagescroll{
	width: 534px;
	height: 300px;
}

imagescroll.js

function imagechange(){
	//獲取承載圖片的元素
	var imagecontrol=document.getElementById("imagescroll");
	//把所有的圖片封裝在一個數組中
	var imageArr =["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
	var index=0;
	//通過setInterval函數每隔2秒改變一下圖片，注意該函數的使用方法
	setInterval(function(){
		//獲取當前圖片的編號
		var i =index;
		//如果超過最大編號，則回滾到第一張圖片
		if(i>=imageArr.length){
			index=0;
			i=0;
		}
		//設置背景圖片
		imagecontrol.src=imageArr[i];
		index=index+1;
	},2000);
}

六、總結

通過這次的學習，讓我JS的語法有了更加深刻的瞭解，發現JS也不是那麼難，還是要多敲和多做，天道酬勤；同事也對JS中一些API有所瞭解；

最後通過這三個小項目，收穫非常大，發現原來JS這麼強大，也能通過自己的努力做出了我們常見的省市聯動、圖片滾動效果！真的非常開心!

前端基礎就通過這麼幾節課學習完了；前端的內容有HTML,CSS,JS，這三大利器是基礎，後面應該還有一些像jQuery等前端進階技術，只有打好基礎，才能學好後面的高端技術！努力，奮鬥！

接下來就是後端基礎階段了，再接再厲！堅持下去！沒有付出，就沒有回報！

共勉！

BlueSky_USC

發佈了80 篇原創文章 · 獲贊 192 · 訪問量 22萬+

私信關注

Web基礎之JavaScript實戰

Java小程序之簡易網絡畫板

Java通信之服務器生猛上手

Java進階之JDBC

Java小程序之服務器的UI實現

Java小程序之簡單多人聊天室的實現（山寨QQ前傳）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結