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

  • 相关阅读:
    【LeetCode】048. Rotate Image
    【LeetCode】036. Valid Sudoku
    【LeetCode】060. Permutation Sequence
    【LeetCode】001. Two Sum
    【LeetCode】128. Longest Consecutive Sequence
    【LeetCode】081. Search in Rotated Sorted Array II
    【LeetCode】033. Search in Rotated Sorted Array
    顺时针打印矩阵
    矩形覆盖
    二维数组中的查找
  • 原文地址:https://www.cnblogs.com/wzk-0000/p/9761809.html
Copyright © 2011-2022 走看看