• Java Web 7 JavaScript 7.1 JavaScript 简介 && 7.2 JavaScript引入方式

    Java Web

    【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】

    7 JavaScript

    文章目录

    7.1 JavaScript 简介

    JavaScript 是一门跨平台、面向对象的脚本语言。

    而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

    JavaScript 是用来控制网页行为的，它能使网页可交互，如改变页面内容、修改指定元素的属性值、对表单进行校验等。

    【改变页面内容】

    在这里插入图片描述

    当点击上面左图的 点击我 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。

    【修改指定元素的属性值】

    在这里插入图片描述

    当点击上图的 开灯 按钮，效果就是上面右图效果；当点击 关灯 按钮，效果就是上面左图效果。

    其实这个功能中有两张灯泡的图片（使用img标签进行展示），通过修改 img 标签的 src 属性值改变展示的图片来实现。

    【对表单进行校验】

    在这里插入图片描述

    在上面左图的输入框输入用户名，如果输入的用户名是不满足规则的就展示右图(上) 的效果；如果输入的用户名是满足规则的就展示右图(下) 的效果。

    【代码】

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示title>
head>
<body>

<h2>JavaScript 能做什么h2>

<p id="demo">JavaScript 能够改变 HTML 内容p>
<input type="button" onclick='changeText()' value="点击我">
<hr>
<p>JavaScript 能改变图像的 src 属性值p>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<hr>


<p>JavaScript 能够进行表单验证p>
用户名：<input id="username" onblur="check()" placeholder="请设置用户名（6~12位）">
<span id="msg" style="color: red">span>
<hr>


<script>
    function changeText() {
        document.getElementById("demo").innerHTML = "Hello JavaScript!"
    }

    function on() {
        document.getElementById('myImage').src = '../imgs/on.gif';
    }

    function off() {
        document.getElementById('myImage').src = '../imgs/off.gif'
    }

    function check() {
        var username = document.getElementById('username').value;
        var reg = /^\w{6,12}$/;
        var msg = document.getElementById('msg');
        if (reg.test(username)) {
            msg.innerHTML = "";
        } else {
            msg.innerHTML = "用户名格式有误！";
        }
    }

script>

body>
html>

    运行效果

    在这里插入图片描述

    JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似。

    JavaScript 百度百科：

    https://baike.baidu.com/item/JavaScript/321142?fr=aladdin

    JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫ECMAScript ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)

    7.2 JavaScript 引入方式

    JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。

    JavaScript引入方式有两种：

    • 内部脚本：将 JS代码定义在HTML页面中
    • 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
    7.2.1 内部脚本

    在 HTML 中，JavaScript 代码必须位于 标签之间

    【举个栗子】

    alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

head>
<body>


<script>
    alert("hello js")
script>

body>
html>

    运行效果

    在这里插入图片描述

    可以看到js 代码已经执行了。

    一般把脚本置于 元素的底部，可改善显示速度

    因为浏览器在加载页面的时候会从上往下进行加载并解析。 应该让用户看到页面内容，然后再展示动态的效果。

    7.2.2 外部脚本

    第一步：定义外部 js 文件。如定义名为 demo.js的文件

    在这里插入图片描述

    第二步：在页面中引入外部的js文件

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

    运行

    在这里插入图片描述

    外部脚本不能包含