JS基础（2）
一，Array
1.1 概述
数组是一种特殊的数据类型，用于存放一个或一个以上的元素值
特点：
1.同一个数组可以存放任意类型的元素
2.可以通过push()方法添加元素
1.2 创建
方式一：
var 数组名 = [值1，值2，值3，…];
方式二：
var 数组名 = new Array(值1，值2，值3);
1.3 数组的访问
格式：数组名[下标/索引]
细节：如果下标/索引超过了范围，会报undefined。
1.4 数组的方法
1.join(str)：返回一个由参数连接相邻元素的字符串
2.push(ele1,ele2,ele3,…)：向数组中添加元素
二， Object
2.1 对象的创建
方式一：构造函数创建对象
var 对象名 = new Object();
对象名.属性1 = 值1;
对象名.属性2 = 值2;
对象名.方法名 = function(){
方法体
}
方式二：对象字面量，使用键值对直接创建对象
var 对象名 = {
属性1 : 值1，
属性2 : 值2,
方法名 : function(){
方法体
}
};
2.2 属性和方法的调用
1.属性的调用
对象名.属性
2.方法的调用
对象名.方法名()
2.3 练习简单的加法运算
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/test03.js">
</script>
</head>
<body>
<input type="text" id="inp1"/>
+
<input type="text" id="inp2"/>
<input type="button" value="=" onclick="calc()"/>
<input type="text" id="sum" disabled/>
</body>
</html>
JS代码
/*
1.获取第一个框中的数据
2.获取第二个框中的数据
3.求和
4.将结果放到第三个框中
*/
function calc(){
/*
* 1.要获取输入框中的数据，首先要找到这个输入框，
* 一个页面有n多个输入框，所以我们需要定位到指定的输入框标签
* 2.我们就需要为这些需要找到的输入框标签设置id属性
* 3.需要通过document.getElementById(id值)来获取指定的输入框标签对象
* 4.通过value属性获得value值
* 5.使用求和计算得到结果
* 输入框中的内容都是字符串，所以产生了拼接的效果
* 我们需要对输入框中的字符串进行转换，转换成可以进行求和运算的数值类型
* parseInt() parseFloat()
* 6.将结果写入到第三个输入框中，也就是对第三个框的value属性进行赋值
*
*/
//获取id属性值为inp1的标签对象
var inp1Obj = document.getElementById("inp1");
//获取id属性值为inp2的标签对象
var inp2Obj = document.getElementById("inp2");
//获取id属性值为sum的标签对象
var sumObj = document.getElementById("sum");
//通过value属性获取值
var inp1Value = inp1Obj.value;
var inp2Value = inp2Obj.value;
//判断是否是空的
if(inp1Value.length == 0 || inp2Value.length == 0){
sumObj.value = "";
alert("请输入内容");
return;
}
//判断是否是数值形式的字符串
if(isNaN(inp1Value)||isNaN(inp2Value)){
sumObj.value = "";
alert("内容必须是数值");
return;
}
//将字符串转换成数值
var inp1 = parseFloat(inp1Value);
var inp2 = parseFloat(inp2Value);
//求和
var sum = inp1 + inp2;
sumObj.value = sum;
}
三，函数
3.1 自定义函数
3.1.1 概述
函数是被设计为执行特定任务的代码块。
函数在被调用时才会执行。
3.1.2 语法
格式：
function 函数名(参数列表){
要执行的代码（方法体）
}
function：函数必须通过function关键字进行定义
函数名：就是标识符
参数列表：形式参数，与Java相同，但是不需要写数据类型
方法体：要执行的功能
3.1.3 函数调用
情况：
1.事件发生时
2.其他js代码调用时
3.自调用
(function f1(a,b){
alert(a+b);
})(1,19);
(function f2(a){
alert(a*a);
}(9));
注：匿名函数也可以自调用
3.1.4 函数的参数
参数与Java中函数的参数相同，
定义方法时的参数是形式参数（不需要声明形参的类型），
调用方法时的参数是实际参数。
注：
1.当出现同名方法时，后写方法会覆盖前面的方法，当进行调用时，调用的后写的方法。
2.事件发生时，调用方法的参数是this，表示传递的参数是发生事件的这个标签自身的对象
3.1.5 函数返回值
js中的函数没有返回类型
使用关键字return进行返回，
return的作用：
1.结束方法
2.结束方法的同时将方法的运算结果返回给调用者
3.2 匿名函数
3.2.1 概述
所谓匿名函数，就是没有名字的函数。
例如：
function(参数列表){
方法体
}
3.2.2 匿名函数调用
方式一：用一个变量接收此匿名函数，这个变量名其实就相当于这个函数的函数名。
var func = function(i,j,k){
alert(i + j + k);
}
func(1,2,3);
方式二：自调用
(function(){
var btn1 = document.getElementsByTagName("input")[0];
var btn2 = document.getElementsByTagName("input")[1];
btn1.style.color = "red";
btn2.style.background = "pink";
})();
方式三：使用事件进行调用
onload = function(){
var btnObj = document.getElementById("btn");
btnObj.onclick = function(){
alert(789);
}
}
方式四：将此匿名方法作为对象的方法调用
var person = new Object();
person.show = function(){
alert(666);
};
person.show();
var human = {
print : function(){
alert("abc");
}
};
human.print();
方式五：将匿名函数作为另一个函数的参数
function f(t){
t();
}
f(function(){
alert(789);
});
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
