JavaScript
1、JavaScript的簡介
（1）什么是JavaScript：是基於對象和事件驅動的語言，應用於客戶端。
* 基於對象：
** java是面向對象，使用對象需要創建
** js里面提供好了一些對象，直接使用
* 事件驅動：每次滑動鼠標，變換一張圖片
* 客戶端：指的是瀏覽器
（2）JavaScript的特點（三個）
第一個：交互性
第二個：安全性
** JavaScript不能訪問本地硬盤里面的文件
第三個：跨平台性
** 在java里面跨平台，通過虛擬機實現的
** JavaScript跨平台，只要在系統里面安裝了支持JavaScript的瀏覽器，可以運行JavaScript
（3）Java和JavaScript區別（雷鋒和雷峰塔）
第一，java是sun公司，現在是oracle；JavaScript是網景公司
第二，java是面向對象的語言，javas是基於對象的語言
第三，java跨平台需要依靠虛擬機實現，JavaScript只需要瀏覽器可以運行
第四，JavaScript弱類型語言，java是強類型的語言
** 比如在java里面定義一個變量 int a = 10; int b = "10";不正確
** 在JavaScript里面定義變量都是使用一個關鍵字 var a = 10; var b = "10"; var c = true;
第五，java運行先編譯通過虛擬機運行，JavaScript直接使用瀏覽器運行
（4）JavaScript由三部分組成
第一部分：ECMAScript
** 又ECMA組織制定語句，語法
第二部分：BOM
** broswer object model：瀏覽器對象模型
第三部分：DOM
** document object model：文檔對象模型
2、js和html的結合方式
* 有兩種結合方式
第一種：使用html中的標簽 <script type="text/javascript"> js代碼 </script>
** 代碼
<script type="text/javascript">
alert("aaa");
</script>
** js的注釋有兩種
//單行注釋
/*
多行注釋
*/
第二種：使用html的標簽，引入外部的js文件
<script type="text/javascript" src="js文件的路徑"></script>
* 使用第二種方式的時候有兩點注意
注意一：不要在script標簽里面寫js代碼了，不會執行
注意二：結束script標簽 </script>，不要在標簽內結束
* 代碼
<script type="text/javascript" src="1.js">
//不要在script標簽里面寫js代碼了，不會執行
alert("aaa");
</script>
3、js的變量聲明和數據類型
（1）在js里面如何聲明變量，都是使用一個關鍵字var
* var a = 10;
（2）js的原始類型
* 在java里面有基本的數據類型？八個
* js的原始類型有五個
第一，string：字符串類型
* var a = "abc";
第二，number：數字類型
* var b = 10;
第三，boolean：布爾類型 true false
* var c = true;
第四，null
* null是特殊的引用類型
* 表示對象引用為空
* 比如 var date = null;
第五，undefined
* 表示定義了一個變量，但是沒有賦值
* var a;沒有賦值
（3）typeof(變量的名稱): 查看當前變量的類型
* alert(typeof(a));
4、js的引用類型和類型轉換
* 引用對象
** Object 對象：所有對象都由這個對象繼承而來
** Boolean 對象：Boolean 原始類型的引用類型
** Number 對象： Number 原始類型的引用類型
* 類型轉換
** 轉換成字符串
** 轉換成數字：parseInt() 和 parseFloat()
** 強制類型轉換
Boolean(value) - 把給定的值轉換成 Boolean 型；
Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；
String(value) - 把給定的值轉換成字符串；
5、js的語句
* 在java里面語句：if 、 switch 、while do-while for
* java里面的switch語句，數據類型要求：是否支持string類型？在jdk1.7開始支持的
（1）if 語句
* 代碼
//if語句
var a = 10;
if(a==10) {
alert("10");
} else {
alert("other");
}
（2）switch語句
* 在java里面
switch(a) {
case 10:
break;
case 20:
break;
default:
....
}
* 代碼
var b = 5;
switch(b) {
case 4:
alert("4");
break;
case 5:
alert("5");
break;
default:
alert("other");
}
（3）while循環語句
* 代碼
//while語句
var i = 4;
while(i<6) {
alert(i);
i++;
}
（4）for循環語句
* 代碼
//for語句
for(var i=0;i<3;i++) {
alert(i);
}
（5）使用document.write()向頁面輸出內容
* 可以向頁面輸出變量
* 可以向頁面直接輸出html代碼
** document.write(i);
document.write("<br/>");
6、練習：向頁面輸出99乘法表
（1）document.write可以直接向頁面輸出html代碼
（2）html中的屬性和屬性值之間可以使用雙引號，也可以使用單引號
（3）代碼
document.write("<table border='1' bordercolor='blue'>");
//循環9行
for(var i=1;i<=9;i++) {
document.write("<tr>");
//循環每行的部分
for(var j=1;j<=i;j++) {
document.write("<td>");
//向頁面輸出內容
document.write(j+"*"+i+"="+i*j);
document.write("</td>");
}
//document.write("<br/>");
document.write("</tr>");
}
document.write("</table>");
7、js的運算符
（1）算術運算符
+ - * /....
（2）賦值運算符
+=含義： x+=y 相當於 x=x+y
（3）比較運算符
==：表示條件的判斷，如果是=，表示賦值
（4）邏輯運算符
&& || !
（5）js的運算符和java不同的內容
第一個：js里面不區分整數和小數
* 比如 var a = 123/1000*1000,如果在java里面結果是 0
* js里面的結果：123
第二個：字符串的相加和相減操作
* 字符串相加是字符串的拼接操作，字符串相減是真正的相減運算，如果字符串不是數字提示NaN
* //字符串的相加和相減
var b = "10";
document.write(b+1); //字符串拼接
document.write("<hr/>");
document.write(b-1); //真正相減的運算
document.write("<hr/>");
var c = "a";
document.write(c-1); //NaN
第三個：boolean類型相加和相減的操作
* 如果布爾類型值是true，把類型當成1運算；如果布爾類型值是false，把類型當成0運算
//布爾類型相加和相減操作
var flag = true;
document.write(flag+1); // 2,當boolean類型是true時候，把類型當成1運算
document.write("<hr/>");
var flag1 = false;
document.write(flag1+1); //1,當boolean類型是false時候，把類型當成0運算
第四個：==和===區別
* ==比較的是值
* === 比較的是值和類型
* 代碼
var mm = "10";
if(mm==="10") {
alert("10");
} else {
alert("other");
代碼1：
案例一；圖片輪播及插播廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網絡首頁</title>
<script type="text/javascript">
function init(){
setInterval("changeImg()",1000);
// 定時插播廣告
time =setInterval("showAd()",2000)
}
var i =1;
function changeImg(){
i++;
document.getElementById("abc").src="../img/"+i+".jpg"
if(i==2){
i =0;
}
}
// 書寫顯示圖片函數
function showAd(){
document.getElementById("guanggao").style.display="block";
// clearInterval(setInterval("showAd()",2000));
// 清除顯示圖片
clearInterval(time);
time =setInterval("hiddenAd()",4000);
}
// 書寫隱藏圖片
function hiddenAd(){
document.getElementById("guanggao").style.display="none";
// clearInterval(setInterval("hiddenAd()",4000))
// 清除顯示圖片
clearInterval(time);
}
</script>
<style type="text/css">
#father{
border: 0px solid black;
width: 1300px;
height: 2367px;
margin: auto;
}
.top{
border: 0px solid black;
width: 33.1%;
height: 50px;
float: left;
}
#menu{
border: 0px solid blue;
background: black;
width: 1300px;
height: 50px;
}
#clearn{
clear: both;
}
#product{
border: 0px solid blue;
width: 1300px;
height: 600px;
}
#product_top{
border: 0px solid blue;
width: 1300px;
height: 80px;
}
#product_bottom{
border: 0px solid blue;
width: 1300px;
height: 520px;
}
#product_left{
border: 0px solid red;
width: 185px;
height: 520px;
float: left;
}
#big{
border: 0px solid red;
width: 555px;
height: 260px;
float: left;
}
#small{
border: 0px solid red;
width:183px;
height: 260px;
float: left;
text-align: center;
}
#abc{
text-align: center;
}
</style>
</head>
<body onload="init()">
<div id="father">
<div id="">
<img src="../img/彈出廣告幾秒后自動關閉.jpg" style="width: 100%; display: none;" id="guanggao"/>
</div>
<!--1logo部分-->
<div id="" >
<div class="top">
<img src="../img/logo2.png" style="height: 48px;" />
</div>
<div class="top">
<img src="../img/header.png" style="height: 48px;" />
</div>
<div class="top" style="height: 49px;" >
<a href="#">登陸</a>
<a href="#">注冊</a>
<a href="#">購物車</a>
</div>
<div id="clearn">
</div>
</div>
<!--2導航欄部分-->
<div id="menu">
<ul>
<a href="#"><li style="display: inline; font-size: 25px; color: white;">首頁</li></a>
<a href="#"><li style="display: inline; color: white;">電腦辦公</li></a>
<a href="#"><li style="display: inline;color: white;">手機數碼</li></a>
<a href="#"><li style="display: inline;color: white;">鞋靴箱包</li></a>
<a href="#"><li style="display: inline;color: white;">育嬰保健</li></a>
</ul>
</div>
<!--3滾動圖片-->
<div id="">
<img src="../img/1.jpg" width="100%" id="abc" />
</div>
<!--4最新產品-->
<div id="product">
<div id="product_top">
<font style="font-size: 25px;">最新商品 </font><img src="../img/title2.jpg "/>
</div>
<div id="product_bottom">
<div id="product_left">
<img src="../img/big01.jpg" style="width: 100%;height: 100%;" />
</div>
<div id="product_right">
<div id="big">
<img src="../img/middle01.jpg" style="width: 100%; height: 100%;"/>
</div>
<div id="small">
<img src="../img/small04.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small01.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small03.jpg" /><br />
<font style="color: gray;">電飯鍋</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small05.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small07.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small08.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small09.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
</div>
</div>
</div>
<!--5廣告部分-->
<div id="">
<img src="../img/ad.jpg" style="width: 100%;height: 100%;"/>
</div>
<!--6熱門產品-->
<div id="product">
<div id="product_top">
<font style="font-size: 25px;">熱門商品 </font><img src="../img/title2.jpg "/>
</div>
<div id="product_bottom">
<div id="product_left">
<img src="../img/big01.jpg" style="width: 100%;height: 100%;" />
</div>
<div id="product_right">
<div id="big">
<img src="../img/middle01.jpg" style="width: 100%; height: 100%;"/>
</div>
<div id="small">
<img src="../img/small04.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small01.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small03.jpg" /><br />
<font style="color: gray;">電飯鍋</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small05.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small07.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small08.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small09.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空調</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
</div>
</div>
</div>
<!--廣告圖片-->
<div id="">
<img src="../img/footer.jpg" style="width: 100%;height: 100%;"/>
</div>
<!--友情鏈接和地址-->
<div id="abc">
<a href="#">關於我們</a>
<a href="#">聯系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務聲明</a>
<a href="#">廣告聲明</a>
<p>
Copyright © 2005-2016 傳智商城 版權所有
</p>
</div>
</div>
</body>
</html>
案例2：——表單內容不能為空
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
<script type="text/javascript">
function check(){
// 獲取元素
document.getElementById("user")
// alert("fhh")
// 獲取元素的數據
var uvalue =document.getElementById("user").value
if(uvalue==""){
alert("用戶名不能為空")
return false;
}
var a =document.getElementById("password").value
if(){
alert("密碼格式不正確")
return false;
}
var a =document.getElementById("repassword").value
if(a==""){
alert("再次密碼不能為空")
return false;
}
var n =document.getElementById("amail").value
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(n)){
alert("郵箱格式不正確")
return false;
}
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return check()">
用戶名：<input type="text" name="user" maxlength="3" placeholder="請輸入用戶名" id="user"/><br />
密碼： <input type="password" name="password" id="password"/><br />
確認密碼：<input type="password" name="password" id="repassword"/><br />
性別： <input type="radio" name="sex" value="nan" checked="checked"/>男
<input type="radio" name="sex" value="nv"/>女<br />
愛好：<input type="checkbox" name="love" value="籃球"/>籃球
<input type="checkbox" name="love" value="看電影"/>看電影
<input type="checkbox" name="love" value="數錢" checked="數錢"/>數錢<br />
籍貫：<select name="city">
<option>--請選擇--</option>
<option value="l" selected="selected">洛杉磯</option>
<option value="b">波士頓</option>
<option value="d">達拉斯</option>
</select><br />
上傳文件：<input type="file" name="wenjian"/><br />
郵箱：<input type="text" name="email" id="amail" /><br />
自我介紹：<textarea name="jieshao" cols="10" rows="8"></textarea><br />
注冊：<input type="submit" value="注冊你妹" /><br />
普通按鈕： <input type="button" value="按你妹"/><br />
重置：<input type="reset" />
</form>
</body>
</html>