## 第3天 ##
### 1.復習.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
數據類型
typeof 查看數據類型
1.布爾值
true
false
2.undefined
undefined 定義變量沒有賦值
3.number
整型
浮點型
NaN not a number 不是數字的數
自己都不等以自己
參與運算，結果都是NaN 100px
InFinity 無窮大 2/0
類型轉換
Nnmber() 默認
parseInt() 強制轉化成整型
parseFloat() 強制轉換成浮點型
4.string
單雙引號都不解析變量
自己不能嵌套自己
解析轉義符
5.function
也是一種數據類型
類似字符串，字符串怎么玩，函數就怎么玩
6.Object
null 是一個特殊的額對象 空對象
*/
var str = 'helo';
var str = Number(str);
alert(str);
</script>
</html>
~~~
### 2.函數的定義.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
//函數 一種數據類型
// test();
//函數的定義1
function test()
{
alert(1);
}
//函數就像字符串一樣，重新定義，會覆蓋同名的函數
function test()
{
alert(2);
}
// var str = 'I Love You';
// var str = 'hi';
// alert(str);
//函數定義2
function test()
{
alert(3);
return 10;
}
// var func = function(){alert(3)}
// 把函數的返回值賦給一個變量
// var func = test();
var func = test;
// alert(func);
// alert(func)
// func();
//函數定義3：使用構造器
//前面所有的參數都是作為函數的形參，最后一個參數是函數體的內容
var say = new Function('a','b','return a+b');
// alert(say);
var res = say(5,6);
alert(res);
// var str = new String('hello');
// var str1 = 'hello1';
// alert(typeof str);
// alert(typeof str1);
</script>
<script>
//定義函數的時候，如果調用跟定義不在同一個script標簽里，那么必須先定義，后調用
// test();
</script>
</html>
~~~
### 3.函數的調用.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
//函數 一種數據類型
//函數的調用1：
function test()
{
alert(1);
}
// test();
//函數調用2：
//賦值給字符串，取別名調用
var func = function()
{
alert(2);
}
func();
//函數調用3：在事件中調用
//見文件中body的按鈕
</script>
</html>
~~~
### 4.函數定義的細節.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
//函數 一種數據類型
/*
函數定義的細節
1.函數可以重復定義
2.形參可以不傳值，返回值是undefined
3.形參不能有默認值，除了火狐
4.如果要給函數設置默認值，那么可以通過判斷形參是否是undefined
*/
function test()
{
alert(1);
}
//形參不能有默認值，除了火狐
function test(a)
{
//變相的設置默認值
if (a === undefined) a = 20;
// alert(2);
alert(a);
}
test();
</script>
</html>
~~~
### 5.arguments對象.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
//函數 一種數據類型
//func_num_args() 返回函數的參數個數
//arguments
function test()
{
console.dir(arguments);
return arguments.length;
}
var res = test('a','b','c','d');
alert(res);
</script>
</html>
~~~
### 6.變量的作用域.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
/*
變量的作用域
1.函數內部可以調用全局變量
2.在函數內使用var定義的變量的是局部變量，外部無法調用
*/
num = 10;
function test()
{
//var 定義變量，在函數內使用var定義的變量是局部變量
var num1 = 20;
alert(num);
// alert(num1);
// alert(num2);
function son()
{
var num2 = 30;
alert(num);
alert(num1);
// alert(num2);
}
son();
}
test();
//局部變量外部無法調用
alert(num1);
</script>
</html>
~~~
### 7.奇葩的的函數.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
/*
函數：
回調函數 把一個函數當成參數來傳遞的時候
匿名函數 沒有名字的函數
遞歸函數 自己調用自己
*/
//以后的使用就是這樣去使用
//function test(){}
/*
//回調函數+匿名函數
setInterval(function(){},100);
//遞歸函數
var res= prompt('請輸入用戶名','SB250');
// alert(res);
function login()
{
var res= prompt('請輸入用戶名','SB250');
if(res == '我是大傻B') {
alert('歡迎你，大傻B');
} else {
login();
}
}
// login();
*/
/*
//自調函數 定義好函數之后自己調用自己一次
// var func = function(){};
// func();
(function(){
alert(2);
})();
//類似我們的命名空間 解決js里面的命名問題
(function(){
var num = 10;
alert(1);
})();
*/
/*
//返回函數的函數
function test()
{
// return 'I Love You';
return function()
{
alert('我是返回的')
}
}
var res = test();
// alert(typeof res);
res();
*/
//子函數
function test()
{
alert(1);
function son()
{
alert(2);
}
son();
}
// test();
//自己改變自己的函數
function test()
{
alert(1);
test = function()
{
alert(2);
}
}
// test();
// test();
// test();
//自宮函數 一次性的任務
function test()
{
alert('贊');
test = function(){}
}
test();
test();
</script>
</html>
~~~
### 8.構造器函數.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
/*
構造器函數
*/
//類似構造方法
function Person(name,age)
{
this.name = name;
this.age = age;
this.say = function()
{
alert(1);
}
}
var p = new Person('jack',18);
alert(typeof p)
alert(p.name);
alert(p.age);
p.say();
</script>
</html>
~~~
### 9.閉包函數.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
/*
閉包函數 ： 返回函數的函數 打破作用域鏈
1.返回的函數保持定義時訪問的范圍
2.局部變量不會立即釋放
*/
function die()
{
var num = 10;
function son()
{
alert(num);
}
return son;
}
var func = die();
func();
</script>
</html>
~~~
### 10.對象的聲明.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="test()">求虐</button>
</body>
<script>
/*
對象：
*/
//聲明對象方式1：
var list = [1,2,3,4];
var obj = {name:'jack',age:18};
// alert(typeof list);
// alert(obj.name);
//聲明對象方式2：
var obj = new Object();
alert(typeof obj);
obj.name = 'jack';
alert(obj.name);
//可以訪問一個不存在的屬性，返回值是undefined
alert(obj.sex);
//訪問一個不存在的方法時，會報錯，下面代碼不執行
alert(obj.eat());
obj.say = function(){alert(1)};
obj.say();
//對象聲明3： 找對象
//1.document.getElementById() 對象
//2.document.getElementsByTagName('tr') 得到的是一個數組類型的對象
</script>
</html>
~~~
### 11.包裝對象.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>hello</button>
<button>world</button>
<button>I Love You</button>
<button>我愛你</button>
</body>
<script>
//包裝對象
var str = 'hello';
var str1 = new String('hello');
// alert(typeof str);
// alert(typeof str1);
// alert(str);
// alert(str.substr(1,1));
//包裝對象 臨時對象 隨用隨消
str.name = 'jack';
// alert(str.name);
// alert(str1.substr(1));
//真正的對象
str1.name = 'jack';
// alert(str1.name);
// alert(str1);
//1.找對象
var btns = document.getElementsByTagName('button');
// console.dir(btns);
for (i in btns) {
//在循環體里面的函數不能有變量值
btns[i].index = i;
btns[i].onclick = function(){
// alert(btns[i].innerHTML);
alert(this.innerHTML);
// alert(btns[this.index].innerHTML);
}
}
</script>
</html>
~~~
### 12.原型鏈.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>hello</button>
<button>world</button>
<button>I Love You</button>
<button>我愛你</button>
</body>
<script>
//原型鏈 類似繼承
function Person(name)
{
this.name = name;
}
var obj = {age:18,say:function(){alert(2)}}
Person.prototype = obj;
var p = new Person('jack');
alert(p.name);
alert(p.age);
p.say();
//
</script>
</html>
~~~
### 13.擴展作業.html ###
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>hello</button>
<button>world</button>
<button>I Love You</button>
<button>我愛你</button>
</body>
<script>
//擴展作業 使用每個類型 Math Date Array String 方法做兩個小例子
// var num = Math.random() * 100;
// var num = Math.floor(num);
// console.log(num);
String.prototype.test = function(){alert(1)}
//String
var str = 'hello';
// str.substr();
str.test();
// String.test();
</script>
</html>
~~~
