[关闭]
@w460461339 2016-11-16T07:26:25.000000Z 字数 9032 阅读 824

Web学习Day3（JavaScript语言基础 BOM window DOM document ）

JAVA_Web

好吧，昨天算是大致把JavaScript入了下门，今天开始将JavaScript的具体语法的了。

1、JavaScript的String对象

嘛，就是讲了其中很多的方法，一次写齐了吧。

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  14.     var str="Hello JavaScript";
  16.     //加粗
  17.     document.write(str.bold());
  18.     document.write("<hr/>")
  20.     //设置字体颜色
  21.     document.write(str.fontcolor("blue"));
  22.     document.write("<hr/>")
  24.     //设置字体大小，1~7 7最大
  25.     document.write(str.fontsize(7));
  26.     document.write("<hr/>")
  28.     //将字符串设置为超链接（功能需要自定义）
  29.     //括号内写需要转到的地址
  30.     document.write(str.link("04-js的语句一.html"));
  31.     document.write("<hr/>")
  33.     //sub下标，sup上标
  34.     document.write("100".sub()+"2"+"200".sup());
  35.     document.write("<hr/>")
  37.     //链接两个字符串
  38.     document.write(str.concat(",Nice to see you"));
  39.     document.write("<hr/>")
  41.     //返回指定位置的字符，不存在时就什么也不显示
  42.     document.write(str.charAt(7)+str.charAt(100));
  43.     document.write("<hr/>")
  45.     //返回指定字符所在位置，不存在该字符就返回-1
  46.     document.write(str.indexOf("J"))
  47.     document.write("&nbsp"+str.indexOf("Z"));
  48.     document.write("<hr/>")
  50.     //根据括号内字符分割字符串，返回数组
  51.     //这里不能用转义来表示空格，直接打空格就好
  52.     var array1= str.split(" ");
  53.     document.write(array1[0]);
  54.     document.write("-----"+array1[1]);
  55.     document.write("<hr/>")
  57.     //将字符串内指定内容(第一个参数)替换为另外的内容(第二参数)
  58.     //字符串不存在就不做任何修改
  59.     document.write(str.replace("JavaScript","World"));
  60.     document.write("<hr/>")
  62.     //substr表示从第一个参数起(包括)，获取第二个参数个的字符
  63.     //从第三位开始，数5个字符  
  64.     document.write(str.substr(3,5));
  65.     document.write("<hr/>")
  67.     //substring表示从获取从第一个参数(包括)到第二个参数(包括)的内容
  68.     //从第三位到第五位，不包括第五位
  69.     document.write(str.substring(3,5));
  70.     document.write("<hr/>")
  72. </script>

2、JavaScript的Array对象（数组对象）

和String一样，直接一次写完

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  14.     //多次创建同名参数，以最后一次创建为准
  15.     //创建数组的三种方法
  16.     var array0=["hello","world","js"];
  17.     var array=new Array(3);//这是是创建一个长度为3的空数组
  18.     var array=new Array("Hello","World","JavaScript");
  20.     //打印数组的长度，length是数组的属性
  21.     //返回数组长度
  22.     document.write(array.length);
  23.     document.write("<hr/>");
  25.     //concat，链接数组或者单个元素
  26.     //返回新数组
  27.     document.write(array.concat(array0));
  28.     document.write("<hr/>");
  30.     //改变打印出来时分割数组元素的符号
  31.     //默认使用逗号，自己可以随意设置，此处用 -
  32.     //返回新数组
  33.     document.write(array);
  34.     document.write("<br/>");
  35.     document.write(array.join("-"));
  36.     document.write("<hr/>")
  38.     //往数组最后添加元素，当被添加元素是单个元素时，直接添加
  39.     //但当被添加元素是数组时，整个数组被看做是一个元素添加
  40.     //返回新的数组长度
  41.     document.write("length:"+array.push("yoyo")+"<br/>");
  42.     document.write("elements:"+array+"<br/>");
  43.     document.write("length:"+array.push(array0)+"<br/>");
  44.     document.write("elements:"+array.join("--"));
  45.     document.write("<hr/>");
  47.     //返回数组的最后一个元素，并删除
  48.     document.write(array.pop());
  49.     document.write("<hr/>");
  51.     //将数组内元素反转
  52.     document.write(array.reverse());
  53.     document.write("<hr/>");
  55. </script>

3、JavaScript的Date对象

呃，这里的Date对象比Java里面简单很多~

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  14.     //获取日期对象，直接显示为英式表达方式
  15.     var date=new Date();
  16.     document.write(date+"<hr/>");
  18.     //利用toLocaleString方法转化为中式表达，注意local和String中间的e
  19.     document.write(date.toLocaleString()+"<hr/>");
  21.     //获取当年的年份，四位数字表达
  22.     document.write(date.getFullYear()+"<hr/>");
  24.     //获取月份，0~11，因此需要加一显示
  25.     document.write((date.getMonth()+1)+"<hr/>");
  27.     //获取目前星期，0~6表示周日到周六，周日为0，其他对应1~6
  28.     document.write(date.getDay()+"<hr/>");
  30.     //获取目前日，1~31
  31.     document.write(date.getDate()+"<hr/>");
  33.     //获取当前小时，0~23
  34.     document.write(date.getHours()+"<hr/>");
  36.     //获取当前分钟，0~59
  37.     document.write(date.getMinutes()+"<hr/>");
  39.     //获取当前秒，0~59
  40.     document.write(date.getSeconds()+"<hr/>");
  42.     //获取从1970年1月1日0点0分0秒到目前的毫秒数
  43.     document.write(date.getTime()+"<hr/>");
  44. </script>

