js如何使用?

JavaScript013

js如何使用?,第1张

1. 在HTML里面加入JavaScript;方法非常简单,就是通过一对<script></script>标签,然后在标签里面书写代码即可;2. 标签位置;按照以前传统的方法,我们的script标签都是放在head标签里面的。但是由于浏览器进行渲染的时候是由上往下进行渲染,这样会导致浏览器在呈现页面的时候出现延迟。延迟的时候就是空白,影响用户体验。所以现在的方法,都是讲script标签写body里面,元素的后面。;3. 外部JS文件;1)可维护性高;2)可缓存:例如有两个HTML文件(A,B)都是用的同一个JS文件。当用户请求A页面的时候,A页面的HTML文件和JS文件一起被下载到本地。接下来用户再请求B页面的时候,只需要下载B页面的HTML页面即可,因为JS文件已经有了。4. JavaScript语法;1)JavaScript区分大小写test和Test表示不同变量2)标识符;JavaScript里面的标识符由数字,字母,下划线(_)和$组成,不能以数字开头3)注释:JavaScript注释有两种:多行注释和单行注释

<HTML>

<HEAD>

<TITLE></TITLE>

<style type="text/css">

p {font-size: 12pt}

.red {color: redwidth:34}

.redl{color:redwidth:51}

.blue {color: bluewidth:34}

</style>

<SCRIPT LANGUAGE="JavaScript">

var Memory = 0

var Number1 = ""

var Number2 = ""

var NewNumber = "blank"

var opvalue = ""

function Display(displaynumber) {

document.calculator.answer.value = displaynumber

}

function MemoryClear() {

Memory = 0

document.calculator.mem.value = ""

}

function MemoryRecall(answer) {

if(NewNumber != "blank") {

Number2 += answer

} else {

Number1 = answer

}

NewNumber = "blank"

Display(answer)

}

function MemorySubtract(answer) {

Memory = Memory - eval(answer)

}

function MemoryAdd(answer) {

Memory = Memory + eval(answer)

document.calculator.mem.value = " M "

NewNumber = "blank"

}

function ClearCalc() {

Number1 = ""

Number2 = ""

NewNumber = "blank"

Display("")

}

function Backspace(answer) {

answerlength = answer.length

answer = answer.substring(0, answerlength - 1)

if (Number2 != "") {

Number2 = answer.toString()

Display(Number2)

} else {

Number1 = answer.toString()

Display(Number1)

}

}

function CECalc() {

Number2 = ""

NewNumber = "yes"

Display("")

}

function CheckNumber(answer) {

if(answer == ".") {

Number = document.calculator.answer.value

if(Number.indexOf(".") != -1) {

answer = ""

}

}

if(NewNumber == "yes") {

Number2 += answer

Display(Number2)

}

else {

if(NewNumber == "blank") {

Number1 = answer

Number2 = ""

NewNumber = "no"

}

else {

Number1 += answer

}

Display(Number1)

}

}

function AddButton(x) {

if(x == 1) EqualButton()

if(Number2 != "") {

Number1 = parseFloat(Number1) + parseFloat(Number2)

}

NewNumber = "yes"

opvalue = '+'

Display(Number1)

}

function SubButton(x) {

if(x == 1) EqualButton()

if(Number2 != "") {

Number1 = parseFloat(Number1) - parseFloat(Number2)

}

NewNumber = "yes"

opvalue = '-'

Display(Number1)

}

function MultButton(x) {

if(x == 1) EqualButton()

if(Number2 != "") {

Number1 = parseFloat(Number1) * parseFloat(Number2)

}

NewNumber = "yes"

opvalue = '*'

Display(Number1)

}

function DivButton(x) {

if(x == 1) EqualButton()

if(Number2 != "") {

Number1 = parseFloat(Number1) / parseFloat(Number2)

}

NewNumber = "yes"

opvalue = '/'

Display(Number1)

}

function SqrtButton() {

Number1 = Math.sqrt(Number1)

NewNumber = "blank"

Display(Number1)

}

function PercentButton() {

if(NewNumber != "blank") {

Number2 *= .01

NewNumber = "blank"

Display(Number2)

}

}

function RecipButton() {

Number1 = 1/Number1

NewNumber = "blank"

Display(Number1)

}

function NegateButton() {

Number1 = parseFloat(-Number1)

NewNumber = "no"

Display(Number1)

}

function EqualButton() {

if(opvalue == '+') AddButton(0)

if(opvalue == '-') SubButton(0)

if(opvalue == '*') MultButton(0)

if(opvalue == '/') DivButton(0)

Number2 = ""

opvalue = ""

}

</script>

</HEAD>

<BODY>

<center>

<form name="calculator">

<table bgcolor="#aaaaaa" width=230>

<tr><td>

<table bgcolor="#cccccc" border=1>

<tr><td>

<table border=0 cellpadding=0>

<tr><td bgcolor="#000080"></td></tr>

<tr><td>

<table width="100%" border=0>

<tr><td colspan=6><input type="text" readOnly name="answer" size=30 maxlength=30 onChange="CheckNumber(this.value)"></td></tr>

