劉任昌整合開發環境IDE的Jupyter編輯Python程式碼

Tkinter是Tk GUI工具包的Python繫結包。它是Tk GUI工具包的標準Python介面[3]，並且是Python的業界標準GUI工具包。[4]Tkinter同時也包含在Python的Linux、Microsoft Windows和Mac OS X標準庫中。Tkinter的名字來自Tk interface

原始程式碼

python程式碼的空格也是指令, 格相同個空格同一區塊{其他語言括號當區塊}

from tkinter import * #從函式庫 tkinter 輸入所有 * 方法export出口
banks=['和家人','摩根大通','美國銀行','中國工商','富國銀行','匯豐銀行','巴黎銀行']
def ABC():          #畫圖 define自訂函數
    global b1 #宣告b1是廣域GLOBAL變數,其他函數也可使用
    txt = ''
    for i in range(len(banks)): 
        txt += banks[i] + ' '
    b1=Label(canvas,text=txt,font='Arial 20 bold')
    b1.pack(side=TOP)
def XYZ():         #清除視窗的all所有canvas圖
    banks.append('三菱銀行')
    banks.append('台灣銀行')
    ABC()#結束XYZ之前給它顯示{curly braces, bracket}
def kill():
    b1.pack_forget()
tk = Tk()
tk.title("和家人python建立tkinter視窗使用者介面")  #也可以定義視窗名為 window, root課本都如此習慣
canvas = Canvas(tk, width=400, height=400)
canvas.pack()
btn1 = Button(tk, text="賴青德銀行", command = ABC, bg='black',fg='white').pack(side=LEFT)
btn2 = Button(tk, text="賴青德增加", command = XYZ).pack(side=LEFT)
btn3 = Button(tk, text="賴青德刪除", command = kill).pack(side=LEFT)
tk.mainloop()

SPYDER整合開發環境IDE=Intergrated Development Environment

學習重點

• 指令STATEMENT或INSTRUTION
• 縮排INDENTATION在同一位置就是同一區塊BLOCK
• FONT字型,EM=EMPHASIZE強調。撰寫模式，方便，不專業藉由複習HTML,JAVASCRIPT等,可以順便讓你們了解PYTHON的特色
• .SELECTOR{用在多個元素},SPAN拇指與小指的距離,一小段,一小段的文字 
• UL=UNDERER LIST, OL=ORDERED LIST, LI=LIST 
• push推,美國餐廳放置餐盤的架子下面是彈簧,取盤子pop,放入盤子push append附加在後面, appendix書本的附錄
• 大括號{ }CURLY BRACKET, CURLY捲,用於PYTHON集合
• 中括號[ ]SQUARE BRACKET, SQUARE方形,用於PYTHON串列 小括號( )CIRCLE BRACKET, CIRCLE圓,用於PYTHON元組
• 角括號<>ANGLE BRACKET,不能直接打角括號,因為它們是HTML命令,需用&符號接LT(小於Less Then)再分號;
• 圓周CIRCUMFERENCE, 直徑DIAMETER, 半徑RADIUS BORDER邊界, SOLID實心, PX=PIXEL點 
• PYTHON與JAVASCRIPT命令的對照,PYTHON必須透過編輯器或雲端伺服器(例如GOOGLE COLAB)執行,JAVASCRIPT可以直接在瀏覽器CHROME或EDGE執行 
• PYTHON指令len(串列)對比JAVASCRIPT串列.length; 
• PYTHON指令串列.append(新增)對比JAVASCRIPT串列.push(新增);傳列.pop()移除最後一個元素
• BUTTON的ONCLICK事件=按下按鈕執行...以最後一個為例,在PYTHON不是使用ONCLICK事件=，PYTHON指令command=要執行的程式

將CSS指令在HTML模式下放在最前面

<STYLE>PRE{BORDER:5PX DASHED RED;} H1{BACKGROUND:GREEN;COLOR:WHITE;PADDING:5PX;TEXT-ALIGN:CENTER;}

</STYLE>