前端入门详细攻略｜编写一个简单的JavaScript程序（附源码+视频）_开发

原标题：前端入门详细攻略｜编写一个简单的JavaScript程序（附源码+视频）

随着互联网应用的不断创新与变革，作为与应用密切相关的前端技术更是备受瞩目。其中，以HTML 5为代表的新一代技术尤为受到多方的关注与追捧。HTML5不仅仅是一次简单的技术升级，而是代表了未来Web开发的方向，既是Web、App、微信小程序、混合式开发的根基，也是开发者的新希望。

同时，与HTML 5相关的 Java技术也备受关注，同样成为Web开发的必学技能。

本篇将从Java的概念讲起，介绍Java的开发工具和引入页面的方式，并通过一个简单的程序来演示如何在页面中使用Java代码。

01

Java是什么

1

Java的起源

在1992年，一家名为Nombas 的公司开发了一种CMM的语言，捆绑在一款共享软件上使用，由于它的功能强大，并与C语言语法相似，因此，在当时，受到了很多用户的喜爱，后来，CMM更名为Ease，成为最早的嵌入式语言，至今仍然在使用。

在1994年，正处于技术革新最前沿的 Netscape公司，从Nombas公司开发的CMM语言中受到了启发，决定开发一种客户端的脚本语言，用于处理用户与浏览器的交互问题，这种脚本语言被命名为Live，但在正式发布时，为了能够与当时名噪一时的Java语言有所关联，又更名为Java，一直没用至今，成为浏览器与页面交互的最主要的脚本语言。

2

Java的特点

Java的诞生，弥补了HTML的不便性，也舍弃掉Java的臃肿性，是一种中间态的脚本语言。其特性如下：

1

●

面向对象性

Java吸取了Java和其他优秀编程语言的特性，运用Java创建对象，能与其他脚本语言进行互补。

2

●

动态执行语言

Java是一种动态语言，可以在程序运行时逐行解释并运行，而无需先编译后再运行，因为它是一种嵌在浏览器中的脚本语言。

3

●

具有跨平台性

Java代码能在不同的平台之间进行执行，只需要浏览器支持即可，如在Linux、Mac、Windows平台下都可以执行Java脚本代码。

4

●

安全性高

Java不允许开发者对本地硬盘的读写访问，也不允许操作修改网络信息，它只负责信息的浏览和交互，从而确保了信息的安全性。

3

Java的开发工具

相对的其他开发语言而言，Java语言的开发工具更加广泛，几乎所有能开发网站页面的工具都可以编写Java代码，但如果从专业的角度来说，有下列几类开发工具。

1

●

WebStorm

它是一款强大的Java IDE，支持多种框架和CSS语言，包括前端，后端，移动端和桌面的应用，同时，它可以无缝整合第三方工具，还提供了代码补全，实时错误监测，导航，内置控制台，各种插件等一系列的功能，被广大中国Java开发者誉为“Web前端开发神器”，图标如下图21-1所示。

▍图12-1 CSS3的发展历史

2

●

Atom

它是由GitHub团队开发的，开发者可以很容易地对Atom进行自定义。Atom自带了一个包管理工具，代码补全，文件系统浏览器，同时，还支持多个平台以及其他有用的功能，图标如下图21-2所示。

▍图21-2 Atom集成开发工具的图标

3

●

Visual Studio Code

它是微软开发的IDE，针对于编写现代 Web 和云端应用的跨平台源代码编辑器，支持Type。它提供了代码补全，语法高亮，支持Git命令等等。另外，它还有非常多的插件，图标如下图21-3所示。

▍图21-3 Visual Studio Code集成开发工具的图标

02

Java引入方式

作为页面开发中最流行的交互语言，Java代码在页面中的使用方式也是非常简单，通俗来讲，就是嵌入式，即将Java代码嵌入到页面中执行就可以，而嵌入代码的方式分别为外部引入，内部添加和属性执行，接下来分别进行介绍。

