JavaScript

简介: JavaScript 是什么? 一、 JavaScript 是一种新的描述语言,此一语言可以被钳入HTML 的文件之中。 透过JavaScript 可以做到回应使用者的需求事件(如: form 的输入) 而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时, 它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client) 的应用程式所处理。

JavaScript 是什么?
一、 JavaScript 是一种新的描述语言,此一语言可以被钳入HTML 的文件之中。
透过JavaScript 可以做到回应使用者的需求事件(如: form 的输入) 而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,
它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client) 的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样!
目前已有一些写好的程式在Internet 上你可以连过去看看,以下有一些计算器的例子,在Nescape 上。
JavaScript 和Java 很类似,但到底并不一样! Java 是一种比JavaScript 更复杂许多的程式语言,而JavaScript 则是相当容易了解的语言。
JavaScript 创作者可以不那么注重程式技巧,所以许多Java 的特性在Java Script 中并不支援。
function getname(str) {
    alert("哈罗! "+ str+"!");
 }
<input type="text" name="name" onBlur="getname(this.value)" value="">
document.write(document.lastModified)
function hello() {
       alert("哈罗!");
}
<a href="" onMouseOver="hello()">link</a>
function RandomNumber() {
       timenow=new Date();
       num=Math.abs(Math.sin(timenow.getHours()*timenow.getMinutes()*timenow.getSeconds()));
       return num;
     }
     function WinOpen() {
       msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
       msg.document.write("<HEAD><TITLE>哈罗!</TITLE></HEAD>");
       msg.document.write("<CENTER><H1>酷毙了!</H1><h2>这是<B>JavaScript</B>所开的视窗!</h2></CENTER>");
     }
today = new Date()
document.write("现在时间是: ",today.getHours(),":",today.getMinutes())
document.write("<br>今天日期为: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());

function RandomNumber() {
  today = new Date();
  num = Math.abs(Math.sin(today.getTime()));
  return num;
}
document.write("This is a random number:", RandomNumber());
<INPUT type="button" name="Button1" value="Push me" onclick="WinOpen()">
二 、框架
1 、<FRAMESET ROWS="50%,50%">
    <FRAME SRC="frtest1.html" name="fr1">
    <FRAME SRC="frtest2.html" name="fr2">
  </FRAMESET>

2、 <FRAMESET COLS="50%,50%">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="cell.html">
    <FRAME SRC="cell.html">
  </FRAMESET>

  <FRAMESET ROWS="33%,33%,33%">
    <FRAME SRC="cell.html">
    <FRAME SRC="cell.html">
    <FRAME SRC="cell.html">
  </FRAMESET>

</FRAMESET>

3、 <HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%">
    <FRAME SRC="frame1.html" name="fr1" noresize>
    <FRAME SRC="frame2.html" name="fr2">
  </FRAMESET>

</HTML>
以下是 frame1.html 的原始码:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function hi() {
       document.write("嗨!<br>");
     }
     function yo() {
       document.write("呦!<br>");
     }
     function bla() {
       document.write("啦 啦 啦<br>");
     }
// -->
</script>
</HEAD>
<BODY>
这是第一个 frame!
</BODY>
</HTML>
以下是 frame2.html 的原始码:
<HTML>
<body>
这是第二个 frame!
<p>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="嗨" onClick="parent.fr1.hi()">
     <INPUT TYPE="button" VALUE="呦" onClick="parent.fr1.yo()">
     <INPUT TYPE="button" VALUE="啦" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
三 、状态栏
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" onclick="statbar('嗨! 这就是状态列(statusbar) !');">
<input type="button" name="erase" value="清除文字" onclick="statbar('');">
</form>
</body>
</html>


<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
   window.status = txt;
   setTimeout("erase()",1000);
}
function erase() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.html" onMouseOver="moveover('瞬间即逝!');return true;">
link</a>
</body>
</html>


<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎么样! 很酷吧! 您也可以试试."+"Here goes your message the visitors to your page will "+"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);
  }
  else {
    scroller=scroller+scrtxt.substring(pos,width+pos);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>
</html>
四 、数组
function initArray() {
      this.length = initArray.arguments.length
      for (var i = 0; i < this.length; i++)
      this[i+1] = initArray.arguments[i]
   }
function stat(txt) {
        window.status = txt;
        setTimeout("erase()",1500);
      }
     function erase() {
       window.status="";
     }
var Mixedup= new initArray(17,"yo",103);
  document.write("Element No. 1: "+Mixedup[1]+"<br>");
  document.write("Element No. 2: "+Mixedup[2]+"<br>");
  document.write("Element No. 3: "+Mixedup[3]+"<br>");
一个清除视窗或frame中内容的好方法,您可以试试:
<P>
<PRE>
     document.close();
     document.open();
     document.write("<P>");
</PRE>
<P>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Back" onClick="history.back()">
     <INPUT TYPE="button" VALUE="百度" onClick="location='http://www.baidu.com'">
     <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
<H4>
<A href="script.htm" tppabs="http://www.baidu.com" onMouseOver="stat('回到主页'); return true">回主页</A> -
</H4>
五 、同时载入两个页面
frames2.html
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*">
  <FRAMESET ROWS="100%,*">
    <FRAME SRC="loadtwo.html" NAME="fr1">
      </FRAMESET>
  <FRAMESET ROWS="75%,25%">
    <FRAME SRC="cell.html" NAME="fr2">
    <FRAME SRC="cell.html" NAME="fr3">
      </FRAMESET>
</FRAMESET>
</HTML>
第一个frame 会载入loadtwo.html 并产生一个按钮 :
loadtwo.html
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="同时载入两份文件" onClick="loadtwo('frtest1.html',
     'frtest2.html')">
