Java Web 7 JavaScript 7.1 JavaScript 简介 7.2 JavaScript引入方式
Java Web
【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】
7 JavaScript
文章目录
- Java Web
- 7 JavaScript
- 7.1 JavaScript 简介
- 7.2 JavaScript 引入方式
- 7.2.1 内部脚本
- 7.2.2 外部脚本
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>
运行
外部脚本不能包含
