Hype是一款用于Mac系統的HTML5制作軟件，它能夠幫助用戶通過不需要編寫代碼的方式，也能實現創建一個精美網頁的需求，能夠實現用戶的大部分需求，但是對于一些特定的場景，仍然需要通過編寫JavaScript函數來實現。

Hype軟件提供了許多內置的JavaScript函數，下面小編將通過Hype 4版本，為大家介紹有關的內置函數使用方法。

一、添加JavaScript函數

那么如何在Hype中添加JavaScript函數呢？點擊右上角的“資源”按鈕，打開Hype資源庫，然后點擊下方的加號，選擇“添加JavaScript函數”，如下圖1。

圖1：添加一個JavaScript函數

通過上述操作，Hype就會默認新建一個名稱為“untitledFunction”的JavaScript空函數，具體如下圖2，在大括號中可以編寫自己的函數邏輯。

圖2：默認JavaScript函數展示

Hype內部為大家提供了許多的內置方法，經常使用到的是“文稿”、“場景”和“時間線”方法函數，如下圖3。

圖3：內置方法展示

二、內置JavaScript方法使用

那么如何使用這些Hype內置的JavaScript方法呢？下面就以下圖4的內置方法為例。下圖4的“getElementProperty”方法，作用在于獲取元素對象的屬性，如元素的寬度、高度、位置、旋轉角度、透明度。

一般來說，每個內置方法都會有0到N個參數，如“getElementProperty”函數就有2個參數，分別是element和propertyName，第一個參數表示需要獲取哪個元素對象，第二個參數表示獲取元素對象的哪個屬性。

圖4：getElementProperty方法

為了方便演示，首先在Hype元素按鈕中，選擇創建一個矩形元素，然后在Hype“身份檢查器”中，設置唯一的元素ID為“juxing”，作為矩形的標識ID，這里建議這個ID填寫英文而不是中文，防止編寫函數方法時輸入中文亂碼。

圖5：填寫矩形唯一元素ID

然后回到JavaScript函數界面，開始使用Hype內置的getElementProperty方法，這里小編已經寫好了一個簡單的演示函數，如下圖6。

圖6：演示函數展示

該函數的第一行使用了Hype內置的“getElementById”方法，用于獲取唯一的元素ID為“juxing”的元素，也就是說，通過JavaScript函數的第一行，我們已經獲取到了上述創建的矩形元素。

第二行使用“getElementProperty”方法，然后方法的第一個參數使用第一行得到的矩形元素，第二個參數填寫“width”，表示獲取的屬性為寬度，綜上，第二行的作用在于獲取矩形元素的寬度。

第三行非常簡單，表示將矩形元素的寬度進行彈框展示。

完成函數編寫以后，給矩形在“操作檢查器”中，添加一個“鼠標點按時”的操作，操作選擇“運行JavaScript”，函數選擇上述新建的函數，如下圖7。

圖7：設置鼠標點按時運行JavaScript

最后，點擊Hype界面上方的“預覽”按鈕，在瀏覽器中對網頁效果進行預覽，預覽結果如下，當點擊矩形時，彈出一個彈框，寫著298，表示矩形的寬度為298px。

圖8：預覽結果

那么究竟是不是呢？選中矩形元素，點開“度量檢查器”，可以發現矩形的寬度的確是“298px”，如下圖9紅框。

圖9：矩形元素寬度

好了，這就是關于Hype內置JavaScript函數方法的簡單使用教程