您的位置：首页 > Web前端 > JavaScript

web前端开发笔记——JavaScript（2）

2020-08-06 11:34 1086 查看

学JavaScript的第二天

学习script标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的JavaScript</title>
</head>
<body>
<h1>body中的JavaScript</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML="我的第一段JavaScript";
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的JavaScript</title>
</head>
<body>
<h1>javaScript能直接写入HTML输出流中</h1>
<p id="demo"></p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
<p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p>
</body>
</html>

JavaScript对事件的反应

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>JavaScript对事件能作出反应，例如对按钮的点击弹出窗口</p>
<button type="button" onclick="alert('欢迎学习JavaScript')">点击弹出window</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript同样也可以在head中使用</title>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="段落被更改";
}
</script>
</head>
<body>
<p id="demo">这个段落</p>
<button type="button" onclick="myFunction()">点我更改段落</button>
</body>
</html>

JavaScript脚本可以放在外部文件中进行使用

注释：外部脚本不能包含 script 标签。
在外部文件中放置脚本有如下优势:

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载
function myFunction(){
document.getElementById("demo").innerHTML="通过外部脚本改变HTML";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本放在外部文件中</title>
</head>
<body>
<script src="../js/myscript.js"></script>
<p id="demo">一段段落一段段落一段段落一段段落</p>
<button type="button" onclick="myFunction()">点击我通过外部文件改变段落</button>
</body>
</html>

测试输入是否是数字的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
请输入数字，如果输入的不是数字，系统会弹出提示框。
</p>
<input id="demo" type="text" />
<script>
function myFunction(){
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("您输入的不是数字");
}
else{
alert("您输入的是数字" );
}
}
</script>
<button type="button" onclick="myFunction()">点击这里测试输入是否是数字</button>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航