1

外部引入Java文件

在页面中，通过外部引入的方式执行Java代码非常简单，只需要先创建一个扩展名为.js的Java文件，并将该文件通过元素引入到页面中，即完成外部引入的过程，详细的效果，我们通过一个完整的实例来说明。

实例21-1 外部引入Java文件

●

功能说明

通过外部引入文件的方式，将页面中div元素的内容设置为“hello，world！”。

●

实现代码

在WebStorm开发工具中，新建一个名称为“21-1”的HTML页面，加入如下代码：

代码清单21-1：外部引入Java文件。

< html>

< headlang= "en">

< metacharset= "UTF-8">

< title> 外部引入Java文件

< body>

< divid= "div1">

< type= "text/java"

src= "js/js1.js">

在上述代码中，使用元素，引入了一个名称为js1.js的外部Java文件，该文件的代码如清单21-2所示。

代码清单21-2：名称为js1.js的文件代码。

//获取div元素并保存到变量中

vardiv1= document.getElementById( "div1");

//将div1的内容设置为hello,world

div1.innerText= 'hello,world';

●

页面效果

该页面在Chrome浏览器下，执行的页面效果如下图21-4所示：

▍图21-4 外部引入Java文件

●

源码分析

在上述实例的代码中，在div元素的后面，添加了一个元素，用于在页面中导入Java文件，并在文件中，先获取div元素，后再重置元素的内容，从而实现动态控制div元素的效果。

需要说明的是：由于页面的代码是顺序结构，因此，必须将元素放置在div元素之后，才能获取到div元素，否则，获取的对象为空。

2

内部添加Java代码

内部添加Java代码是指通过在页面的任何位置使用元素添加Java代码，页面在编译时一起执行的过程，相比外部引入的方式，更加简单和快捷，详细的效果，我们通过一个完整的实例来说明。

实例21-2 内部添加Java代码

●

功能说明

通过内部添加Java代码的方式，计算两个数字的值，并将结果显示在页面元素中。

●

实现代码

在WebStorm开发工具中，新建一个名称为“21-2”的HTML页面，加入如下代码：

代码清单21-2：内部添加Java代码。

< html>

< headlang= "en">

< metacharset= "UTF-8">

< title> 内部添加Java代码

< body>

< div> 30+20的值是： < spanid= "spn1">

< type= "text/java">

//获取span元素对象并保存在变量中

varspn1= document.getElementById( "spn1");

//计算两数的值并赋值给变量显示在页面中

spn1.innerText= 30+ 20;

●

页面效果

该页面在Chrome浏览器下，执行的页面效果如下图21-5所示：

▍图21-5 内部添加Java代码

●

源码分析

在上述实例的代码中，元素放置在div元素后面，便于在代码中直接获取元素，元素获取后，利用Java代码中的计算功能，完成数值的计算，并将结果显示在页面中。

3

属性执行Java代码

属性执行Java是指在元素的属性中通过事件属性直接执行Java代码，这是一种最直接运行Java的方式，不利于编写大量的Java代码，常用于按钮元素的事件中，详细的效果，我们通过一个完整的实例来说明。

实例21-3 属性执行Java代码

●

功能说明

点击一个名称为“删除”的按钮，直接执行Java代码，弹出一个询问对话框。

●

实现代码

在WebStorm开发工具中，新建一个名称为“21-3”的HTML页面，加入如下代码：

代码清单21-3：属性执行Java代码。

< html>

< headlang= "en">

< metacharset= "UTF-8">

< title> 属性执行Java代码

< body>

< button

onclick= "var yn=confirm('你真的要删除这条记录吗？')">

删除

●

页面效果

该页面在Chrome浏览器下，执行的页面效果如下图21-6所示：

▍图21-6 内部添加Java代码

●

源码分析

