製作一張簡單的網頁(HTML CSS JS)  【3】

        前面兩篇文章寫了HTML和CSS,接下來這篇我把我學到的JavaScript,做一下簡單的總結。如果我把一張網頁比作是一幢大樓,那麼HTML就是大樓的根基和基本骨架,CSS就是使大樓巨集偉的一些裝飾物,那麼JS就是大樓裡面活動的東西。簡單的說就是網頁上的特效效果都要靠JS來完成,比如一些焦點新聞的輪換、與使用者的互動等等。

一.JS的基本知識及視窗互動

1.寫js的基本格式:

 <script type="text/javascript”>...</script>

2.有關注釋:

 (1)單行註釋://
 (2)多行註釋:/*…….*/ 
3.定義變數:var 變數名;
4.函式:

function 函式名() 
{      
函式程式碼; 
}
5.輸出內容:document.write()
   (1)多項內容之間用“ ”
   (2)要輸出空格的時候,可以在輸入時加“&nbsp”,一個“&nbsp”表示一個空格。 
6.視窗互動方法
(1)訊息對話方塊-警告:alert(字串或變數);
(2)訊息對話方塊-確認:confirm(str);
(3)訊息對話方塊-提問:prompt(str1,str2);
   需要注意的是str1是顯示在文字框中的內容,不可以修改
   而str2是自己要輸進去的內容,這是可以修改的 

(4)開啟新視窗
window.open([URL], [視窗名稱], [引數字串]}
1>URL這是在網頁開啟的地址或路徑。
2>視窗名稱:被開啟視窗的名稱,由字母、數字和下劃線組成 

    一些特殊的名稱:

_blank:在新視窗顯示目標網頁
_self:在當前視窗顯示目標網頁
_top:框架網頁中在上部視窗中顯示目標網頁
(5)關閉新視窗
Window.close();

二.認識事件和內建物件

我把一些常用的事件整理出來:
1.onclick(滑鼠單擊事件)
2.onmouseover(滑鼠經過事件)
3.onmouseout(滑鼠移開事件)
4.onfocus(游標聚焦事件)
5.onblur(失焦事件)
6.onselect(內容選中事件)
7.onchange(文字框內容改變事件)

8.onload(載入事件)

9.onunload(解除安裝事件)
接下來的內容是在js中內建物件
1.定義一個時間物件:

var Udate=new Date();

定義初始化:

var d = new Date(2017, 10, 1);  //2017年10月1日
var d = new Date('Oct 1, 2017'); //2017年10月1日

2.返回、設定年份,用四位數表示

get/setFullYear() 

3.返回星期,返回的是0-6的數字,0表示星期天。如果要返回相對應“星期”,通過陣列完成

getDay()
4.返回/設定時間,單位毫秒數
get/setTime()

5.小寫字母轉大寫字母

var mystr="Hello world!"; 
var mynum=mystr.toUpperCase();

大寫字母轉小寫字母

toLowerCase()
6.返回指定位置的字元
 字串中第一個字元的小標是0,最後一個字元的下標為字串長度減一(string.length-1)
7.返回指定的字串首次出現的位置
<script type="text/javascript">
var str="I love JavaScript!"
document.write(str.indexOf("I")   "<br />");
document.write(str.indexOf("v")   "<br />");
document.write(str.indexOf("v",8));
</script>

結果:0

           4
           9
在該例子中,str.indexof(“v”,8) 這個的意思是說從該字串的下標為8的數開始尋找v這個字元,找到它在9這個位置。
如果沒有找到該字元,則會輸出-1. 

8.字串的分割split()

var mystr = "www.baidu.com";
document.write(mystr.split(".") "</br>");
document.write(mystr.split("", 2) "</br>“);

三.DOM操作

1.在網頁中,我們通過id先找到標籤,然後進行操作,這是通過ID獲取元素。
document.getElementById(“id”)
當然,通過name屬性查也未嘗不可。
ducument,getElementsByname("name")
需要注意的是,id只能有一個,但是name屬性可以不唯一。

2.通過innerHTML我們可以獲取甚至改變網頁上的內容。

Object.innerHTML

舉個例子�:

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p id="test">hello world!</p>
</body>  
<script type="text/javascript">
var mystr = document.getElementById("test")
document.write("p標籤修改之前:" mystr.innerHTML  "</br>");
mystr.innerHTML="hello DSCN!"
document.write("p標籤修改之前:" mystr.innerHTML   "</br>");
</script>
</html>

顯示效果:

3.在js中還能改變HTML的樣式

(1)基本語法:
Object.style.property=new style;

(2)基本屬性(property)

backgroundColor(元素的背景顏色)
height(元素的高度)
width(元素的寬度)
color(文字的顏色)
font(在一行設定所有的字型屬性)
fontFamily(設定元素的字型系列)
fontSize(設定元素的字型大小)
4.顯示和隱藏(display)
Object.style.display = value

值為none時,此元素會被隱藏;

值為block時,此元素會被顯示。

四.例項介紹

我們已經把網頁加上了一些圖片來修飾,接下來,我在上面兩篇的程式碼基礎之上,在加上一些其他的功能。比如檢查表單有沒有空格項使用者沒有填寫,而這些需要js來完成。
程式碼如下:
<html>
<head>
<style type="text/css">
div {
font-weight:bold;    
font-family: Microsoft Yahei;
width: 400px;
padding-left: 50px;
margin-left: 450px;
}
h1 {
text-align: center;
}
#sub {
background-color: #689;
width: 250px;
height: 30px;
color:white;
font-weight: bold;
}
body {
background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICqQa_1024.jpg");
}
</style>
<script type="text/javascript">
function abc()
{
if (document.getElementById("name").value == "")
{
alert("Please write your name!");
form.myname.focus();
return false;
}
if (document.getElementById("passward").value == "")
{
alert("Please write your password!");
form.mypassward.focus();
return false;
}
if (document.getElementById("profile").value == "")
{
alert("please write your profile!");
form.profile.focus();
return false;
}
}
</script>
</head>
<body>
<div id="sign">
<h1>Sigh Up</h1></br>
<h2>Your basic info</h2>
<form>
<strong>Name:</strong>
<input type="text" name="myname" id="name"/></br>
</br>
<strong>Passward:</strong>
<input type="password" name="mypassward" id="passward"/></br>
</br>
<strong>Age:</strong></br>
<input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
<input type="radio" name="age" value="2" />13 or older</br>
</br>
<strong>Your profile:</strong></br>
<textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
</br>
<strong>Job Role:</strong></br>
<select>
<option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
<option value="Back-End Developer" name="job">Back-End Developer</option>
</select></br>
</br>
<strong>Interests:</strong></br>
<input type="checkbox" name="development" value="1" checked="checked">Development</br>
<input type="checkbox" name="design" value="2" >Design</br>
<input type="checkbox" name="business" value="3" >Business</br>
</br>
<input type="submit" name="Sign Up" value="Sign Up" id="sub" onclick="abc()">
</input>
</form>
</div>
</body>
</html>

顯示效果:

當我沒填姓名時:
當我沒輸入密碼時,然後以此類推: