|
一、JavaScript的基本结构 JavaScript加入到网页中有两种方法，直接加入到HTML文档中，或者引用到HTML文档中。 1．使用<script>标签直接加入到网页中 将JavaScript脚本直接加入到网页中是最常用的方法，例如： <script language=“JavaScript”> type= “text/javascript” <!-- JavaScript语句 --> </script> 例题： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>插入到body的JavaScript</title> </head> <body> <script language="JavaScript"> document.write("欢迎学习Web编程基础！"); </script> </body> </html> 效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>插入到head部分的JavaScript</title> <script language="JavaScript"> function show(){ alert("我是警告框！"); } </script> </head> <body> <input type="button" value="弹出警告框" onclick="show()"/> </body> </html> 注：函数定义放在<head></head>里，单击按键弹出警告框，调用函数show()。 执行结果：
v 2．将脚本引用到HTML文件中 v 对于较长或复用性较高的代码，可以将JavaScript脚本保存成扩展名为.js的文件，然后在HTML文件中进行引用。 hello.js: document.write("欢迎学习Web编程基础！");
js3.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>引用外部JS文件</title> </head> <body> <script type="text/javascript" src=" hello.js"></script> </body> </html> 二、JavaScript语法 变量的作用域 （1）全局变量 全局变量指的是在函数之外声明的变量，其作用范围是从变量定义之处开始，直至全部的脚本结束，包括其后的文档，函数，脚本等。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全局变量</title> </head> <body> <script language="JavaScript"> var g="Hello!" document.write("函数外访问全局变量：g="+g+"<br/>"); function my(){ document.write("函数内访问全局变量：g="+g+"<br/>"); } //调用函数 my(); </script> </body> </html> 执行结果：
（2）局部变量 局部变量指的是在函数内部声明的变量，其作用范围是从声明之处开始，至本函数结束。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全局变量和局部变量</title> </head> <body> <script language="JavaScript"> var v="Global Hello"; function my(){ v="Local Hello";//声明变量没有使用var关键字 document.write("函数内访问v="+v+"<br/>"); v="Changed Local Hello"; document.write("函数内访问更改之后的v="+v+"<br/>"); } document.write("函数外访问v="+v+"<br/>"); my(); document.write("函数外访问v="+v+"<br/>"); </script> </body> </html>
比较运算符==与=== <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>相等与严格相等</title> </head> <body> <script language="JavaScript"> var x=265; var y="265"; var z=265; document.write("265=="265"的结果是："+(x==y)+"<br/>"); document.write("265==="265"的结果是："+(x===y)+"<br/>"); document.write("265===265的结果为："+(x===y)+"<br/>"); </script> </body> </html>
条件运算符 JavaScript的条件运算符是三目运算符，是根据条件执行两个语句中的一个，使用方法为： condition ? 语句1:语句2 如果condition成立，执行语句1；如果condition不成立，执行语句2。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>条件运算符</title> </head> <body> <script language="JavaScript"> var n=window.prompt("请输入成绩：（0-100）"); var s=parseInt(n); var r=s>=60?"恭喜，你及格了！":"你没有及格或者输入的数据不合法！"; alert(r); </script> </body> </html>
字符串运算符 可使用“+”实现数值类型的相加运算，也可以使用“+”来连接字符串，如果一个表达式中既有数值也有字符串，则表达式从左到右进行判断，一旦出现字符串，则后续的操作符都被认为是字符串进行连接。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>运算符+的使用</title> </head> <body> <script language="JavaScript"> var s1=3+4+5+6; var s2=3+4+5+"6"; var s3=3+4+"5"+"6"; var s4=3+"4"+5+6; var s5="3"+4+5+6; document.write("3+4+5+6="+s1+"<br/>"); document.write("3+4+5+"6"="+s2+"<br>"); document.write("3+4+"5"+"6"="+s3+"<br/>"); document.write("3+"4"+5+6="+s4+"<br/>"); document.write(""3"+4+5+6="+s5+"<br/>"); </script> </body> </html>
补充练习：从键盘输入二个数到文本框，计算二个数的和 <HTML> <HEAD> <script type="text/javaScript"> function add(){ var num1=parseFloat(document.myform.text1.value); var num2=parseFloat(document.myform.text2.value); if(!isNaN(num1)&&!isNaN(num2)){ alert(num1+num2);} else{ alert("请输入合法数字");} document.myform.text3.value=num1+num2; } </script> </HEAD> <BODY > <form name="myform"> <input type="text" name="text1"> + <input type="text" name="text2"> <input type="button" name="bot1" value="相加" onclick="add()"> <input type="text" name="text3" > </form> </BODY> </HTML> 执行结果：
|
|
|
