• js系列(8)简介


        JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

        (1)简述:

    1.JavaScript 是脚本语言
    2.JavaScript 是一种轻量级的编程语言。
    3.JavaScript 是可插入 HTML 页面的编程代码。
    4.JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
    5.JavaScript 很容易学习。

        (2)js能实现的功能:

        1)写入html输出流:

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.1(1)</title>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够直接写入 HTML 输出流中:</b></p>
      <script>
        document.write("用js输出我的签名:");
        document.write("<pre><font size=5>是是非非终为假,<br/>云淡风轻总是真!</font></pre>");
      </script>
      <p>提醒:<br/>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
      </p>    
    </body>
    </html>

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.1(2)</title>
      <script>
      function myFunc(){
        document.write("用js输出我的签名:");
        document.write("<pre><font size=5>是是非非终为假,<br/>云淡风轻总是真!</font></pre>");
      }
      </script>
     </head>
    <body onload="myFunc()">    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够直接写入 HTML 输出流中:</b></p>
      <p>提醒:<br/>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
      </p>    
    </body>
    </html>
    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.1(3)</title>
      <script>
      function myFunc(){
        document.write("用js输出我的签名:");
        document.write("<pre><font size=5>是是非非终为假,<br/>云淡风轻总是真!</font></pre>");
      }
      window.onload=myFunc;
      </script>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够直接写入 HTML 输出流中:</b></p>
      <p>提醒:<br/>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
      </p>    
    </body>
    </html>

        2)对事件的反应:

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.2</title>
      <script>
      function myFunc(){
        alert("My name is MenAngel!")
      }
      </script>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够对事件进行响应:</b></p>
      <!--这里,函数要带括号-->
      <input type="button" value="弹出对话框" onclick="myFunc()">
    </body>
    </html>

        3)改变 HTML 内容:

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.3</title>
      <script>
      function changeContent(){
        x=document.getElementById("demo");
        x.innerHTML="My name is sunjimeng!";
      }
      </script>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够对动态改变html元素的内容:</b></p>
      <!--这里,函数要带括号-->
      <input type="button" value="改变文本内容" onclick="changeContent()">
      <p id="demo">My name is MenAngel!<p>
    </body>
    </html>

        document.getElementById("some id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

        4)改变图片元素的内容:

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.4</title>
      <script>
      function changeImg(){
        b_element=document.getElementById("bumb");
        s_element=document.getElementById("switch");
        if(b_element.src.match("bulbon_on")){
          b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png";
          s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png";
        }else{
          b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_on.png";
          s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_on.png";
        }
      }
      </script>
      <style>
      img{
       margin-left:50px;
       margin-top:18px;
      }
      </style>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够动态改变图片元素的内容:</b></p>
      <div style="background-color:black;250px;height:300px;" >
      <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png" id="bumb" width="150" height="200"/>
      <img onclick="changeImg()" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png" id="switch" width="150" height="50"/>
      <div>
    </body>
    </html>

        5)改变元素的样式:

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.5</title>
      <script>
      function changeColor(){
        element=document.getElementById("div_main");
        element.style.background="red";
      }
      </script>
      <style>
      #div_main{
        height:200px;
        width:200px;
        background-color:black;
      }
      </style>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 能够动态改变元素的样式:</b></p>
      <input value="改变背景颜色" type="button" onclick="changeColor()"/>
      <div id="div_main" ">
      </div>
    </body>
    </html>

        6)验证输入:

    <!DOCTYPE html>
    <html>
     <head>
      <title>示例8.6</title>
     <script>
      function myFunction()
      {
        var x=document.getElementById("demo").value;
         if(x==""||isNaN(x))
         {
           alert("不是数字");
         }
      }
    </script>
     </head>
    <body>    
    <!--测试JavaScript的功能-->
      <p><b>JavaScript 验证数据类型:</b></p>
      <input type="text" value="" " id="demo"> <button onclick="myFunction()">点一下</button></input>
    </body>
    </html>

        (3)拓展:

        JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。 Java(由 Sun 发明)是更复杂的编程语言。

        ECMA-262 是 JavaScript 标准的官方名称。

        JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。 Java(由 Sun 发明)是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

  • 相关阅读:
    HTML5智能表单
    HTML表单
    CSS文档统筹
    二分查找/折半查找(C++实现)
    实验6:Problem H: 字符串类(II)
    实验6:Problem G: 字符串类(I)
    实验6:Problem F: 时间和日期类(IV)
    实验6:Problem E: 时间和日期类(III)
    实验6:Problem D: 时间和日期类(II)
    实验6:Problem C: 时间和日期类(I)
  • 原文地址:https://www.cnblogs.com/MenAngel/p/5770152.html
Copyright © 2020-2023  润新知