想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的JavaScript基础教程:调试及应用教程,一起来看看吧!超容易上手~
【 tulaoshi.com - Web开发 】
一 JavaScript调试工具Aptana Eclipse插件
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
Aptana是一个开发JavaScript的很好的ide,且aptana提供了eclpse的插件,用起来几乎很上手而且很简单、方便。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
1.先去aptana的官方网站下载Aptana Eclipse的插件aptana_update_024313.zip。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
地址:http://update.aptana.com/update/studio/3.2/
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
强烈推荐手动下载插件的方式而不是在线升级的方式,尤其你用的不是eclipse而是完整安装版的myeclipse。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
2. 手动以link方式安装aptana插件(我用的是Myeclipse7.1完整安装版)
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
在C:Program FilesGenuitecCommon目录下新建links文件夹,在links文件夹下新建aptana.link文件,文件内容为:path=C:Program FilesGenuitecAptana,再在C:Program FilesGenuitec目录下新建Aptana,在Aptana文件夹下新建eclipse文件夹,在Aptana Eclipse的插件aptana_update_024313.zip解压后把其中的文件夹features和plugins拷贝到eclipse文件下。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
3. 将Aptana编辑器设置成myeclipse默认的编辑器
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
在Window菜单中找到Preferences,打开的菜单中左边的树中展开General,找到Editors,点击File Associations,然后在上边选择要设置的文件后缀名,在下边找到aptana相应的编辑器,然后点default即可完成默认的设置了
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
二 JavaScript的简单应用
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
1.新建一个Web Project:TestJavaScriptProject
2.新建一个静态页面index.html, 新建一个js文件js/hello.js
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
hello.js代码如下:
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
/** * @author johnston678 *//** * show hello in html */function sayHello(){ alert("Hello");} /** * Calculate Add * @param {Number} a A number param * @param {Number} b A number param */ function numAdd(a,b) { return a + b; } /** * return value = a + b * time * @param {Nuber} time * @param {Nuber} a * @param {Nuber} b */ function doLoop(time,a,b) { var result; result = a; for(i=0; itime; i++) { result = numAdd(result,b); } return result; }
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
index.html代码如下:
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"html !-- 导入js文件,这个script区域中的js代码无效,这个script区域默认为空 -- script language="JavaScript" src="js/hello.js"/script !-- 在这个script区域中可以调用导入的js文件,编写自己的js方法 -- script language="JavaScript" function doCal() { var cal = doLoop(1,2,3); alert(cal); } /script head titleUntitled Document/title /head body This is my HTML page.br a href="javascript:sayHello()"Say Hello/a br a href="javascript:doCal()"Do Calculate/a br /body/html
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
3.右键点击index.html文件,选择菜单Debug AS - JavaScript Web Application。IDE自动启动Firefox。在Variables页或者Expressions页能时刻跟踪变量的值,或者表达式值的改变。
来源:http://www.tulaoshi.com/n/20160220/1633039.html
看过《JavaScript基础教程:调试及应用》的人还看了以下文章 更多>>