WEB 开发前传——js笔记

知识点

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

   2.浏览器的内部对象

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

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

1

  var mark=new Array();

  mark[1]=75;

  var x=parseInt(mark[1]/10);

2

  浏览器对象:navigator 属性:appNameappVersionappCodeName

                              browserLanguagepluginsplatformcookieEnable

  文档对象:docment     属性:linksanchorform

  窗口对象:windows

                       方法:

                            openurlwindowNameparameterlist

                            close()

                            alerttext

                            confirmtext

                            promttextdefaulttext

                            moveBy(水平位移,垂直位移)

                            moveTo(水平位移,垂直位移)

                            forward()

                            home()

                            stop()

                            print()

                            back()

                            status

                            location                            

  位置对象:location   属性:protocolhostnameporthostpathnamehashsearchhref

  历史对象:history    history.go(0) 刷新本页面

3

  选中事件:onselect

  失去焦点事件:onblur

  获得焦点事件:onfocus

  载入文件事件:onload 

  卸载文件事件:onunload

  鼠标覆盖事件:onmouseover

  鼠标离开事件:onmouseout

知识点

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

  frames['mainframe'].document.getElementById('listtab'));" 

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

  <input name="qx" type="checkbox" value="checkbox" 

      onclick="

      selctedAll(this,

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

<SCRIPT LANGUAGE="JavaScript">

<br><!--

<br>var myDate = new Date();

<br>    myDate.getYear();      //获取当前年份(2)

<br>    myDate.getFullYear();  //获取完整的年份(4,1970-????)

<br>    myDate.getMonth();      //获取当前月份(0-11,0代表1)

<br>    myDate.getDate();      //获取当前日(1-31)

<br>    myDate.getDay();        //获取当前星期X(0-6,0代表星期天)

<br>    myDate.getTime();      //获取当前时间(1970.1.1开始的毫秒数)

<br>    myDate.getHours();      //获取当前小时数(0-23)

<br>    myDate.getMinutes();    //获取当前分钟数(0-59)

<br>    myDate.getSeconds();    //获取当前秒数(0-59)

<br>    myDate.getMilliseconds();  //获取当前毫秒数(0-999)

<br>    myDate.toLocaleDateString();    //获取当前日期

<br>    var mytime=myDate.toLocaleTimeString();    //获取当前时间

<br>    myDate.toLocaleString( );      //获取日期与时间

<br>if (mytime<"23:30:00")

<br>{

<br>alert(mytime);

<br>}

<br>//-->

<br></SCRIPT>

知识点

 1 文本框内容有效性验证可以调用JS定义的函数checked()

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

1.  文本框的输入的验证代码:onChange=“某个函数checked();

    获取表单中的数据

      var r= document.form.name.value

      var rr= document.getElementId("").value

2. 确认框

确认框用于使用户可以验证或者接受某些信息。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false

confirm("文本")

3. 提示框

提示框经常用于提示用户在进入页面前输入某个值。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

prompt("文本","默认值")

4. JavaScript For...In 声明

<script type="text/javascript">

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

5. Throw 声明

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

<script type="text/javascript">

var x=prompt("Enter a number between 0 and 10:","")

try

if(x>10) 

throw "Err1"

else if(x<0)

throw "Err2"

catch(er)

{

if(er=="Err1") 

alert("Error! The value is too high")

if(er == "Err2") 

alert("Error! The value is too low") 

}

</script>

7. document.write("Hello \

World!")        输出效果:Hello World!

8. RegExp 对象的方法

RegExp 对象有 3 个方法:test()、exec() 以及 compile()。

test()

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

例子:

var patt1=new RegExp("e");

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

由于该字符串中存在字母 "e",以上代码的输出将是:

true

9. exec()

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

var patt1=new RegExp("e");

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

由于该字符串中存在字母 "e",以上代码的输出将是:

E

您可以向 RegExp 对象添加第二个参数,以设定检索。

var patt1=new RegExp("e","g");

do

{

result=patt1.exec("The best things in life are free");

document.write(result);

}

while (result!=null)

10. compile()

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

var patt1=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",而没有 "d",以上代码的输出是:

truefalse

11. 创建和存储 cookie

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

function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

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

之后,我们要创建另一个函数来检查是否已设置 cookie:

function getCookie(c_name)

{

if (document.cookie.length>0)

  {

  c_start=document.cookie.indexOf(c_name + "=")

  if (c_start!=-1)

    { 

    c_start=c_start + c_name.length+1 

    c_end=document.cookie.indexOf(";",c_start)

    if (c_end==-1) c_end=document.cookie.length

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

    } 

  }

return ""

}

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

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

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

  {alert('Welcome again '+username+'!')}

else 

  {

  username=prompt('Please enter your name:',"")

  if (username!=null && username!="")

    {

    setCookie('username',username,365)

    }

  }

}

这是所有的代码:

<html>

<head>

<script type="text/javascript">

function getCookie(c_name)

{

if (document.cookie.length>0)

  {

  c_start=document.cookie.indexOf(c_name + "=")

  if (c_start!=-1)

    { 

    c_start=c_start + c_name.length+1 

    c_end=document.cookie.indexOf(";",c_start)

    if (c_end==-1) c_end=document.cookie.length

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

    } 

  }

return ""

}

function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

  {alert('Welcome again '+username+'!')}

else 

  {

  username=prompt('Please enter your name:',"")

  if (username!=null && username!="")

    {

    setCookie('username',username,365)

    }

  }

}

</script>

</head>

<body onLoad="checkCookie()">

</body>

</html>

12. JavaScript 动画

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

<html>

<head>

<script type="text/javascript">

function mouseOver()

  {

  document.b1.src ="/i/eg_mouse.jpg"

  }

function mouseOut()

  {

  document.b1.src ="/i/eg_mouse2.jpg"

  }

</script>

</head>

<body>

<a href="http://www.w3school.com.cn" target="_blank">

<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

</body>

</html>

13. setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

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

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

<html>

<head>

<script type="text/javascript">

function timedMsg()

 {

 var t=setTimeout("alert('5 seconds!')",5000)

 }

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!" onClick="timedMsg()">

</form>

</body>

</html>

13. HTML DOM 教程

getElementById() 和 getElementsByTagName()

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

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

2. parentNode、firstChild以及lastChild

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

请看下面这个 HTML 片段:

<table>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>Alaska</td>

  </tr>

</table>

在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。

此外,<tr> 是每个 <td>元 素的父节点(parentNode)。

对 firstChild 最普遍的用法是访问某个元素的文本:

var x=[a paragraph];

var text=x.firstChild.nodeValue; 

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

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x); 

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

原文地址:https://www.cnblogs.com/smileallen/p/3391576.html