文章目录
一、JavaScript的特点
-
JavaScript 是一种轻量级的编程语言
-
JavaScript 是可插入HTML页面的编程代码
-
JavaScript 插入HTML页面后,可由所有的现代浏览器执行
-
JavaScript 很容易学习
二、JavaScript 快速体验
2.1 直接写入HTML内容
如下创建一个html文件,然后在body内增加一个script标签,然后使用document.write函数直接写入HTML内容,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript直接写入HTML</title>
</head>
<body>
<script>
document.write("<h1>我的第一个标题</h1>");
document.write("<p>我的第一个段落</p>");
</script>
</body>
</html>
然后在浏览器中打开,结果如下:
2.2 对事件的响应
如下,在html的body体内,通过button标签定义一个按钮,然后按钮中响应点击事件,弹出“你好,世界”的问候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" onclick="alert('你好,世界')")>确定</button>
</body>
</html>
在浏览器中运行,结果如下:
点击【确定】按钮之后,弹出如下提示框:
2.3 改变HTML的内容
如下,在html文件中的body体内,定义一个段落和按钮,点击按钮修改段落内容,修改的动作实现由script标签中的update_demo函数实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo">你好,JavaScript</p>
<button type="button" onclick="update_demo()")>更新</button>
<script>
function update_demo()
{
demo_elem=document.getElementById("demo");
demo_elem.innerHTML="Hello,JavaScript";
}
</script>
</body>
</html>
在浏览器中打开结果如下:
当点击【更新】按钮后,页面更新为如下:
2.4 改变HTML图像
这里可以在和html同目录下分别存放两张图片
01.png图片如下
02.png图片如下:
然后编写html代码,如下,即通过change_image函数进行切换图片,从而做到页面显示开灯和关灯的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function change_image()
{
elem=document.getElementById("demo")
if (elem.src.match("01"))
{
elem.src="02.png";
}
else
{
elem.src="01.png";
}
}
</script>
<img id="demo" onclick="change_image()" src="01.png" width="240" height="180">
<p>点击图片可以打开或者关闭电灯</p>
</body>
</html>
在浏览器中打开效果如下:
当点击灯泡一下后,显示如下:
当再次点击后又会显示关灯的效果。
2.5 改变HTML样式
编写html代码如下,即通过change_style函数修改段落的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo">我的第一个段落</p>
<button type="button" onclick="change_style()">修改段落颜色</button>
<script>
function change_style()
{
elem=document.getElementById("demo");
elem.style.color="#ff0000"
}
</script>
</body>
</html>
在浏览器中打开如下
当点击按钮后,效果如下:
2.6 验证输入
在html编写如下代码,即检查输入的是否为数字,如果不是数字,则弹窗提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="demo" type="text">
<button type="button" onclick="check_input()">检查</button>
<script>
function check_input()
{
var num=document.getElementById("demo").value;
if(num=="" || isNaN(num))
{
alert("您输入的不是数字!")
}
}
</script>
</body>
</html>
在浏览器中打开如下:
当输入“你好”,点击【检查】时,如下弹出提示窗口