zoukankan      html  css  js  c++  java
  • HTML——JavaScript简介

    一、简介:

    JavaScript是个脚本语言,需要有宿主文件,他的宿主文件是HTML文件。

    JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

    JavaScript 被设计为向 HTML 页面增加交互性。

    许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。

    提示:JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。

        Java(由 Sun 发明)是更复杂的编程语言。

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

        JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

    缺点:不能对数据库进行操作。

      其注释语言与C#相同,都用”//“.

    JavaScript用法:

    1、JavaScript的位置有三个:

    1)、head里面

    <head> 中的 JavaScript 函数

    在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

    该函数会在点击按钮时被调用:

    实例

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

    2)、body里面

    <body> 中的 JavaScript 函数

    在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

    该函数会在点击按钮时被调用:

    实例

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

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

    3)、</html>或者</body>之后

      为了保险起见,最好写在</body>之后

    2、关键字:script

    格式:<script type="text/JavaScript">要写的代码</script>

      HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

      脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

    <script> 标签

    如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

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

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

    <script>
    alert("My First JavaScript");
    </script>

      无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。

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

    3、引用外部文件(外联):添加外联,必须要写在head中。

    也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

      新建一个js文件——然后在源文件中引用:

    格式:<script type="text/JavaScript" src="新建文件夹名.js">

    外部 JavaScript 文件的文件扩展名是 .js。

    在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

    提示:外部脚本不能包含 <script> 标签。

    4、三个常用对话框:

    1)、alert("")——警告对话框,作用是弹出一个对话框,alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

    2)、confirm("")——确定对话框,作用是弹出一个可供选择的确定对话框,点击确定,返回True;点击取消,返回False;可以用变量来接收。

    3)、prompt("")——弹出一个可输入内容的对话框,显示要提示的文字;

    例如:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">  
        alert("警告:出现错误!");    
    </script>
    </html>
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">  
       confirm("确定修改吗?确定退出吗?");    
    </script>
    </html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        prompt("请输入一个数字","注意输入的是数字哦!");    
    </script>
    </html>
  • 相关阅读:
    EditText setError 图片不显示问题
    android TextView getlinecount返回0
    PANIC: Could not open AVD config file:
    case expressions must be constant expressions
    无法创建抽象类或接口“Newtonsoft.Json.JsonWriter”的实例
    Listview嵌套ListView 及包含button onItemClic失效问题
    errror initializing phoneGap:class not found
    动态添加ImageView 设置setPadding不起作用问题
    Parameter 参数替换成value
    Listview addHeaderView添加view报错
  • 原文地址:https://www.cnblogs.com/SJP666/p/4694279.html
Copyright © 2011-2022 走看看