今日完成:
1.push完整的概念
2.splice完整的概念
3.console.log()在实际中的应用
4.函数理解混乱,还是要再次梳理
5.dom操作添加元素
1.
JavaScript push() 方法
定义和用法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。
语法:
array(目标数组).push(item1, item2, ..., itemX)
参数 | 描述 |
item1, item2, ..., itemX | 必需。要添加到数组的元素。 |
ex:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple")
显示:Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple
用法描述:
1.push()写在声明的数组(fruits)语句之后,
2.push()完整的语句,前面是push()的作用数组,用点(.)连接;
ex:目标数组名.push();
3.括号内是向数组内添加的新元素(具体数值),添加多个数值,用逗号(,)隔开;
(字符串加引号)
2.
JavaScript splice() 方法
定义和用法
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
语法
array(目标数组).splice(index,howmany,item1,.....,itemX)
(这两个在实际中的表达都是数字)
| 参数 | 描述 |
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 |
howmany | 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 |
item1, ..., itemX | 可选。要添加到数组的新元素 |
| Type | 描述 |
Array | 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 |
ex:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
显示(输出结果):Banana,Orange
描述:从第三个位置开始删除数组后的两个元素
ex:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
显示:Banana,Orange,Lemon,Kiwi,Mango
描述:移除数组的第三个元素，并在数组第三个位置添加新元素
-------------------------------------------------------------------
3.
JavaScript Console 对象
主要是console.log()
Console 对象用于 JavaScript 调试。
JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。
Console 对象常见的两个用途：
显示网页代码运行时的错误信息。
提供了一个命令行接口，用来与网页代码互动。
方法 | 描述 | 实例 |
| log() | 输出信息 | console.log("runoob") |
| info() | console.log 别名，输出信息 | console.info("runoob") |
| error() | 输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。 | console.error("Error: %s (%i)", "Server is not responding",500) |
| warn() | 输出警告信息 | console.warn("警告") |
...
常用的console调试命令
ex:
js
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
显示:
f12=>点击Console显示:
最常用的就是 console.log 。
...
之后的有点不好理解,需要时再学
...
console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）
4.
函数 function
引用数据类型中的函数类型
几乎所有的事件绑定最终绑定的都是function()
从形象角度来讲,函数就是一个方法或者一个功能体
函数就是把实现某个功能的代码放到一起进行封装,以后想要操作实现这个功能,只需要把函数执行即可(封装)
封装的目的;减少页面中的冗余代码,提高代码的重复使用率 (低耦合高内聚)
事例结合自己的理解,用比喻来描述:
以洗衣机比喻一个函数,生产洗衣机就是封装一个函数,(把实现某些功能的代码封装进来,比如在洗衣机上就是手洗的过程,在代码中,可以是判断语句的过程,可以是循环的过程),
生产的时候,不知道用户洗衣服的时候放什么样的水,衣服,洗衣液,需要提供一个入口(提供的入口叫做形参,执行的时候放的具体东西叫做实参),就是function(形参)中,的形参,
洗衣服需要拿出来,洗衣机提供一个出口(在函数中叫做返回值:把函数处理后的结果能够返回给外面用)
创建函数时要做的:(函数两部分组成:创建+执行)
1.形参(不知道具体放什么,有个代表,名字)
2.返回值
function 函数名(形参变量,...,){//可以创建多个变量,变量之间用逗号隔开
//函数体:基于js完成需要实现的功能
return[处理后的结果];
}
执行函数(用这个洗衣机,用函数)要做的:
实参 (放的什么)
函数名(实参,...);//函数名后面加小括号,执行,执行时,括号中放实参,多个逗号隔开
----------------------------------------------------------------------------------------------------
因为,js语句在页面中是不显示的,
要查看js语句是否在运行,运行的结果是什么或者说值是什么,需要用到console.log(xxx),xxx就是目标,可以是名称,也可以是语句段,查看有没有运行,输出结果
ex:
简单计算10乘以10再除以3
var x=10;
// x*=10;
//x/=3;
x=x*10;
x=x/3;
console.log(x)
想要查看x的值,直接查看是没有结果的,需要借用console.log(x),这里目标是x,把x的运行结果传到控制台,可以在控制台查看x的值,看看是否产生运算并输出结果,
x*=10(自身乘以10)跟x=x*10,效果一样,两种不同的写法,按照顺序运算
控制台显示:
所以得出,x正常运算,并得到想要的结果
ps:这都是运行在js语句内部的,在正常的html文件中,没有任何显示,比如要在html中显示x的值,就需要其他元素调用
(混淆的点,js内部的调用,js外部调用,调用的表现形式之类,生效不生效,)
同时,验证了console.log()的实际应用
收获:同上
遇到问题:
js知识点,看似看完了,但是一写,就发现跟自己想的不一样,感觉又全是坑的感觉
解决:不能在别人的仅仅在例子中,添加代码看效果,而是自己从零开始写demo,验证别人的,代码,
这中间就有可能出现自己忽视,但是别人代码已经解决的问题,这时候对照还好解决
而不是在一个复合的js语句中,出了错误,直接抓瞎,不知道从哪里下手
明日计划:
看情况把,理解能力太差了,多写代码,先把基础理解透彻把,火急火燎赶任务,也会重复css过程,在各种坑上,又把时间给消耗掉
返回列表
评论