前端入门—js第二天

1.函数

1.1函数声明

js中可以通过以下三种方法定义函数：

自定义函数
直接量声明（函数表达式声明）

使用Function函数构造法（参数必须加引号）。
区别：自定义函数和直接量声明是有区别的，自定义函数调用函数在定义之前之后都是可以了；而直接量声明只能在声明函数之后调用，否则会报错（像我下面的fun2就会报错）。

//1.自定义函数
function fun1(){
alert("我是自定义函数");
}
//函数声明之后需要调用，不然不会自动执行，执行函数可以在声明之前也可以在声明之后
//fun1();
//2.直接量声明
//fun2()   //调用函数
var fun2 = function(){
alert("我是直接量声明");
}
//3.使用Function关键字
var fun3 = new Function("var a=10,b=20;alert(a+b);");
fun3()

1.2变量提升

变量提升指的是在函数体内会把变量的声明提升到函数体的最前面，只声明但是并不给变量赋值。
例如

function fun(){
	console.log(num);
	var num = 20;
}
相当于
function fun(){
  var num;
  console.log(num);
  num = 20;
}
所以结果可想而知，在这里会报undefined的异常。

下面的输出结果是undefined和20,就是执行了变量提升，尽管前面声明了num，但是在函数里面先声明num，而且没有给赋值。

var num=10;
function fun1(){
	alert(num);
	var num = 20;
	alert(num);
}
fun1();  //调用函数

1.3函数参数

js在创建函数的同时会创建一个arguments对象用来存储函数调用时传过来的实参，arguments对象的长度由传入实参的个数决定。函数名.length可以获取函数形参的个数。根据这一方法可以判断实参和形参个数是否相同。函数实参个数多于形参个数可以调用，小于则会报错（相当于一个形参undefined）

function fun(a,b){
	console.log(a+b);
}
fun(1,2);   //3
fun(5);    //NaN
fun(4,5,6);  //9

下面判断形参和实参个数

function fun(a,b){
	if(fun.length == arguments.length){
	console.log(a+b);
}else{
	console.error("传递参数不匹配")
}
}
fun(1,2);   //3
fun(1,2,3); //传递参数不匹配

1.4两种定义变量的区别

var a=1,b=1和var a=b=1。
前者相当于var a=1;var b=1;两个变量均是局部变量。而后一个a是局部变量，b则是全局变量（隐式的全局变量）
var a=1和a=1
前者如果是在函数内声明属于局部变量，如果在函数外声明属于全局变量。后者跟上面说的一样，属于隐式的全局变量。

2.return

return有两个作用：一是设置返回值，另一个是终止代码的执行。
在函数内部使用return来设置返回值，一个函数只能有一个返回值，自定义的函数默认没有返回值。同时return后跟逗号可以终止代码的执行（比如提交表单之前的校验）。

function fun(a,b){
  if(a>b){
  //return 不仅返回函数运行的结果，如果直接用return后跟分号，是终止当前函数的执行。
  return;
  }
return a+b;
}
console.log(fun(2,1));

3.++运算

i++:先使用i，执行完再运算i=i+1;
++i:先运算i=i+1,然后在执行运算。

var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);
弹出结果是：77

4.this

this自己的，主要指事件的调用者。
innerHTML更换盒子的内容
value获取和设置表单的值
下面说一个小技巧，页面加载完毕之后自动获取焦点（例如百度搜索），鼠标滑过之后自动选中文本内容，便于用户删除搜索框的内容dom.focus()获取dom焦点，onfocus()获取焦点触发事件,dom.select()选中dom。

<head>
    <meta charset="UTF-8">
    <title>09两个表单小方法</title>
    <script>
        window.onload = function(){
            //页面加载完毕自动获取焦点
            var focus = document.getElementById("focus");
            focus.focus();
            //鼠标经过自动选中文本内容，方便用户删除
            var sel = document.getElementById("sel");
            sel.onmouseover = function(){
                this.select();   //this指事件的调用者
            }
        }
    </script>
</head>
<body>
<input type="text" id="focus"><br>
<input type="text" id="sel">
</body>

4.1输入框表单校验（基本的表单校验）

    <script>
        window.onload = function () {
            var txt = document.getElementById("name");
            txt.onfocus = function(){
                //清空
                this.value = "";
            }
            //失去焦点判断输入内容
            txt.onblur = function(){
                if(this.value==""){
                    this.value="请输入...";
                }
            }
            document.getElementsByTagName("button")[0].onclick = function(){
                if(txt.value=="" || txt.value=="请输入..."){
                    txt.value="请输入...";
                    alert("请输入内容");
                    return;  //终止代码继续向下执行
                }
                alert("正在搜索，请稍后");
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" value="请输入..." id="name">
    <button></button>
</div>
</body>

4.2金字塔

在页面输出一个金字塔的形状，可以使用for循环，使用百分比来控制hr的宽度。

<script>
for(i=1;i<=100;i+=3){
    document.write("<hr width="+i+"%>");
}
</script>
<body>
</body>

代码地址：https://git.oschina.net/catchu/web-study