WEB开发前传——js笔记

知识点

   1. 如何在JS中创建一个数组。如何取整。。

   2.浏览器的内部对象

   3.网页中一些常用的事件

......................................

1

  var mark&＃61;new Array&＃xff08;&＃xff09;&＃xff1b;

  mark[1]&＃61;75;

  var x&＃61;parseInt(mark[1]/10);

2

  浏览器对象&＃xff1a;navigator 属性&＃xff1a;appName&＃xff0c;appVersion&＃xff0c;appCodeName&＃xff0c;

                              browserLanguage&＃xff0c;plugins&＃xff0c;platform&＃xff0c;COOKIEEnable

  文档对象&＃xff1a;docment     属性&＃xff1a;links&＃xff0c;anchor&＃xff0c;form

  窗口对象&＃xff1a;windows

                       方法&＃xff1a;

                            open&＃xff08;url&＃xff0c;windowName&＃xff0c;parameterlist&＃xff09;

                            close&＃xff08;&＃xff09;

                            alert&＃xff08;text&＃xff09;

                            confirm&＃xff08;text&＃xff09;

                            promt&＃xff08;text&＃xff0c;defaulttext&＃xff09;

                            moveBy&＃xff08;水平位移&＃xff0c;垂直位移&＃xff09;

                            moveTo&＃xff08;水平位移&＃xff0c;垂直位移&＃xff09;

                            forward&＃xff08;&＃xff09;

                            home&＃xff08;&＃xff09;

                            stop&＃xff08;&＃xff09;

                            print&＃xff08;&＃xff09;

                            back&＃xff08;&＃xff09;

                            status

                            location                            

  位置对象&＃xff1a;location   属性&＃xff1a;protocol&＃xff0c;hostname&＃xff0c;port&＃xff0c;host&＃xff0c;pathname&＃xff0c;hash&＃xff0c;search&＃xff0c;href

  历史对象&＃xff1a;history    history.go(0) 刷新本页面

3

  选中事件&＃xff1a;onselect

  失去焦点事件&＃xff1a;onblur

  获得焦点事件&＃xff1a;onfocus

  载入文件事件&＃xff1a;onload 

  卸载文件事件&＃xff1a;onunload

  鼠标覆盖事件&＃xff1a;onmouseover

  鼠标离开事件&＃xff1a;onmouseout

知识点

 1 通过id获取iframe框架容器里面的控件 

  frames[&＃39;mainframe&＃39;].document.getElementById(&＃39;listtab&＃39;));" 

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

      οnclick&＃61;"

      selctedAll(this,

        frames[&＃39;mainframe&＃39;].document.getElementById(&＃39;listtab&＃39;));"/>ȫѡ

5. Throw 声明

throw 声明的作用是创建 exception&＃xff08;异常&＃xff09;。你可以把这个声明与 try...catch 声明配合使用&＃xff0c;以达到控制程序流并产生精确错误消息的目的。

