JavaScript-高级进阶

day03-JavaScript高级

1、js的函数定义（三种方式）
 一、使用关键字  function 方法名称(参数列表) { 方法体和返回值 }
         注意1：参数列表中的参数不需要写类型（var），直接写参数名称
         注意2：返回值，根据实际需要可以有也可以没有
      例1：function test1() { alert("123456");}//定义函数
      test1();//调用函数test1()
 例2：function add1(a,b) {var sum = a+b; return sum;}
      alert(add1(2,3));  //调用函数add1()

 二、匿名函数，使用关键字function(参数列表) { 方法体和返回值; }
 例： var test1 = function(a,b) { return a+b;}
      alert(test1(3,4));  //调用test1()

 三、动态函数（方法体和返回值、参数列表都由参数传递）
 释：用js内置对象 new Function("参数列表","方法体和返回值")
 例：var param = "a,b";
     var method = "var sum;sum=a+b;return sum;";
     var test2 = new Function(param,method);
     alert(test2(5,6));  //调用函数test2()

2、js的函数重载(js中不存在重载，但可通过js函数的arguments数组模拟重载的效果)
    （1）原理：js里面有一个数组arguments用来保存传递进来的参数，利用此数组可模拟重载的效果
    （2）模拟重载的效果
     function add1() {
  for(var i=0;i    alert(arguments[i]);
  }  
  var sum = 0;
  for(var i=0;i    sum += arguments[i];
  }
  return sum;
 }
 alert(add1(1,2));     
 alert(add1(1,2,3));   
 alert(add1(1,2,3,4));

3、js的事件
 （1）事件作用：在html的标签上可通过触发事件调用js里面的函数
 （2）使用事件（三种方式）
 1：使用事件属性调用js方法
 例：

 2：获取绑定的标签，再使用事件的属性
 例：document.getElementById("buttonid").onclick = add1;

 3：首先得到要绑定的标签，写js的代码
 例：document.getElementById("buttonid1").onclick = function() {
   alert("aaaaa");};

4、js的常用的事件
 （1）onload事件和onclick事件
      onload：html页面加载时触发事件    例：
 onclick：鼠标点击事件             例：

 （2）其他事件
 onfocus：获取焦点
 onblur：失去焦点
 onmouseover 鼠标被移到某元素之上
 onmouseout 鼠标从某元素移开
      onkeypress：键盘按下触发
 例：
      function key1(obj) {
     alert(obj.keyCode);//若按下回车键，取得其对应值13
     if(obj.keyCode==13) { alert("key1");}
      }

5、js的dom对象（document  object  model：文档对象模型）
 （1）概念   文档：指的是标记型文档（html、xml）
            对象：在对象里面有属性和方法
 （2）作用  使用dom里面提供对象的属性和方法，对标记型文档进行操作（先解析）
 （3）使用dom解析标记型文档html（html中包含 标签、属性、文本内容）
 解析过程：根据html的层级结构在内存中分配一个树形结构
   document对象，代表整个文档
   element对象，代表标签
   attribute属性对象
   text文本对象
   Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找

 （4）DHTML简介（很多技术的统称）
      包含技术有：html（封装数据）         css（使用属性和属性值修改数据的样式）
            ECMAScript（语句和语法）  DOM：对标记型文档进行操作

