JAVA Web day03--- Android小白的第三天学习笔记

3.5.6、Math对象（了解）

无需创建，直接Math.方法来进行使用。（内置对象）

Math方法

random()

随机生成0~1数字

round(x)

对X进行四舍五入

3.5.7、RegExp对象（重点）

* var reg = new RegExp("表达式"); （开发中基本不用）

* var reg = /^表达式$/ 直接量（开发中常用）

直接量中存在边界，即^代表开始，$代表结束

/^表达式$/    只要有不符合正则的字符存在，即为false。全部符合为true（检查严格，眼睛不揉沙子）

/表达式/        只要有符合正则的字符存在，即为true，全部不符合为false（检查不严格，懒人思想）

RegExp方法

test(string)

符合规则返回true，不符合返回false

例如：

if(reg.test("12345")){

// 

}else{

// 

}

JavaScript高级

一、函数（重点）

1、基本语法

*用于代码封装，提高复用性

*格式 function 函数名(参数列表){

函数体;

return;

}

*函数定义，关键字 function，就相当于 public static 

*定义参数列表时，不必使用var关键字，否则报错

*如果没有return的具体参数值，函数会默认返回undefined。【只写return，或者忽略return都会返回undefined】

*函数需要调用才能执行，和Java一样。

思考：以下调用打印结果为：

function add(a,b,c){

alert("abc");

}

function add(a,b){

alert("ab");

}

add(1,2);

A. Abc

B. ab

C. 无输出结果，程序错误，JS代码停止运行

*JavaScript不存在重载形式：

>因为每个JavaScript函数中，都存在一个数组arguments，用于存储参数列表

arguments.length;//可以查看传入几个参数

arguments[0];//可以查看传入的第一个参数值

>JavaScript

思考：如下调用方法会打印输出什么效果？

function getSum(){

return 100;

}

var sum = getSum;//赋予sum地址值

alert(sum);//sum.toString()

A. 100

B. undefined

C. function getSum(){return 100;}

*如果调用方法时忘记加()，那么会把函数对象在内存中的引用 传给变量。

注：函数即对象。对象即函数

思考：如下调用方法会打印输出什么效果？（变形题）

function getSum(){

return 100;

}

var sum = getSum;

alert(sum());

D. 100

E. undefined

F. function getSum(){return 100;}

2、全局函数

Global对象（内置对象）

游离的函数，直接拿过来用。

eval() 可以解析字符串，执行里面的javascript的代码

注：只可以传递原始数据类型string，传递String对象无作用。

isNaN()  判断 是否 不是数字    判断啊是否是NaN，如果是NaN返回true，否则返回false

encodeURI() 编码 （将字符转换成码值）

decodeURI() 解码 （将码值转换成字符）

encodeURIComponent 编码

decodeURIComponent 解码

escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z 

encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z 

encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z 

开发中：

escape仅对字符串进行unicode编码值转换，不进行编码。ESCAPE逐渐被encodeURI替代。

http://www.baidu.com这样不带参数的信息，用encodeURI()和encodeURIComponent()均可

?url=http://www.baidu.com/aa&uu.html 这样带参数的信息，用encodeURIComponent()

（因为如果在参数列表将&作为参数值传递，那么会被直接分割成第二个参数，如果进行编码，则不会有这样的困扰）

“?”号前面用encodeURI()编码，”?”号后面用encodeURIComponent()编码

拓展（HTTP协议知识）：

URL和URI

URL是统一资源定位器，URL是具体的URI

URI是统一资源标识符

URL是绝对的，资源改变位置，URL就要改变

URI可以是绝对的也可以是相对的。如果是绝对的，资源改变位置，URI就要改变

；如果是相对的，资源位置改变，URI不一定改变。

例如：http://www.baidu.com是URL，不是URI

例如：http://www.baidu.com/a.html 是URL也是URI（严格意义上属于URL）

例如：/a.html   不是URL，而是URI

综上：可以理解为URL肯定包含http协议，URI必须至少包含网页地址（资源名）

二、DOM

DOM概述

1、DOM是什么？有什么作用？

*Document Object Model 文档对象模型

文档：标记型文档（HTML、XML）

对象：包含属性和行为（方法）

模型：共性特征体现

*DOM用来将标记型文档中所有内容（标签、文本、属性）都封装成对象。

作用：

HTML：展示并封装数据

CSS：提供样式

JAVASCRIPT & DOM：获取并操作HTML对象。例如：动态操作HTML或CSS

*DOM使用之前需要先进行解析

2、DOM的解析方式：

*树形结构解析

如上代码会进行如下树形解析：

树形结构特征：

*没有子节点的节点是叶子节点

*没有父节点的节点是根节点

*树形结构有且只有一个根节点

*每个节点可以有多个子节点，但只能有一个父节点

节点类型(Node Type)：

• 整个文档是一个文档节点 （document）

• 每个 HTML 标签是一个元素节点 （element）

• 包含在 HTML 元素中的文本是文本节点 （text）

• 每一个 HTML 属性是一个属性节点 （attribute）

• 注释属于注释节点

