• 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>

  • 相关阅读:
    10,EasyNetQ-发布确认
    9,EasyNetQ-版本化消息
    一个小程序云开发的项目,图书借还系统
    利用canvas对图片进行切割
    微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程
    git合并时忽略某个文件
    小程序接入云通信IM
    小程序插件使用wx.createSelectorQuery()获取不到节点信息
    小程序插件开发流程及注意事项
    小米6使用charles抓包https
  • 原文地址:https://www.cnblogs.com/zhouhbing/p/4179682.html
Copyright © 2020-2023  润新知