在线学习JavaScript——Day2

编程入门行业动态更新时间:2024-10-12 03:26:32

在线学习JavaScript——Day2

啊！越学越感觉js的性格非常的彪悍and随性！

js的函数学习

问题

目前我们声明的js代码都是直接在script代码域中声明的。代码域中的代码，在浏览器解析网页的时候会立即执行，而我们希望js代码不要立即执行，而是根据用户的行为动作来触发执行，怎么办？

解决

script代码域是js代码的声明区域同时也是调用区域。如果我们有一块代码，不希望立即执行，但是需要声明！就需要在js中发明一种机制，代码使用该机制声明后不会立即触发，除非告诉浏览器需要触发，才会执行。

实现

js的函数。（在java里，则体现为方法的声明——调用）

内容

1、函数的声明

方式一：function 函数名(形参列表){函数体}

//声明方式一：function testA(a,b){alert("我是testA");}

方式二：var 变量名=function 函数名(形参列表){函数体}

//声明方式二： var testB=function(){alert("我是testB");}

方式三：var 变量名=new Function(“形参名”,“形参名”,…,“函数体”);
注意：在js里，函数是以对象的形式存在的！！


//声明方式三： 把函数的形参和函数体都存到了Function这个对象里了var testC=new Function("a","b","alert('我是testC');");//a,b相当于方法一中testA(a,b)，是形参//"alert('我是testC');" ，是函数体//所以一个Function对象，就相当于存了一个具体点函数了//所以testB相当于是testC的简写

2、函数的形参:

