通过3个测试案例，教大家如何调用外部JavaScript(jQuery)脚本代码，希望对大家在学习上有所帮助。

偶然的机会让我接触到这款神奇的软件，起初接触他的原因也很简单，为了更方便地实现我设计的H5响应式页面，但越研究你就会发现他的功能越强大。很多时候简单的动效对于强大的Hype来说可谓是家常便饭，但是真正涉及到一些复杂的动效以及简单的小游戏时，你就需要调用外部的Javascript(jQuery)脚本代码文件来帮助实现你想要的动效。特此，应一些小伙伴的要求，这里为大家带来三个实例教程，希望可以帮助到正在苦苦研究如何调用外部Javascript(jQuery)脚本代码文件的朋友们。

一 . 为元素添加一个简单的点击触发弹出警示框实例

1.首先你需要编写一段简单的点击触发警示框的js脚本代码（这几段代码我会添加在附件中供大家下载学习）

选择你喜欢的代码编辑软件，这里我选择了Sublime Text3。

如上图所示，我们先将该函数命名为redAlert() ,请记住这个函数名，因为我们将会在后面的操作中通过这个函数名来调用该函数内部的要执行的代码。然后在该函数内添加用于显示带有一条指定消息和一个 OK 按钮的警告框语法alert()。将其命名为script1.js，保存至桌面。然后打开我们的软件Hype。

2.打开Hype之后，这里我们新建了2个元素，一个文本，命名为Test1作为我们的第一个测试案例名称，另一个是需要点击触发运行该警示框的按钮，我们将他命名为Run redAlert,打开资源库，把我们之前保存在桌面的script1.js文件拖入到资源库中。

3.那么导入到资源库中，我们怎么运行这段js脚本代码呢。这个时候我们找到操作一栏。要为按钮添加一个鼠标点击时运行该js脚本代码的一个动作，找到鼠标点击时，在其中的操作一栏中我们选择运行javascript，函数一栏中我们选择新函数，这个时候在上方会弹出第二个选项卡

4.第二个选项卡这里在function后面有一个无名称的一个函数名，你可以将他命名为任何你想要的名字，这里我们将他命名为Test1，然后在该函数内输入之前编写的script1.js脚本文件中一样的函数名来调用这个脚本，这样我们就已经成功地调用了 外部js脚本文件。

5.好了，我们通过chrome浏览器来阅览我们成功调用的js脚本文件后的效果吧。

二 . 使用有数的ID

1.与前一样，代码我们就不一一编写了。

我们吧之前编写好的代码复制到我们的编辑器中，这里介绍下这个段代码大致表达的意思（首先命名了一个changeColor()的一个函数，之后设置了一个ID为“box1”来获取背景颜色样式的一个临时变量，之后通过if...else if判断语句来判断，当box1的颜色值为grb（0，0，255）他就会执行下一个代码块，变成该代码块获取的一个颜色rgb值，依此类推）。同样我们将这段代码保存到桌面，命名为script2.js。

2.首先插入一个文本 我们将他命名为Test2，这里是我们的第二个测试。为了使这段js是脚本有效，这里我们需要新建一个名为"box1"的矩形和一个控制该矩形改变颜色值的一个button按钮。重点来了，为了使我们导出的第二段js脚本正常运作，我必须将矩形的填充样式颜色设置为＃0000FF和脚本中的rgb颜色值（0，0，255）匹配。之后吧我们导出的第二段js脚本代码导入到资源库中。

3.真正的重点来了，这里我们需要将矩形的名称和有数的元素ID设置成之前第二段js脚本代码中设置要获取的ID文件名一致。所以我们要在名称和元素ID输入框中，同时输入"box1",这样我们就有权力让js脚本文件正常工作了。

4.之后我们就要给这个按钮设置动作了，鼠标点击时来运行javascript-新函数。与之前一样在弹出来的第二个选项卡里面将没有名称的函数名命名为Test2（当然你这个名字可以随便命），然后在该函数内输入之前编写的script2.js脚本文件中相同的函数名（changeColor()）来调用这个脚本，这样我们第二个调用有成功了。

5.最后让我们再次通过chrome浏览器来预览调用的效果吧。是不是很很简单呢...