7. document.write("Hello \

World!")        输出效果&＃xff1a;Hello World!

8. RegExp 对象的方法

RegExp 对象有 3 个方法&＃xff1a;test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子&＃xff1a;

var patt1&＃61;new RegExp("e");

document.write(patt1.test("The best things in life are free")); 

由于该字符串中存在字母 "e"&＃xff0c;以上代码的输出将是&＃xff1a;

true

9. exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配&＃xff0c;则返回 null。

var patt1&＃61;new RegExp("e");

document.write(patt1.exec("The best things in life are free")); 

由于该字符串中存在字母 "e"&＃xff0c;以上代码的输出将是&＃xff1a;

E

您可以向 RegExp 对象添加第二个参数&＃xff0c;以设定检索。

var patt1&＃61;new RegExp("e","g");

do

{

result&＃61;patt1.exec("The best things in life are free");

document.write(result);

}

while (result!&＃61;null)

10. compile()

compile() 方法用于改变 RegExp。compile() 既可以改变检索模式&＃xff0c;也可以添加或删除第二个参数。

var patt1&＃61;new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"&＃xff0c;而没有 "d"&＃xff0c;以上代码的输出是&＃xff1a;

truefalse

11. 创建和存储 COOKIE

在这个例子中我们要创建一个存储访问者名字的 COOKIE。当访问者首次访问网站时&＃xff0c;他们会被要求填写姓名。名字会存储于 COOKIE 中。当访问者再次访问网站时&＃xff0c;他们就会收到欢迎词。

function setCOOKIE(c_name,value,expiredays)

{

var exdate&＃61;new Date()

exdate.setDate(exdate.getDate()&＃43;expiredays)

document.COOKIE&＃61;c_name&＃43; "&＃61;" &＃43;escape(value)&＃43;

((expiredays&＃61;&＃61;null) ? "" : ";expires&＃61;"&＃43;exdate.toGMTString())

}

上面这个函数中的参数存有 COOKIE 的名称、值以及过期天数。

之后&＃xff0c;我们要创建另一个函数来检查是否已设置 COOKIE&＃xff1a;

function getCOOKIE(c_name)

{

if (document.COOKIE.length>0)

  {

  c_start&＃61;document.COOKIE.indexOf(c_name &＃43; "&＃61;")

  if (c_start!&＃61;-1)

    { 

    c_start&＃61;c_start &＃43; c_name.length&＃43;1 

    c_end&＃61;document.COOKIE.indexOf(";",c_start)

    if (c_end&＃61;&＃61;-1) c_end&＃61;document.COOKIE.length

    return unescape(document.COOKIE.substring(c_start,c_end))

    } 

  }

return ""

}

上面的函数首先会检查 document.COOKIE 对象中是否存有 COOKIE。假如 document.COOKIE 对象存有某些 COOKIE&＃xff0c;那么会继续检查我们指定的 COOKIE 是否已储存。如果找到了我们要的 COOKIE&＃xff0c;就返回值&＃xff0c;否则返回空字符串。

最后&＃xff0c;我们要创建一个函数&＃xff0c;这个函数的作用是&＃xff1a;如果 COOKIE 已设置&＃xff0c;则显示欢迎词&＃xff0c;否则显示提示框来要求用户输入名字。

function checkCOOKIE()

{

username&＃61;getCOOKIE(&＃39;username&＃39;)

if (username!&＃61;null && username!&＃61;"")

  {alert(&＃39;Welcome again &＃39;&＃43;username&＃43;&＃39;!&＃39;)}

else 

  {

  username&＃61;prompt(&＃39;Please enter your name:&＃39;,"")

  if (username!&＃61;null && username!&＃61;"")

    {

    setCOOKIE(&＃39;username&＃39;,username,365)

    }

  }

}

这是所有的代码&＃xff1a;

12. Javascript 动画

使用 Javascript 创建动态图像是可行的。

onmouseOver&＃61;"mouseOver()"

onmouseOut&＃61;"mouseOut()" />

13. setTimeout()

语法

var t&＃61;setTimeout("Javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中&＃xff0c;值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()&＃xff0c;你可以使用这个变量名来指定它。

当下面这个例子中的按钮被点击时&＃xff0c;一个提示框会在5秒中后弹出。

13. HTML DOM 教程

getElementById() 和 getElementsByTagName()

getElementById() 和 getElementsByTagName() 这两种方法&＃xff0c;可查找整个 HTML 文档中的任何 HTML 元素。

getElementsByTagName() 方法会使用指定的标签名返回所有的元素&＃xff08;作为一个节点列表&＃xff09;&＃xff0c;这些元素是您在使用此方法时所处的元素的后代。

2. parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构&＃xff0c;在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段&＃xff1a;

在上面的HTML代码中&＃xff0c;第一个  是  元素的首个子元素&＃xff08;firstChild&＃xff09;&＃xff0c;而最后一个  是 元素的最后一个子元素&＃xff08;lastChild&＃xff09;。

此外&＃xff0c; 是每个 元 素的父节点&＃xff08;parentNode&＃xff09;。

对 firstChild 最普遍的用法是访问某个元素的文本&＃xff1a;

var x&＃61;[a paragraph];

var text&＃61;x.firstChild.nodeValue; 

parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点&＃xff1a;

var x&＃61;document.getElementById("maindiv");

x.parentNode.removeChild(x); 

首先&＃xff0c;您需要找到带有指定 id 的节点&＃xff0c;然后移至其父节点并执行 removeChild() 方法。