JavaScript 实例

最新推荐文章于 2022-03-25 01:40:49 发布

原创最新推荐文章于 2022-03-25 01:40:49 发布 · 924 阅读

1 ·

CC 4.0 BY-SA版权

PHP、HTML等专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了JavaScript在HTML页面中的应用，包括基本实例、函数与事件处理、外部文件使用、语句、注释、代码块、消息框、错误处理及高级实例等。详细介绍了如何在页面中插入文本、使用函数和事件、外部JavaScript文件、JavaScript语法特点、消息对话框的创建、错误捕获与处理，以及高级功能如cookie操作和循环计时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. JavaScript 使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。Script 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

2. 基础 JavaScript 实例
2.1 <body> 中的 JavaScript

JavaScript 会在页面加载时向 HTML 的 <body> 写文本:
<!DOCTYPE html>
<html>   <body>
<p>JavaScript 能够直接写入 HTML 输出流中：</p>
 <script>
   document.write("<h1>This is a heading</h1>");
   document.write("<p>This is a paragraph.</p>");
 </script>
<p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p></body></html>

2.2 JavaScript 函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时才调用该函数。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
2.2.1 <head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。该函数会在点击按钮时才被调用：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
   document.getElementById("demo").innerHTML="My First JavaScript Function";  在这里找到该元素，并更改内容
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>  
</body></html>

2.2.2 <body> 中的 JavaScript 函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>  <body>
<h1>My First Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>  </html>

2.3 外部的 JavaScript
外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，要在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html><body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script type="text/javascript" src="/js/myScript.js"></script>
</body>
</html>

3. JavaScript 语句、注释和代码块
1.代码块用“{ }”包围起来。
2.JavaScript 对大小写是敏感的。
3. 使用反斜杠对代码行进行换行。

document.write("Hello \
World!");

4. 注释
用“//” 注释单行，用"/* */"注释多行。
4. JavaScript 消息框
JavaScript 中可创建三种消息框：警告框、确认框、提示框。
4.1 显示警告框
用一条语句就可以实现： alert("我是警告框！！")
4.2 确认框

<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" onclick="show_confirm()" value="Show a confirm box" />
</body></html>

4.3 提示框

<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" onclick="disp_prompt()" value="显示提示框" />
</body></html>

5. 带有参数并返回值的函数
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

<html><head>
<script type="text/javascript">
function product(a,b)
{
   return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
<p>body 部分中的脚本调用一个带有两个参数（6 和 5）的函数。</p>
<p>该函数会返回这两个参数的乘积。</p>
</body></html>

6. JavaScript 错误处理

6.1 带确认框的try..catch()

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
<html><head>
<script type="text/javascript">
var txt=""
function message()
{
try
   {
   adddlert("Welcome guest!")
   }
catch(err)
   {
     txt="本页中存在错误。\n\n"
     txt+="点击“确定”继续查看本页，\n"
     txt+="点击“取消”返回首页。\n\n"
     if(!confirm(txt))
         {
         document.location.href="/index.html"
         }
   }
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body></html>

6.2 Throw 语句声明及onerror处理

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>

onerror处理            
<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>

7. 高级JavaScript实例
7.1 创建一个欢迎cookie

<html>  <head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{ 
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{ 
c_start=c_start + c_name.length+1 
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
} 
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>  </html>

7.2 带有停止按钮的无穷循环中的计时事件

<html><head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body></html>