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 发布
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
