从零开始学java（7）

day7

今天继续看看javascript。

13.JavaScript数组

一个变量只能够保存1个数据，今天介绍的数组实际上就是一个特殊的变量，可以保存多个数据

1.定义空数组
var arr1=[];
var arr2=new Array();

2.定义非空数组:
var arr3=[1,“charles”,“1234”,99.99,true];

<1>.如何往空数组里面存数据
var arr1=[];
arr1.push(88);
arr1.push(78);
arr1.push(98);
或者
arr1[0]=88;
arr1[1]=78;
arr1[2]=98;

<2>.如何从数组中拿数据
根据下标拿数据 (下标从0开始计数 0代表获取数组中的第一个元素。。。)
arr1[0];//获取数组中的第一个数据
arr1[1];//获取数组中的第一个数据
…依次类推

<3>.删除数组中的数据
th1:开始删除的起始下标
th2：删除的长度是多少 如果想要删除指定位置 长度定为1即可。
arr1.splice(th1,th2);

数组的应用实例:

<script type="text/javascript">
        //定义一个空数组。。。
        var arr1=new Array();
        //往空数组里面顺序添加数据
        arr1.push(88);
        arr1.push(78);
        arr1.push(98);
        //另一种方式往数组中保存数据
        arr1[3]="jack";//继续添加
        arr1[4]="charles";//继续添加
        arr1[5]=true;//继续添加
        arr1[9]=100;//继续添加

        //根据下标获取数组中的数据
        document.write("获取数组中正常的元素:"+arr1[4]+"<br>")
        document.write("没有赋值的中间元素:"+arr1[6]+"<br>");
        document.write("数组的长度:"+arr1.length+"<br>")
        document.write("数组的所有元素:"+arr1+"<br>");
        //注意:
        //1.数组下标从0开始计数。。。
        //2.数组的长度= 数组的最大下标+1;  arr1.length=最大下标加1。。。
        //删除数组中的数据  (指定位置删除)
        arr1.splice(9,1);
        document.write("删除元素之后数组的所有元素:"+arr1+"<br>");
        //从下标6开始逐后删除 ，删除3个元素  (指定范围删除)
        arr1.splice(6,3);
        document.write("删除元素之后数组的所有元素:"+arr1+"<br>");
        //清空数组中的所有元素 (清空所有元素)
        arr1.splice(0,arr1.length);
        document.write("删除元素之后数组的所有元素:"+arr1+"<br>");

        //扩展一种方式删除元素。。。
        var arr2=[1,4,8,9,100];
        //逐后删除元素
        document.write("删除之前:"+arr2+"<br>");
        arr2.length=arr2.length-1;//长度-1 等价于 最大下标-1
        document.write("删除之后:"+arr2+"<br>");

        //清空数组
        arr2.length=0;
        document.write("清空数组之后:"+arr2+"<br>");

        //var arr3=[4,100,9,10,78,88];
        //1.要求使用循环将数组中的数据 全部顺序取出。。。
        //2.试着将数组中的数据倒序取出 (使用循环。。。)
        var arr3=[4,100,9,10,78,88];
        document.write("顺序打印<br>");
        for(var i=0;i<arr3.length;i++){
            document.write(arr3[i]+"<br>");
        }
        document.write("倒序打印<br>");
        for(var i=0;i<arr3.length;i++){
            document.write(arr3[arr3.length-1-i]+"<br>");
        }


    </script>

14.函数

函数的作用将一些重复执行的操作封装起来 ，减少代码的冗余，提高开发效率。
就学习者而言：我们只需要关注函数的作用是什么，函数怎么用，需要传递那些数据就可以了，至于底层怎么去实现的我们完全可以不用关注。

定义函数:
函数的名称命名规范跟变量的命名规范一样(小驼峰命名法，看起名，知其意)

//1.对于参数得到个数没有限制 可以没有 也可以有多个
//2.参数与参数之间用逗号隔开。

function 自定义的函数名称(参数1，参数2){
//执行我们需要的逻辑或者方法
}

调用函数: 函数名(参数1对应的数据,参数2对应的数据)

无返回值的函数：
应用举例
遍历数组:var arr1=[1,4,5,100];
//1.arr就是我们函数的参数，参数不需要var关键字声明

function showArray(arr){
    for(var i=0;i<arr.length;i++){
        document.write(arr[i]+"<br>");
    }
}

    //2.调用函数 如果有参数 必须传递对应类型的数据至函数

 var arr1=[1,5,6,9,10];
   showArray(arr1);
    var arr2=["jack","rouse","marry","tina"];
    showArray(arr2);  

有返回值的函数：

对数组中的数据进行求和
//1.定义求和函数

 function arrSum(arr){
      var sum=0;
        for(var i=0;i<arr.length;i++){
            sum+=arr[i];
        }
        return sum;
    }

var sumArray=arrSum(arr1);
document.write("数组求和之后的结果为:"+sumArray+"<br>");

