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

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

2、JavaScript的Array对象(数组对象)

和String一样,直接一次写完

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

3、JavaScript的Date对象

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

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

4、JavaScript里Math函数

就一些数学函数,很快的

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

5、JavaScript的全局函数

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

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

6、JavaScript的重载

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

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. function add(a,b){
  12. document.write(a+b+"<hr/>");
  13. }
  14. function add(a,b,c){
  15. document.write(a+b+c+"<hr/>");
  16. }
  17. //这样只会默认调用最近的函数,也就是三个参数的
  18. add(11,22);
  19. add(1,2,3);
  20. //arguments中包含所有传入的参数,不管函数原型中有几个需要传入的参数
  21. //利用arguments数组来模拟重载
  22. function add2(){
  23. var j=arguments.length;
  24. var sum=0;
  25. for(var i=0;i<j;i++){
  26. sum=sum+arguments[i];
  27. }
  28. document.write(sum+"<hr/>");
  29. }
  30. add2(11,22);
  31. add2(1,2,3)
  32. </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">
  5. </style>
  6. </head>
  7. <body>
  8. <!--onclick 点击事件,当鼠标点击按钮时触发-->
  9. <input type="button" value="location Test" onclick="click1();"/>
  10. <hr/>
  11. </body>
  12. </html>
  13. <script type="text/javascript">
  14. //几次不成功,有两个原因:
  15. //函数名click为关键字,不能使用
  16. //input里面 onclick=“click1();”,其中的分号忘了
  17. //跳转到指定页面
  18. function click1(){
  19. // location 是bom里面的对象
  20. location.href="day03_07_BOM2.html";
  21. }
  22. //appName,显示目前浏览器名称
  23. document.write(navigator.appName+"<hr/>");
  24. //显示屏幕的高宽等属性
  25. document.write(screen.width+"&nbsp"+screen.height+"<hr/>");
  26. //显示当前网页地址
  27. document.write(location.href+"<hr/>");
  28. </script>
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. <input type="button" value="back" onclick="back1();"/>
  9. <br/>
  10. <input type="button" value="forward" onclick="forward1();"/>
  11. <hr/>
  12. <input type="button" value="Skip" onclick="location.href='day03_05GloabFunction.html';"/>
  13. </body>
  14. </html>
  15. <script type="text/javascript">
  16. //history用法
  17. //两者效果一样,可以回到前一页面或者后一页面
  18. function back1(){
  19. //history.back();
  20. history.go(-1);
  21. }
  22. function forward1(){
  23. //history.forward();
  24. history.go(1);
  25. }
  26. </script>

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

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. //alert(111);
  12. //打开确认窗口
  13. var flag=window.confirm("Right");
  14. //document.write(flag+"<hr/>");
  15. //打开文本输入窗口
  16. var str=window.prompt("Input","000");
  17. //document.write(str);
  18. //打开新的界面
  19. //window.open("day03_01.html","","width=200;height=200;");
  20. //关闭当前界面
  21. //window.close();
  22. //设置4000ms后运行一次第一个参数对应的代码 返回该函数对应id
  23. //var id1=setTimeout("document.write('hello'+'<hr/>')",4000);
  24. // clearTimeout(id1) 根据id值关闭Timeout
  25. //每3000ms运行一次第一个参数对应的代码,返回该函数对应的id
  26. var id2=setInterval("alert(111)",3000);
  27. //clearInterval(id2); 根据id值关闭Interval
  28. </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">
  5. </style>
  6. </head>
  7. <body>
  8. <input type="text" name="666" id="txt1" value="sign1"/>
  9. <input type="text" name="666" id="txt2" value="sign2"/>
  10. <input type="text" name="666" id="txt3" value="sign3"/>
  11. <hr/>
  12. </body>
  13. </html>
  14. <script type="text/javascript">
  15. // document是整个对象
  16. // 上面的input就是标签
  17. // 里面的type name id等就是属性
  18. //按照ID获取指定标签(对象)
  19. var input1=document.getElementById("txt1");
  20. document.write(input1.value+"<hr/>");
  21. //按照name获取指定标签数组(仅有一个元素时也是数组)
  22. var input2=document.getElementsByName("666");
  23. document.write(input2.length+"<hr/>");
  24. //按照标签的名字,比如input div等获取数组,用法同第二个
  25. var input3=document.getElementsByTagName("input");
  26. document.write(input3.length+"<hr/>")
  27. </script>

9、案例

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

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