JavaScript编程入门与实践-优快云博客

本文介绍了JavaScript的基础概念，包括其作用、特点、如何在HTML页面中应用，以及基本语法、条件语句等核心内容。通过实例展示了如何在head和body部分放置脚本，以及如何使用外部JS文件。同时，提供了JavaScript变量、注释、条件判断语句的详细说明。

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

什么是 JavaScript？

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言(就是说，代码执行不进行预编译)
所有的人无需购买许可证均可使用 JavaScript。

把JavaScript 放置到何处

当页面载入时，会执行位于 body 部分的 JavaScript。

当被调用时，位于 head 部分的 JavaScript 才会被执行。

实例：

位于head部分的脚本：

当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。

View Code

<html>
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>

<body onload="message()">

</body>
</html>

位于body部分的脚本：

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

View Code

<html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("该消息在页面加载时输出。")
</script>

</body>
</html>

在head和body部分的脚本：

可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。

View Code

<html>
<head>
<script type="text/javascript">
....
</script>
</head>

<body>
<script type="text/javascript">
....
</script>
</body>
</html>

使用外部的JS：

aa.js

document.write("hello word")

function disp_alert()

{

　　alert("hello")

}

View Code

<html>
<head>
<script type="text/javascript" src="aa.js">
</script>
</head>

<body>
<input type="button" onclick="javascript:disp_alert()" value"submit" />
</body>
</html>

JavaScript 注释

单行的注释以 // 开始

多行注释以 /* 开头，以 */ 结尾

JavaScript 变量

JavaScript 变量名称的规则：

1.变量对大小写敏感(y和Y是不同的变量)

2.变量必须以字母或下划线开始

通过var语句来生命JS变量

var x=5;

var name;

JavaScript 条件语句

if语句：

View Code

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 10) 
{
document.write("<b>早安</b>")
}
</script>

<p>本例演示 If 语句。</p>

<p>如果浏览器时间小于 10，那么会向您问“早安”。</p>

</body>
</html>

if....else....语句：

View Code

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 10) 
{
document.write("<b>早安</b>")
}
else
{
document.write("<b>祝您愉快</b>")
}
</script>

<p>本例演示 If...Else 语句。</p>

<p>如果浏览器时间小于 10，那么会向您问“早安”，否则会向您问候“祝您愉快”。</p>

</body>
</html>

if..else if..else语句：

View Code

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>

<p>本例演示 if..else if...else 语句。</p>

</body>
</html>

switch语句：

View Code

<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
  document.write("<b>Finally Friday</b>")
break
case 6:
  document.write("<b>Super Saturday</b>")
break
case 0:
  document.write("<b>Sleepy Sunday</b>")
break
default:
  document.write("<b>I'm really looking forward to this weekend!</b>")
}
</script>

<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

</body>
</html>