初识函数
函数
重复利用代码，把要重复利用的代码放在一个函数当中，在其它用到的地方调用下就可以了
函数的定义
function 函数名(){
//要复用的代码
}
函数的调用
函数名称()
事件调用
定时器调用
<body>
<div onclick="sum(7,8)">加法</div>
<a href="javascript:sheng(8,9)">乘法</a>
<script type="text/javascript">
// 调用方式
// 函数名称()
//事件调用
//链接调用
//定时器调用
var n,m,sum1,chen;
//
// n=5+2;
// 8+7
// 777777+88888
//
// sum(7,8888);
// sum(5,2);
// sum(5,2);
function sum(m,n){
sum1=m+n
console.log(sum1)
}
function sheng(t,w){
shen=t*w
console.log(shen)
}
// sheng(9,8);
// sheng(9,78888)
</script>
</body>函数的类型
1、函数声明
语法：funciton 函数名（参数）｛
要执行的代码
｝
调用： 函数名（参数）
把函数声明成函数表达式，在后加一个小括号
2、函数表达式
语法： var 变量=function(参数){
要执行的代码
}
调用：变量名（参数）
直接在这个名字后加小括号
注：函数表达式里面的function后面如果有名字的话，在调用的时侯不能拿这个名字去调用
<script type="text/javascript">
// 1、函数声明
// 语法：funciton 函数名（参数）｛
// 要执行的代码
// ｝
// 调用： 函数名（参数）
//
// 2、函数表达式 :把函数声明成函数表达式，在后加一个小括号
// 语法：
// var 变量=function(参数){
// 要执行的代码
// }
// 调用：变量名（参数）
// 直接在这个名字后加小括号
// 注：函数表达式里面的function后面如果有名字的话，在调用的时侯不能拿这个名字去调用
function sum(m,n){
console.log(m+n);//11
};
sum(5,6);
var add=function(m,n){
console.log(m,n);//7,8
}
add(7,8)
var add1=function min(m,n){
console.log(m,n)
}
add1(9,10);
</script>
函数的参数
从函数的外面向里面传递数据，在函数里可以接收到这些数据，并且能够使用它，这些数据叫做参数。
参数放在小括号里，可以放0个或多个，每个参数用逗号分开。
形参：形式上的参数，在函数声明的小括号里 形参的值由实参决定。
实参：实际上的参数，放在函数调用的小括号里。
实参必须与形参一一对应，在调用函数时，要把 实际参数传够数量，如果有一个实参没有传，那么它的值就是undefined 形参实际上是在函数里声明的变量，变量的初始值是undefined。在调用的时侯，传的实参会把初始值给改成真实的值
<script type="text/javascript">
//函数的参数
add(3,5);//实参就是实际的参数
function add(m,n,t){//形参，形式上的参数
var m,n,t
// m=3,n=5,t=undefined;
console.log(m,n,t);//3,5,undefind
console.log(m+n);//8
}
//在写程序时先定义函数在调用
function sum(){
alert("这是一个sum")
}
sum();
</script>
arguments对象
它是函数内置的对象，代表了所有实参的集合，它是类数组，类数组的每一项都有自已对应的下标，它还有个length的属性，代表了实参的个数。
<script type="text/javascript">
//this函数内置的一个对象，谁调用的this就是谁
//event
//arguments它是函数内置的对象，代表了所有实参的集合，它是类数组，类数组的每一项都有自已对应的下标，它还有个length的属性，代表了实参的个数。
var obox=document.getElementById("box");
var obox1=document.getElementById("box1");
obox.onclick=function(event){
console.log(this);
console.log(event);
this.style.backgroundColor="red"
}
obox1.onclick=function(){
console.log(this);
}
add()
function add(){
console.log(this)
}
//arguments
min(5,6,7,8)
function min(){
console.log(arguments[0]);//5
console.log(arguments[1]);//6
console.log(arguments[2]);//7
console.log(arguments[3]);//8
console.log(arguments[4]);//undefined
}
function max(){
console.log(arguments[0]);
}
max();
//
// function sum(){
// var s=0;
// for(var i=0;i<arguments.length;i++){
// s+=arguments[i];
// }
// //console.log(s);
// return s;
// }
// var sum=sum(10,9,8,7,6,5,4,3,2,1);
// console.log(sum);//55
function sum(){
var s=0;
for(var i=0;i<arguments.length;i++){
s+=arguments[i];//s=s+arguments[3]
}
//console.log(s);
return 8;
console.log(s)
}
var sum=sum(10,9,8,7,6,5,4,3,2,1);//sum=8
console.log(sum);//8
function aa(n){
if(n==3){
return;
}
for(var i=1;i<10;i++){
if(i==2){
return;//返回 后面的语句不执行
}
console.log(i);//1
}
}
aa(4);
</script>
$
封装简单的函数
function $(id){
retrun document.getElementById(id);
}
$(‘btn’).onclick=function(){
}
<body>
<div id="box">111</div>
<div id="box1"></div>
<div id="box2"></div>
<script type="text/javascript">
var obox=$("box");
var obox1=$("box1");
var obox2=$("box2");
obox.style.backgroundColor="red"
function $(id){
return document.getElementById(id)
}
</script>
</body>
函数的返回值
函数的返回值：函数的返回结果
return
1、返回函数的运算结果
return 值
如果函数里有return,那么这个函数的近观回结果就是return后面的值（运算的结果）
如果函数里没有return,那么这个函数的返回结果就是undefined
2、阻止函数继续运行
return 后面的代码是不会执行的
写一个css函数 传两个函数代表获取属性值 传三个参数代表 设置属性值
getComputedStyle(box).width
break、continue、return
break:结束循环跳出整个循环体。
continue: 退出本次循环，进入下次循环
return 返回，让函数停止执行，它只用在函数内。
This介绍
this关键字
函数中使用
函数被调用确定this的值
事件调用函数，this指向触发事件的对象
自定义属性
自定义属性
元素本身的属性 id className value innerHTML
给元素添加的属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{display: none;width:400px;height:200px;background: gray;}
</style>
</head>
<body>
<input type="button" value="111" style="background: yellow" cc=1/>
<input type="button" value="222" />
<input type="button" value="333"/>
<input type="button" value="444"/>
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<script type="text/javascript">
window.onload=function(){
var inputs=document.getElementsByTagName("input");
var divs=document.getElementsByTagName("div");
for(var i=0;i<inputs.length;i++){
inputs[i].cc=i;
inputs[i].onclick=function(){
for(var j=0;j<inputs.length;j++){
inputs[j].style.backgroundColor="";
divs[j].style.display="none";
}
this.style.backgroundColor="yellow";
divs[this.cc].style.display="block"
}
}
}
</script>
</body>
