Brython: استبدال JavaScript بـ Python في الواجهة الأمامية

مرحبا هبر!



ما يرضي قرائنا كثيرًا ، يستمر عملنا في تحديث كتب بايثون . لكن البحث مستمر في هذا الاتجاه - واليوم نود أن نذكر Brython - Python للمتصفحات. المقال قصير ، ومرح قليلاً ، وباحث ، حاولنا الحفاظ على أسلوب المؤلف.



تقدم هذه المقالة مقدمة قصيرة للعمل مع Brython ، وهو تطبيق Python لتطوير الواجهة الأمامية (المتصفح).



تم نشر المشروع بأكمله هنا .



المقدمة



حسودًا من نجاح مبرمجي جافا سكريبت ، التقى متآمرو الثعبان سراً لمناقشة مستقبل بايثون في هذا العالم المروع. جافا سكريبت في كل مكان ، تلتهم تصفية بايثون. مسلحًا بـ Node.js ، غزت JavaScript منطقة Python ، وفقدت دورها المهيمن كلغة محببة من جانب الخادم حيث كانت تنافس روبي سابقًا ( تذكر تلك الأيام ؟). ثم حان الوقت للتوغل في قلب منطقة جافا سكريبت: المتصفح.



لا تنس قصتك (وتذكر المستقبل)



هذه المعضلة لم تقتصر على المتآمرين المذكورين. كان هناك فارس آخر من عباءة وخنجر ، مؤلف كتاب Transcrypt . قرر أن يكتب مترجمًا لبايثون يقوم بترجمة التعليمات البرمجية مباشرة إلى جافا سكريبت. بدا الأمر واعدًا.



فضل آخرون الاستفادة من دروس التاريخ. فقط هاجر مع جميع أفراد الأسرة. على الأقل هذا ما اعتقده مبتكرو Pyodide . كانوا بصدد إنشاء جيب على جانب JavaScript مع مترجم Python الكامل الذي يمكنه تنفيذ كود Python. وفقًا لذلك ، يمكن تشغيل أي كود Python هناك. ، بما في ذلك معظم مكدس علوم البيانات ، حيث توجد ارتباطات بلغة C (مثل Numpy و Pandas).



يبدو أيضا واعدا جدا. لكن الاختبارات الأولية البطيئة التي أجراها مؤلف Pyodide أظهرت أن الصفحة كانت تحمل بطيئًا بعض الشيء في البداية.



ثم فعل المتآمرون بالضبط بروح المتآمرين الجيدين: لقد أنشأوا مترجمًا مختلفًا لتحويل Python إلى JavaScript ، لكن هذه المرة ترجموا إلى JavaScript عند تحميل الصفحة (ليس مثل Transcrypt ، الذي يجمع الشفرة إلى JavaScript مسبقًا). وهكذا تم تشكيل جماعة بريثون الاخوية. ثعبان واحد يحكمهم جميعًا.



مرحبا بالعالم



دعنا نكتب "Hello World" التقليدية



وها هو Brython trooper (أنا أتحدث عن المترجم).



<script type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
    
<body onload="brython()">
...
</body>
      
      





في العلامة body



الموضحة أعلاه ، نكتب الكود بلغة Brython:



<script type="text/python">
from browser import document

document <= "Hello World"
</script>

      
      





نضيف فقط Hello World إلى العنصر document



. همم. سهل جدا.



بالكامل - أدناه.



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">
    </script>
</head>

<body onload="brython()">

<script type="text/python">
from browser import document

document <= "Hello World"
</script>
</body>
</html>
      
      





في هذه الحالة ، ستعرض الصفحة ببساطة التحية "Hello World".



آلة حاسبة



لنكتب آلة حاسبة في بريثون. يتم نشر كل رمزه هنا .







نعم ، لقد خمنت ذلك ، نحن بحاجة إلى طاولة. لنفعلها.



from browser import document, html
calc = html.TABLE()

      
      





دعونا نضيف الصف الأول فقط. أي أننا سنعرض الحقل للأرقام (دعنا نسميها result



) والمفتاح C.



calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +
                html.TD("C"))
      
      





نعم ، لست متأكدًا جدًا من بناء الجملة هذا مع <=



. لكن ، احكم بنفسك ، هذه مكتبة رائعة ، لذا أوافق عليها.



الآن دعنا نضيف لوحة المفاتيح



lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
      
      





أخيرًا ، أضف calc



إلى document



.



document <= calc
      
      





لذا ، حتى الآن جيد جدًا. كيف نجعل كل هذا يعمل؟ أولاً ، تحتاج إلى الحصول على مرجع لعنصر النتيجة لمعالجته عند الضغط على المفاتيح.



result = document["result"] #       id
      
      





بعد ذلك ، نحتاج إلى التحديث في result



كل مرة يتم فيها الضغط على أي عنصر على لوحة المفاتيح. لهذا ، دعونا نصنع معالج الحدث. دعونا نضع ثقتنا في مطوري Brython ونجد أن هذا الرمز يعمل. انتبه إلى عمليات التلاعب result



بناءً على الزر الذي ضغطت عليه.



def action(event):
    """  "click"     ."""
    # ,  ,   "target" 
    #  event 
    element = event.target
    # ,   ,    "text" 
    value = element.text
    if value not in "=C":
        #    
        if result.text in ["0", "error"]:
            result.text = value
        else:
            result.text = result.text + value
    elif value == "C":
        # 
        result.text = "0"
    elif value == "=":
        #      
        try:
            result.text = eval(result.text)
        except:
            result.text = "error"
      
      





أخيرًا ، قم بربط معالج الحدث أعلاه بحدث click



موجود على جميع الأزرار.



for button in document.select("td"):
    button.bind("click", action)
      
      





ترى كم كانت بسيطة. لكن على محمل الجد ، يبدو لي أن بريثون هو تحفة هندسية ، وربما أفضل مثال على حبي للغة بايثون. يرجى دعم المطورين ومنحهم علامة النجمة في مستودع جيثب!



All Articles