Hype是一款用于Mac系統(tǒng)的HTML5制作軟件，它能夠幫助用戶通過不需要編寫代碼的方式，也能實現(xiàn)創(chuàng)建一個精美網(wǎng)頁的需求，能夠?qū)崿F(xiàn)用戶的大部分需求，但是對于一些特定的場景，仍然需要通過編寫JavaScript函數(shù)來實現(xiàn)。

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

一、添加JavaScript函數(shù)

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

圖1：添加一個JavaScript函數(shù)

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

圖2：默認(rèn)JavaScript函數(shù)展示

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

圖3：內(nèi)置方法展示

二、內(nèi)置JavaScript方法使用

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

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

圖4：getElementProperty方法

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

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

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

圖6：演示函數(shù)展示

該函數(shù)的第一行使用了Hype內(nèi)置的“getElementById”方法，用于獲取唯一的元素ID為“juxing”的元素，也就是說，通過JavaScript函數(shù)的第一行，我們已經(jīng)獲取到了上述創(chuàng)建的矩形元素。

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

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

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

圖7：設(shè)置鼠標(biāo)點按時運行JavaScript

最后，點擊Hype界面上方的“預(yù)覽”按鈕，在瀏覽器中對網(wǎng)頁效果進(jìn)行預(yù)覽，預(yù)覽結(jié)果如下，當(dāng)點擊矩形時，彈出一個彈框，寫著298，表示矩形的寬度為298px。

圖8：預(yù)覽結(jié)果

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

圖9：矩形元素寬度

好了，這就是關(guān)于Hype內(nèi)置JavaScript函數(shù)方法的簡單使用教程