zoukankan      html  css  js  c++  java
  • Java Script入门

    学习来源:https://www.runoob.com/js/js-tutorial.html

    JavaScript 教程

    JavaScript 是 Web 的编程语言。

    所有现代的 HTML 页面都使用 JavaScript。

    JavaScript 非常容易学。

    本教程将教你学习从初级到高级JavaScript知识。

    JavaScript 简介


    JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");

    JavaScript:对事件的反应

    <button type="button" onclick="alert('欢迎!')">点我!</button>

    JavaScript:改变 HTML 内容

    使用 JavaScript 来处理 HTML 内容是非常强大的功能。

    x=document.getElementById("demo");  //查找元素
    x.innerHTML="Hello JavaScript";    //改变内容

    JavaScript:改变 HTML 图像

    <script>
    function changeImage()
    {
        element=document.getElementById('myimage')
        if (element.src.match("bulbon"))
        {
            element.src="/images/pic_bulboff.gif";
        }
        else
        {
            element.src="/images/pic_bulbon.gif";
        }
    }
    </script>
    <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

    JavaScript:改变 HTML 样式

    改变 HTML 元素的样式,属于改变 HTML 属性的变种。

    x=document.getElementById("demo")  //找到元素 
    x.style.color="#ff0000";           //改变样式

    JavaScript:验证输入

    JavaScript 常用于验证用户的输入。

    if isNaN(x) {
        alert("不是数字");
    }

    JavaScript 用法


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

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

    <script>
    alert("我的第一个 JavaScript");
    </script>

    <body> 中的 JavaScript

    在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

    实例

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

       <body>
            <script>
                document.write("aa");
            </script>
        </body>

    JavaScript 函数和事件

    上面例子中的 JavaScript 语句,会在页面加载时执行。

    通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

    如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

    您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

    在 <head> 或者 <body> 的JavaScript

    您可以在 HTML 文档中放入不限数量的脚本。

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

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

    <head> 中的 JavaScript 函数

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

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

      <script>
            function myFunction(){
                document.getElementById("demo").innerHTML="Show";
            }
        </script>
        <body>
            <h1 id="demo"></h1>
            <button type="button" onclick="myFunction()">点击</button>
        </body>

    <body> 中的 JavaScript 函数

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

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

    外部的 JavaScript

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

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

    如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

    <!DOCTYPE html>
    <html>
    <body>
    <script src="myScript.js"></script>
    </body>
    </html>

    你可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。

    myScript.js 文件代码如下:

    function myFunction()
    {
        document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }

    JavaScript 输出


    JavaScript 没有任何打印或者输出的函数。

    JavaScript 显示数据

    JavaScript 可以通过不同的方式来输出数据:

    • 使用 window.alert() 弹出警告框。
    • 使用 document.write() 方法将内容写到 HTML 文档中。
    • 使用 innerHTML 写入到 HTML 元素。
    • 使用 console.log() 写入到浏览器的控制台。

    操作 HTML 元素

    如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

    请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p id="demo">我的第一个段落</p>
    
    <script>
    document.getElementById("demo").innerHTML = "段落已修改。";
    </script>
    
    </body>
    </html>

    以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

    document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

    innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p>我的第一个段落。</p>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>

    写到控制台

    如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

    浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
    
    </body>
    </html>

     

     

  • 相关阅读:
    ActiveReports 报表应用教程 (9)---交互式报表之动态排序
    struts2-结果处理方式
    struts2-action的创建方式
    struts2-动态方调用
    struts2-常量配置
    struts2架构图
    maven依赖范围-Scope
    Maven在eclipse的使用入门
    Maven简介
    数组的学习与使用
  • 原文地址:https://www.cnblogs.com/littlepage/p/11334791.html
Copyright © 2011-2022 走看看