zoukankan      html  css  js  c++  java
  • 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.块注释/*

            */

  • 相关阅读:
    初认识AngularJS
    (imcomplete) UVa 10127 Ones
    UVa 10061 How many zero's and how many digits?
    UVa 11728 Alternate Task
    UVa 11490 Just Another Problem
    UVa 10673 Play with Floor and Ceil
    JSON对象和字符串的收发(JS客户端用typeof()进行判断非常重要)
    HTML.ActionLink 和 Url.Action 的区别
    EASYUI TREE得到当前节点数据的GETDATA方法
    jqueery easyui tree把已选中的节点数据拼成json或者数组(非常重要)
  • 原文地址:https://www.cnblogs.com/tonglin0325/p/4673004.html
Copyright © 2011-2022 走看看