在上述实例的代码中，onclick表示按钮的单击事件，confirm方法用于显示一个带有指定消息和 ok 及取消按钮的对话框，是Java代码中常用于询问类的方法。

4

一个简单的Java程序

接下来通过一个简单的页面交互效果，进一步理解Java的强大功能。

实例21-4 一个简单的Java程序

●

功能说明

在页面中，添加一个输入“姓名”的文本框和用于“提交”的按钮，当点击按钮时，通过Java代码检测文本框的内容是否为空，如果为空则显示“姓名不能为空”，否则，显示“提交成功！”。

●

实现代码

在WebStorm开发工具中，新建一个名称为“21-4”的HTML5页面，加入如下代码：

代码清单21-4：一个简单的Java程序。

< html>

< headlang= "en">

< metacharset= "UTF-8">

< title> 一个简单的Java程序

< styletype= "text/css">

div{

margin: 5px0px;

}

div.txt{

padding: 5px;

}

div.error{

color:red;

font-size: 10px;

}

< body>

< div>

< div>

< inputtype= "text"

id= "txt1"

class= "txt"

placeholder= "请输入姓名"/>

< divid= "tip"class= "error">

< buttonid= "btn1"> 提交

< type= "text/java">

//获取元素并保存到变量对象中

vartxt1= document.getElementById( "txt1");

vartip= document.getElementById( "tip");

varbtn1= document.getElementById( "btn1");

//绑定按钮的事件

btn1.onclick= function( ) {

//检测文本框的内容

if(txt1.value!= ''){

tip.innerText= '数据提交成功！'

} else{

tip.innerText= '姓名不能为空！'

}

}

●

页面效果

该页面在Chrome浏览器下，执行的页面效果如下图21-7所示：

▍图21-7 一个简单的Java程序

●

源码分析

在上述实例的代码中，先通过变量保存全部的元素对象，用于后续的使用，后绑定按钮的单击事件，在事件中判断文本框的内容是否为空，获取不同的文字信息，并将信息显示在页面的元素中，关于更多的Java语法，将会在《HTML5+CSS3+Java超详细通关攻略（实战版）》后续的章节中进行详细的介绍。

03

源代码下载

关注微信公众号，后台回复关键词 “入门Java” 即可获得完整源代码。

04

相关视频

扫码观看视频讲解 （发文五天内可观看）：

扫码观看精彩视频内容：

05

参考书籍

《HTML5+CSS3+Java超详细通关攻略（实战版）》

ISBN：978-7-302-56027-2

陶国荣 编著

定价：99元

特色介绍

本书涵盖 HTML 5、 CSS3和 Java最全、最新、最详细的内容，并以实战驱动知识点，以案例贯穿实战，模块化学习，分层推进，在教学内容中具有较强的针对性和实战性，主要面向全国高校师生及相关领域的广大计算机爱好者。

作者简介

陶国荣，资深Web技术专家、微软技术专业人员、专业前端技术培训讲师；具有10余年开发经验，长期致力于HTML5、Java、CSS3、AnguarJS等Web开发技术的研究和实践；是国内受欢迎的HTML5培训大师，曾辅导国家交通部、搜狐网、特艺、蓝色光标等众多中外名企；曾出版《jQuery权威指南》和《AngularJS实战》等10余部技术畅销著作，获得广大读者的高度评价。在2013年，获得“最受读者喜爱的IT图书作者奖”。

配套资源

为便于教学，本书配有 207个知识点案例+ 两个完整项目案例， 450分钟微课视频、 源代码、 教学大纲、 教学课件。

06

精彩文章回顾

前端入门详细攻略｜CSS3基础（附源码+视频）

前端入门详细攻略｜编写一个简单的 HTML5（附源码+视频）

HTML5 实现扑克翻牌游戏

HTML5 实现黑白棋游戏｜附代码

HTML5 Canvas 动画实例：游戏人物的跑步动画 返回搜狐，查看更多

责任编辑：