JavaScript学习笔记—

JavaScript学习笔记——基本知识

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.块注释/*