zoukankan      html  css  js  c++  java
  • JavaScript简易教程

    JavaScript:网络脚本语言。可用于html和web,可插入html由浏览器执行

    使用方法/环境:

    1、写入HTML输出

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <p>
     6 JavaScript 能够直接写入 HTML 输出流中:
     7 </p>
     8 
     9 <script>
    10 document.write("<h1>This is a heading</h1>");
    11 document.write("<p>This is a paragraph.</p>");
    12 </script>
    13 
    14 <p>
    15 您只能在 HTML 输出流中使用 <strong>document.write</strong>16 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
    17 </p>
    18 
    19 </body>
    20 </html>

    2、事件反应

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一段 JavaScript</h1>
    
    <p>
    JavaScript 能够对事件作出反应。比如对按钮的点击:
    </p>
    
    <button type="button" onclick="alert('Welcome!')">点击这里</button>
    
    </body>
    </html>

    3、修改html内容

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一段 JavaScript</h1>
    
    <p id="demo">
    JavaScript 能改变 HTML 元素的内容。
    </p>
    
    <script>
    function myFunction()
    {
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
    }
    </script>
    
    <button type="button" onclick="myFunction()">点击这里</button>
    
    </body>
    </html>

    4、改变 HTML 图像

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
      {
      element.src="/i/eg_bulboff.gif";
      }
    else
      {
      element.src="/i/eg_bulbon.gif";
      }
    }
    </script>
    
    <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
    
    <p>点击灯泡来点亮或熄灭这盏灯</p>
    
    </body>
    </html>

    5、改变 HTML 样式

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一段 JavaScript</h1>
    
    <p id="demo">
    JavaScript 能改变 HTML 元素的样式。
    </p>
    
    <script>
    function myFunction()
    {
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
    }
    </script>
    
    <button type="button" onclick="myFunction()">点击这里</button>
    
    </body>
    </html>

    6、常用于验证用户的输入

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一段 JavaScript</h1>
    
    <p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
    
    <input id="demo" type="text">
    
    <script>
    function myFunction()
    {
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
        {
        alert("Not Numeric");
        }
    }
    </script>
    
    <button type="button" onclick="myFunction()">点击这里</button>
    
    </body>
    </html>

    参考:http://www.w3school.com.cn/js/index.asp

  • 相关阅读:
    Android ANR异常解决方案
    数据结构之斐波那契查找
    数据结构之插值查找
    数据结构之折半查找
    Android Task 任务
    java中“==”号的运用
    php中向前台js中传送一个二维数组
    array_unique和array_flip 实现去重间的区别
    js new Date() 获取时间
    手机端html5触屏事件(touch事件)
  • 原文地址:https://www.cnblogs.com/wzk-0000/p/9761809.html
Copyright © 2011-2022 走看看