调用有返回值函数 最终函数返回的结果就是 return后面的结果。

15.常用函数

数学函数：Math来调用
求幂函数: Math.pow(x,y);//x^y
向上取整数: Math.ceil(小数)
向下取整数: Math.floor(小数);
求随机数: Math.random(); – 0-1之间的随机小数
求绝对值: Math.abs(数值);

拓展：
//parseInt(100*Math.random()) [0.100)之间得到整数。
//总结公式 ：对于任意区间[a,b)；
//parseInt((b-a)*Math.random())+a;

//举例子说明 :产生一个随机4位数。。。[1000,10000);
for(var i=0;i<100;i++){
    var luckyNum=parseInt(9000*Math.random())+1000;
    document.write(luckyNum+"<br>");
}

日期函数 Date()：
//得到当前系统的时间。。。
var nowTime=new Date();
document.write(“年月日时分秒:”+nowTime.toLocaleString()+"
");
document.write(“年月日:”+nowTime.toLocaleDateString()+"
");
document.write(“时分秒:”+nowTime.toLocaleTimeString()+"
");

字符串函数

indexOf("") ：根据指定子串返回子串第一次出现的下标(索引)位置 。
lastIndexOf("")：根据指定子串返回子串最后一次出现的下标(索引)位置 。

注意：不存在就返回-1

replace(oldStr,newStr)：将第一次出现的oldStr换成 newStr新字符串。

trim() ：去掉左右空格

toUpperCase():全部变成大写
toLowerCase():全部变成小写

length:返回字符串的长度

charAt(index)：根据下标返回单个字符串
charCodeAt(index)：根据下标返回单个字符串的Unicode编码值。

函数
eval()：用来计算字符串中的数学运算结果

 var evlStr="-20-92/10";
  alert(eval(evlStr));//得到显示为-29.2

16.JS Dom操作

dom:document Object Moudel文档对象模型 简称DOM

学习DOM的目的是为了 通过JS代码 动态的操作HTML标签(动态操作网页元素，添加，删除，修改等操作)；

一般情况下 通过DOM结合之前的循环 可以实现 动态的批量产生的HTML标签。

以超链接为例子进行解释说明文档对象模型：

<a href="#">超链接</a>

DOM对象的3大节点（任何标签都拥有与之对应的DOM对象，只要得到对应标签的DOM对象就可以操作此标签的3大节点）

<a></a>:称之为:元素节点
href="#"：称之为属性节点
超链接里面的内容:称之为文本节点。。。

格式：

<script type="text/javascript">
        //dom入口程序
        //当标签全部加载完毕的时候此代码自动执行。。。
        //先要有标签，才能获取对应的DOM对象。。。
		window.onload=function(){
            var p1=document.getElementById("p1");
            //获取dom对象里面的文本节点：DOM对象.innerHTML
            //1.修改
            p1.innerHTML="你正在修改，第一个段落的文本节点。。。";
            //2.添加属性节点
            p1.className="class-1";
            p1.title="测试属性";
        }
    </script>

1.操作文本节点
dom对象.innerHTML

2.属性节点
dom对象.属性名字
属性节点这一块 引入一个新的概念
动态添加CSS样式 (内嵌方式) ：

 <p style="color:red;">hello world</p>

获取表单的值：
表单的dom对象.value; //拿到的是 表单的值

对于表单，你输入的内容 或者你选择的按钮 或者选项是什么 value就是什么。

想要能够动态操作html标签，必须要先得到标签对应DOM对象
提供一下几种常用的操作获取对应标签的DOM对象：

1.根据标签的id属性值获取单个标签对象
var p1=document.getElementById(“p1”);//p1就是第一个p标签对应dom对象
var p2=document.getElementById(“p2”);//p2就是第二个p标签对应的dom对象。。

<p id="p1"></p>
<p id="p2"></p>

2.根据标签的name属性值获取标签dom对象（一般针对表单 复选框 ） 返回得到是一个dom对象数组。。。
getElementsByName(“hobby”);

3.根据标签的名字获取标签dom对象（根据标签的名字 input p,div） 返回的也是dom对象数组。
getElementsByTagName(“input”);

事件
//1.点击绑定onclick事件的标签 指定的函数就会被调用一次
οnclick=“函数名(实参)”;
//当改变标签的状态或者值的时候 就会调用指定的函数
οnchange=“函数名(实参)”；

17.json 对象

json对象 就是由大括号 括起来的内容
由属性和属性值这样的格式组成
属性与数值之间用冒号隔开 不同属性之间用分号隔开。。。
json作用是保存 后端返回的数据

1个json对象可以保存1个用户信息(id,uname,upass,address)
var json1={
“id”：1，
“uname”:“charles”,
“upass”:“1234”,
“address”:“上海”
}

获取json对象中的数据 一般根据属性名称或者属性值
json1.id
json1.uname
json1.upass
…

如果想要保存多个用户信息。
json对象数组[{},{},{}] 实际上就是将json对象作为数组的元素。