JavaScript基础教程:调试及应用

2016-02-20 01:00 7 1 收藏

想不想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

延伸阅读
标签: CorelDRAW
在学习中遇到问题可以到 论坛CorelDRAW版块  发贴交流! 本例为CorelDRAW基础工具应用实例教程,在本教程中我们将学习CorelDRAW的调和工具的应用,教程将从调和的简单应用、调和与旋转、调和与渐变和运用调和工具制作出漂亮的盆花实例来讲解,适合CorelDRAW初学者学习,希望朋友们喜欢~~ 调和工具应用案例讨论:http://bbs.j...
标签: 素描
素描工具 1、铅笔:美术铅笔的铅芯有不同等级的软硬区别.硬的以"H"为代表,如:1H、2H、3H、4H等,前边数字越大,硬度越强,即色度越淡;软的以"B"为代表,如:1B、2B、3B、4B、5B、6B等,数字越大软度越强,色度越黑;学生用铅笔一般是HB形,软硬适中.对於初学绘画的可从HB到4B中选择三种类型就可以了. ...
标签: PS PS教程
自由变换的应用——Alt+Shift+Ctrl+T,其实大家都知道,其中有些小技巧,不足挂齿,请看 一、关于自由变换,大家都知道:编辑——自由变换,也可以用Ctrl+T,如果我们要制作的是有大到小的变换并复制,那么用这个快捷键:Alt+Shift+Ctrl+T 这个键大家常用,但也有一定的小技巧。 2.如果用这个图形来做的话:选区渐变填充,加个阴影,复制...
标签: PS PS教程
声明:教程及资源的图文版权为邓嵘个人所有,在此仅为学习交流所用,任何单位和个人未经许可不得以此内容用作商业行为,可以转载但请于醒目处注明:本文来自《职业之道》,作者:邓嵘(网名drkiller),谢谢合作! 什么是图层? 层的概念在 Photoshop中非常重要,它是构成图像的重要组成单位,许多效果可以通过对层的直接操作而得到,用图层...
标签: Illustrator
1首先请运用矩形工具画一个长方形。无须填色,默认为白色。 2点选工具栏中的网格工具. 3用鼠标点击矩形内部,会发现添加了网格线条。(我们为方便就在画面中加了四个颜色块以便吸取颜色看效果) 4然后用直接选择工具点选此矩形,你会发现这个矩形没被点到的节点是空心的。 [next] 5当你用直接选择工具点中它...

经验教程

396

收藏

56
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部