javascript 学习总结第二天

Posted 2020-09-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 学习总结第二天相关的知识，希望对你有一定的参考价值。

javascript 学习总结第二天

函数和对象

对象

声明方式

newObject()

{}

构造函数

元素的操作

[]

this

对象的遍历

for in

with简便操作

函数

函数的声明方式

functiondemo(){}

var demo= function(){}

var demo= new Function(‘x‘,‘y‘,‘alert(x+y)‘);

函数的调用

在代码中直接调用

事件触发

赋值给一个变量

注意事项

优先级

在js中定义变量的时候不能跟函数名冲突否则会覆盖函数

参数

参数初始值

声明函数的时候不要给参数设置初始值 (IE浏览器有问题)

参数的个数

调用函数的参数多或者少

如果函数调用的参数个数多于函数声明的参数个数,多于的参数将被‘忽略‘ 如果函数调用的参数个数少于函数声明时的参数个数,那么没有传递的参数默认是undefined

参数可有可无

获取参数列表

arguments对象

返回值

如果不使用return返回一个值的话那么函数的默认返回值是undefined

可以返回一个函数

作用域

变量作用域

javascript代码是相通的

声明的变量只能在当前代码块和同级函数以及同级函数的子函数代码块中有效

如果在函数内部定义变量的时候不加var,那么该变量默认会称为全局变量

函数作用域

声明的函数只能在当前代码块或者同级函数或者同级函数的子函数中使用

重点掌握

对象声明方式

对象的属性和方法的操作方式

[]

this

函数的声明方式

fucntion demo(){}

var demo = function(){}

注意点

函数的命名不能跟变量的名字重名

函数参数 (arguments)

作用域

第一种声明方式

第二种方式

第三种方式构造方法

//第三种方式构造方法

functionStu(name, age, height)

{

this.name= name;

this.age= age;

this.height= height;

this.study=function()

{

alert(‘正在学习中!!!!‘);

}

this.test= function()

{

return‘我叫‘+this.name+‘,今年‘+this.age+‘,身高‘+this.height+‘的我至今有了女朋友‘;

}

//实例化

var xx = newStu(‘许晓贤‘,20,‘4450px‘);

var hua = newStu(‘况江华‘,24,‘4500px‘);

//添加属性

// xx.sex = ‘男‘;

// document.write(xx.test());

/*console.log(xx);

console.log(hua);*/

//对象的遍历

for(var i inxx) {

document.write(i+‘=======‘+xx[i]+‘<br>‘);

}

/*alert(xx.name);

alert(xx.height);

alert(xx.age);*/

with(xx){

//alert(name);

study();

}

</script>

三种声明方式

三种调用方法

<scripttype="text/javascript">

//第一种调用

functionfunc()

{

//alert(‘first‘);

}

func();

//第二种调用

functionfoo()

{

alert(‘second‘);

}

//第三种调用

functioninto()

{

alert(‘three‘);

}

var str =into;

str();

</script>

functionfunc(a, b, c)

{

//alert(a+b+c);

//2+3+undefined NaN

//console.log(a+b+c);

}

func(2,3);

//可以不加参数

functionfoo()

{

alert(‘2345‘);

}

// foo();

//获取参数列表

functioninfo()

{

//console.log(arguments.length);

//console.log(arguments); count()

vartotal = 0;

for(var i = 0; i < arguments.length; i++) {

total+= arguments[i];

};

returntotal;

}

console.log(info(10,3,5,6,7,8,3,56,76,87,98,34,54,787,98,100));

//返回值

functionbar()

{

//return 124;

//returntrue;

//return new Object();

//return null;

//return new Array(12,32);

returnfunction()

{

alert(‘今天天气挺热的!!!!!‘);

}

// console.log(bar()());

var str =bar(); //bar()---->function(){ alert(‘2345‘)}

//----------------------------------

/*var str =function()

{

alert(‘今天天气挺热的!!!!!‘);

}

// str();

/*(function()

{

alert(‘自己调用自己‘);

})()*/

</script>

var names =‘jack‘;

</script>

<scripttype="text/javascript">

alert(names+age);

</script>

变量作用域

<scripttype="text/javascript">

//变量的作用域

// var res =100;

// info =200;

var info =null;

functionfunc()

{

//alert(res);

//var res = 200;

/*functionfoo()

{

alert(res);

}

foo();*/

// varrow = 200;

row =200;

info =300;

}

func();

//alert(info);

//函数作用域

function z()

{

functionx()

{

alert(‘水哥,你黑不到我了....‘);

}

//x();

functiony()

{

function r()

{

x();

}

r();

}

y();

}

z();

</script>

添加样式

<div id=‘divs‘></div>

        <img src="" >
        <script type="text/javascript">
        //添加样式
        //获取div元素通过id  get获取  Element 元素  By通过  Id
        var divs = document.getElementById(‘divs‘);
        // console.log(divs);
        divs.style.width = ‘160px‘;
        divs.style.height = ‘160px‘;
        divs.style.background = ‘lightblue‘;
        divs.style.marginLeft = ‘100px‘;  //单驼峰
        //获取样式
        //注意: 使用style获取样式的时候只能获取行内样式的值
        var w = divs.style.width;
        var ba = divs.style.background;
        /*console.log(w);
        console.log(ba);
*/

        //设置属性
        // divs.setAttribute(‘class‘,‘cur‘);
        //divs.setAttribute(‘src‘,‘./2.jpg‘);
        //单击事件
        /*divs.onclick = function()
        {
               divs.setAttribute(‘class‘,‘cur‘);

        }*/
        //鼠标放上去的事件
        /*divs.onmouseover = function()
        {
               divs.setAttribute(‘class‘,‘cur‘);
               divs.innerhtml = ‘景水是个好‘;
               divs.style.bacgroung = ‘green‘;
               divs.style.marginLeft = ‘20px‘;
               divs.style.marginTop = ‘20px‘;
        }*/
        //鼠标离开事件
        divs.onmouseout = function()
        {
               divs.setAttribute(‘class‘,‘‘);
               divs.innerHTML = ‘‘;
               divs.style.bacgroung = ‘‘;
               divs.style.marginLeft = ‘‘;
               divs.style.marginTop = ‘‘;
        }
        //setInterval()
        //计时器
        var i = 0;
        var into = null;
        into = setInterval(function(){
               //获取左边的偏移量
               var l = divs.style.marginLeft;
               console.log(typeof(l));
               //距离的基础上+步数
               var ls = parseInt(l) + 10;
               //把改变之后的距离给到div的左边的偏移量
               divs.style.marginLeft = ls+‘px‘;
               divs.innerHTML = i++;
               // console.log(l);
               // console.log(123);
        },1000);
        divs.onmouseover = function()
        {
               clearInterval(into);
        }
        //添加文本
        // divs.innerHTML = ‘景水是个好人‘;
        /*function func(obj)
        {
               // alert(12345);
        }*/
        </script>