## 第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>
~~~