6、document对象（代表整个文档）
 （1）主要方法
 1.write()  向页面输出内容，可以输出html代码
  例：document.write("aa");  例： document.write("

---

");

 2.getElementById() 通过标签的id值获取标签对象
  例：var input1 = document.getElementById("textid");
      document.write(input1.value);

 3：getElementsByName(): 根据标签name属性值得到多个标签对象的数组
  例：var inputs1 = document.getElementsByName("name1");
      for(var i=0;i      var input1 = inputs1[i];
     alert(input1.value);
      }
        注意：若只有一个标签，该方法返回的仍是一个数组，但可直接使用数组的下标获取值
  例：var inputs2 = document.getElementsByName("name2");
      alert(inputs2[0].value);

 4：getElementsByTagName()：根据标签的名称获取标签对象，返回数组
  例：var inputs3 = document.getElementsByTagName("input");
      for(var i=0;i       alert(inputs3[i].value);
      }
         注意：若只有一个标签，该方法返回的仍是一个数组，但可直接使用数组的下标获取值
  例：var arr = document.getElementsByTagName("input");
      alert(arr[0].value);

7、innerHTML属性（不是dom里面属性）
 功能1，获取标签里面的文本内容
  例：var span1 = document.getElementById("spanid");
      alert(span1.innerHTML);

 功能2，向标签内设置内容（可以写html代码）（会覆盖原标签内容）
  例：var div1 = document.getElementById("div1");
      div1.innerHTML = "

aaa

bbb

";

8、练习：动态生成表格（点击生成按钮，根据行列数生成对应的表格）
 （1）实现的步骤
    1.创建页面，在页面中包含两个普通输入项和按钮（有事件）
    2.首先得到输入的行和列
         3.根据行和列生成表格
    4.循环行
    5.在行里面循环单元格

 （2）代码实现
  function add1() {
  var hang = document.getElementById("hid").value;
  var lie = document.getElementById("lid").value;
  var tab = "";
  for(var i=1;i<=hang;i++) {
   tab += "";
   for(var j=1;j<=lie;j++) {
    tab += "";
   }
   tab += "";
  }
  tab += "

aaaaa

";
  var div1 = document.getElementById("div1");
  div1.innerHTML = tab;
  }

9、表单的提交（form标签）方式
 第一种：form标签内提交按钮提交
  例：

     username:

     password:

    
     

  
 第二种：form标签内普通按钮提交
  例：function form01() {
   var form01 = document.getElementById("form01");
   form01.submit();
      }

 第三种：使用超链接提交数据
 释：超链接
 例：超链接提交数据

10、表单校验（规范数据的输入格式）
 （2）表单校验步骤
 第一种：submit提交表单校验。（在form标签里面，使用onsubmit事件）
   释：

  return返回值为true才提交表单
   例：function checkForm() {
     var username = document.getElementById("usernameid").value;
     var password = document.getElementById("passwordid").value;
     if(username == "") {
     alert("用户名不能为空");
     return false;
     }
     if(password == "") {
   alert("密码不能为空");
   return false;
     }
     return true;
       }

 第二种：button提交表单的校验
    释：function form01() {
    例：var username = document.getElementById("usernameid").value;
  var password = document.getElementById("passwordid").value;
  if(username == "") {
   alert("用户名不能为空");
  } else if(password == "") {
   alert("密码不能为空");
  } else {
   var form01 = document.getElementById("form01");
   form01.submit();
  }
 }
 
11、json简介（JavaScript Object  Notation ：JavaScript对象表示法）
 （1）json是数据的交换格式，比xml更加轻巧。
 json是js的原生的格式，可通过js直接操作json格式数据，不需要依赖其他东西。
 （2）json数据格式（两种）
    1.：json的对象格式  {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
        说明1：类似于key-value形式 
       2：名称和值之间使用冒号隔开，多个值之间使用逗号隔开
       3：json数据的名称是字符串类型，json数据值类型string, number, object, array, true, false, null
    例：{"name":"zhangsan","age":20,"addr":"nanjing"}

    2.：json的数组格式  [json对象1,json对象2........]
    说明：在数组里面有多个json对象，多个json对象之间使用逗号进行隔开
    例：[{"name":"lucy","age":20},{"name":"mary","age":30}]
 
 （3）可以使用json的这两种格式组成更加复杂json的格式
    例：{"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

12、js解析json
 （1）js解析json对象的数据格式（由json对象数据格式里的name得到name对应的值）
  例：var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
      document.write(json1.username+"
");
      document.write(json1.age+"
");
      document.write(json1.addr);

 （2）js解析json的数组的数据格式
    释：遍历json数组，得到json数组每个json对象，解析每个json对象，根据对象的数据名称得到值。
    例：var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
      {"username":"lisi","age":30,"addr":"tianjin"},
      {"username":"wangnwu","age":40,"addr":"nanjing"}];
    document.write(json2[1].age+""
"");   //得到第二个json对象里面的age对应值
    document.write(json2[0].addr+"
");    //得到第一个json对象里面的addr对应值
    for(var i=0;i    var person = json2[i];
   var username = person.username;
   var age = person.age;
   var addr = person.addr;
   document.write("username:"+username+" ;age:"+age+" ;addr:"+addr+"
");
  }

13、json练习：人员信息的显示
 要求：把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面。
 例：var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
          {"name":"lisi","age":30,"addr":"tinajin"},
          {"name":"wangwu","age":40,"addr":"nanjing"}];
    function showData() {
  var tab = "";
  tab += "";
  for(var i=0;i    var person = persons[i];
   var name = person.name;
   var age = person.age;
   var addr = person.addr;
   tab += "";
  }
  tab += "

姓名	年龄	地址
"+name+"	"+age+"	"+addr+"

";
  var div1 = document.getElementById("div1");
  div1.innerHTML = tab;
 }