案例:
1.< script>标签在html中的书写位置
在head中编写JavaScript代码查找id="context"的div元素，控制台打印。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript标识放置在<Head>...</Head>头部之间</title>
<script type="text/javascript">
var ODiv = document.getElementById("context"); //内嵌式,自定义右键菜单
console.log(ODiv); // 打印出null
</script>
</head>
<body>
<div id="context">你好</div>
</body>
</html>
在body中编写JavaScript代码查找id="context"的div元素，控制台打印。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript标识放置在<Body>...</Body>之间</title>
</head>
<body>
<div id="context">你好</div>
<script type="text/javascript">
var ODiv = document.getElementById("context");
console.log(ODiv); // 打印出<div id="context">你好</div>
</script>
</body>
</html>
2.常用输出语句
alert()、console.log()、document.write()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用输出语句</title>
</head>
<body>
<script type="text/javascript">
// alert() 弹出警告框
alert('登录成功！');
// console.log() 控制台输出
console.log('控制台输出')
// 在HTML文档中输出
document.write('在HTML文档中输出')
</script>
</body>
</html>
3.输出用户输入的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出用户输入的信息</title>
</head>
<body>
<script type="text/javascript">
var msg = prompt("请输入您的信息"); // 输入框
document.write(msg);
</script>
</body>
</html>
4.验证用户名和密码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证用户名和密码</title>
</head>
<body>
<script>
// 输入用户名和密码，如果正确，给出弹出框提示“登录成功”，如果不对，提示“输入错误”
var userName = prompt("请输入用户名");
var passWord = prompt("请输入密码");
if(userName =='admin' && passWord =='123456'){
alert('登录成功');
}
else{
alert('用户名或密码输入错误');
}
</script>
</body>
</html>
5.计算年龄小游戏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算年龄</title>
</head>
<body>
<input type="button" onclick="disp_year()" value="请输入您的出生年份" /> <!--onlick使用了函数-->
<script type="text/javascript">
function disp_year(){
var year=prompt("请输入您的出生年份");
if (year!=null && year!="")
{
document.write('您今年'+(2022-year)+'岁');
}
}
</script>
</body>
</html>
6.简单加法器计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<title>简单加法器计算</title>
<script>
var num1 = prompt('请您输入第一个值：');
var num2 = prompt('请您输入第二个值：');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是:' + result);
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看