4、JavaScript里Math函数

就一些数学函数，很快的

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  14.     //注意这里不是用对象来调用方法
  15.     //Math里都是静态方法，要通过Math来调用
  17.     var a=10.2;
  18.     //向上取整
  19.     document.write(Math.ceil(a)+"<hr/>");
  20.     //向下取整
  21.     document.write(Math.floor(a)+"<hr/>");
  22.     //四舍五入
  23.     document.write(Math.round(a)+"<hr/>");
  24.     //获取[0,1)内的伪随机数
  25.     document.write(Math.random()+"<hr/>");
  26. </script>

5、JavaScript的全局函数

不属于任何一个对象，直接写函数名调用

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  14.     //若字符串内写的是js代码，eval可以识别并执行
  15.     var str="alert(1234)";
  16.     eval(str);
  18.     //解码和转码，主要为了处理中文乱码
  19.     var code=encodeURI("你好呀");
  20.     document.write(code+"<hr/>");
  21.     document.write(decodeURI(code)+"<hr/>");
  22.     //encodeURIComponent() 和 decodeURIComponent()除了范围不同，其他用法同上
  24.     //判断一个变量是不是数字，数字-false 非数字-true
  25.     //　isNan,表示，是不是非数字
  26.     var a=5;
  27.     var b="ee";
  28.     document.write(isNaN(a)+"&nbsp"+isNaN(b)+"<hr/>");
  30.     //将字符串的数字转化为数字类型
  31.     //被转化字符串中不是数字，就显示NaN
  32.     var i="4";
  33.     document.write(parseInt(i)+5);
  35. </script>

6、JavaScript的重载

注意，JS中没有重载 没有重载 没有重载，只是可以模拟重载的样子。

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  14.     function add(a,b){
  15.         document.write(a+b+"<hr/>");
  16.     }
  18.     function add(a,b,c){
  19.         document.write(a+b+c+"<hr/>");
  20.     }
  21.     //这样只会默认调用最近的函数，也就是三个参数的
  22.     add(11,22);
  23.     add(1,2,3);
  25.     //arguments中包含所有传入的参数，不管函数原型中有几个需要传入的参数
  26.     //利用arguments数组来模拟重载
  27.     function add2(){
  28.         var j=arguments.length;
  29.         var sum=0;
  30.         for(var i=0;i<j;i++){
  31.             sum=sum+arguments[i];
  32.         }
  33.         document.write(sum+"<hr/>");
  34.     }
  36.     add2(11,22);
  37.     add2(1,2,3)
  38. </script>

7、JavaScript的BOM

BOM的全名是Broswer Object Model，浏览器对象模型。主要用来获取不同浏览器的的一些属性。
该模型中我们主要学的有这么几个对象：

navigator；
screen；
location；
history；
windows；

同样，一次全上了。
另外，这里只举这些对象常用的属性，需要用到其他的属性获取方法，自己去找帮助文档。

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  10.     <!--onclick 点击事件，当鼠标点击按钮时触发-->
  11.     <input type="button" value="location Test" onclick="click1();"/>
  12.     <hr/>
  13.  </body>
  14. </html>
  15. <script type="text/javascript">
  17.     //几次不成功，有两个原因：
  18.     //函数名click为关键字，不能使用
  19.     //input里面 onclick=“click1();”,其中的分号忘了
  20.     //跳转到指定页面
  21.     function click1(){
  22.      // location 是bom里面的对象
  23.         location.href="day03_07_BOM2.html";
  24.     }
  26.     //appName，显示目前浏览器名称
  27.     document.write(navigator.appName+"<hr/>");
  29.     //显示屏幕的高宽等属性
  30.     document.write(screen.width+"&nbsp"+screen.height+"<hr/>");
  32.     //显示当前网页地址
  33.     document.write(location.href+"<hr/>");
  34. </script>
  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  10.     <input type="button" value="back" onclick="back1();"/>
  11.     <br/>
  12.     <input type="button" value="forward" onclick="forward1();"/>
  13.     <hr/>
  14.     <input type="button" value="Skip" onclick="location.href='day03_05GloabFunction.html';"/>
  15.  </body>
  16. </html>
  17. <script type="text/javascript">
  18.     //history用法
  19.     //两者效果一样，可以回到前一页面或者后一页面
  20.     function back1(){
  21.         //history.back();
  22.         history.go(-1);
  23.     }
  25.     function forward1(){
  26.         //history.forward();
  27.         history.go(1);
  28.     }
  30. </script>

