zoukankan      html  css  js  c++  java
  • javascript初步了解

    0.1   <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

    <script> 和 </script> 之间的代码行包含了 JavaScript:

    那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

    0.2 脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

    通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

    <!DOCTYPE html>
    <html>
    <body>
    
    
    <h1>My Web Page</h1>
    
    
    <p id="demo">A Paragraph</p>
    
    
    <button type="button" onclick="myFunction()">Try it</button>
    <script>
    function myFunction()
    {
    document.getElementById("demo").innerHTML="My First JavaScript Function";
    }
    </script>
    
    
    </body>
    </html>
    <!DOCTYPE html>
    <html>
     
    <head><script>
    function myFunction()
    {
    document.getElementById("demo").innerHTML="My First JavaScript Function";
    }
    </script>
    </head>
     
    <body>
     
    <h1>My Web Page</h1>
     
    <p id="demo">A Paragraph</p>
     
    <button type="button" onclick="myFunction()">Try it</button>
     
    </body>
    </html>

    我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。

    都是点击按键后,将A Paragraph替换为My First JavaScript Function

    0.3   注释和C语言相同

    0.4 在 JavaScript 中,用分号来结束语句是可选的。

    0.5 JavaScript 对大小写是敏感的。函数 getElementById 与 getElementbyID 是不同的。

    0.6当您向变量分配文本值时,应该用双引号或单引号包围这个值。

    1 文本document.write("<h1>Hello World!</h1>")

    2 提醒框<script type="text/javascript">

    function message()

    {

    alert("该提示框是通过 onload 事件调用的。")

    }

    </script>

    </head>

    <body onload="message()">

    确认框

    function show_confirm()

    {

    var r=confirm("Press a button!");

    if (r==true)

      {

      alert("You pressed OK!");

      }

    else

      {

      alert("You pressed Cancel!");

      }

    }

    提示框

    function disp_prompt()

      {

      var name=prompt("请输入您的名字","Bill Gates")

      if (name!=null && name!="")

        {

        document.write("你好!" + name + " 今天过得怎么样?")

        }

      }

    警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。alert("文本")

    确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。confirm("文本")

    提示框经常用于提示用户在进入页面前输入某个值。

    当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

    如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

    prompt("文本","默认值")

    3 调用外部js,外部脚本不能包含 <script> 标签。

    <script src="/js/example_externaljs.js"></script>

    4 得到按键值通过ID值为demo的,输出到html中carname的值

    document.getElementById("demo").innerHTML=carname;

    5 函数

    5.1 带参数的

    <script type="text/javascript">

    function myfunction(txt)

    {

    alert(txt)

    }

    </script>

    </head>

    <body>

    <form>

    <input type="button" onclick="myfunction('您好!')" value="调用函数">

    </form>

    6 出错报警

    try 语句允许我们定义在执行时进行错误测试的代码块。

    catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

    JavaScript 语句 try 和 catch 是成对出现的。

    <!DOCTYPE html>

    <html>

    <head>

    <script>

    var txt="";

    function message()

    {

    try

      {

      adddlert("Welcome guest!");//alert写错

      }

    catch(err)

      {

      txt="There was an error on this page. ";

      txt+="Error description: " + err.message + " ";

      txt+="Click OK to continue. ";

      alert(txt);

      }

    }

    </script>

    </head>

     

    <body>

    <input type="button" value="View message" onclick="message()">

    </body>

     

    </html>

    7 图像映射

    <html>

    <head>

    <script type="text/javascript">

    function writeText(txt)

    {

    document.getElementById("desc").innerHTML=txt

    }

    </script>

    </head>

    <body>

    <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

    <map name="planetmap" id="planetmap">

    <area shape="circle" coords="180,139,14"

    onMouseOver="writeText('直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星,同时还由于两者拥有很多共同的特征。')"

    href ="/example/html/venus.html" target ="_blank" alt="Venus" />

    <area shape="circle" coords="129,161,10"

    onMouseOver="writeText('从地球上是很难研究水星的,这是由于它和太阳的距离总是很近。')"

    href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />

    <area shape="rect" coords="0,0,110,260"

    onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"

    href ="/example/html/sun.html" target ="_blank" alt="Sun" />

    </map>

    <p id="desc"></p>

    </body>

    </html>

    8 无穷尽的计时

    function timedCount()

    {

    document.getElementById('txt').value=c

    c=c+1

    t=setTimeout("timedCount()",1000)//1000为1s显示一次

    }

    如果想停止,就在加一个函数,将值清空。

    function stopCount()

    {

    c=0;

    setTimeout("document.getElementById('txt').value=0",0);

    clearTimeout(t);

    }

    显示时间

    <html>

    <head>

    <script type="text/javascript">

    function startTime()

    {

    var today=new Date()

    var h=today.getHours()

    var m=today.getMinutes()

    var s=today.getSeconds()

    // add a zero in front of numbers<10

    m=checkTime(m)

    s=checkTime(s)

    document.getElementById('txt').innerHTML=h+":"+m+":"+s

    t=setTimeout('startTime()',500)

    }

    function checkTime(i)

    {

    if (i<10)

      {i="0" + i}

      return i

    }

    </script>

    </head>

    <body onload="startTime()">

    <div id="txt"></div>

    </body>

    </html>

    9 创建对象模板

    <script type="text/javascript">

    function person(firstname,lastname,age,eyecolor)

    {

    this.firstname=firstname

    this.lastname=lastname

    this.age=age

    this.eyecolor=eyecolor

    }

    myFather=new person("John","Adams",35,"black")

    document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")

    </script>

  • 相关阅读:
    Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. ......
    UVA 1597 Searching the Web
    UVA 1596 Bug Hunt
    UVA 230 Borrowers
    UVA 221 Urban Elevations
    UVA 814 The Letter Carrier's Rounds
    UVA 207 PGA Tour Prize Money
    UVA 1592 Database
    UVA 540 Team Queue
    UVA 12096 The SetStack Computer
  • 原文地址:https://www.cnblogs.com/zhouhbing/p/4179682.html
Copyright © 2011-2022 走看看