爱站程序员基地学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>