函数在调用的时候形参可以全部赋值、部分赋值、甚至不赋值！
函数的形参可以接受任何类型的数据。
(活的真的挺粗糙的，精致这个词语跟js都不搭边）

//函数的形参function testA1(a,b,c){alert("函数的形参："+a+" "+b+" "+c);}testA1(1,2,"ccc");

3、函数的返回值

没有return语句，则默认返回undefined；有return语句，则按照return语句的内容返回。

//函数的返回值function testB1(){alert("函数的返回值");return"66666";}var hh=testB1();alert(hh);

4、函数的调用

本质：
当我们声明一个函数时，其实底层是声明了一个变量指向一个函数对象。当我们只对变量进行操作时，函数不会触发执行。当使用变量名() 时，会触发变量指向的函数的执行！

//函数的调用var testD=function(){alert("函数的调用");}alert(testD);//相当于打印一下testD的值alert(testD());//相当于告诉浏览器调用testD,alert打印的是它的返回值

5、函数作为参数传值

testX(function() 函数名(){函数体})

//函数作为参数传递var testE=function(){alert("我是testE函数");}function testF(a){alert(a);}testF(testE);   //相当于调用testF 打印的返回值为：testE的值function testG(a){alert(a());}   //这个a()是精髓testG(testE);   //相当于调用testG打印的返回值为：testE(),即调用testE打印testE的返回值testG(function(){alert("我是testE函数的替身");});   //跟以上一个运行效果//函数可以作为实参直接传递给另一个函数//相当于简化了java中 “通过反射把方法作为实参传递并在方法内部调用” 的过程

作用：

封装代码片段，降低代码冗余！

js的对象学习

问题

我们在学习了js的函数声明后，可以使用函数完成代码片段的封装。
但是函数的数量多了，也不好管理，怎么办？

解决

使用对象进行封装

内容

\quad js的对象声明

方法一：（比较不适合代码的阅读，不建议使用）

//方式一：var obj=new Object();   //声明了一个空对象  可以理解为：在堆内存里面开辟了一块空间，里面什么都没存obj.uname="果叽";obj.age="20";obj.testA=function(){alert("美滋滋");}//java是吃套餐，JS是吃自助，给个空盘子，想吃啥吃啥alert(obj.uname);obj.testA();

方法二：
\quad var 对象名={
\quad \quad 键名:值,
\quad \quad 键名:值,
\quad \quad …
\quad }

//方式二：var obj2={uname:"啵叽果叽",age:"18",testB:function(){alert("最可爱");}}alert(obj2.uname);obj2.testB();

作用

开辟一个内存空间存储数据，作为整体进行操作。

特点

js的对象创建不需要类，直接进行创建，直接进行使用。
(想要啥直接往里面扔就行，没有类的束缚力，彻底的放飞自我了)

js的常用对象和方法

String对象
在js用户指南 - 语言参考 - js对象 - String对象 - 方法


function testString(){var s="abcdefg";//indexOf方法：返回字符串中第一次出现的指定字符的位置alert(s.indexOf('a'));//toUpperCase方法：小写变大写alert(s.toUpperCase());//toLowerCasef方法：大写变小写alert(s.toLowerCase());//substring方法：截取对象指定位置的子str，含头不含尾，substring(start,end);alert(s.substring(0,2));//substr方法：从指定位置开始 截取指定长度的子str，含头不含尾，substr(start[,length]);alert(s.substr(1,3));
}
testString();

Date对象
在js用户指南 - 语言参考 - js对象 - Date对象 - 方法


function testDate(){var d=new Date();   //存储当前代码存储的系统时间，存储的是客户端浏览器的时间//getFullYear方法：返回当前的年份alert(d.getFullYear())   //getMonth方法：返回当前的月份（一月为0） alert(d.getMonth()+1);//getDate方法：返回当前的日期//getDay方法：返回当前的星期（周日为0）//getHours方法：返回当前的小时//getMinutes方法：返回当前的分钟//getSecondsr方法：返回当前的秒钟
}
testDate();

Math对象
在js用户指南 - 语言参考 - js对象 - Math对象 - 方法
Math对象，不能new


function testMath(){//abs方法：取绝对值alert(Math.abs(-2));//ceil方法：向上取整alert(Math.ceil(3.14));   //返回4//floor方法：向下取证alert(Math.floor(3.14));   //返回3//random方法：取0～1随机数alert(Math.random());//round方法：sswralert(Math.round(8.88));   //返回9
}
//testMath();

Global对象
在js用户指南 - 语言参考 - js对象 - Global对象 - 方法
不能new，不需要Global.方法名了，直接用方法名


function testGlobal(){var s="var a='123'";//eval方法：把字符串转换成js代码运行执行 - 非常牛！实现动态执行，实现后台控制前台的一个动作eval(s)alert(a);var os="{uname:'果果'，age:12}"   //json字符串eval("var obj="+os);   alert(obj.uname);

js的事件机制

问题

目前我们可以在html网页中声明js代码域，并使用函数在代码中封装js逻辑代码片段。但是现在函数声明好后，我们仍然是直接在js的代码域中触发执行，代码域中的执行级别是非常高的，网页的html还没被解析，函数就已经执行过了，而我们希望函数的执行是根据用户在页中的行为动作来出发的，怎么办？

解决

事件机制

内容

1、鼠标事件

//鼠标事件//单击事件function testClick(){alert("快走...照顾好狗子...");}//双击事件function testDbClick(){alert("我是双击事件");}//鼠标移动进入事件function testMouseOver(){alert("我进来了！");}//鼠标移动出去事件function testMouseOut(){alert("我出来了！");}//鼠标移动事件function testMouseMove(){alert("我移动了！");}

<body>
<!-- 鼠标事件 --><input type="button" value="鼠标单击事件" onclick="testClick()"/><input type="button" value="鼠标双击事件" ondblclick="testDbClick()"/><br /><br /><div onmousemove="testMouseMove()" onmouseout="testMouseOut()" onmouseover="testMouseOver()" style="border: solid 1px;width 100px;height: 100px;"></div>   
</body>

2、键盘事件


//键盘事件//键盘下压事件function testkeyDown(){console.log("下压了");}//键盘弹起事件function testkeyup(){console.log("弹起了");}

<body>
<!-- 键盘事件 -->键盘下压事件：<input type="test" value="" onkeydown="testkeyDown()"/><br/>键盘下压事件：<input type="test" value="" onkeyup="testkeyup()"/><br/>
</body>

3、焦点事件

//焦点事件//获取焦点function testFocus(){console.log("获取到焦点了!");}//失去焦点（意味着录入元素结束了）function testBlur(){console.log("失去焦点了!");}

<body>
<!-- 焦点事件 -->获取焦点事件：<input type=""  value="" onfocus="testFocus()" /><br/>失去焦点事件：<input type=""  value="" onblur="testBlur()" /><br/>
</body>

4、其他事件

//其他事件//值改变事件function testChange(){alert("值改变了！");}//页面加载事件function testLode(){console.log("页面被加载了！");}

<body onload="testLode()">
<!-- 其他事件 --><!-- 值改变事件 -->值改变事件：<select name="" id="" onchange="testChange()"><option value="">北京</option><option value="">上海</option><option value="">义乌</option></select>
</body>