javaScript概述 什麼是javaScript：javaScript是一種直譯式腳本語言。直接解釋執行的語言。 什麼是腳本語言？ . java源代碼 >編譯成.class文件 >java虛擬機中才能執行 . 腳本語言：源碼 >解釋執行 . js由我們的瀏覽器解釋執行 HTML：決定了頁面的框架 ...
javaScript概述
什麼是javaScript：javaScript是一種直譯式腳本語言。直接解釋執行的語言。 什麼是腳本語言？ . java源代碼--->編譯成.class文件 --->java虛擬機中才能執行 . 腳本語言：源碼 ---->解釋執行 . js由我們的瀏覽器解釋執行
HTML：決定了頁面的框架
CSS：用來美化我們的頁面
JS:提供用戶的交互，是靈魂
JS的組成:
ECMAScript : 核心部分 ,定義js的語法規範
DOM: document Object Model 文檔對象模型 , 主要是用來管理頁面的
BOM : Browser Object Model 瀏覽器對象模型, 前進,後退,頁面刷新, 地址欄, 歷史記錄, 屏幕寬高
JS的語法
變數弱類型:var i = true
區分大小寫 ， 語句結束之後的分號 可以有，也可以沒有
要求寫在script標簽內
JS的數據類型
-
基本數據類型
- string
- number
- boolean
- undefine
- null
-
引用數據類型
- 對象， 內置對象
-
類型轉換
- js內部自動轉換
JS的運算符和語句
-
運算符和java一樣
-
"===" 全等號: 值和類型都必須相等
-
== 值相等就可以了
-
語句和java大致一樣
-
js中無邏輯單與和邏輯單或，函數不支持重載
-
null 屬於Object類型。
-
NaN 不是一個數字，但是屬於number類型。
var aa ="哈嘍";alert(typeof(aa)); //這樣賦值的就是String類型var v = new String();//直接new出來的就是Object類型alert(typeof(v));
-
- 案例：求偶數和
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// document.write("哈嘍");
var num =0;
for (var a =0;a<=100;a++) {
if (a%2==0) {
num+= a;
}
}
alert(num);
document.write(num)
</script>
</head>
<body>
</body>
</html>
JS的輸出
- alert() 直接彈框
- document.write() 向頁面輸出
- console.log()向控制台輸出
- innerHTML:向頁面輸出，可以改變內容
JS聲明變數和函數
var 變數的名稱 = 變數的值
var 函數的名稱 = function(){
• }
• function 函數的名稱(){
• }
JS的開發步驟
1. 確定事件
2. 通常事件都會出發一個函數
3. 函數裡面通常都會去操作頁面元素,做一些交互動作，彈框。修改頁面，動態添加一些東西
選擇器：
元素選擇器: 元素的名稱{}
• 類選擇器: . 加類名{}
• ID選擇器: #ID選擇器{}
• 後代選擇器: 選擇器1 選擇器2
• 子元素選擇器: 選擇器1 > 選擇器2
• 選擇器分組: 選擇器1,選擇器2,選擇器3{}
• 屬性選擇器: 選擇器[屬性的名稱='屬性的值']
• 偽類選擇器:選擇器分組: 選擇器1,選擇器2,選擇器3{}
屬性選擇器: 選擇器[屬性的名稱='屬性的值']
偽類選擇器:
浮動:
-
適應於div塊 左右排版
float 屬性: left right
清除浮動:
clear 屬性: both left right
盒子模型: 上右下左 padding 10px 20px 30px 40px 順時針的方向
內邊距: 控制的盒子內距離
邊框: 盒子的邊框
外邊距: 控制盒子與盒子之間的距離
絕對定位: position : absolute; top: left
定時器
- setInterval("test()",3000) 每隔多少毫秒執行一次函數 迴圈函數
- setTimeout("test()",3000) 多少毫秒之後執行一次函數 一次性函數
- timerID 上面定時器調用之後
- clearInterval() 清除迴圈函數定時器
- clearTimeout() 清除一次性定時器 。一般不用
切換圖片
img.src = "圖片路徑"
事件：文檔載入完成的事件 onload事件
顯示廣告 ，隱藏廣告 :調用display的功能。
var img =document.getElementById("id");
img.style.display = "block";
img.style.display = "none"
引入外部JS文件
<script src="js文件的路徑" type="text/javascript"/>
//需要註意的是：當從外部引入後 script中再寫js代碼就不會生效。
內部引入 ：
直接在文件中任何位置：<script>在這裡寫js</script>
覆選框中 checked = true ；代表選中狀態
checked = false 代表未選中狀態。
表單中常用的事件：
onfocus: 獲取焦點事件
onblur : 失去焦點的事件
onkeyup: 按鍵抬起的事件
onclick: 單擊事件
ondblclick: 雙擊事件
表格隔行換色,滑鼠移入和移除要變色:
onmouseenter: 滑鼠移入
onmouseout: 滑鼠移出
onload: 文檔載入完成事件
onsubmit: 提交
onchange: 下拉列表內容改變
checkbox.checked 選中狀態
DOM的文檔操作:
添加節點: appendChild
創建節點: document.createElement
創建文本節點: document.createTextNode()
點擊事件
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 可以傳參數
function fun1 (x) {
alert("我被單擊了！！"+x);
}
function fun2 () {
alert("我被單機了！！哈哈哈");
}
function fun3 () {
alert("我被雙擊了！！哈哈哈");
}
</script>
</head>
<body>
<input type="button" value="點擊" name="按鈕" onclick="fun1(100),fun2()" />
<input type="button" value="雙擊" ondblclick="fun3()" />
</body>
</html>
#案例一 ，校驗#
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/01.css" />
<script>
/*
1.確定事件：表單提交事件 onsubmit事件
2.事件所要觸發的函數: checkForm
3. 函數中要執行一些程式
1. 函數中再創建一個方法統一判斷用戶名，密碼，確認密碼 是否為空，直接 調用這個函數。
*/
function checkForm(){
//校驗用戶名是否為空
var v1 = checkFormIsNull("username","用戶名");
//校驗密碼是否為空
var v2 =checkFormIsNull("pwd","密碼");
//校驗確認密碼是否為空
var v3 =checkFormIsNull("repwd","確認密碼");
if(v2 && v3 ){
//獲取密碼的值
var pas = document.getElementById("pwd").value;
//獲取確認密碼的值
var repas = document.getElementById("repwd").value;
//判斷是否一致
if(pas != repas){
alert("兩次密碼輸入不一致！！");
return false;
}
}
var v4 = document.getElementById("email").value;
if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){
alert("郵箱驗證通過");
}else{
alert("郵箱驗證錯誤");
return false;
}
//要驗證的四個有一個不對就錯 。
return v1 && v2 && v3 && v4;
}
function checkFormIsNull(id,msg){
//驗證用戶名,密碼，確認密碼 是否為空
var ele =document.getElementById(id);
var val = ele.value;
if(val == ""){ //此處不能寫null 。
alert(msg+"不能為空！！！");
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divFormId">
<form onsubmit="return checkForm()" action="#" method="get">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">會員註冊</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用戶名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
</tr>
<tr>
<td align="right">密碼</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
</tr>
<tr>
<td align="right">確認密碼</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性別</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="/day03/img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
#案例二，隱藏廣告 #
<html>
<head>
<!--頁面剛載入完成後，先隱藏圖片屬性，兩秒後顯示，過兩秒後再消失。-->
<meta charset="UTF-8">
<title></title>
<style>
.hmig{
display: none;
}
.sowImg{
display: block;
}
</style>
<script>
function showImg(){
//1.選中廣告的這個圖片
var obj = document.getElementById("pac");
//2.修改class的值。切換為塊，顯示狀態
obj.className="sowImg";
//2秒後隱藏起來
setTimeout("hiddImg()",2000);
}
function hiddImg(){
var obj = document.getElementById("pac");
//2.修改class的值，使其切換成none值
