25 กรกฎาคม 2558

Published 7/25/2558 by with 0 comment

นำภาษาไพทอนไปรันบนเว็บบราวเซอร์ด้วย Brython

สวัสดีผู้อ่านทุกท่านครับ บทความนี้ผมจะขอนำเสนอวิธีการนำโค้ดภาษาไพทอนไปรันบนเว็บบราวเซอร์ด้วย Brython ครับ

Brython เป็นการนำโค้ดภาษาไพทอน 3 มาปรับแต่งให้รันบนเว็บบราวเซอร์ แล้วสามารถอินเทอร์เฟซไปยัง DOM objects และ events ได้ รองรับไลบรารีต่าง ๆ ของภาษาไพทอน และสามารถใช้ภาษาไพทอนทำงานร่วมกันกับไลบรารีของ Javascript ได้
ใช้ BSD licenses

มีไลบรารีเสริมสำหรับการพัฒนาโค้ดไพทอนด้วย Brython บนเว็บ ดังนี้
browser.alert()
browser.confirm()
browser.console
browser.document
browser.DOMEvent
browser.DOMNode
browser.prompt()
browser.window
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.timer
browser.websocket

ตัวอย่างการใช้งาน
โหลดไฟล์ brython.js จาก https://raw.githubusercontent.com/brython-dev/brython/master/www/src/brython.js แล้วทำการบีนทึกลงในโฟลเลอร์ที่จะใช้เขียนโค้ดภาษาไพทอนแล้วรันบนหน้าเว็บ
โค้ด HTML

[html]
<html>
<head>
<script src="brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document, alert, console

def show(ev):
alert(document["zone"].value)

alert('สวัสดี นี่คือโค้ดที่ทำงานจากภาษาไพทอน :D')
document['onbutton'].bind('click',show)
</script>
<input id="zone"><button id="onbutton">คลิกสิ :D</button>
</body>
</html>
[/html]

คำอธิบายโค้ด
ในการใช้งานต้องดึง brython.js เข้ามาในไฟล์ HTML

[html]<script src="brython.js">[/html]

ส่วนที่อยู่ใน

[html]<script type="text/python">[/html]

คือ โค้ดไพทอน

[python]
from browser import document, alert, console

def show(ev):
alert(document["zone"].value)

alert('สวัสดี นี่คือโค้ดที่ทำงานจากภาษาไพทอน Python :D')
document['onbutton'].bind('click',show)
[/python]

[caption id="attachment_1250" align="alignnone" width="1366"]นำภาษาไพทอนไปรันบนเว็บบราวเซอร์ด้วย Brython นำภาษาไพทอนไปรันบนเว็บบราวเซอร์ด้วย Brython[/caption]

นำภาษาไพทอนไปรันบนเว็บบราวเซอร์ด้วย Brython

จะเห็นได้ว่า การทำงานโค้ดไพทอนกับวัตถุภายในไฟล์ HTML เช่น กล่อง input และปุ่ม button สามารถทำงานร่วมกันได้โดยผ่าน Brython

อ่านเอกสารการใช้งาน Brython ได้ที่ http://www.brython.info/doc/en/index.html
ดูผลงานที่สร้างจากภาษาไพทอนร่วมกับ Brython ได้ที่ http://brython.info/gallery/gallery_en.html?lang=en

ติดตามบทต่อไปนะครับ
ขอบคุณครับ

0 ความคิดเห็น:

แสดงความคิดเห็น

แสดงความคิดเห็นได้ครับ :)