前端基本功—js第二天

来源：互联网发布：教学质量分析软件编辑：程序博客网时间：2024/06/04 23:36

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);   //3fun(5);    //NaNfun(4,5,6);  //9

下面判断形参和实参个数

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

阅读全文

1 0