1、什么是 JavaScript? • JavaScript 被设计用来向 HTML 页面添加交互行为。 • JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。 • JavaScript 由数行可执行计算机代码组成。 • JavaScript 通常被直接嵌入 HTML 页面。 • JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。 • 所有的人无需购买许可证均可使用 JavaScript。 2、如何实现 JavaScript HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中。 例子1:生成文本 <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> 如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 <script> 标签(同时使用 type 属性来定义脚本语言)。 这样,<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始,到何处结束。 例子2:生成普通文本和标签 <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html> 3、JavaScript放置在那?Head还是body? A:当页面载入时,会执行位于 body 部分的 JavaScript。 B:当被调用时,位于 head 部分的 JavaScript 才会被执行。 <html> <head> <script type="text/javascript"> function message() { alert("该提示框是通过 onload 事件调用的。") } </script> </head> <body οnlοad="message()"> </body> </html> C:外部脚本包含到里面: <html> <head> </head> <body> <script src="/js/example_externaljs.js"> </script> <p> 实际的脚本位于名为 "xxx.js" 的外部脚本中。 </p> </body> </html> 使用外部 JavaScript 有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。 为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。 注意:外部文件不能包含 <script> 标签。 然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件了: <html> <head> <script src="xxx.js">....</script> </head> <body> </body> </html> 提示:您可以把 .js 文件放到网站目录中通常存放脚本的子目录中,这样更容易管理和维护。 4、JS的注释 单行注释 // ,多行注释/* …… */ 5、JavaScript变量 实例 在脚本执行的过程中,可以改变变量的值。可以通过其名称来引用一个变量,以此显示或改变它的值。 <html> <body> <script type="text/javascript"> var firstname; firstname="George"; document.write(firstname); document.write("<br />"); firstname="John"; document.write(firstname); </script> <p>上面的脚本声明了一个变量,为其赋值,显示该值,改变该值,然后再显示该值。</p> </body> </html> A:声明变量 (var) var x=5; var carname="Volvo"; 6、操作符基本上和Java相同 7、条件运算符 JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。 语法 variablename=(condition)?value1:value2 例子 greeting=(visitor=="PRES")?"Dear President ":"Dear "; 如果变量 visitor 中的值是 "PRES",则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。 8、JavaScript消息框 A: 警告框:alert("文本") <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框!!"再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行。"") } </script> </head> <body> <input type="button" οnclick="disp_alert()" value="显示警告框" /> </body> </html> B:确认框:confirm("文本") 确认框用于使用户可以验证或者接受某些信息。 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。 如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。 <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" οnclick="show_confirm()" value="Show a confirm box" /> </body> </html> C:提示框:prompt("文本","默认值") 提示框经常用于提示用户在进入页面前输入某个值。 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。 <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好!" + name + " 今天过得怎么样?") } } </script> </head> <body> <input type="button" οnclick="disp_prompt()" value="显示提示框" /> </body> </html> 9:函数 函数在页面起始位置定义,即 <head> 部分。 <html> <head> <script type="text/javascript"> function myfunction() { alert("您好!") } </script> </head> <body> <form> <input type="button" οnclick="myfunction()" value="调用函数"> </form> <p>通过点击这个按钮,可以调用一个函数。该函数会提示一条消息。</p> </body> </html> A:如何定义函数 创建函数的语法: function 函数名(var1,var2,...,varX) { 代码... } B:带参数的函数 <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" οnclick="myfunction('早安!')" value="在早晨"> <input type="button" οnclick="myfunction('晚安!')" value="在夜晚"> </form> <p>通过点击这个按钮,可以调用一个函数。该函数会输出传递给它的参数。</p> </body> </html> C:返回值的函数 <html> <head> <script type="text/javascript"> function myFunction() { return ("您好,祝您愉快!") } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()) </script> <p>body 部分中的脚本调用一个函数。</p> <p>该函数返回一段文本。</p> </body> </html> 10、for循环 例子: <html> <body> <script type="text/javascript"> for (i = 1; i <= 6; i++) { document.write("<h" + i + ">这是标题 " + i) document.write("</h" + i + ">") } </script> </body> </html> 11、for in声明:For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作) <html> <body> <script type="text/javascript"> var x var mycars = new Array() mycars[0] = "宝马" mycars[1] = "奔驰" mycars[2] = "宾利" for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </body> </html> 12、事件 事件举例: 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意:事件通常与函数配合使用,当事件发生时函数才会执行。 onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。 onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:"Welcome John Doe!"。 onFocus, onBlur 和 onChange onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。 下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkEmail() 函数就会被调用。 <input type="text" size="30" id="email" οnchange="checkEmail()"> onSubmit onSubmit 用于在提交表单之前验证所有的表单域。 下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true,则提交表单,反之取消提交。 <form method="post" action="xxx.htm" οnsubmit="return checkForm()"> onMouseOver 和 onMouseOut onMouseOver 和 onMouseOut 用来创建“动态的”按钮。 下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框: <a href="http://www.w3school.com.cn" οnmοuseοver="alert('An onMouseOver event');return false"> <img src="w3school.gif" width="100" height="30"> </a> 13、try catch <html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="此页面存在一个错误。\n\n" txt+="错误描述: " + err.description + "\n\n" txt+="点击OK继续。\n\n" alert(txt) } } </script> </head> <body> <input type="button" value="View message" οnclick="message()" /> </body> </html> 实例 2 下一个例子会显示一个确认框,让用户来选择在发生错误时点击确定按钮来继续浏览网页,还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false,代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true,那么代码什么也不会做。 <html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="There was an error on this page.\n\n" txt+="Click OK to continue viewing this page,\n" txt+="or Cancel to return to the home page.\n\n" if(!confirm(txt)) { document.location.href="http://www.w3school.com.cn/" } } } </script> </head> <body> <input type="button" value="View message" οnclick="message()" /> </body> </html> 14、throw 例子: <html> <body> <script type="text/javascript"> var x=prompt("请输入 0 至 10 之间的数:","") try { if(x>10) throw "Err1" else if(x<0) throw "Err2" else if(isNaN(x)) throw "Err3" } catch(er) { if(er=="Err1") alert("错误!该值太大!") if(er == "Err2") alert("错误!该值太小!") if(er == "Err3") alert("错误!该值不是数字!") } </script> </body> </html> 15、您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的: document.write("Hello \ World!")
JavaScript基础(w3school)
最新推荐文章于 2022-04-12 11:12:51 发布