TW201917572A - Method for editing programming language - Google Patents

Method for editing programming language Download PDF

Info

Publication number
TW201917572A
TW201917572A TW106136979A TW106136979A TW201917572A TW 201917572 A TW201917572 A TW 201917572A TW 106136979 A TW106136979 A TW 106136979A TW 106136979 A TW106136979 A TW 106136979A TW 201917572 A TW201917572 A TW 201917572A
Authority
TW
Taiwan
Prior art keywords
editing
function
variable
programming language
pane
Prior art date
Application number
TW106136979A
Other languages
Chinese (zh)
Other versions
TWI647618B (en
Inventor
徐易聖
Original Assignee
易易資設有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 易易資設有限公司 filed Critical 易易資設有限公司
Priority to TW106136979A priority Critical patent/TWI647618B/en
Priority to CN201711246896.1A priority patent/CN109710225A/en
Application granted granted Critical
Publication of TWI647618B publication Critical patent/TWI647618B/en
Publication of TW201917572A publication Critical patent/TW201917572A/en

Links

Landscapes

  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The present invention describes a method for editing programming language by providing an editor interface. The editor interface has a syntax selection window and a semantics editor window. The syntax selection window shows a selection tag and the semantics directions of the selection tag which represents a variable or a function. User can select and click a variable or a function, the variable or the function is then shown in the semantics editor window for the user to edit. Therefore, users can read the syntax and the semantics of the variable or the function simultaneously during programming. The interface and the method can help users in getting familiar with the programming language. Users can review and realize the meaning of previous programming language quickly. Learning efficiency and motivation of programming language are then incited.

Description

程式語言編輯方法Program language editing method

本發明是關於一種程式語言編輯方法。The present invention relates to a programming language editing method.

程式語言是用來定義電腦程式的形式語言,用來向電腦發出指令。程式語言的描述可以分為語法及語義,語法是指程式語言中,哪些符號或文字的組合方式是正確的,而語義則是對於程式語言的解釋。A programming language is a formal language used to define a computer program to issue commands to a computer. The description of the programming language can be divided into grammar and semantics. The grammar refers to which symbols or combinations of words are correct in the programming language, and the semantics is the interpretation of the programming language.

目前已有許多程式語言編輯器可輔助程式語言設計師編輯程式語言,這些程式語言編輯器可提供例如語法高亮、語法折疊、關鍵詞自動完成、尋找、取代、拼寫檢查、代碼一致性檢查等功能,也就是說,既有的程式語言編輯器多是用來輔助設計師以正確的「語法」編輯程式語言,但並不特別對程式語言的「語義」進行說明。There are many programming language editors that help programmers to edit programming languages. These programming language editors provide syntax highlighting, grammar folding, keyword auto-completion, finding, replacing, spell checking, code consistency checking, etc. Function, that is, the existing programming language editor is mostly used to assist the designer to edit the programming language with the correct "grammar", but does not specifically explain the "semantics" of the programming language.

然而,許多程式語言的初學者不但對於程式語言的「語法」還不熟悉,甚至也無法完全理解程式語言的「語義」,因此既有程式語言編輯器對於程式語言初學者仍是不夠友善的,經常讓程式語言初學者感到挫折。However, many beginners of programming languages are not familiar with the "grammar" of programming languages, or even fully understand the "semantics" of programming languages. Therefore, the programming language editor is still not friendly enough for beginners of programming languages. Frequent frustrations for beginners in programming languages.

本發明的主要目的在於提供一種可對使用者提示語義及語法格式的程式語言編輯方法。The main object of the present invention is to provide a program language editing method that can prompt the user for semantic and grammatical formatting.

為了達成上述及其他目的,本發明提供一種程式語言編輯方法,包括:提供一編輯介面,該編輯介面包括一語法選擇窗格及一語法編輯窗格,該語法選擇窗格顯示多個分別代表一變數或一函式的選擇標籤及其語義說明;所述選擇標籤受點擊後,該語法編輯窗格顯示一對應所述變數或函式的變數/函式編輯窗,該變數/函式編輯窗包括一對應所述變數或函式的變數/函式格式區及一對應該變數/函式格式區的程式語言區,該變數/函式格式區顯示所述變數或函式所對應的格式並包括至少一輸入欄位;自所述輸入欄位接收一輸入值;該程式語言區根據所述變數或函式的格式及該輸入值顯示一相對應的程式語言。In order to achieve the above and other objects, the present invention provides a programming language editing method, including: providing an editing interface, the editing interface includes a syntax selection pane and a syntax editing pane, and the syntax selection pane displays a plurality of representations respectively. a selection label of a variable or a function and a semantic description thereof; after the selection label is clicked, the syntax editing pane displays a variable/function editing window corresponding to the variable or function, the variable/function editing window Included in the variable/function format area corresponding to the variable or function and a pair of program language areas corresponding to the variable/function format area, the variable/function format area displays the format corresponding to the variable or function and Include at least one input field; receiving an input value from the input field; the program language area displays a corresponding programming language according to the format of the variable or function and the input value.

基於上述設計,使用者在編輯程式語言的過程中,可在編輯介面同時讀到程式語言、其語法格式以及其語義說明,且程式語言及語法格式是匹配顯示,相較於既有程式語言編輯器僅單獨顯示程式語言,本發明的設計可允許使用者在編輯完多組變數/函式之後,更輕易地理解先前編輯過的變數/函式所對應的格式及其語義,從而有助於程式編輯初學者學習、理解程式語言的編輯作業,降低其學習挫折感。Based on the above design, in the process of editing the programming language, the user can simultaneously read the programming language, its grammatical format and its semantic description in the editing interface, and the programming language and the grammatical format are matching display, compared with the existing programming language editing. The program only displays the programming language separately. The design of the present invention allows the user to more easily understand the format and semantics of the previously edited variables/functions after editing the plurality of sets of variables/functions, thereby contributing to Program editors beginners learn and understand the editing of programming languages to reduce their frustration.

本實施例提供一種程式語言編輯方法,如第1圖所示,是以電子計算機運行電腦程式產品,並由螢幕或類似裝置顯示其編輯介面,供使用者操作電子計算機執行程式語言編輯方法,編輯並撰寫程式語言,於使用者操作電子計算機時,依電子計算機的種類不同,使用者可能以滑鼠、鍵盤、觸控板、觸控螢幕或其他輸入/輸出裝置進行操作。The embodiment provides a programming language editing method. As shown in FIG. 1 , the computer program product is run by an electronic computer, and the editing interface is displayed by a screen or the like for the user to operate the electronic computer to execute the programming language editing method. The programming language is written. When the user operates the computer, depending on the type of computer, the user may operate with a mouse, a keyboard, a touchpad, a touch screen or other input/output devices.

執行本實施例之程式語言編輯方法,包括提供一編輯介面,如第1圖所示,該編輯介面包括一語法選擇窗格10及一語法編輯窗格20,語法選擇窗格10顯示可供使用者選擇使用的程式語言語法,具體而言包括多個分別代表一變數或一函式的選擇標籤11及其語義說明12,其中變數與函式均為以特定組合方式排列的符號,每一個變數中都不含其他變數或函式,但一個函式中則可能含有其他變數或函式;選擇標籤11與語義說明12之內容係彼此匹配,語義說明12中的內容可提示並說明對應之選擇標籤11中顯示的變數或函式的意義或內容,供使用者點擊選擇標籤11選用,其中,所編輯的程式語言可能具有多種不同的變數與函式,為了方便使用者快速找到欲使用的目標,語法選擇窗格中可以進一步包括多個以功能、類型進行分類的頁籤13,例如第1圖中的變數頁籤與函式頁籤,每一頁籤可分別對應若干選擇標籤11及其語義說明,這些頁籤13將語法選擇窗格10中可顯示的選擇標籤11及其語義說明12分類,使語法選擇窗格10中一次僅顯示一部分的選擇標籤11。Performing the programming language editing method of the embodiment includes providing an editing interface. As shown in FIG. 1, the editing interface includes a syntax selection pane 10 and a syntax editing pane 20, and the syntax selection pane 10 is displayed for use. The programming language syntax selected by the user, in particular, includes a plurality of selection tags 11 respectively representing a variable or a function and a semantic description thereof 12, wherein the variables and functions are symbols arranged in a specific combination, each variable There are no other variables or functions in the middle, but one function may contain other variables or functions; the content of the selection label 11 and the semantic description 12 are matched with each other, and the content in the semantic description 12 can prompt and explain the corresponding selection. The meaning or content of the variable or function displayed in the tag 11 is selected by the user to click on the selection tag 11, wherein the edited programming language may have a plurality of different variables and functions, so that the user can quickly find the target to be used. The grammar selection pane may further include a plurality of tabs 13 classified by function and type, such as the variable tabs and function pages in FIG. Each of the tabs may respectively correspond to a plurality of selection tags 11 and their semantic descriptions. The tabs 13 classify the selectable tags 11 and their semantic descriptions 12 displayable in the grammar selection pane 10, so that only one time in the grammar selection pane 10 A part of the selection tab 11 is displayed.

語法編輯窗格20顯示使用者目前已編輯撰寫或即將編輯的程式語言,供使用者瀏覽並進一步編輯。在使用者尚未點擊選擇標籤11的情形下,如第1圖所示,語法編輯窗格20僅有顯示一預設輸入區21。The grammar editing pane 20 displays the programming language that the user has currently edited or is about to edit for the user to browse and further edit. In the case where the user has not clicked on the selection tab 11, as shown in Fig. 1, the grammar editing pane 20 displays only a preset input area 21.

請參考第2圖,使用者點擊其中一個選擇標籤11,例如在本實施例中點擊代表變數宣告的選擇標籤11,語法編輯窗格20即在原先顯示預設輸入區21處顯示一對應選擇標籤11的變數/函式編輯窗22,預設輸入區則排列顯示於變數/函式編輯窗22下方,該變數/函式編輯窗22包括一對應所述變數或函式的變數/函式格式區221及一對應該變數/函式格式區的程式語言區222,另外,該變數/函式編輯窗22還包括有一新增標籤223。變數/函式格式區221顯示對應選擇標籤11的變數或函式所對應的格式,並包括一至多個輸入欄位224,輸入欄位224中預填有符合該輸入欄位224之語義的輸入值,該輸入值的形式可能是字串、數值、布林值、未定義、空值或其他可能的值,其中,變數或函式所對應的格式是依照使用者所欲編輯撰寫的程式語言種類進行定義,例如HTML、Java Script或其他種類之程式語言,使變數/函式格式區221中顯示的變數或函式對應的格式符合該種程式語言制式的格式規範或語法內容。請參考圖3,使用者點擊輸入欄位224時,編輯介面顯示一選單窗格30,該選單窗格30中載有多個分別對應一預設內容的預設內容標籤31,可供使用者點擊,當使用者點擊其中一個預設內容標籤31,如第4圖所示,受點擊之預設內容標籤31所對應的預設內容即被輸入並顯示於輸入欄位224。藉由輸入欄位224預填之輸入值或預設內容標籤31顯示的內容,可向使用者提示該輸入欄位224可填入的輸入值之格式。Referring to FIG. 2, the user clicks on one of the selection labels 11, for example, in the embodiment, the selection label 11 representing the variable announcement is clicked, and the grammar editing pane 20 displays a corresponding selection label at the original display preset input area 21. The variable/function editing window 22 of the 11th, the preset input area is arranged below the variable/function editing window 22, and the variable/function editing window 22 includes a variable/function format corresponding to the variable or function. The area 221 and a pair of program language areas 222 that should be in the variable/function format area, in addition, the variable/function editing window 22 further includes a new label 223. The variable/function format area 221 displays the format corresponding to the variable or function corresponding to the selection tag 11, and includes one or more input fields 224 pre-filled with inputs that conform to the semantics of the input field 224. Value, the input value may be in the form of a string, a numeric value, a Boolean value, an undefined, a null value, or other possible values, wherein the format corresponding to the variable or function is a programming language written according to the user's desire to edit. The type is defined, such as HTML, Java Script, or other kinds of programming languages, such that the format corresponding to the variable or function displayed in the variable/function format area 221 conforms to the format specification or syntax content of the programming language. Referring to FIG. 3, when the user clicks on the input field 224, the editing interface displays a menu pane 30, and the menu pane 30 carries a plurality of preset content labels 31 respectively corresponding to a preset content, which are available to the user. Clicking, when the user clicks on one of the preset content tags 31, as shown in FIG. 4, the preset content corresponding to the clicked preset content tag 31 is input and displayed in the input field 224. By inputting the input value pre-filled by the field 224 or the content displayed by the preset content tag 31, the user can be prompted for the format of the input value that the input field 224 can fill.

請參考第4圖與第5圖,使用者除輸入欄位224預填之輸入值以及預設內容標籤31的內容之外,使用者也可以點擊輸入欄位224後,以鍵盤或類似裝置自行填入其他輸入值,讓輸入欄位224接收使用者自訂的輸入值,而無須受限於預設內容標籤31的內容。Referring to FIG. 4 and FIG. 5, in addition to the input value pre-filled in the input field 224 and the content of the preset content tag 31, the user can also click on the input field 224 to use the keyboard or the like. The other input values are filled in, and the input field 224 receives the user-defined input value without being limited by the content of the preset content tag 31.

請參考第5圖與第6圖,各個輸入欄位224均輸入設定完成後,使用者可點擊新增標籤223,程式語言區222即根據變數/函式格式區中顯示的變數或函式的格式以及輸入欄位224接收的輸入值顯示一相對應的程式語言。其中,程式語言區222所顯示的程式語言也可以是全部或局部(例如僅有對應於輸入欄位的部分)可供使用者編輯,使用者可以點擊程式語言區222中的程式語言,並以鍵盤或類似裝置直接鍵入的方式進行修改。Please refer to FIG. 5 and FIG. 6 . After the input fields 224 are input and set, the user can click the newly added tab 223, and the program language area 222 is based on the variables or functions displayed in the variable/function format area. The format and input values received by input field 224 display a corresponding programming language. The programming language displayed by the programming language area 222 may also be all or part of (for example, only the part corresponding to the input field) for the user to edit, and the user may click the programming language in the programming language area 222 and The keyboard or similar device is modified by typing directly.

請參考第6圖與第7圖,使用者還可進一步點擊語法選擇窗格10的函式頁籤,並點擊其中代表建立函式的選擇標籤14,語法編輯窗格20即在原本顯示預設輸入區21處顯示選擇標籤14所對應的變數/函式編輯窗23,預設輸入區21則排列顯示於變數/函式編輯窗23下方,該變數/函式編輯窗23包括一對應所述變數或函式的變數/函式格式區231、一對應該變數/函式格式區的程式語言區232及一語法編輯子窗格233,變數/函式格式區231顯示對應選擇標籤14的變數或函式所對應的格式,並包括一至多個輸入欄位234,輸入欄位234中可以設定預填有符合該輸入欄位234之語義的輸入值。其中,程式語言區232根據變數或函式的格式及輸入欄位234的輸入值即時顯示編輯輸入的程式語言,當使用者點擊輸入欄位234並鍵入輸入值時,程式語言區232中顯示的程式語言即依使用者輸入的輸入值即時進行變更。語法編輯子窗格233位於程式語言區232中,使用者可點擊語法編輯子窗格233,如第8圖所示,預設輸入區21即改顯示於語法編輯子窗格233中,請參考第9圖,使用者可進一步點擊任意之選擇標籤,例如變數頁籤之選擇標籤11,語法編輯子窗格233即顯示對應選擇標籤11之變數或函式的變數/函式子編輯窗24,供使用者進一步編輯。Referring to FIG. 6 and FIG. 7 , the user can further click the function tab of the grammar selection pane 10 and click the selection tab 14 representing the creation function, and the grammar editing pane 20 displays the preset in the original. A variable/function editing window 23 corresponding to the selection label 14 is displayed at the input area 21, and the preset input area 21 is arranged and displayed under the variable/function editing window 23, and the variable/function editing window 23 includes a corresponding one. A variable/function format area 231 of a variable or function, a pair of program language areas 232 of a variable/function format area, and a grammar editing sub-pane 233, the variable/function format area 231 displaying the variable corresponding to the selection label 14. Or a format corresponding to the function, and including one or more input fields 234, and the input field 234 may be set with an input value pre-filled with the semantics of the input field 234. The programming language area 232 instantly displays the programming language of the edit input according to the format of the variable or function and the input value of the input field 234. When the user clicks the input field 234 and types the input value, the program language area 232 displays The programming language changes instantly based on the input values entered by the user. The grammar editing sub-pane 233 is located in the programming language area 232, and the user can click the grammar editing sub-pane 233. As shown in FIG. 8, the preset input area 21 is displayed in the grammar editing sub-pane 233, please refer to In FIG. 9, the user can further click any selection label, such as the selection tab 11 of the variable tab, and the grammar editing sub-pane 233 displays the variable/function sub-editing window 24 corresponding to the variable or function of the selection label 11. For further editing by the user.

此外,使用者可於語法編輯窗格20中未顯示變數/函式編輯窗的任意位置點擊,例如任兩個變數/函式編輯窗之間,或是變數/函式編輯窗的下方,語法編輯窗格20即對應所點擊的位置顯示預設輸入區21,於使用者後續進一步點擊任意之選擇標籤時,於預設輸入區顯示對應於選擇標籤的變數/函式編輯窗。In addition, the user can click anywhere in the grammar editing pane 20 where the variable/function editing window is not displayed, such as between any two variables/function editing windows, or below the variable/function editing window. The editing pane 20 displays the preset input area 21 corresponding to the clicked position. When the user subsequently clicks any of the selection labels, the variable/function editing window corresponding to the selection label is displayed in the preset input area.

請參考第9圖與第10圖,變數/函式編輯窗另外包括位移標籤225、235,例如是向上位移標籤,當使用者點擊位移標籤235時,載有該位移標籤的對應變數/函式編輯窗23與其他變數/函式編輯窗的相對位置將發生改變,例如是載有該位移標籤的變數/函式編輯窗23與其上方的變數/函式編輯窗22位置對調,使載有該位移標籤的變數/函式編輯窗23向上移動,可供使用者利用位移標籤225、235調整各個變數/函式編輯窗的排列順序。Referring to FIG. 9 and FIG. 10, the variable/function editing window additionally includes displacement labels 225 and 235, for example, an upward displacement label. When the user clicks on the displacement label 235, the corresponding variable/function carrying the displacement label is loaded. The relative position of the edit window 23 and other variable/function editing windows will change, for example, the variable/function editing window 23 carrying the displacement label is positioned opposite the variable/function editing window 22 above it, so that the The variable/function editing window 23 of the displacement tag is moved upwards, and the user can adjust the order of the respective variable/function editing windows by using the displacement tags 225 and 235.

請參考第9圖與第11圖,編輯介面另外包括一轉譯按鈕40,當使用者點擊該轉譯按鈕40,編輯介面即顯示一完整程式語言窗格50,語法編輯窗格20中所有變數/函式編輯窗22、23中顯示的程式語言依序顯示於完整程式語言窗格50,即完成程式語言之編輯,使用者可點擊並點選完整程式語言窗格50中所顯示的內容,予以複製或轉存進行利用。Referring to FIG. 9 and FIG. 11 , the editing interface additionally includes a translation button 40. When the user clicks the translation button 40, the editing interface displays a complete programming language pane 50, and all variables/letters in the grammar editing pane 20 are displayed. The programming languages displayed in the editing windows 22, 23 are sequentially displayed in the full programming language pane 50, that is, the editing of the programming language is completed, and the user can click and click on the content displayed in the full programming language pane 50 to copy Or transfer to use.

除上述實施例外,本發明還可於選擇標籤11或頁籤13處另外設置一自訂標籤,於使用者點擊後產生並顯示供使用者輸入的介面,以將使用者輸入的內容儲存為另一新增的選擇標籤,或者可於使用者點擊後將使用者預先於語法編輯窗格中圈選的內容儲存或將語法編輯窗格中的全部內容儲存,新增為另一選擇標籤,提供使用者自訂與新增選擇標籤的使用功能。In addition to the above-mentioned embodiments, the present invention may further provide a custom label at the label 11 or the tab 13 to generate and display an interface for the user to input after the user clicks to store the content input by the user as another. A newly added selection label, or the content that is pre-selected by the user in the grammar editing pane or the entire content in the grammar editing pane can be stored as another selection label after the user clicks. User-defined and new selection of the use of the label.

利用上述內容,本發明提供一種程式語言編輯方法,使用者可以利用滑鼠或類似之操作介面進行點擊操作,點選需要使用的變數與函式,利用編輯介面直接顯示出正確完整的語法,可減少輸入錯誤或缺漏符號所造成的程式語言編輯錯誤,協助使用者編輯並撰寫程式語言。By using the above content, the present invention provides a programming language editing method. The user can perform a click operation by using a mouse or a similar operation interface, select the variables and functions to be used, and directly display the correct and complete syntax by using the editing interface. Reduce programming language editing errors caused by input errors or missing symbols, and help users edit and write programming languages.

其次,本發明於編輯介面中,同時顯示程式語言、語法格式及其語義說明,並且於變數與函式的輸入欄位中提供預設的輸入內容,能提示使用者當前使用的變數與函式在程式語言中所代表的語義,於使用者編輯的過程中也可以快速回顧並瞭解先前撰寫的程式語言的意義,協助使用者產生關連性的記憶,可降低程式語言的初學者於學習時遭遇的學習門檻,減輕挫折,而有助於快速學習程式語言。Secondly, the present invention displays the programming language, the grammar format and its semantic description in the editing interface, and provides preset input content in the input fields of the variables and functions, and can prompt the user for the variables and functions currently used. The semantics represented in the programming language can also quickly review and understand the meaning of the previously written programming language in the process of user editing, and help users to generate related memories, which can reduce the experience of beginners in programming languages. The learning threshold, which reduces frustration, helps to quickly learn the programming language.

綜上所述,本發明程式語言編輯方法不僅能直接幫助使用者完成程式語言所需的語法,在語義層面上也能給予使用者相當程度的提示與協助,可提高程式語言的編輯與學習效率,實為實務業界與學界所企盼,惟以上實施例僅用以說明本發明之技術內容,非用以限制本發明之申請專利範圍,本發明之專利範圍應以後述的申請專利範圍為準。In summary, the programming language editing method of the present invention not only directly helps the user to complete the grammar required by the programming language, but also gives the user a considerable degree of prompting and assistance at the semantic level, thereby improving the editing and learning efficiency of the programming language. It is to be understood that the above embodiments are only intended to illustrate the technical scope of the present invention, and are not intended to limit the scope of the present invention. The scope of the invention should be determined by the scope of the patent application.

10‧‧‧語法選擇窗格 10‧‧‧ grammar selection pane

11‧‧‧選擇標籤 11‧‧‧Select label

12‧‧‧語義說明 12‧‧‧ Semantic Description

13‧‧‧頁籤 13‧‧‧ page

14‧‧‧選擇標籤 14‧‧‧Select label

20‧‧‧語法編輯窗格 20‧‧‧ grammar editing pane

21‧‧‧預設輸入區 21‧‧‧Preset input area

22‧‧‧變數/函式編輯窗 22‧‧‧Variable/Functional Editing Window

221‧‧‧變數/函式格式區 221‧‧‧Variable/Function Format Area

222‧‧‧程式語言區 222‧‧‧Programming language area

223‧‧‧新增標籤 223‧‧‧New label

224‧‧‧輸入欄位 224‧‧‧Input field

225‧‧‧位移標籤 225‧‧‧displacement label

23‧‧‧變數/函式編輯窗 23‧‧‧Variable/Functional Editing Window

231‧‧‧變數/函式格式區 231‧‧‧Variable/Function Format Area

232‧‧‧程式語言區 232‧‧‧Programming language area

233‧‧‧語法編輯子窗格 233‧‧‧ grammar editing subpane

234‧‧‧輸入欄位 234‧‧‧Input field

235‧‧‧位移標籤 235‧‧‧displacement label

30‧‧‧選單窗格 30‧‧‧Menu Pane

31‧‧‧預設內容標籤 31‧‧‧Default Content Label

40‧‧‧轉譯按鈕 40‧‧‧Translation button

50‧‧‧完整程式語言窗格 50‧‧‧Complete program language pane

第1圖為本發明程式語言編輯方法之編輯介面示意圖。FIG. 1 is a schematic diagram of an editing interface of a programming language editing method of the present invention.

第2圖至第11圖為本發明程式語言編輯方法之連續操作示意圖。2 to 11 are schematic diagrams showing the continuous operation of the programming language editing method of the present invention.

Claims (10)

一種程式語言編輯方法,包括: 提供一編輯介面,該編輯介面包括一語法選擇窗格及一語法編輯窗格,該語法選擇窗格顯示多個分別代表一變數或一函式的選擇標籤及其語義說明; 所述選擇標籤受點擊後,該語法編輯窗格顯示一對應所述變數或函式的變數/函式編輯窗,該變數/函式編輯窗包括一對應所述變數或函式的變數/函式格式區及一對應該變數/函式格式區的程式語言區,該變數/函式格式區顯示所述變數或函式所對應的格式並包括至少一輸入欄位; 自所述輸入欄位接收一輸入值; 該程式語言區根據所述變數或函式的格式及該輸入值顯示一相對應的程式語言。A programming language editing method, comprising: providing an editing interface, the editing interface comprising a syntax selection pane and a syntax editing pane, the syntax selection pane displaying a plurality of selection labels respectively representing a variable or a function and Semantic description; after the selection tag is clicked, the grammar editing pane displays a variable/function editing window corresponding to the variable or function, and the variable/function editing window includes a corresponding variable or function a variable/function format area and a pair of program language areas that should be in the variable/function format area, the variable/function format area displaying the format corresponding to the variable or function and including at least one input field; The input field receives an input value; the program language area displays a corresponding programming language according to the format of the variable or function and the input value. 如請求項1所述的程式語言編輯方法,其中當所述選擇標籤受點擊時,至少一所述輸入欄位即預填一符合該輸入欄位之語義的輸入值。The program language editing method of claim 1, wherein when the selection tag is clicked, at least one of the input fields is pre-filled with an input value that conforms to the semantics of the input field. 如請求項1所述的程式語言編輯方法,其中該變數/函式編輯窗更包括一新增標籤,且當該新增標籤受點擊時,該程式語言區始根據所述變數或函式的格式及該輸入值顯示一相對應的程式語言。The program language editing method of claim 1, wherein the variable/function editing window further includes a new label, and when the new label is clicked, the program language area is based on the variable or function. The format and the input value display a corresponding programming language. 如請求項1所述的程式語言編輯方法,其中所述程式語言是該程式語言區根據所述變數或函式的格式及該輸入值即時顯示。The program language editing method according to claim 1, wherein the programming language is that the program language area is displayed in real time according to the format of the variable or function and the input value. 如請求項1所述的程式語言編輯方法,其中該程式語言區為一允許使用者修改所述程式語言的輸入區。The program language editing method of claim 1, wherein the program language area is an input area that allows a user to modify the programming language. 如請求項1所述的程式語言編輯方法,其中該程式語言區更包括一語法編輯子窗格,且該程式語言編輯方法更包括: 該語法編輯子窗格受點擊後,於一所述選擇標籤受點擊時使該語法編輯子窗格顯示一對應所述變數或函式的變數/函式子編輯窗。The programming language editing method of claim 1, wherein the programming language area further comprises a grammar editing sub-pane, and the programming language editing method further comprises: the grammar editing sub-panel is clicked, and the selection is performed. When the tag is clicked, the grammar editing sub-pane displays a variable/function sub-editing window corresponding to the variable or function. 如請求項1所述的程式語言編輯方法,更包括下列步驟: 當該語法編輯窗格中未顯示所述變數/函式編輯窗的位置受點擊時,於語法編輯窗格對應所點擊的位置顯示一預設輸入區; 當所述選擇標籤受點擊時,在該預設輸入區顯示另一對應所述變數或函式的變數/函式編輯窗。The program language editing method as claimed in claim 1, further comprising the following steps: when the position of the variable/function editing window is not displayed in the grammar editing pane, the grammar editing pane corresponds to the clicked position. Displaying a preset input area; when the selection tag is clicked, another variable/function editing window corresponding to the variable or function is displayed in the preset input area. 如請求項7所述的程式語言編輯方法,其中所述變數/函式編輯窗更包括至少一位移標籤,且該程式語言編輯方法更包括: 當所述位移標籤受點擊時,載有該位移標籤的變數/函式編輯窗與至少一其他所述變數/函式編輯窗的相對位置產生改變。The program language editing method of claim 7, wherein the variable/function editing window further comprises at least one displacement label, and the programming language editing method further comprises: loading the displacement label when the click label is clicked The relative position of the tag's variable/function editing window to at least one of the other variables/function editing windows changes. 如請求項1所述的程式語言編輯方法,更包括: 所述輸入欄位受點擊時,該編輯介面顯示一選單窗格,該選單窗格載有多個分別對應一預設內容的預設內容標籤; 其中一所述預設內容標籤受點擊時,受點擊之該預設內容標籤所對應的預設內容被輸入並顯示於該輸入欄位。The programming language editing method of claim 1, further comprising: when the input field is clicked, the editing interface displays a menu pane, where the menu pane contains a plurality of presets respectively corresponding to a preset content. a content tag; when one of the preset content tags is clicked, the preset content corresponding to the preset content tag that is clicked is input and displayed in the input field. 如請求項1所述的程式語言編輯方法,其中該編輯介面更包括一轉譯按鈕,且該程式語言編輯方法更包括: 當該轉譯按鈕受點擊時,使該編輯介面顯示一完整程式語言窗格,且該語法編輯窗格中所有變數/函式編輯窗中顯示的程式語言被依序顯示於該完整程式語言窗格。The programming language editing method of claim 1, wherein the editing interface further comprises a translation button, and the programming language editing method further comprises: when the translation button is clicked, causing the editing interface to display a complete programming language pane. And the programming language displayed in all the variables/function editing windows in the grammar editing pane is sequentially displayed in the full program language pane.
TW106136979A 2017-10-26 2017-10-26 Method for editing programming language TWI647618B (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
TW106136979A TWI647618B (en) 2017-10-26 2017-10-26 Method for editing programming language
CN201711246896.1A CN109710225A (en) 2017-10-26 2017-12-01 Program language edit methods

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
TW106136979A TWI647618B (en) 2017-10-26 2017-10-26 Method for editing programming language

Publications (2)

Publication Number Publication Date
TWI647618B TWI647618B (en) 2019-01-11
TW201917572A true TW201917572A (en) 2019-05-01

Family

ID=65804136

Family Applications (1)

Application Number Title Priority Date Filing Date
TW106136979A TWI647618B (en) 2017-10-26 2017-10-26 Method for editing programming language

Country Status (2)

Country Link
CN (1) CN109710225A (en)
TW (1) TWI647618B (en)

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6269475B1 (en) * 1997-06-02 2001-07-31 Webgain, Inc. Interface for object oriented programming language
US20030105620A1 (en) * 2001-01-29 2003-06-05 Matt Bowen System, method and article of manufacture for interface constructs in a programming language capable of programming hardware architetures
US20030131337A1 (en) * 2002-01-07 2003-07-10 Perumainar Asok K. Educational method and tool for isolating and teaching programming language concepts
US8065336B2 (en) * 2004-12-20 2011-11-22 Fujitsu Limited Data semanticizer
TW200931281A (en) * 2008-01-15 2009-07-16 Mitac Int Corp An editing system and method for application programming interface
CN102279845A (en) * 2010-06-09 2011-12-14 英业达股份有限公司 System and method for adding new supplementary word explanations in connection mode
TWI544354B (en) * 2013-09-14 2016-08-01 Chunghwa Telecom Co Ltd Graphic Control Interface Design System and Its Graphic Control Interface Design and Operation
TWI609578B (en) * 2015-09-17 2017-12-21 財團法人資訊工業策進會 On-line discussing system with compiling program function and method thereof

Also Published As

Publication number Publication date
TWI647618B (en) 2019-01-11
CN109710225A (en) 2019-05-03

Similar Documents

Publication Publication Date Title
US10338893B2 (en) Multi-step auto-completion model for software development environments
JP5421239B2 (en) Multiple mode input method editor
CA2937964C (en) Systems and methods for bi-directional visual scripting for programming languages
US20150206447A1 (en) System and method for authoring content for web viewable textbook data object
US20120017161A1 (en) System and method for user interface
Spaanjaars Beginning asp. net 4: in c# and vb
US20200357301A1 (en) Interactive Learning Tool
US20210405977A1 (en) Method of converting source code in a universal hybrid programming environment
Asenov et al. Envision: A fast and flexible visual code editor with fluid interactions (overview)
Nguyen Hands-on application development with PyCharm: Accelerate your Python applications using practical coding techniques in PyCharm
KR20200034660A (en) Facilitated user interaction
US20230195825A1 (en) Browser extension with automation testing support
Jakobus et al. Mastering bootstrap 4
TWI647618B (en) Method for editing programming language
Chaudhary Tkinter GUI application development hotshot
US10706215B2 (en) Producing formula representations of mathematical text
Hempel et al. Maniposynth: Bimodal Tangible Functional Programming
Johnson Programming in HTML5 with JavaScript and CSS3
US9753982B2 (en) Method and system for facilitating learning of a programming language
Eng Hands-On GUI Programming with C++ and Qt5: Build stunning cross-platform applications and widgets with the most powerful GUI framework
EP4042272A1 (en) User interface generation
Baka Getting Started with Qt 5: Introduction to programming Qt 5 for cross-platform application development
Leeds Microsoft Expression Web 4 Step by Step
Lee Enhancing the Usability of Computer Applications for People With Visual Impairments via UI Augmentation
McCaffrey Starlogo tng: the convergence of graphical programming and text processing