JavaScript学习笔记——基本知识
1>JavaScript的放置和注释
1.输出工具
A.alert();
B.document.write();
C.prompt("","");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>输出函数测试</title> </head> <body> <script> <!-- 弹出对话框显示 --> alert("<h1>后盾网</h1>"); <!-- 页面显示 --> document.write("<h1>后盾网视频教程</h1>"); <!-- 弹出输入对话框，一个提示参数，一个输入参数 --> var value=prompt("please enter your name","") <!-- 显示输入的参数 --> alert(value); </script> </body> </html>
2.JavaScript如何在html页面当中进行放置
A.<script></script> 放在<head></head>中间，也可以放在<body></body>中间，有两个属性，一个是type，另外一个是language
div中加样式：写class，<div class="one"></div>，然后在<head></head>中写<style></style>
<style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } </style>
JavaScript可以在html页面当中的任何位置来进行调用，但是他们还是一个整体，是相互联系，相互影响。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript放置</title> <script type="text/javascript" language="javascript" > var a="我是后盾网" </script> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } </style> </head> <body> <script type="text/javascript" language="javascript"> a="我是论坛，bbs.houdunwang.com" document.write(a); </script> <div class="one"> 欢迎收看后盾网视频教程，收看更多原创视频请到后盾网论坛下载！ </div> <script type="text/javascript" language="javascript"> alert(a); </script> </body> </html>
B.可以在超链接或是重定向的位置调用javascript代码
格式："javascript:alert('我是超链接')"
重定向格式：action="javascript:alert('我是表单')"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>place2</title> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } </style> </head> <body> <div class="one"> 欢迎收看后盾网视频教程，收看更多原创视频请到后盾网论坛下载！ </div> <!-- 点击链接，弹出对话框 --> <a href="javascript:alert('我是超链接')">链接</a> <!-- from表单，提交表单后弹出对话框 --> <form action="javascript:alert('我是表单')" method="post"> <input type="text" name="names"> <!-- type是submit，点击按钮后直接提交表单 --> <input type="submit" value="提交"> </form> </body> </html>
C.在事件后面进行调用
1>.格式：onclick="alert('我是事件')"
2>.<script for="two" event="onclick">
alert("我是DIV2");
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>place3</title> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } .two{ width:200px; height:300px; background:blue; font-size:12px; color:red; } </style> <!-- for属性表示为了那个ID，一般不用 --> <script for="two" event="onclick"> alert("我是DIV2"); </script> </head> <body> <!-- 点击这个div弹出对话框 --> <div class="one" onclick="alert('我是事件')"> 欢迎收看后盾网视频教程，收看更多原创视频请到后盾网论坛下载！ </div> <div class="two" id="two"> 欢迎收看后盾网视频教程，收看更多原创视频请到后盾网论坛下载！ </div> </body> </html>
3.调用外部javascript文件
格式： <script src="2.js"></script> 在<head></head>中加入
<script src="2.txt"></script>
js文件
var a="后盾网视频教程"; alert(a);
注意：在调用页面<script>标签对当中不能有任何代码、在js脚本中不能出现<script>标签对、但是他们还是一个整体，是相互联系，相互影响。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>place4</title> <!-- 调用外部js文件 --> <script src="2.txt"></script> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } .two{ width:200px; height:300px; background:blue; font-size:12px; color:red; } </style> <script> <!-- //a="bbs.houdunwang.com"; //alert(a); //后盾网 /* 后盾网网 视频教程 bbs.houdunwang.com */ --> </script> </head> <body> <div class="one" > 欢迎收看后盾网视频教程，收看更多原创视频请到后盾网论坛下载！ </div> <div class="two" id="two"> 欢迎收看后盾网视频教程，收看更多原创视频请到后盾网论坛下载！ </div> </body> </html>
4.javascript注释:
1.对付旧的浏览器
<!-- -->
2.真正注释符号。
A.行内注释 //
B.块注释/*
*/