</FORM>
</BODY>
</HTML>

<a href="javascript:myfunction()">My Link</a>

<a href="getfr2.html" target="fr2">
<BODY onLoad="parent.fr3.location.href='getfr3.html'; return true;">
<a href="goanywhere.html" target="Resource Window">Go!</a>

六 、表格动作
<html>
<head>
<script language="JavaScript">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("您没写上任何东西, 请再输入一次!")
  else {
   alert("嗨"+form.text1.value+"! 您已输入完成!");
  }
}

function test2(form) {
  if (form.text2.value == "" ||
      form.text2.value.indexOf('@', 0) == -1)
        alert("这不是正确的e-mail address! 请再输入一次!");
  else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>

<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输入测试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输入测试" onClick="test2(this.form)">
</body>

<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>您 喜 欢 我 的 网 页 吗 ?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">一点也不喜欢。 <BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简直浪费我的时间。 <BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">这简直是Net 上最烂的站台。 <BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>

function setfocus() {
        document.first.text1.focus();
        return;
}
<body onLoad="setfocus()">

七、JavaScript的对象
The、following、objects、are、available、in、JavaScript:、anchor、applet、button、checkbox、Date、document、orm、history、link、location、Math、password、radioButton、reset、selection、string、submit、text 、textArea、window

JavaScript的对象属性
以下的属性可在、JavaScript中用到:
action、alinkColor、anchors、bgColor、checked、current、defaultChecked、defaultSelected、defaultStatus、defaultValue、E、elements、fgColor、forms、frames、hash、host、hostname、href、index、lastModified、length、linkColor、links、LN2、 LN10、loadedDate、location、method、name、options、parent、pathname、PI、port、protocol、referrer、search、selected、selectedIndex、self、SQRT1_2、SQRT2、status、target、text、title、top、value、vlinkColor、 window

JavaScript的方法
以下的一些"方法"可用在JavaScript:
abs、acos、alert、anchor、asin、assign、atan、back、big、blink、blur、bold、ceil、charAt、clear、clearTimeout、click、close、confirm、cos、eval、exp、fixed、floor、focus、 fontcolor、fontsize、forward、getDate、getDay、getHours、getMinutes、getMonth、getSeconds、getTime、getTimeZoneoffset、getYear、go、indexOf、italics、lastIndexOf、link、log、max、min、open、parse、pow、prompt、random、 round、select、setDate、setHours、setMinutes、setMonth、setSeconds、setTimeout、setTime、setYear、sin、small、sqrt、strike、sub、submit、substring、sup、tan、toGMTString、toLocaleString、toLowerCase、toString、toUpperCase、UTC、 write、writeln

事件处理
以下的事件可由、JavaScript、发生:
onBlur、onChange、onClick、onFocus、onLoad、onMouseOver、onSelect、onSubmit、onUnload、

JavaScript的语法
The、following、statements、are、available、in、JavaScript:、break、comment、continue、for、for...in、function、、if...else、return、var、while、with

Javascript的保留字
以下的保留字不可以用作变量,函数名,对象名等,其中有的保留字是为以后JAVASCRIPT扩展用的
abstract、boolean、break、byte、case、catch、char、class、const、continue、default、do、double、else、extends、false、final、finally、float、for、function、goto、if、implements、import、 in、instanceof、int、interface、long、native、new、null、package、private、protected、public、return、short、static、super、switch、synchronized、this、throw、throws、transient、true、try、var、 void、while、、with

目录
相关文章
|
8月前
|
JavaScript 前端开发
70.【JavaScript 6.0】(一)
70.【JavaScript 6.0】
34 0
|
7天前
|
存储 JavaScript 前端开发
JavaScript组成的问题。
JavaScript组成的问题。
|
7天前
|
JavaScript 前端开发
JavaScript-T1
JavaScript-T1
23 0
|
7天前
|
JavaScript 前端开发
JavaScript 中的提升是什么
JavaScript 中的提升是什么
23 0
|
7月前
|
存储 前端开发 JavaScript
javascript常用的东西
javascript常用的东西
117 0
|
10月前
|
移动开发 JavaScript 前端开发
|
JavaScript 前端开发
Day10 JavaScript
JavaScript
137 0
|
JavaScript 前端开发 程序员
解密 JavaScript 中的 this
我想在本文解释JavaScript中的 this,希望有助你理解 this 的工作机制。作为JavaScript程序员,学习 this 对于你的发展有很大帮助,可以说利大于弊。这篇文章的灵感来自于我最近的工作——我即将完成的书的最后章节——《JavaScript 应用程序设计 | JavaScript Application Design》(注意:现在你可以购买早期版本),我写的是关于scope工作原理的方面。
105 0
解密 JavaScript 中的 this
|
JavaScript 前端开发 API
简单了解 JavaScript的组成
DOM ,BOM, ECMAScript JS组成

热门文章

最新文章

相关实验场景

更多