# JavaScript GTK 簡介 > 原文： [http://zetcode.com/gui/javascriptgtktutorial/introduction/](http://zetcode.com/gui/javascriptgtktutorial/introduction/) 在 JavaScript GTK 編程教程的這一部分中，我們將介紹 GTK 庫并使用 JavaScript 編程語言創建第一個程序。 本教程的目的是幫助您開始使用 GTK 和 JavaScript。 GTK 是用于創建圖形用戶界面的領先工具包之一。 JavaScript 是一種流行的腳本語言，主要用于瀏覽器中。 近年來，JavaScript 已進入其他領域，包括臺式機上的用戶界面編程和使用諸如 JavaScript++ 之類的語言來創建 [JavaScript 類](http://www.jspplang.org)的面向對象編程（OOP）。 ## Seed Seed 是一個 JavaScript 解釋器，也是 GNOME 項目的庫，用于在 JavaScript 中創建獨立的應用。 它使用 WebKit 項目的 JavaScript 引擎 JavaScriptCore。 種子使用`GObject`內省來訪問 Gnome 庫。 GTK 是 Gnome 庫之一。 ## 簡單的例子 在第一個示例中，我們創建一個簡單的窗口。 窗口在屏幕上居中。 該代碼以過程樣式編寫。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This program centers a window on the screen. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL }); window.signal.hide.connect(Gtk.main_quit); window.set_default_size(250, 200); window.set_title("Center"); window.set_position(Gtk.WindowPosition.CENTER); window.show(); Gtk.main(); ``` 本示例在屏幕中央顯示一個`250x200`像素的窗口。 ```js Gtk = imports.gi.Gtk; ``` 我們導入 Gtk 庫。 ```js Gtk.init(null, null); ``` 此行初始化 GTK 庫以供使用。 ```js window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL }); ``` 該行創建一個頂層`Window`。 窗口是一個容器。 在大多數情況下（但并非總是如此），主應用窗口是頂級窗口。 ```js window.signal.hide.connect(Gtk.main_quit); ``` 在這里，我們將`hide`信號連接到回調。 `main_quit()`方法永久退出該應用。 當我們單擊標題欄中的關閉按鈕或按 `Alt + F4` 組合鍵時，會發出隱藏信號。 ```js window.set_default_size(250, 200); ``` 我們為應用窗口設置默認大小。 ```js window.set_title("Center"); ``` 我們使用`set_title()`方法為窗口設置標題。 ```js window.set_position(Gtk.WindowPosition.CENTER); ``` 這條線使窗口在屏幕上居中。 ```js window.show(); ``` 一切準備就緒后，我們在屏幕上顯示窗口。 ```js Gtk.main(); ``` 我們設置了應用。 創建無限循環。 從這一點開始，應用就坐下來，等待用戶或系統的外部事件。 循環一直運行到終止為止。 我們有以面向對象樣式編寫的相同代碼示例。 JavaScript 在某種程度上支持面向對象的編程。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This program centers a window on the screen. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Center"); w.set_position(Gtk.WindowPosition.CENTER); w.show(); } } }); var window = new Example(); Gtk.main(); ``` 前面的示例以面向對象的樣式重寫。 ```js Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { ``` 我們創建一個新類型。 它繼承自 GTK Window 小部件。 我們將代碼放入該類型的 init 方法中。 ## 創建工具提示 第二個示例將顯示一個工具提示。 工具提示是一個小的矩形窗口，它提供有關對象的簡短信息。 它通常是一個 GUI 組件。 它是應用幫助系統的一部分。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This code shows a tooltip on a window and a button. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Tooltips"); w.set_position(Gtk.WindowPosition.CENTER); var fix = new Gtk.Fixed(); var button = new Gtk.Button({ label: "Button" }); button.set_size_request(80, 35); button.set_tooltip_text("Button widget"); fix.put(button, 50, 50); w.add(fix); w.set_tooltip_text("Window widget"); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 該示例創建一個窗口。 如果將鼠標指針懸停在窗口區域上方，則會彈出一個工具提示。 ```js button.set_tooltip_text("Button widget"); ``` 我們使用`set_tooltip_text()`方法設置工具提示。  圖：工具提示 ## 退出按鈕 在本節的最后一個示例中，我們將創建一個退出按鈕。 當我們按下此按鈕時，應用終止。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This program creates a quit button. When we press the button, the application terminates. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { init_ui(this); function init_ui(w) { var fix = new Gtk.Fixed(); var btn = new Gtk.Button({ label: "Quit" }); btn.signal.clicked.connect(Gtk.main_quit); btn.set_size_request(80, 35); fix.put(btn, 50, 50); w.add(fix); w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Quit button"); w.set_position(Gtk.WindowPosition.CENTER); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 我們使用`Button`小部件。 這是一個非常常見的小部件。 它顯示文本標簽，圖像或兩者。 ```js init_ui(this); ``` 我們將用戶界面的創建委托給`init_ui()`方法。 ```js var btn = new Gtk.Button({ label: "Quit" }); ``` 在這里，我們創建一個按鈕小部件。 ```js btn.signal.clicked.connect(Gtk.main_quit); ``` 我們將`main_quit()`方法插入按鈕`clicked`信號。 ```js btn.set_size_request(80, 35); ``` 我們為按鈕設置大小。 ```js fix.put(btn, 50, 50); ``` 我們將退出按鈕放入`x = 50`和`y = 50`的固定容器中。 ```js w.show_all(); ``` 我們有兩個選擇。 在所有小部件上調用`show()`，或調用`show_all()`（顯示容器及其所有子代）。  圖：退出按鈕 本節介紹了使用 JavaScript 語言的 GTK 庫。