<tr><td colspan=6>

<table border=0 cellpadding=0>

<tr><td>

<input type="text" name="mem" size=3 maxlength=3 readOnly style="background:menu"><input type="button" name="backspace" class="redl" value="退格" onClick="Backspace(document.calculator.answer.value)return false"><input type="button" name="CE" class="redl" value="CE" onClick="CECalc()return false"><input type="reset" name="C" class="redl" value="C" onClick="ClearCalc()return false">

</td></tr>

</table>

</td></tr>

<tr><td><input type="button" name="MC" class="red" value=" MC " onClick="MemoryClear()return false"></td>

<td><input type="button" name="calc7" class="blue" value=" 7 " onClick="CheckNumber('7')return false"></td>

<td><input type="button" name="calc8" class="blue" value=" 8 " onClick="CheckNumber('8')return false"></td>

<td><input type="button" name="calc9" class="blue" value=" 9 " onClick="CheckNumber('9')return false"></td>

<td><input type="button" name="divide" class="red" value=" / " onClick="DivButton(1)return false"></td>

<td><input type="button" name="sqrt" class="blue" value="sqrt" onClick="SqrtButton()return false"></td></tr>

<tr><td><input type="button" name="MR" class="red" value=" MR " onClick="MemoryRecall(Memory)return false"></td>

<td><input type="button" name="calc4" class="blue" value=" 4 " onClick="CheckNumber('4')return false"></td>

<td><input type="button" name="calc5" class="blue" value=" 5 " onClick="CheckNumber('5')return false"></td>

<td><input type="button" name="calc6" class="blue" value=" 6 " onClick="CheckNumber('6')return false"></td>

<td><input type="button" name="multiply" class="red" value=" * " onClick="MultButton(1)return false"></td>

<td><input type="button" name="percent" class="blue" value=" % " onClick="PercentButton()return false"></td></tr>

<tr><td><input type="button" name="MS" class="red" value=" MS " onClick="MemorySubtract(document.calculator.answer.value)return false"></td>

<td><input type="button" name="calc1" class="blue" value=" 1 " onClick="CheckNumber('1')return false"></td>

<td><input type="button" name="calc2" class="blue" value=" 2 " onClick="CheckNumber('2')return false"></td>

<td><input type="button" name="calc3" class="blue" value=" 3 " onClick="CheckNumber('3')return false"></td>

<td><input type="button" name="minus" class="red" value=" - " onClick="SubButton(1)return false"></td>

<td><input type="button" name="recip" class="blue" value="1/x " onClick="RecipButton()return false"></td></tr>

<tr><td><input type="button" name="Mplus" class="red" value=" M+ " onClick="MemoryAdd(document.calculator.answer.value)return false"></td>

<td><input type="button" name="calc0" class="blue" value=" 0 " onClick="CheckNumber('0')return false"></td>

<td><input type="button" name="negate" class="blue" value="+/- " onClick="NegateButton()return false"></td>

<td><input type="button" name="dot" class="blue" value=" . " onClick="CheckNumber('.')return false"></td>

<td><input type="button" name="plus" class="red" value=" + " onClick="AddButton(1)return false"></td>

<td><input type="button" name="equal" class="red" value=" = " onClick="EqualButton()return false"></td>

</tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</form>

</center>

<script language=javascript>

function keyDown()

{

var iCode=window.event.keyCode

//alert(iCode)

if(event.shiftKey)

{

switch(iCode)

{

case 56:document.all.multiply.click()break

case 59:document.all.minus.click()break

case 60:document.all.plus.click()break

}

}

if(!event.shiftKey&&!event.ctrlKey&&!event.altKey)

{

switch (iCode)

{

case 8:document.all.backspace.click()break

case 187:document.all.equal.click()break

case 96:document.all.calc0.click()break

case 97:document.all.calc1.click()break

case 98:document.all.calc2.click()break

case 99:document.all.calc3.click()break

case 100:document.all.calc4.click()break

case 101:document.all.calc5.click()break

case 102:document.all.calc6.click()break

case 103:document.all.calc7.click()break

case 104:document.all.calc8.click()break

case 105:document.all.calc9.click()break

case 110:document.all.dot.click()break

case 13:document.all.equal.click()break

case 107:document.all.plus.click()break

case 109:document.all.minus.click()break

case 106:document.all.multiply.click()break

case 111:document.all.divide.click()break

case 48:document.all.calc0.click()break

case 49:document.all.calc1.click()break

case 50:document.all.calc2.click()break

case 51:document.all.calc3.click()break

case 52:document.all.calc4.click()break

case 53:document.all.calc5.click()break

case 54:document.all.calc6.click()break

case 55:document.all.calc7.click()break

case 56:document.all.calc8.click()break

case 57:document.all.calc9.click()break

case 190:document.all.dot.click()break

case 13:document.all.equal.click()break

case 191:document.all.divide.click()break

}

}

//event.keyCode=0

//event.returnValue=false

}

window.document.attachEvent("onkeydown",keyDown)

</script>

</BODY>

</HTML>

http://www.chinadds.com