window是BOW中其他对象的顶层对象，最为重要。
比如history，标准调用时window.history，只是window可以省略。

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  11.  </body>
  12. </html>
  13. <script type="text/javascript">
  15.     //alert(111);
  17.     //打开确认窗口
  18.     var flag=window.confirm("Right");
  19.     //document.write(flag+"<hr/>");
  21.     //打开文本输入窗口
  22.     var str=window.prompt("Input","000");
  23.     //document.write(str);
  25.     //打开新的界面
  26.     //window.open("day03_01.html","","width=200;height=200;");
  28.     //关闭当前界面
  29.     //window.close();
  31.     //设置4000ms后运行一次第一个参数对应的代码 返回该函数对应id
  32.     //var id1=setTimeout("document.write('hello'+'<hr/>')",4000);
  33.     // clearTimeout(id1)  根据id值关闭Timeout
  35.     //每3000ms运行一次第一个参数对应的代码，返回该函数对应的id
  36.     var id2=setInterval("alert(111)",3000);
  37.     //clearInterval(id2); 根据id值关闭Interval
  38. </script>

8、JavaScript 的dom对象

8.1 dom介绍
* dom：document object model: 文档对象模型
** 文档：
    超文本文档（超文本标记文档） html 、xml
** 对象：
    提供了属性和方法
** 模型：使用属性和方法操作超文本标记型文档

*** 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

*** 想要对标记型文档进行操作，首先需要 对标记型文档里面的所有内容封装成对象
    -- 需要把html里面的标签、属性、文本内容都封装成对象

*** 要想对标记型文档进行操作，解析标记型文档
    - 画图分析，如何使用dom解析html

*** 解析过程
    根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，
    - document对象：整个文档
    - element对象：标签对象
    - 属性对象
    - 文本对象

    -- Node节点对象：这个对象是这些对象的父对象
        *** 如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DOM模型有三种：
    DOM level 1：将html文档封装成对象。
    DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
    DOM level 3：支持xml1.0的一些新特性。

* DHTML：是很多技术的简称
    ** html: 封装数据
    ** css：使用属性和属性值设置样式
    ** dom：操作html文档（标记型文档）
    ** javascript：专门指的是js的语法语句（ECMAScript）
8.2 DOM的使用
  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  10.     <input type="text" name="666" id="txt1" value="sign1"/>
  11.     <input type="text" name="666" id="txt2" value="sign2"/>
  12.     <input type="text" name="666" id="txt3" value="sign3"/>
  13.     <hr/>
  14.  </body>
  15. </html>
  16. <script type="text/javascript">
  17.         //  document是整个对象
  18.         //　上面的input就是标签
  19.         //  里面的type name id等就是属性
  21.         //按照ID获取指定标签（对象）
  22.         var input1=document.getElementById("txt1");
  23.         document.write(input1.value+"<hr/>");
  25.         //按照name获取指定标签数组（仅有一个元素时也是数组）
  26.         var input2=document.getElementsByName("666");
  27.         document.write(input2.length+"<hr/>");
  29.         //按照标签的名字，比如input div等获取数组，用法同第二个
  30.         var input3=document.getElementsByTagName("input");
  31.         document.write(input3.length+"<hr/>")
  32. </script>

9、案例

以下两个案例满足的功能是，我在第二个页面上点击选择，可以在第一个界面上进行显示。

  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  9.     Number:<input tyep="text" value="" id="number"/><br/>
  10.     Name:<input tyep="text" value="" id="name"/><br/>
  12.     <input type="button" value="Select" onclick="click1();"/>
  14.  </body>
  15. </html>
  16. <script type="text/javascript">
  17.     function click1(){
  18.         open("day03_09_Example2.html","","width=200;height=200;");
  19.     }
  21. </script>
  1. <html>
  2.  <head>
  3.   <title>HTML EXAMPLE</title>
  4.   <style type="text/css">
  6.   </style>
  7.  </head>
  8.  <body>
  10.     <table>
  11.     <tr>
  12.         <td>Button</td>
  13.         <td>Number</td>
  14.         <td>Name</td>
  15.     </tr>
  16.     <tr>
  17.         <td><input type="button" value="Select" onclick="click1(100,'Tom');"></td>
  18.         <td name="100">100</td>
  19.         <td name="100">Tom</td>
  20.     </tr>
  21.     <tr>
  22.         <td><input type="button" value="Select" onclick="click1(101,'Tim');"></td>
  23.         <td name="101">101</td>
  24.         <td name="101">Tim</td>
  25.     </tr>
  26.     </table>
  27.  </body>
  28. </html>
  29. <script type="text/javascript">
  31.     function click1(a,b){
  32.     // opener 设置或获取创建当前窗口的窗口的引用。
  33.         var pwin=window.opener;
  34.         pwin.document.getElementById("number").value=a;
  35.         pwin.document.getElementById("name").value=b;
  36.         close();
  37.     }
  39. </script>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注