## 第1天
### 1.js基本介紹.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="" onclick="alert(1)">百度</a>
<!--
JavaScript
js是什么？
一種基于客戶端瀏覽器、面向（基于）對象、事件驅動式的網頁腳本語言
js特點：
簡單、易學、易用
跨平臺
動態、交互式的操作方式
js能做什么？
表單驗證
網頁特效
js不能做什么？
不能操作數據庫
不能操作文件
如何學習？
1.基本語法 （ECMAScript）
2.BOM 瀏覽器對象
3.DOM 文檔對象模式
-->
</body>
<script>
// alert(1);
</script>
</html>
~~~
### 2.js的引入.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" href="">
<!-- 4.通過外部引入js文件 -->
<script src="./js.js">
寫在這里面的代碼無效
外部引入的js標簽對里面的內容相當于注釋
alert('我是寫在引入外部js同時，寫的js代碼');
</script>
</head>
<body>
<!-- 2.通過http協議引入js -->
<a href="http://www.baidu.com">百度</a>
<a href="javascript:alert(1)">百度</a>
<!-- 通過return false阻止默認行為 -->
<a href="" onclick="return false">去百度</a>
<a href="http://www.baidu.com" onclick="return test();">百度1</a>
<!-- 3.通過事件引入js代碼 -->
<a href="http://www.bai.com" onclick="alert('想去百度？')">去百度</a>
<a href="http">去百度</a>
</body>
<script>
//1.直接寫在script標簽里面
//這是寫在js里面的代碼
/*
這是js的多行注釋
*/
// alert(1);
function test()
{
return false;
}
</script>
</html>
~~~
### 3.js能出現的位置.html ###
~~~
<script>
// alert(1);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
<script>
//js代碼可以出現在html中的任何位置，除了title里面
alert(1);
</script>
</title>
<script>
// alert(1);
</script>
</head>
<body>
<script>
// alert(1);
</script>
<div>
<script>
// alert(1);
</script>
</div>
</body>
<script>
// alert(1);
</script>
</html>
~~~
### 4.js代碼的執行順序.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>#box{width:200px; height:200px; background:pink;}</style>
</head>
<body>
<div id="box" title="" style=""></div>
<script>
//js代碼執行順序跟html代碼同步
// alert(1);
</script>
<!-- <a href="">我愛你</a> -->
<script>
//找對象 改屬性
//1.找對象
var box = document.getElementById('box');
// alert(box);
//2.改屬性
box.title = '我愛你們';
box.style.width = '400px'
box.style.background = 'orange';
// alert(2);
</script>
</body>
</html>
~~~
### 5.js調試方式.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test();">求虐</button>
<script>
//6.debugger 終斷代碼，點一步執行一步
// debugger;
//1.alert(); 彈出框 終斷程序執行
// alert(1);
//2.document.write() 相當于php中的echo 有一個致命東西，代碼執行完畢之后，會覆蓋掉你整個文件
// document.write('我愛你');
// document.write('<br>');
function test()
{
// document.write('我恨你，去死吧！！');
}
//test();
//3.console.log() 在控制臺日志里面輸出 不能解析html標簽\r\n
console.log(111);
console.error('我愛你');
//4.console.dir() 相當于我們php中print_r 打印數組
var list = [1,2,3,4,5]; //定義數組
console.dir(list);
//5.document.title
document.title = '我愛你';
document.onmousemove = function(e)
{
document.title = 'X:' + e.clientX + 'Y:' + e.clientY;
// document.title = e.clientY;
}
</script>
</body>
</html>
~~~
### 6.跟隨鼠標移動的圖片.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img{position:absolute; left:100px; top:100px;}
</style>
</head>
<body>
<img src="./4.jpg" alt="" width="200px" id="img">
<script>
//1.找對象
var img = document.getElementById('img');
//2.改屬性
document.onmousemove = function(e)
{
img.style.top = e.clientY + 'px';
img.style.left = e.clientX + 'px';
}
</script>
</body>
</html>
~~~
### 7.奇葩的運算符.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//js嚴格區分大小寫
//運算符
// + 運算 連接符
// 如果兩邊都是數字的話，那么是運算
var num = 10 + 10;
// alert(num);
//如果有一邊是字符串，那么就是拼接
// var str = 'hello' + ' world';
var str = 'hello' + 10;
// alert(str);
//+=
var num = 5;
num = num += 'hello'; //num = num + 'hello'
// alert(num);
document.write(10 + 10 +10); //30
document.write('<br>');
document.write('10' + 10 +10); //101010
document.write('<br>');
document.write(10 + '10' +10); //101010
document.write('<br>');
document.write(10 + 10 +'10'); //2010
document.write('<br>');
// . 的 對象屬性訪問
var obj = {name:'jack',age:18}
// alert(obj.name);
// alert(obj['name']);
//. 跟[] 的區別 .不解析變量 []解析變量
var str = 'name';
// alert(obj.str);
// alert(obj[str]);
//奇葩的分號 ; 命令執行符
//在js代碼中，換行也是命令執行符
document.write('我愛你')
document.write('我愛你')
//不要讓我看見這樣的代碼
//換行產生錯誤的時候，不再是命令執行符
var num
=
10
alert(num);
</script>
</body>
</html>
~~~
### 8.表格隔行變色.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="600" border="1" id="tab">
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>010</td>
</tr>
</table>
<script>
//1.找對象
var tab = document.getElementById('tab');
var trs = tab.getElementsByTagName('tr');
// console.dir(trs);
// alert(trs.length);
//2.改屬性
for(var i=0; i<trs.length; i++) {
if (i % 3 ==0) {
trs[i].bgColor = 'red';
} else if(i % 3 ==1) {
trs[i].bgColor = 'green';
} else {
trs[i].bgColor = 'blue';
}
}
</script>
</body>
</html>
~~~
### 9.with.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
// alert(this);
// with(window){
// document.write('我愛著你');
// document.write('我愛著你');
// document.write('我愛著你');
// }
// window.document.write('我愛著你');
with(document){
write('我愛你')
write('我愛你')
write('我愛你')
write('我愛你')
write('我愛你')
}
</script>
</html>
~~~
### 10.js流程控制.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
//流程控制
//分支 if else switch() if else if else
var num = 10;
if (num > 10) {
} else if(num >5) {
} else {
}
var num = '10';
//要求數據類型嚴格匹配
switch(num) {
case '10':
// alert(num);
break;
case '20':
alert(num);
break;
}
//循環 for whiel do-while() foreach
//for-in 增強版for循環
var list = [1,2,3,4,5];
//foreache($list as $key=>$val)
for (key in list) {
var val = list[key];
document.write(key);
document.write(list[key]);
}
</script>
</html>
~~~
### 11.定時器.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick='stop();'>哥不想等了</button>
</body>
<script>
//定時器
//一次性的
//setTimeout()
//第一個參數是一個回調函數
//第二個參數時間 單位毫秒
/*
setTimeout('test()',3000);
function test()
{
alert(1);
}
*/
timmer = setTimeout(function(){
alert('大爺來了');
},5000);
// clearTimeout(timmer);
//周期性
//setInterval()
timmer1 = setInterval(function(){
console.log(1);
// document.write(111);
},1000);
function stop()
{
//清除鬧鐘
clearTimeout(timmer);
clearInterval(timmer1);
}
</script>
</html>
~~~
### 12.移動的盒子.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:200px; height:200px; background:pink; position:absolute; left:10px;}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
//1.找對象
var box = document.getElementById('box');
//2.該屬性
var num = 0;
setInterval(function(){
num +=5;
box.style.left = num + 'px';
},20);
</script>
</html>
~~~
### 13.進度條.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#die{width:600px; height:30px; border:1px solid yellow;}
#son{width:10%; height:30px; background:green;}
</style>
</head>
<body>
<div id="die">
<div id="son"></div>
</div>
</body>
<script>
//1.找對象
var son = document.getElementById('son');
//2.改屬性
var num = 0;
timmer = setInterval(function(){
son.style.width = num + '%';
if (num ==100) {
clearInterval(timmer);
alert('片子下載完成，請欣賞！！');
}
num++;
},20);
</script>
</html>
~~~
### 14.新消息提醒.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
// document.title = '【新消息】';
// document.title = '【 】';
var mark = true;
setInterval(function(){
if (mark) {
document.title = '【新消息】';
mark = false;
} else {
document.title = '【 】';
mark = true;
}
},500);
</script>
</html>
~~~
### 15.等待按鈕.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<center>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>全都說廢話啊啊啊啊啊啊啊啊啊啊啊啊</p>
<button id="btn">(10秒后)下一步</button>
</center>
</body>
<script>
//1.找對象
var btn = document.getElementById('btn');
//2.改屬性
btn.disabled = 'true';
num = 10;
timmer = setInterval(function(){
num--;
btn.innerHTML = '(' + num + '秒后)下一步';
if (num == 0) {
clearInterval(timmer);
btn.disabled = false;
btn.innerHTML = '下一步';
}
},1000);
</script>
</html>
~~~
