python筆記-Javascript
阿新 • • 發佈：2018-12-14
Javascript概述
JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
登錄檔單校_校驗使用者名稱是否為空
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<style></style>--> <!--<link>--> <script> // *****************************1. 校驗使用者名稱是否為空? *************************** // 需求: // 1. 判斷使用者名稱是否為空? // 2. 校驗密碼是否大於6位， 如果不滿足則不合法? // 定義一個函式 function checkForm() { // 1). 獲取輸入使用者名稱標籤提交的內容； var user = document.getElementById('username').value; // 2). if判斷使用者名稱是否為空? // 3). 如果資料合法， 繼續執行， 提交表單； // 4). 如果資料不合法， 不讓表單提交? (顯示彈出框報錯) --- alert if (user === '') { alert("使用者名稱不能為空!"); return false; } // ******************************2. 校驗密碼長度是否小於6 ************************** // 難點: 獲取密碼長度(http://www.w3school.com.cn/js/js_obj_string.asp) // var passwdlen = document.getElementById('passwd').value.length; var passwdlen = document.getElementsByName('passwd')[0].value.length; if (passwdlen < 6){ alert("密碼不合法: 長度小於6！"); return false; } } </script> </head> <body> <!-- 實現步驟: 1. 確定事件型別onsubmit(常見事件型別的網址: http://www.w3school.com.cn/js/js_htmldom_events.asp); 2. 對這個事件繫結一個函式(執行的操作寫在函式裡面); 3. 函式的核心功能: 校驗使用者名稱是否為空? 1). 獲取輸入使用者名稱標籤提交的內容； 2). if判斷使用者名稱是否為空? 3). 如果資料合法， 繼續執行， 提交表單； 4). 如果資料不合法， 不讓表單提交? (顯示彈出框報錯) --- alert --> <form action="#" method="get" onsubmit="return checkForm()"> <!--get: 填寫的資訊會在url裡面顯示， 對於重要的資料來說是不安全的； post: 填寫的資訊不會在url裡面顯示 --> 使用者名稱: <input type="text" name="username" placeholder="使用者名稱" id="username"><br/> 密 碼: <input type="password" name="passwd" placeholder="密碼" id="passwd"><br/> <input type="submit" value="註冊"> </form> </body> </html>
輪播圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 塊級元素居中:margin: 0 auto; 行內元素居中: text-align: center; --> <style> #sowing_map{ width: 590px; height:500px; margin: 0 auto; text-align: center; } </style> <script> window.onload = function () { // 每隔1s自動執行某一個函式 setInterval('changeImg()', 1500); }; // 1. 定義一個變數， 控制圖片的迴圈順序; var i = 1; function changeImg() { // 2. 當點選下一頁時， i+1, 這個時候， 圖片變成img2; i += 1; // 3. 修改img標籤裡面的src屬性內容; document.getElementById('img').src = 'img/img' + i + '.jpg'; // 4. 如果圖片輪播結束， 從頭開始輪播； if (i === 6){ i = 0; } } </script> </head> <body> <!--思路: 1. 確定事件型別為onclick事件； 2. 並跟對應的函式changeImg繫結在一起； 3. 實現函式功能； 1). 當點選下一頁按鈕之後， 修改img標籤裡面的src屬性內容; --> <div id="sowing_map"> <img src="img/img1.jpg" id="img"> </div> </body> </html>
JS外部引入-定時彈出廣告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 塊級元素居中:margin: 0 auto; 行內元素居中: text-align: center; Js的引入方式: - 內部引入: 直接在head標籤裡面的<script>寫的內容; - 外部引入:<script src="js/main.js" ></script --> <link href="css/main.css" rel="stylesheet"> <script src="js/main.js" ></script> </head> <body> <!-- 目標: 實現網頁定時彈出廣告， 並定時取消彈出的廣告; 步驟: 1. 在頁面設定一個隱藏的圖片; style="display: none" 2. 確定事件型別為onload， 為其繫結一個函式; 3. 設定定時執行顯示圖片的函式showAd(); 4. 編寫定時任務裡面的函式showAd()---- - 獲取標籤的樣式display=‘block’; - 清除顯示廣告的定時任務; - 編寫隱藏廣告圖片的定時任務; 5. 實現定時任務裡面的函式hiddenAd(); - 獲取標籤的樣式display=‘none’; - 清除隱藏廣告的定時任務; --> <div id="sowing_map"> <img src="img/img1.jpg" id="img"> </div> <div id="ad"> <img src="img/img7_ad.jpg" id="ad_img" style="display: none"> </div> </body> </html>
使用者註冊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTip() {
// 1. 獲取標籤物件;
document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">使用者名稱不能為空</b>';
}
function showPwdTip() {
// 1. 獲取標籤物件;
document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密碼必須大於6位</b>';
}
function checkUser() {
//1. 離焦時判斷使用者名稱是否為空?
var name = document.getElementById('user').value;
// 2. 如果為空， 右邊來一個紅色的提示;
// 3. 如果不為空， 則取消所有提示;
if (name === ''){
document.getElementById('userTip').innerHTML = '<b style="color: #f10180">使用者名稱不能為空</b>'
return false;
}else{
document.getElementById('userTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
function checkPwd() {
// alert('離焦');
//1. 離焦時判斷使用者名稱是否為空?
var pwdLen = document.getElementById('pwd').value.length;
// 2. 如果為空， 右邊來一個紅色的提示;
// 3. 如果不為空， 則取消所有提示;
if (pwdLen < 6){
document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密碼必須大於等於6位</b>'
return false;
}else{
document.getElementById('pwdTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
</script>
</head>
<body>
<!--
實現目標:
步驟:
1). 確定事件型別(onfocus-聚焦事件)， 併為其繫結一個函式;
2). 確定事件型別(onblur-離焦事件)， 併為其繫結一個函式;
-->
<form action="#" method="get">
<input type="text" id='user' placeholder="輸入使用者名稱" name="username" onfocus="showUserTip()"
onblur="checkUser()">
<span id="userTip"></span><br/>
<input type="password" id="pwd" placeholder="密碼" name="passwd" onfocus="showPwdTip()"
onblur="checkPwd()">
<span id="pwdTip"></span><br/>
<input type="submit" value="註冊">
</form>
</body>
</html>
表格的全選和全不選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
//1. 獲取全選框物件
var checkAllEle = document.getElementById('checkAll');
// alert(checkAllEle);
// //判斷該單選框是否被選中，
// alert(checkAllEle.checked);
// 2. 對編號前面的複選框的狀態進行判斷;
// - 如果狀態為選中， 則設定所有的單選框為選中狀態;
// - 如果狀態為沒有選中， 則設定所有的單選框為沒有選中狀態;
if (checkAllEle.checked){
//- 如果狀態為選中， 則設定所有的單選框為選中狀態;
var checkOnes = document.getElementsByName('checkOne');
// 依次遍歷所有的單選框， 設定狀態為選中;li = [1,2,3,4]
for(var i =0; i<checkOnes.length; i++){
// li[0] li[1] li[2] li[3]
checkOnes[i].checked = true;
}
}else{
//- 如果狀態為未選中， 則設定所有的單選框為未選中狀態;
var checkOnes = document.getElementsByName('checkOne');
// 依次遍歷所有的單選框， 設定狀態為選中;li = [1,2,3,4]
for(var i =0; i<checkOnes.length; i++){
// li[0] li[1] li[2] li[3]
checkOnes[i].checked = false;
}
}
}
</script>
</head>
<body>
<!--
需求:
實現批量選中和批量不選中
步驟分析:
1). 確定事件型別:滑鼠單擊單選按鈕時(onclick事件)， 繫結一個函式；
2). 編寫函式checkAll()
-->
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
<th style="text-align: center;" colspan="5">
<input type="button" value="新增">
<input type="button" value="刪除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>5</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
總結
ECMAScript(基礎語法) 1). 定義變數的時候: - var a = 1; 區域性變數 - a = 1; 全域性變數
2). Js裡面的資料型別:字串、數字、布林、陣列、物件、Null、Undefined (string, number, boolean<true, false>)
3). 比較
==： 5==‘5’ (返回true) 5==5 (返回true)
===： 5===‘5’ (返回false) 5===5 (返回true)
4). 函式如何定義: - 命名函式 function 函式名(){ 函式體 } - 匿名函式
baidu5). if, for, while, 三元運算子
BOM物件: Windows: alert(), setInterval(), clearInterval() location: href() --(跳轉到指定的頁面)
DOM: 常用的事件: onsubmit(特殊點， 一定要有boolean型別的返回值), onclick， onfocus， onblur, onchange,
警告資訊的實現方式: - 彈出框: alert() - 向頁面的指定位置寫入內容:
document.getElementById('userTip').inner HTML='<b style="color:red">使用者名稱資訊不能為空</b>'