以上都属于节点Node.Node在继承关系上是所有节点的父节点

3、DOM和BOM的关系图(了解)

BOM对象包含DOM对象

DOM节点操作

1、 节点的访问

使用节点特征获取节点对象：

Document对象方法： 

getElementById()

返回对拥有指定 id 的第一个对象的引用。

getElementsByName()

返回带有指定名称的对象集合。

getElementsByTagName()

返回带有指定标签名的对象集合。

使用节点对象获取节点内容：

W3C标准属性（所有对象）

innerHTML

值是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML

三、JavaScript事件

1、事件概述

通常鼠标或热键的引起的动作我们称之为事件(Event) 

JavaScript和HTML的交互功能主要就是通过事件驱动来完成的。

事件驱动：

1、 事件 小偷偷东西

2、 事件源 小偷

3、 监听器（处理事件） 警察

4、 注册监听器 让警察时刻盯着小偷

2、常用事件

都叫做事件句柄

Onclick

点击某个对象（例如点击某个按钮）

Onfocus

元素获取焦点

Onblur

元素失去焦点

Onload

某个页面或图片被加载完成时

Onsubmit

表单的提交按钮被点击时

Onchange

用户改变域的内容

以下事件安卓不用

Onkeydown

某个键盘的键被按下

Onkeypress

某个键盘的键被按下或按住

Onkeyup

某个键盘的键被松开

Onmousedown

某个鼠标按键被按下

Onmousemove

鼠标被移动

Onmouseout

鼠标从某元素移开

Onmouseover

鼠标被移到某元素之上

Onmouseup

某个鼠标按键被松开

3、JavaScript事件绑定方式

1、HTML属性绑定方式

例如：<input type=”text” onclick=”aa()”/>

为该input标签的鼠标单击事件属性绑定一个aa()的函数。

*多个函数之间用逗号分隔

2、HTML DOM分配事件

例如：为input标签的鼠标单击事件绑定一个aa()的函数

<script type="text/javascript">

function aa(){

alert("a");

}

//整个窗口加载完毕后调用该匿名函数

window.onload=function(){

//获取id为aa的HTML元素，并将其onclick事件绑定aa函数。注意，此处用的是函数的引用，若加(),则是获取函数的返回值

document.getElementById("aa").onclick=aa;

};

</script>

<body>

<input type="text" id="aa"/>

</body>

两种事件的区别：

*属性事件绑定方式传递参数很方便，但是HTML元素和JavaScript代码无法分离。

*DOM绑定方式无法传递参数，但是HTML元素和JavaScript代码分离。

综上，首先可以根据方法是否需要传参来决定使用哪种方式，其次要看公司要求。

四、JSON（安卓重点）

JSON概述

1、JSON是什么？有什么作用？

JSON（JavaScript Object Notation）JavaScript对象表示法。

是一种轻量级的数据交换格式，易于生成和阅读，是一种理想的数据交换语言。

作用：

用于网络数据交换

JSON语法

1、JSON语法规则

JSON的格式和JavaScript中的数组和对象格式相似。

l 表示数组：

[值1,值2,值3,…….]

例如：var language ="['java','ios','php']";

l 表示对象：

{“键1”:”值1”,”键2”:”值2”,……}

注：键仅为字符串

例如：var person ="{'name':'zhangsan','age':'13','sex':'man'}";

注：最好是双引号 套 单引号。否则有些浏览器会引起截断字符串的风险

通过这两种结构可以表示各种复杂的结构:

示例1：

var persons = "[

{'name':'zs','age':23,'sex':'man'},

{'name':'ls','age':24,'sex':'woman'},

{'name':'ww','age':25,'sex':'man'}

]"

示例2：

var persons = "{

'persons':[

{'name':'zs','age':23,'sex':'man'},

{'name':'ls','age':24,'sex':'woman'},

{'name':'ww','age':25,'sex':'man'}

]

}"

2、JSON值的访问

以var person = ‘{“name”:”zhangsan”,”age”:”13”,”sex”:”man”}’;为例

我们如果要以操作数组或者操作对象的方便手法操作JSON数据，就需要将JSON数据转换成为JavaScript的数组或者对象。

转换方式为：

eval(“(”+person+”)”);

有两种取值方式：

person.name;//zhangsan

person[“name”];//zhangsan

作业1

1、 表单练习：（JAVAEE&Android-表单校验）

写一个表单，表单项如下：

需求

1、用户名不能为空；

2、密码不能为空；

3、确认密码不能为空；

4、确认密码需和密码一致；

5、用户类型必须选择；

6、所在城市必须选择。 

全部符合校验规则提交表单数据，某一项不符合，不提交表单，且进行提示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--
1、表单练习：（JAVAEE&Android-表单校验）
写一个表单，表单项如下：

需求
1、用户名不能为空；
2、密码不能为空；
3、确认密码不能为空；
4、确认密码需和密码一致；
5、用户类型必须选择；
6、所在城市必须选择。
全部符合校验规则提交表单数据，某一项不符合，不提交表单，且进行提示。

 -->
