鲁夫的爱

前端ABC: 用 IDE 写一个 Hello World

分类: 前端教程        评论: 32人评论

前言

嗯, 今天开始一个新文章分类: <前端教程> . 这个分类的定位是: 只关注前端, 别的一概不谈; 以 <前端ABC> 系列为主线, 面向新手; 中间穿插一些类似 <JavaScript十问> 之类的小测试, 目的是加深理解.

本系列只适合两类用户: 1. 希望投身前端, 并且打算在JavaScript 身上花时间的新手; 2. 前端界的同行. 需要注意的是, 我水平有限, 错漏难免, 欢迎指正.

正文

第一步: 准备工具. 我推荐如下开发工具:

  1. 伟大的浏览器: Firefox
  2. JavaScript 调试工具, Firefox的好伙伴: Firebug
  3. 优秀的IDE: NetBeans
  4. 好用的HTTP服务器+数据库服务器+PHP运行环境: WampServer

如果你没有其他更好的选择, 或者仍在Eclipse/NetBeans, Firefox/Chrome, WampServer/XAMPP 之间徘徊的话, 别犹豫了, 先听我的吧. 对格调有追求的同学请选择英文版, 够用就好的同学不妨先凑合着用中文版 (如果有的话). 下载完毕后全部安装上.

WampServer 安装好后启动它, 待右下角任务栏中的图标变绿之后, 打开CMD, 运行 netstat -an , 能看到 "TCP 127.0.0.1:80 0.0.0.0:0 LISTENING", 这表明 WampServer 已经准备好为你提供 HTTP 服务了, 用浏览器打开 http://localhost/ 就能看到服务器的一些信息.

WampServer

WampServer

第二步: 新建项目. 打开NetBeans, 新建一个 HTML5 项目, 如果你的WampServer 装在C:\wamp 下, 那么源代码位置选择 C:\wamp\www , 项目名称当然是helloworld, 一切伟大的事物都是从 0 开始的.

NetBeans 新建项目

NetBeans 新建项目

NetBeans 新建helloworld项目

NetBeans 新建helloworld项目

第三步: 准备 HTML 文件. 我们把 helloworld 项目的 index.html 改成下面这个样子, 为了保持简单, 我们先不深入研究HTML.

NetBeans helloworld 项目的 index.html

NetBeans helloworld 项目的 index.html

在浏览器中访问 http://localhost/helloworld/public_html/ , 结果是这样子哒.

NetBeans helloworld项目 主页

NetBeans helloworld项目 主页

第四步: 开始写你的第一行 JavaScript . 嗯, 差不多了, 我们可以开始写 JavaScript 了, 这可是让网页动起来的重要部分.

对 index.html 做如下改动, <script></script>包裹的部分就是 JavaScript, 它的作用是: 当你点击 "Click me" 按钮的时候, 弹出一个对话框说 "Clicked".

NetBeans helloworld: 第一行JavaScript

NetBeans helloworld: 第一行JavaScript

在浏览器中的效果:

NetBeans helloworld: 点击

NetBeans helloworld: 点击

好, 我们的第一次前端奇妙之旅到此为止, 但旅途中仍然有许多疑问, 在这短短的博文中我未能一一解释, 在此我推荐一本书 <Professional JavaScript for Web Developers, 3rd Edition>, 中文名叫<JavaScript 高级编程(第三版)>, 如果你希望更深一步学习 JavaScript, 那么这本书是很好的教程和参考.

附上本次教学的在线 demo : Hello world

课外作业

接下来的教程会花更多时间在 JavaScript 上, 所以做好以下功课有助于跟上节奏.

  1. HTTP 是什么, 它如何工作? 别告诉我你只看了百度百科的抽象解释, 请打开 Firebug 的网络选项卡, 刷新 Hello World页面, 仔细观察结果.
  2. HTML 的格式如何? 我想多花点时间介绍 JavaScript, 不想花太多时间解释简单直接的 HTML 语法和标签, 所以在学习更多知识之前多了解一下 doctype, <html>, <head>, <body>, <title>, <h1>, <p> 等. 多想想你常用的 Microsoft Word 里的 "格式和样式" 功能, 一定会有很多帮助.
  3. 如何对网页元素做一些样式上的改变? 例如把 Hello World 页面的 h1 标题变成红色.
本站文章除注明转载外,均为本站原创编译
转载请注明以下信息
文章转载自:鲁夫的爱 [ http://opengg.me/ ]
本文标题:前端ABC: 用 IDE 写一个 Hello World
本文地址:http://opengg.me/927/web-frontend-tutorials-hello-word/


07-17
2013
      • IntelliJ IDEA的强大毋庸置疑,不管是前端或是java或是其他语言的扩展。所以建议你用社区版,如果你要提倡有好的品格的话。(我只是希望不要一开始就让一些纯新手因为你用netbean,所以就觉得netbean很强大,以后就一直不换IDE(习惯是一种很可怕的东西),这样我觉得不太好,如果要做好教学,那就教到底吧)

        • 社区版不支持web前端. WebStorm 和 NetBeans 我都用了很久, 感觉 NetBeans 够用, 教学也足够了. 我觉得初学者不该纠结于工具才对, 最重要的是动手去写.

          • 因为IDE是否适合教学争论由来已久,也说不完。所以我就最后说下我的想法,由于我个人知识浅薄,您大体看一眼即可。这个世界因为各种需求,开发语言太多了,也造成了各种语法、方法等细节差异很大。我个人觉得,语言的本质是一样的,学习一个语言,如果你在一开始被语法,各种方法,或是被这些语言本身的细节所纠结着,花了很多这类细节在前期的时间(这些都需要大量的记忆,而人的记忆力有限,而且英语差的人还很多)。而IDE,它的智能提示,智能方法完成,报错等等一些细节帮你处理的很好,对新手来说,前期就可以花很多时间考虑一段代码的逻辑结构,可以轻松完成一些简单的功能,而有信心去接触更高级的代码。用IDE久了,你可能一年也没办法记忆多少方法,但是只要会想到API,会用API,那就可以了。日子久了,既然而然敲多看多了也就记下了。我个人觉得编程不是一个短时间的事情(特别是要学得很深),所以在最开始的时候,就应该重点培养对开发过程的兴趣,代码逻辑结构的兴趣。细节上交给IDE就可以了。而且IDE现在也没强大到可以写出带有逻辑关系的代码,它只是会提示,会自动补充而已,报错,改错而已。而在这些IDE中,就属IntelliJ IDEA比较强大。(我是学java的,一开始用myeclipse,觉得很NB,后来让我学习IntelliJ IDEA,我很不屑,现在的我在此表示对不起,有时候人的习惯就是这样。从myeclipse转到IntelliJ IDEA需要花一些时间,特别是英文差的人,所以很多其实一开始就因为在吃老本,而一直不愿意换。这也是我为什么给您建议的原因所在。)本人还很肤浅,有bug的地方,望谅解。

无觅相关文章插件,快速提升流量

loading...