زبان سلام
ویرایشگر آنلاین

درس ۲۵ از ۴۹ · زبان صفحه

زبان صفحه در وب

وقتی هدف وب است، DSL صفحه‌ی سلام به HTML، CSS و در صورت نیاز جاوااسکریپت تبدیل می‌شود. این درس بخش‌های مخصوص وب را جمع می‌کند: خروجی build، رفتار مرورگر/DOM، و سرو کردن صفحه‌ها.

در این درس
  1. ساخت خروجی وب
  2. رویدادها و DOM در مرورگر
  3. صفحه‌های پارامتردار و رندر در زمان اجرا
  4. سرو کردن و پروژه‌های وب
  5. نکته‌ها

ساخت خروجی وب

فرمان salam page build page.salam پرونده را به page.html و page.css تبدیل می‌کند؛ اگر اسکریپت/رویداد داشته باشد page.js هم ساخته می‌شود. با --inline خروجی در یک فایل HTML خودبسنده قرار می‌گیرد. برای چند صفحه، مثل salam page build home.salam about.salam، برای هر صفحه یک HTML و یک style.css مشترک ساخته می‌شود. بدون نام فایل، معمولاً main.salam یا همه‌ی صفحه‌های پوشه ساخته می‌شوند.

سبک‌ها به کلاس‌های تولیدشده منتقل می‌شوند تا HTML تمیزتر و سبک‌ها قابل اشتراک باشند.

رویدادها و DOM در مرورگر

ویژگی‌های رویداد مانند کلیک، ارسال، ورودی، تغییر و ... به رفتار تعاملی در مرورگر نگاشت می‌شوند. تابع‌های سلام که به رویداد وصل می‌شوند در خروجی وب به اسکریپت صفحه تبدیل می‌شوند. برای کار با عنصرها در مرورگر می‌توان از APIهای DOM (مثل دام.با شناسه) در کد رویداد استفاده کرد.

درس‌های رویدادهای موس تا حالت، DOM و زمان‌سنج‌ها این بخش را کامل پوشش می‌دهند.

صفحه‌های پارامتردار و رندر در زمان اجرا

صفحه‌های پارامتردار می‌توانند در زمان اجرا HTML تولید کنند و با داده‌ی هر درخواست پر شوند. این برای سرورهای وب سلام مناسب است. مقدارهای متنی هنگام درج امن‌سازی می‌شوند تا محتوای کاربر به کد/نشانه‌گذاری تبدیل نشود. برای مقدارهای حساس/ساختاری (نشانی، رنگ، اندازه و ...) از اعتبارسنجی/تبدیل امن مناسب استفاده کنید.

layout-runtime.salam
صفحه کارت(نام: رشته، امتیاز: صحیح):
    عنوان = «کارت » + نام
    زبان = «فارسی»
    جهت = «راست به چپ»
    سرتیتر: اندازه = ۲ محتوا = نام پایان
    اگر امتیاز >= ۵۰:
        پاراگراف: محتوا = «قبول» پایان
    وگرنه:
        پاراگراف: محتوا = «مردود» پایان
    پایان
پایان

تابع ریشه:
    سرچاپ کارت(«علی»، ۷۰)
پایان
خروجی<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>کارت علی</title></head><body><h2>علی</h2><p>قبول</p></body></html>
layout-server.salam
واردسازی شبکه.اچ تی تی پی
واردسازی شبکه.مسیریاب

صفحه خوشامد(نام: رشته):
    عنوان = "درود " + نام
    زبان = "فارسی"
    جهت = "راست به چپ"
    سرتیتر: اندازه = ۱ محتوا = "درود، " + نام پایان
    پاراگراف: محتوا = "این صفحه روی سرور ساخته شد." پایان
پایان

تابع خانه(زمینه: صحیح۶۴):
    ناپایا نام := اچ تی تی پی.پرسمان(زمینه، "name")
    اگر نام == "":
        نام = "مهمان"
    پایان
    اچ تی تی پی.اچ تی ام ال(زمینه، خوشامد(نام))
پایان

تابع ریشه:
    ناپایا م := مسیریاب.مسیریاب جدید()
    مسیریاب.دریافت(م، "/"، خانه)
    ناپایا س := اچ تی تی پی.سرور جدید(۸۰۸۰)
    اچ تی تی پی.استفاده(س، م)
    اچ تی تی پی.اجرا(س)
پایان

سرو کردن و پروژه‌های وب

فایل‌های ساخته‌شده را می‌توان با هر وب‌سرور استاتیک منتشر کرد، یا با salam serve محلی/سروری سرو کرد. برنامه‌های Salam هم می‌توانند با بسته‌های شبکه (مثل شبکه.اچ تی تی پی و شبکه.مسیریاب) پاسخ HTML برگردانند.

layout-inbox.salam
بخش نشان(متن: رشته):
    تکه: محتوا = متن پس‌زمینه = #fde68a پایان
پایان

صفحه صندوق(کاربر: رشته، موضوع‌ها: وکتور<رشته>):
    عنوان = "صندوق " + کاربر
    زبان = "فارسی"
    جهت = "راست به چپ"
    سرتیتر: اندازه = ۱ محتوا = "درود، " + کاربر پایان
    اگر موضوع‌ها.خالی است():
        پاراگراف: محتوا = "پیام تازه‌ای ندارید" پایان
    وگرنه:
        پاراگراف: محتوا = "نخوانده: " + موضوع‌ها.طول() پایان
        فهرست:
            هر ش، م در موضوع‌ها:
                مورد: محتوا = (ش + ۱) + ". " + م پایان
            پایان
        پایان
    پایان
پایان

تابع ریشه:
    ناپایا موضوع‌ها := وکتور {} برگردان وکتور<رشته>
    دیرکن موضوع‌ها.آزادکن()
    موضوع‌ها.بیفزا("جلسه‌ی ساعت ۱۰")
    موضوع‌ها.بیفزا("<b>جایزه</b> رایگان & بیشتر")
    سرچاپ صندوق("سارا"، موضوع‌ها)
    سرچاپ نشان("تازه")
پایان
خروجی<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>صندوق سارا</title></head><body><h1>درود، سارا</h1><p>نخوانده: 2</p><ul><li>1. جلسه‌ی ساعت ۱۰</li><li>2. &lt;b&gt;جایزه&lt;/b&gt; رایگان &amp; بیشتر</li></ul></body></html> <style>.نشان-a{background:#fde68a}</style><span class="نشان-a">تازه</span>

نکته‌ها

  • قابلیت‌های مرورگر (فرم‌ها، رسانه، اسکرول، clipboard، ذخیره‌سازی محلی و ...) مخصوص محیط وب‌اند.
  • برای صفحات تعاملی، اسکریپت صفحه باید در مرورگر فعال باشد.
  • اگر هدفتان پنجره‌ی بومی بدون مرورگر است، مسیر بومی را ببینید.