</head>
<script type="text/javascript">
window.onload=function(){
    var tag=true;
    document.getElementById("t_username").onblur=function(){
        var reg=/^s*$/;
        if(reg.test(this.value)){
            alert("用户名不能为空");
            tag=false;
        }
    };
    document.getElementById("t_password").onblur=function(){
        var reg=/^s*$/;
        if(reg.test(this.value)){
            alert("密码不能为空");
            tag=false;
        }
        else if((document.getElementById("t_confirm_password").value!="")&&(document.getElementById("t_confirm_password").value!=this.value)){

            alert("密码需和确认密码一致");
            tag=false;
        }

    };
    document.getElementById("t_confirm_password").onblur=function(){
        var reg=/^s*$/;
        if(reg.test(this.value)){
            alert("确认密码不能为空");
            tag=false;
        }
        else if((document.getElementById("t_password").value!="")&&(document.getElementById("t_password").value!=this.value)){

            alert("确认密码需和密码一致");
            tag=false;
        }
    };
    document.getElementById("bt").onclick=function(){
        var ff=document.getElementById("ff");
        if(!(document.getElementById("vip").checked||document.getElementById("normal").checked)){
            tag=false;
            alert("用户类型必须选择");
        }
        else if(document.getElementById("nothing").selected){
            tag=false;
            alert("所在城市必须选择");
        }

        if(tag){
            ff.submit();
        }

    };

};
</script>
<body>
    <form id="ff">
        用户名&nbsp&nbsp&nbsp&nbsp<input type="text" id="t_username" name="username"><br/>
        密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="password" id="t_password" name="password"><br/>
        确认密码<input type="password" id="t_confirm_password" name="confirm_password"><br/>
        用户类型<input type="radio" name="usertype" value="vip" id="vip">vip<br/>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                <input type="radio" name="usertype" value="normal" id="normal">一般用户<br/>
        所在城市<select name="city" id="city">
                <option value="nothing" id="nothing" >请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                </select><br/>
                <input type="button" id="bt" value="提交" >
                <input type="reset" value="重置">

    </form>
</body>
</html>

2.写一个span，内容是“我是span”。当鼠标在span上悬停时，span显示当前日期；当鼠标移出span时，恢复”我是span”内容（JAVAEE事件练习）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>homework2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <script type="text/javascript">
 window.onload=function(){
     document.getElementById("sp").onmouseover=function(){
         var date=new Date();
         this.innerHTML=date.toLocaleString();
     };
     document.getElementById("sp").onmouseout=function(){
         this.innerHTML="我是span";
     };

 }
  </script>
  <body>
    <span id="sp">我是span</span>
  </body>
</html>

3.、 用JS设置 多选框系列的 全选/全不选/反选。效果如下：（JAVAEE-DOM练习）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>homework3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <script type="text/javascript">
  window.onload=function(){
      document.getElementById("select_all").onclick=function(){
          var arr=document.getElementsByName("hobby");
          for(var i=0;i<arr.length;i++){
             arr[i].checked=true;
          }
      };
      document.getElementById("select_nothing").onclick=function(){
          var arr=document.getElementsByName("hobby");
          for(var i=0;i<arr.length;i++){
             arr[i].checked=false;
          }
      };
      document.getElementById("select_other").onclick=function(){
          var arr=document.getElementsByName("hobby");
          for(var i=0;i<arr.length;i++){
             if(arr[i].checked){
                 arr[i].checked=false;
             }
             else{
                 arr[i].checked=true;
             }
          }
      };

  };
  </script>

  <body>
    <input type="checkbox" name="hobby" value="basketball">篮球<br/>
    <input type="checkbox" name="hobby" value="football">足球<br/>
    <input type="checkbox" name="hobby" value="swim">游泳<br/>
    <input type="checkbox" name="hobby" value="code">编程<br/>
    <input type="button" name="select_all" id="select_all" value="全选"  >
    <input type="button" name="select_nothing" id="select_nothing" value="全不选"  >
    <input type="button" name="select_other" id="select_other" value="反选"  >
  </body>
</html>

4.利用arguments对象，模拟函数的重载。（JAVAEE&Android-重载原理-困难）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>homework4.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <script type="text/javascript">
  function run(){
      //alert(typeof arguments[0]);
      if(arguments.length==1){
          alert("bt1的方法");
      }
      else if(arguments.length==2){
          alert("bt2的方法");
      }
      else if(arguments.length==3){
          alert("bt3的方法");
      }
      else if(typeof(arguments[0])=="string"){
          alert("bt4的方法");
      }

  }
  window.onload=function(){
      document.getElementById("bt1").onclick=function(){
          run(1);
      };
      document.getElementById("bt2").onclick=function(){
          run(1,2);
      };
      document.getElementById("bt3").onclick=function(){
          run(1,2,3);
      };
      document.getElementById("bt4").onclick=function(){
          run("aa",1,2,3);

      };
  }
  </script>
  <body>
    <input type="button" id="bt1" value="bt1" >
    <input type="button" id="bt2" value="bt2">
    <input type="button" id="bt3" value="bt3">
    <input type="button" id="bt4" value="bt4">
  </body>
</html>