درس ۴۲ از ۴۵ · صفحه‌های وب

رسانه، پویانمایی و رویدادهای دیگر

صدا، ویدیو، پویانمایی و گذار همه با رویداد خبر می‌دهند چه می‌کنند، و چند بخش ویژه‌ی صفحه هم همین‌طورند: شکاف‌ها، بوم‌ها و سیاست امنیتی. این درس ۳۳ رویداد مربوط به آن‌ها را می‌گوید، یک پخش‌کننده‌ی کوچک می‌سازد و دقیقاً می‌گوید مرورگر آن‌هایی را که با دست نمی‌شود ساخت کی رخ می‌دهد.

در این درس

عنصرهای رسانه و صدایی برای پخش
زندگی یک پرونده‌ی رسانه
یک پخش‌کننده‌ی کوچک
جابجایی، سرعت و طول
زیرنویس و تغییر نشانه
رویدادهای پویانمایی
رویدادهای گذار
شکاف‌ها و تغییر شکاف
نقض سیاست امنیتی
رویدادهایی که اینجا نمی‌شود ساخت
مرجع: همه‌ی رویدادهای این درس
خودتان امتحان کنید

عنصرهای رسانه و صدایی برای پخش

عنصرهای صدا و ویدیو یک پرونده را پخش می‌کنند و خبر می‌دهند چه بر سرش می‌آید. ویژگی‌هایشان نشانی (پرونده)، کنترل‌ها (دکمه‌های خود مرورگر)، پیش‌بارگذاری (پیش از زدن پخش چقدر بیاورد: none، metadata یا auto)، loop و muted است. رویدادهایشان زندگی پرونده را دنبال می‌کنند: بارگذاری شروع می‌شود، طولش معلوم می‌شود، قابل پخش می‌شود، پخش می‌شود، تمام می‌شود. ویژگی‌های رویداد مثل درس پیش کار می‌کنند: نام یک تابع، یک لامبدای کوتاه یا یک رشته‌ی جاوااسکریپت.

نمونه‌های این درس شبکه ندارند، پس صدای خودشان را می‌سازند. تابع صدا یک پرونده‌ی WAV را به‌شکل نشانی data: برمی‌گرداند: سرآیندی ۵۴ بایتی که به base64 نوشته شده و یک آهنگ موج مربعی کوتاه که ۴۰۰ بار به آن اضافه می‌شود و سه ثانیه بوق می‌دهد. هر نمونه src عنصر صدا را از یک دکمه می‌گذارد، تا رویدادهای بارگذاری را به ترتیب واقعی‌شان ببینید. مرورگرها فقط بعد از اینکه کاربر روی صفحه چیزی را زده صدا پخش می‌کنند، پس دکمه‌های پخش کلیک واقعی‌اند، نه کدی که هنگام بار شدن صفحه اجرا شود.

زندگی یک پرونده‌ی رسانه

این صفحه رویدادهای بارگذاری و پخش را ثبت می‌کند. اول «بارگذاری صدا» و بعد «پخش» را بزنید و گزارش را با فهرست زیر مقایسه کنید. گزارش همان است که کروم می‌سازد؛ ترتیب همسایه‌هایی مثل تعلیق و بارگذاری داده در مرورگرهای دیگر ممکن است فرق کند.

web-mediaev-log.salam

واردسازی دام

ناپایا خط ها := ""
ناپایا شمار := ۰ برگردان صحیح۶۴

تابع بگو(چه: رشته):
    اگر شمار == ۱۲: خط ها = "" شمار = ۰ پایان
    خط ها = خط ها + چه + "\n"
    شمار += ۱
    دام.تنظیم متن(دام.با شناسه("log")، خط ها)
پایان

تابع صدا(): رشته:
    ناپایا موج := "data:audio/wav;base64,UklGRu5dAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgASlVOSwIAAAAAAGRhdGHAXQAA"
    تکرار ۴۰۰: موج += "oKCgoKCgoKCgoGBgYGBgYGBgYGCgoKCgoKCgoKCgYGBgYGBgYGBgYKCgoKCgoKCgoKBgYGBgYGBgYGBg" پایان
    برگشت موج
پایان

تابع بارگذار():
    دام.تنظیم ویژگی(دام.با شناسه("sound")، "src"، صدا())
پایان

تابع پخش‌کن():
    _ := دام.فراخوان(دام.با شناسه("sound")، "play")
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    صدا: شناسه = "sound" کنترل‌ها = درست پیش‌بارگذاری = "none"
        شروع بارگذاری = (): بگو("load start") پایان
        تعلیق = (): بگو("suspend") پایان
        بارگذاری ابرداده = (): بگو("loaded metadata") پایان
        بارگذاری داده = (): بگو("loaded data") پایان
        قابل پخش = (): بگو("can play") پایان
        قابل پخش کامل = (): بگو("can play through") پایان
        پخش = (): بگو("play") پایان
        در حال پخش = (): بگو("playing") پایان
        مکث = (): بگو("pause") پایان
        اتمام پخش = (): بگو("ended") پایان
    پایان
    جعبه: نمایش = فلکس شکاف = 8
        دکمه: کلیک = بارگذار محتوا = "بارگذاری صدا" پایان
        دکمه: کلیک = پخش‌کن محتوا = "پخش" پایان
        دکمه: کلیک = (): _ := دام.فراخوان(دام.با شناسه("sound")، "pause") پایان محتوا = "مکث" پایان
    پایان
    پاراگراف: شناسه = "log" فضای سفید = "pre-wrap" محتوا = "رویدادها اینجا می‌آیند." پایان
پایان

شروع بارگذاری: مرورگر شروع به آوردن پرونده می‌کند.
تعلیق: عمداً آوردن را متوقف کرده. با پیش‌بارگذاری = "none" تا اولین پخش صبر می‌کند، و بعداً وقتی بافرش پر شود هم می‌ایستد.
بارگذاری ابرداده: طول (و برای ویدیو اندازه) معلوم است. duration را همین‌جا بخوانید.
بارگذاری داده: نخستین لحظه قابل نمایش است.
قابل پخش: داده برای شروع کافی است. قابل پخش کامل: با سرعت فعلی برای رسیدن به آخر کافی است.
پخش: پخش خواسته شد. در حال پخش: واقعاً در جریان است. مکث و اتمام پخش داستان را می‌بندند.

یک نکته نام جداگانه می‌خواهد: پخش و در حال پخش یکی نیستند. پخش همان لحظه‌ی زدن دکمه رخ می‌دهد، حتی وقتی هنوز داده‌ای نرسیده. در حال پخش وقتی رخ می‌دهد که صدا یا تصویر حرکت می‌کند، و بعد از هر مکث برای بافر هم دوباره. دکمه‌ای که باید «مکث» نشان دهد باید در حال پخش و مکث را دنبال کند، نه کلیک را.

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

یک پخش‌کننده‌ی کوچک

کنترل‌های مرورگر خوب‌اند، ولی صفحه اغلب کنترل‌های خودش را می‌خواهد. نمونه یک دکمه، یک نوار پیشرفت و یک لغزنده‌ی صدا دارد و هر بخش به یک رویداد واکنش نشان می‌دهد، نه به کلیکی که آن را ساخته. پخش و مکث برچسب دکمه را عوض می‌کنند، پس حتی وقتی چیز دیگری صدا را مکث کند هم درست است. به‌روزرسانی زمان حدود چهار بار در ثانیه رخ می‌دهد و نوار را با نسبت currentTime / duration جلو می‌برد. تغییر صدا صدای تازه را کنار لغزنده می‌نویسد. خود لغزنده volume را از رویداد ورودیاش می‌گذارد.

وضعیت عنصر با دام.دریافت خاصیت عددی و دام.دریافت خاصیت منطقی خوانده می‌شود (currentTime، duration، paused) و با دام.تنظیم خاصیت عددی و دام.فراخوان عوض می‌شود که متدهایی مثل play و pause را صدا می‌زند.

web-mediaev-player.salam

واردسازی دام

تابع صدا(): رشته:
    ناپایا موج := "data:audio/wav;base64,UklGRu5dAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgASlVOSwIAAAAAAGRhdGHAXQAA"
    تکرار ۴۰۰: موج += "oKCgoKCgoKCgoGBgYGBgYGBgYGCgoKCgoKCgoKCgYGBgYGBgYGBgYKCgoKCgoKCgoKBgYGBgYGBgYGBg" پایان
    برگشت موج
پایان

تابع تعویض():
    پخش کننده := دام.با شناسه("sound")
    اگر دام.دریافت ویژگی(پخش کننده، "src") برابر "":
        دام.تنظیم ویژگی(پخش کننده، "src"، صدا())
    پایان
    اگر دام.دریافت خاصیت منطقی(پخش کننده، "paused"):
        _ := دام.فراخوان(پخش کننده، "play")
    وگرنه:
        _ := دام.فراخوان(پخش کننده، "pause")
    پایان
پایان

تابع پیشرفت():
    پخش کننده := دام.با شناسه("sound")
    اکنون := دام.دریافت خاصیت عددی(پخش کننده، "currentTime")
    دام.تنظیم سبک(دام.با شناسه("fill")، "width"، اکنون * ۱۰۰.۰ / دام.دریافت خاصیت عددی(پخش کننده، "duration") + "%")
    دام.تنظیم متن(دام.با شناسه("time")، دام.فراخوان یک(دام.سراسری("Math")، "floor"، اکنون) + " ثانیه از 3 ثانیه")
پایان

تابع بلندی():
    دام.تنظیم خاصیت عددی(دام.با شناسه("sound")، "volume"، دام.دریافت خاصیت عددی(دام.با شناسه("level")، "valueAsNumber") / ۱۰۰.۰)
پایان

تابع نمایش صدا():
    درصد := دام.فراخوان یک(دام.سراسری("Math")، "round"، دام.دریافت خاصیت عددی(دام.با شناسه("sound")، "volume") * ۱۰۰.۰)
    دام.تنظیم متن(دام.با شناسه("say")، "صدا " + درصد + " درصد")
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 بیشینه عرض = 360 پایان
    صدا: شناسه = "sound" پیش‌بارگذاری = "none" پخش = (): دام.تنظیم متن(دام.با شناسه("go")، "مکث") پایان
        مکث = (): دام.تنظیم متن(دام.با شناسه("go")، "پخش") پایان به‌روزرسانی زمان = پیشرفت تغییر صدا = نمایش صدا
    پایان
    جعبه: نمایش = فلکس شکاف = 12 ترازعمودی = وسط
        دکمه: شناسه = "go" کلیک = تعویض محتوا = "پخش" عرض = 70 پایان
        جعبه: فلکس = 1 ارتفاع = 8 پس زمینه = "#e2e8f0" گردی کادر = 4
            جعبه: شناسه = "fill" عرض = "0%" ارتفاع = 8 پس زمینه = "#7c3aed" گردی کادر = 4 پایان
        پایان
    پایان
    پاراگراف: شناسه = "time" محتوا = "0 ثانیه از 3 ثانیه" پایان
    جعبه: نمایش = فلکس شکاف = 12 ترازعمودی = وسط
        ورودی: شناسه = "level" نوع = بازه کمینه = 0 بیشینه = 100 مقدار = 100 ورودی = بلندی پایان
        تکه: شناسه = "say" محتوا = "صدا 100 درصد" پایان
    پایان
پایان

جابجایی، سرعت و طول

در حال جابجایی وقتی رخ می‌دهد که پرش به زمانی دیگر شروع می‌شود و جابجا شده وقتی تمام شده است. گذاشتن currentTime هر دو را می‌سازد، و کشیدن لغزنده‌ی کنترل‌های مرورگر هم. تغییر سرعت وقتی رخ می‌دهد که playbackRate عوض شود: ۱ عادی است و ۰٫۵ نیم سرعت. تغییر مدت وقتی رخ می‌دهد که طول معلوم یا عوض شود، و خالی شدن وقتی که عنصر بازنشانی شود، همان کاری که دکمه‌ی «از نو» با صدا زدن load() می‌کند.

web-mediaev-seek.salam

واردسازی دام

ناپایا خط ها := ""

تابع بگو(چه: رشته):
    خط ها = خط ها + چه + "\n"
    دام.تنظیم متن(دام.با شناسه("log")، خط ها)
پایان

تابع صدا(): رشته:
    ناپایا موج := "data:audio/wav;base64,UklGRu5dAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgASlVOSwIAAAAAAGRhdGHAXQAA"
    تکرار ۴۰۰: موج += "oKCgoKCgoKCgoGBgYGBgYGBgYGCgoKCgoKCgoKCgYGBgYGBgYGBgYKCgoKCgoKCgoKBgYGBgYGBgYGBg" پایان
    برگشت موج
پایان

تابع بارگذار():
    دام.تنظیم ویژگی(دام.با شناسه("sound")، "src"، صدا())
پایان

تابع بپر():
    دام.تنظیم خاصیت عددی(دام.با شناسه("sound")، "currentTime"، ۲.۰)
پایان

تابع سرعت(نرخ: اعشار۶۴):
    دام.تنظیم خاصیت عددی(دام.با شناسه("sound")، "playbackRate"، نرخ)
پایان

تابع بازنشانی():
    _ := دام.فراخوان(دام.با شناسه("sound")، "load")
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    صدا: شناسه = "sound" پیش‌بارگذاری = "auto"
        تغییر مدت = (): بگو("تغییر مدت: " + دام.دریافت خاصیت عددی(دام.با شناسه("sound")، "duration") + " ثانیه") پایان
        در حال جابجایی = (): بگو("جابجایی") پایان جابجا شده = (): بگو("جابجا شد") پایان
        تغییر سرعت = (): بگو("تغییر سرعت: " + دام.دریافت خاصیت عددی(دام.با شناسه("sound")، "playbackRate")) پایان
        خالی شدن = (): بگو("خالی شد") پایان
    پایان
    جعبه: نمایش = فلکس شکاف = 8 پیچش فلکس = "wrap"
        دکمه: کلیک = بارگذار محتوا = "بارگذاری" پایان
        دکمه: کلیک = بپر محتوا = "پرش به ثانیه‌ی 2" پایان
        دکمه: کلیک = (): سرعت(۰.۵) پایان محتوا = "نیم سرعت" پایان
        دکمه: کلیک = (): سرعت(۱.۰) پایان محتوا = "سرعت عادی" پایان
        دکمه: کلیک = بازنشانی محتوا = "از نو" پایان
    پایان
    پاراگراف: شناسه = "log" فضای سفید = "pre-wrap" محتوا = "اول بارگذاری را بزنید." پایان
پایان

زیرنویس و تغییر نشانه

عنصر شیار درون عنصر صدا یا ویدیو زیرنویس را با قالب WebVTT نگه می‌دارد، یک پرونده‌ی متنی ساده با بازه‌های زمانی. رویداد تغییر نشانهاش هر بار که زیرنویسی شروع یا تمام شود رخ می‌دهد. متن زیرنویس فعلی در track.activeCues است: نمونه فهرست را با دام.دریافت خاصیت می‌گیرد، lengthش را بررسی می‌کند و text نخستین نشانه را در یک سرتیتر نشان می‌دهد. شیار به پیش‌فرض = درست نیاز دارد (یا اسکریپتی که حالتش را بگذارد) وگرنه هیچ نشانه‌ای فعال نمی‌شود. زبان صفحه برای پرونده فقط نشانی‌های معمولی را می‌پذیرد، پس نمونه به شیار یک نام ساختگی می‌دهد و src واقعی، یک نشانی data:، را هنگام زدن پخش از کد می‌گذارد.

web-mediaev-cues.salam

واردسازی دام

پایا زیرنویس := "data:text/vtt,WEBVTT%0A%0A00:00.000 --> 00:01.000%0Aسلام%0A%0A00:01.000 --> 00:02.000%0Aبه همه%0A%0A00:02.000 --> 00:03.000%0Aخوش آمدید"

تابع صدا(): رشته:
    ناپایا موج := "data:audio/wav;base64,UklGRu5dAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgASlVOSwIAAAAAAGRhdGHAXQAA"
    تکرار ۴۰۰: موج += "oKCgoKCgoKCgoGBgYGBgYGBgYGCgoKCgoKCgoKCgYGBgYGBgYGBgYKCgoKCgoKCgoKBgYGBgYGBgYGBg" پایان
    برگشت موج
پایان

تابع نشان‌بده():
    نشانه ها := دام.دریافت خاصیت(دام.دریافت خاصیت(دام.با شناسه("words")، "track")، "activeCues")
    اگر دام.دریافت خاصیت عددی(نشانه ها، "length") بزرگتر ۰.۰:
        دام.تنظیم متن(دام.با شناسه("line")، دام.دریافت خاصیت رشته ای(دام.عنصر شماره(نشانه ها، ۰)، "text"))
    وگرنه:
        دام.تنظیم متن(دام.با شناسه("line")، "...")
    پایان
پایان

تابع شروع‌کن():
    پخش کننده := دام.با شناسه("sound")
    دام.تنظیم ویژگی(دام.با شناسه("words")، "src"، زیرنویس)
    دام.تنظیم ویژگی(پخش کننده، "src"، صدا())
    _ := دام.فراخوان(پخش کننده، "play")
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    صدا: شناسه = "sound" کنترل‌ها = درست
        شیار: شناسه = "words" نوع شیار = "captions" پیش‌فرض = درست تغییر نشانه = نشان‌بده نشانی = "captions.vtt"
        پایان
    پایان
    دکمه: کلیک = شروع‌کن محتوا = "پخش با زیرنویس" پایان
    سرتیتر: اندازه = 2 شناسه = "line" محتوا = "پخش را بزنید." پایان
پایان

رویدادهای پویانمایی

پویانمایی CSS عنصر را خودش حرکت می‌دهد و چهار رویداد می‌گویند در چه مرحله‌ای است. شروع پویانمایی وقتی شروع می‌شود، تکرار پویانمایی در پایان هر دور جز آخرین، اتمام پویانمایی پس از دور آخر، و لغو پویانمایی اگر قطع شود: مثلاً وقتی عنصر با display: none پنهان شود. پویانمایی اینجا در یک عنصر ظاهر سفارشی: با @keyframes تعریف شده و یک کلاس آن را روشن می‌کند، سه دور نیم‌ثانیه‌ای. پس گزارش یک اجرای بدون وقفه یک شروع، دو تکرار و یک پایان است، و اجرای لغوشده یک شروع و یک لغو.

رویدادگیر پایان کلاس را برمی‌دارد و دکمه می‌تواند دوباره آن را شروع کند. کار معمول اتمام پویانمایی همین است. پویانمایی‌ای که هرگز تمام نمی‌شود (infinite) هرگز آن را رخ نمی‌دهد.

web-mediaev-animation.salam

واردسازی دام

ناپایا خط ها := ""

تابع بگو(چه: رشته):
    خط ها = خط ها + چه + "\n"
    دام.تنظیم متن(دام.با شناسه("log")، خط ها)
پایان

تابع اجرا():
    خط ها = ""
    دام.افزودن کلاس(دام.با شناسه("ball")، "run")
پایان

تابع تمام‌شد():
    دام.حذف کلاس(دام.با شناسه("ball")، "run")
    بگو("پایان پویانمایی")
پایان

تابع بازگردان():
    دام.حذف کلاس(دام.با شناسه("ball")، "run")
    دام.تنظیم سبک(دام.با شناسه("ball")، "display"، "")
پایان

تابع لغو():
    دام.تنظیم سبک(دام.با شناسه("ball")، "display"، "none")
    دام.تنظیم مهلت((): بازگردان() پایان، ۳۰۰)
پایان

صفحه:
    ظاهر سفارشی: محتوا = "@keyframes slide { to { transform: translateX(-200px) } } .run { animation: slide 0.5s ease-in-out 3 }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: عرض = 260 فاصله = "10px 0"
        جعبه: شناسه = "ball" عرض = 40 ارتفاع = 40 گردی کادر = "50%" پس زمینه = "#e11d48"
            شروع پویانمایی = (): بگو("شروع پویانمایی") پایان
            تکرار پویانمایی = (): بگو("تکرار پویانمایی") پایان
            اتمام پویانمایی = تمام‌شد
            لغو پویانمایی = (): بگو("لغو پویانمایی") پایان
        پایان
    پایان
    جعبه: نمایش = فلکس شکاف = 8
        دکمه: کلیک = اجرا محتوا = "سه بار اجرا کن" پایان
        دکمه: کلیک = لغو محتوا = "لغوش کن" پایان
    پایان
    پاراگراف: شناسه = "log" فضای سفید = "pre-wrap" محتوا = "" پایان
پایان

رویدادهای گذار

گذار تغییر نرم یک ویژگی پس از گذاشته شدن آن است و چهار رویداد دارد. اجرای گذار وقتی رخ می‌دهد که گذار ساخته می‌شود، پیش از تأخیرش. شروع گذار وقتی که تأخیر تمام شده و مقدار شروع به حرکت می‌کند. اتمام گذار وقتی که به مقصد می‌رسد. لغو گذار وقتی که چیزی قطعش کند. هر چهار propertyName دارند، پس گذار دو ویژگی هر رویداد را دو بار رخ می‌دهد. نمونه به حرکت تأخیر ۰٫۳ ثانیه می‌دهد تا اجرا و شروع جدا دیده شوند، و دکمه‌ی دوم کلاس را دو بار پشت هم عوض می‌کند تا گذار را قطع کند.

یک دام هست که در کد شما نیست. در آزمایش ما کرومیوم، موتور کروم و اج، اتمام گذار را از ویژگی HTML خواند ولی اجرای گذار، شروع گذار و لغو گذار را نخواند؛ فایرفاکس هر چهار را می‌خواند. نوشتنشان به‌شکل ویژگی کامپایل می‌شود و در فایرفاکس کار می‌کند و در کروم بی‌صدا هیچ نمی‌کند. راه مطمئن دام.هنگام رویداد جزئی(عنصر، "transitionrun"، ...) است، که نمونه برای آن سه تا به کار می‌برد، و ویژگی ساده را برای اتمام گذار نشان می‌دهد.

web-mediaev-transition.salam

واردسازی دام

ناپایا خط ها := ""
ناپایا وصل شده := نادرست

تابع ثبت(نوع: رشته، رویداد: صحیح۶۴):
    خط ها = خط ها + نوع + ": " + دام.دریافت خاصیت رشته ای(رویداد، "propertyName") + "\n"
    دام.تنظیم متن(دام.با شناسه("log")، خط ها)
پایان

تابع تمام‌شد(رویداد: صحیح۶۴):
    ثبت("پایان"، رویداد)
پایان

تابع اتصال():
    اگر وارونه وصل شده:
        وصل شده = درست
        مهره := دام.با شناسه("chip")
        دام.هنگام رویداد جزئی(مهره، "transitionrun"، (رویداد: صحیح۶۴): ثبت("اجرا"، رویداد) پایان)
        دام.هنگام رویداد جزئی(مهره، "transitionstart"، (رویداد: صحیح۶۴): ثبت("شروع"، رویداد) پایان)
        دام.هنگام رویداد جزئی(مهره، "transitioncancel"، (رویداد: صحیح۶۴): ثبت("لغو"، رویداد) پایان)
    پایان
پایان

تابع جابجایی():
    اتصال()
    خط ها = ""
    دام.تعویض کلاس(دام.با شناسه("chip")، "moved")
پایان

تابع رفت‌وبرگشت():
    جابجایی()
    دام.تنظیم مهلت((): دام.تعویض کلاس(دام.با شناسه("chip")، "moved") پایان، ۱۵۰)
پایان

صفحه:
    ظاهر سفارشی: محتوا = ".moved { transform: translateX(-180px) }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: عرض = 240 فاصله = "10px 0"
        جعبه: شناسه = "chip" عرض = 50 ارتفاع = 40 گردی کادر = 8 پس زمینه = "#2563eb"
            گذار = "transform 0.4s 0.3s" اتمام گذار = تمام‌شد
        پایان
    پایان
    جعبه: نمایش = فلکس شکاف = 8
        دکمه: کلیک = جابجایی محتوا = "حرکت بده" پایان
        دکمه: کلیک = رفت‌وبرگشت محتوا = "حرکت بده و پس بگیر" پایان
    پایان
    پاراگراف: شناسه = "log" فضای سفید = "pre-wrap" محتوا = "" پایان
پایان

شکاف‌ها و تغییر شکاف

عنصر قالب با حالت ریشه سایه = "open" والدش را به میزبان سایه تبدیل می‌کند: محتوای قالب درخت کوچک جداگانه‌ای می‌شود و فرزندهای اصلی میزبان هر جا جایگاه باشد نشان داده می‌شوند. تغییر شکاف وقتی روی شکاف رخ می‌دهد که گره‌های پرکننده‌اش عوض شوند، پس راهی است که یک کامپوننت بفهمد کسی فرزندی افزوده. assignedNodes() که با دام.فراخوان صدا زده می‌شود آن‌ها را فهرست می‌کند. سبک‌های صفحه به درون درخت سایه نمی‌رسند، برای همین نمونه رنگ‌ها را روی میزبان می‌گذارد.

web-mediaev-slot.salam

واردسازی دام

ناپایا اعضا := ۰ برگردان صحیح۶۴

تابع تغییر‌کرد(رویداد: صحیح۶۴):
    گره ها := دام.فراخوان(دام.هدف رویداد(رویداد)، "assignedNodes")
    دام.تنظیم متن(دام.با شناسه("log")، "تغییر شکاف: " + دام.دریافت خاصیت عددی(گره ها، "length") + " مورد در شکاف")
پایان

تابع بپیوند():
    اعضا += ۱
    فرد := دام.بساز("p")
    دام.تنظیم متن(فرد، "عضو " + اعضا)
    دام.افزودن(دام.با شناسه("team")، فرد)
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: شناسه = "team" فاصله = "4px 16px" پس زمینه = "#f5f3ff" کادر = "2px solid #7c3aed" گردی کادر = 8
        قالب: حالت ریشه سایه = "open"
            سرتیتر: اندازه = 3 محتوا = "تیم" پایان
            جایگاه: تغییر شکاف = تغییر‌کرد پایان
        پایان
    پایان
    دکمه: کلیک = بپیوند محتوا = "افزودن یک عضو" فضا بالا = 12 پایان
    پاراگراف: شناسه = "log" محتوا = "هنوز چیزی در شکاف نیست." پایان
پایان

نقض سیاست امنیتی

سیاست امنیت محتوا فهرستی از کارهاست که صفحه قول می‌دهد نکند، و با عنصر متا و معادل اچ‌تی‌تی‌پی = "Content-Security-Policy" یا با یک سرایند گذاشته می‌شود. وقتی صفحه قول خودش را می‌شکند مرورگر کار را مسدود می‌کند و نقض سیاست امنیتی را رخ می‌دهد، با نشانی مسدودشده در blockedURI و قاعده در violatedDirective. نمونه ویژگی‌های style را ممنوع می‌کند. گذاشتن یکی با دام.تنظیم ویژگی(عنصر، "style"، ...) مسدود می‌شود و روی خود عنصر گزارش می‌شود، در حالی که دام.تنظیم سبک کار می‌کند چون شیء سبک را عوض می‌کند، نه ویژگی را. بعضی نقض‌ها، مثل تصویر مسدودشده، روی سند گزارش می‌شوند، نه روی عنصر.

web-mediaev-policy.salam

واردسازی دام

تابع ممنوع(رویداد: صحیح۶۴):
    چه چیزی := دام.دریافت خاصیت رشته ای(رویداد، "blockedURI")
    قاعده := دام.دریافت خاصیت رشته ای(رویداد، "violatedDirective")
    دام.تنظیم متن(دام.با شناسه("log")، "مسدود شد: " + چه چیزی + " (" + قاعده + ")")
پایان

تابع نوشتن‌ویژگی():
    دام.تنظیم ویژگی(دام.با شناسه("card")، "style"، "background: gold")
پایان

تابع سبک‌دهی():
    دام.تنظیم سبک(دام.با شناسه("card")، "background"، "lightgreen")
    دام.تنظیم متن(دام.با شناسه("log")، "تنظیم سبک کار کرد.")
پایان

صفحه:
    متا: معادل اچ‌تی‌تی‌پی = "Content-Security-Policy" محتوا = "style-src-attr 'none'" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: شناسه = "card" نقض سیاست امنیتی = ممنوع فاصله = 20 گردی کادر = 8 پس زمینه = "#e2e8f0"
        محتوا = "سیاست این صفحه ویژگی style را برای این کارت ممنوع کرده است."
    پایان
    جعبه: نمایش = فلکس شکاف = 8 فضا بالا = 12
        دکمه: کلیک = نوشتن‌ویژگی محتوا = "ویژگی style را بنویس" پایان
        دکمه: کلیک = سبک‌دهی محتوا = "از تنظیم سبک استفاده کن" پایان
    پایان
    پاراگراف: شناسه = "log" محتوا = "هنوز نقضی رخ نداده." پایان
پایان

رویدادهایی که اینجا نمی‌شود ساخت

چند رویداد شبکه‌ای می‌خواهند که خراب شود یا سامانه‌ی گرافیکی که از کار بیفتد، پس هیچ نمونه‌ای نمی‌تواند نشانشان دهد. این است که مرورگر کی آن‌ها را رخ می‌دهد.

متوقف شده: داده‌ی بیشتری می‌خواهد و چند ثانیه است چیزی نیامده، مثلاً در اتصال کند موبایل. ممکن است خودش درست شود.
در انتظار: پخش ایستاد چون بافر خالی شد. با رسیدن داده در حال پخش می‌آید. میانشان یک چرخان نشان بدهید.
پیشرفت: مرورگر قطعه‌ی دیگری از یک پرونده‌ی راه دور را آورده. یک نشانی کوتاه data: آن را نمی‌سازد.
از دست رفتن زمینه و بازیابی زمینه: بوم دوبعدی وقتی حافظه‌اش را از دست می‌دهد که درایور گرافیک بازنشانی شود یا سامانه کارت گرافیک را عوض کند، و وقتی برگردد نقاشی خالی پس می‌گیرد. همه‌چیز باید در بازیابی زمینه دوباره کشیده شود. صفحه نمی‌تواند آن را بسازد.

مرجع: همه‌ی رویدادهای این درس

همه‌ی این‌ها ویژگی همگانی‌اند، ولی هر کدام فقط روی عنصرهایی رخ می‌دهد که در توضیحش آمده. نمونه‌ها را مترجم کامپایل کرده است؛ هر جا نمونه پرونده‌ی رسانه می‌خواهد نشانی‌ای را به کار برده که وجود ندارد، پس رویداد توضیح داده می‌شود و اجرا نمی‌شود. سه رویداد این درس (اتمام پخش، اتمام پویانمایی و اتمام گذار) نامی فارسی دارند که با اتمام شروع می‌شود، نه پایان، چون پایان به‌تنهایی عنصر را می‌بندد.

بارگذاری

ویژگی	چه وقت رخ می‌دهد	نمونه
`شروع بارگذاری` load start onloadstart	وقتی مرورگر شروع به بارگذاری پرونده‌ی عنصر صدا یا ویدیو می‌کند، درست پس از گذاشتن `src` یا صدا زدن `load()`، رخ می‌دهد. نخستین رویداد در زندگی یک پرونده‌ی رسانه است.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" شروع بارگذاری = (): دام.تنظیم متن(دام.با شناسه("out")، "بارگذاری شروع شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`پیشرفت` progress onprogress	تا وقتی مرورگر پرونده را دانلود می‌کند هر از چندی رخ می‌دهد. `buffered` را بخوانید تا ببینید کدام بازه‌های زمانی همین حالا آماده‌اند. با `به‌روزرسانی زمان` که درباره‌ی پخش است اشتباه نگیرید.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" پیشرفت = (): دام.تنظیم متن(دام.با شناسه("out")، "داده‌ی بیشتری رسید") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تعلیق` suspend onsuspend	وقتی مرورگر عمداً و بدون خطا دانلود را متوقف می‌کند رخ می‌دهد: بافر پر شده یا `پیش‌بارگذاری = هیچ` می‌گوید صبر کند تا کاربر بخواهد. مشکلی نیست؛ دانلود هر وقت لازم شد دوباره شروع می‌شود.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" تعلیق = (): دام.تنظیم متن(دام.با شناسه("out")، "دانلود متوقف شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`متوقف شده` stalled onstalled	وقتی مرورگر داده‌ی بیشتری می‌خواهد ولی چند ثانیه است چیزی نرسیده رخ می‌دهد، مثلاً وقتی اتصال بد است. ممکن است خودش درست شود. بدون شبکه‌ی کند نمی‌توان آن را ساخت، برای همین صفحه معمولاً وقتی رخ می‌دهد فقط یک راهنما نشان می‌دهد.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" متوقف شده = (): دام.تنظیم متن(دام.با شناسه("out")، "داده نمی‌رسد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بارگذاری ابرداده` loaded metadata onloadedmetadata	وقتی مرورگر مدت و، برای ویدیو، اندازه را می‌داند رخ می‌دهد، ولی ممکن است هنوز هیچ صدا یا تصویری نرسیده باشد. `duration` را همین‌جا بخوانید، مثلاً برای اندازه‌ی نوار پیشرفت.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" بارگذاری ابرداده = (): دام.تنظیم متن(دام.با شناسه("out")، "مدت معلوم شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر مدت` duration change ondurationchange	وقتی `duration` عوض می‌شود رخ می‌دهد: هنگام رسیدن ابرداده (از «عدد نیست» به طولی واقعی)، هنگام عوض شدن منبع، و برای جریان‌هایی که طولشان زیاد می‌شود.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" تغییر مدت = (): دام.تنظیم متن(دام.با شناسه("out")، "طول عوض شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بارگذاری داده` loaded data onloadeddata	وقتی نخستین لحظه‌ی رسانه قابل نمایش شد رخ می‌دهد، یعنی نخستین فریم ویدیو یا نخستین صدا. بعد از `بارگذاری ابرداده` می‌آید.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" بارگذاری داده = (): دام.تنظیم متن(دام.با شناسه("out")، "نخستین داده رسید") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`قابل پخش` can play oncanplay	وقتی داده‌ی کافی برای شروع پخش از جای فعلی رسیده رخ می‌دهد، هرچند ممکن است هنگام پخش باز هم داده‌ای بیاید. لحظه‌ی مناسبی برای فعال کردن دکمه‌ی پخش است.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" قابل پخش = (): دام.تنظیم متن(دام.با شناسه("out")، "آماده‌ی پخش") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`قابل پخش کامل` can play through oncanplaythrough	وقتی مرورگر تخمین می‌زند که با سرعت دانلود فعلی می‌تواند تا آخر پخش کند بدون اینکه برای بافر بایستد رخ می‌دهد. برای یک پرونده‌ی کوتاه محلی بلافاصله بعد از `قابل پخش` می‌آید.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" قابل پخش کامل = (): دام.تنظیم متن(دام.با شناسه("out")، "تا آخر قابل پخش") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`خالی شدن` emptied onemptied	وقتی رسانه به آغاز بازنشانی می‌شود رخ می‌دهد، چون `load()` صدا زده شده یا بعد از بار شدن چیزی منبع عوض شده. مدت و جای قبلی از میان رفته است.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" خالی شدن = (): دام.تنظیم متن(دام.با شناسه("out")، "رسانه بازنشانی شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

پخش

ویژگی	چه وقت رخ می‌دهد	نمونه
`پخش` play onplay	وقتی پخش خواسته می‌شود رخ می‌دهد: کاربر پخش را زده یا کد `play()` را صدا زده. شاید هنوز داده نرسیده باشد و صدا کمی دیرتر شروع شود؛ `در حال پخش` می‌گوید کی واقعاً شروع شد.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" پخش = (): دام.تنظیم متن(دام.با شناسه("out")، "پخش خواسته شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`در حال پخش` playing onplaying	وقتی پخش واقعاً در جریان است رخ می‌دهد، بعد از `پخش` و نیز بعد از تمام شدن مکثی که برای بافر بود (`در انتظار`). برای دکمه‌ای که «مکث» نشان می‌دهد این را به کار ببرید، نه `پخش` را.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" در حال پخش = (): دام.تنظیم متن(دام.با شناسه("out")، "پخش می‌شود") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`مکث` pause onpause	وقتی پخش مکث می‌کند رخ می‌دهد، با کاربر، با `pause()` یا با خود مرورگر درست پیش از `اتمام پخش`. عنصری که مکث کرده جایش را نگه می‌دارد.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" مکث = (): دام.تنظیم متن(دام.با شناسه("out")، "مکث شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام پخش` ended onended	وقتی پخش به آخر می‌رسد و عنصر `loop` نیست رخ می‌دهد. درست پیش از آن رویداد `مکث` می‌آید. برای نشان دادن دکمه‌ی «پخش دوباره» یا شروع قطعه‌ی بعدی به کار می‌رود.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" اتمام پخش = (): دام.تنظیم متن(دام.با شناسه("out")، "پخش تمام شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`به‌روزرسانی زمان` time update ontimeupdate	وقتی `currentTime` عوض می‌شود رخ می‌دهد، هنگام پخش حدود چهار بار در ثانیه و پس از هر پرش. رویدادی است که نوار پیشرفت را جلو می‌برد.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" به‌روزرسانی زمان = (): دام.تنظیم متن(دام.با شناسه("out")، "زمان جلو رفت") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`در حال جابجایی` seeking onseeking	وقتی پرش به زمانی دیگر شروع می‌شود رخ می‌دهد، چون کاربر لغزنده را کشیده یا کد `currentTime` را گذاشته. شاید هنوز تصویر نرسیده باشد.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" در حال جابجایی = (): دام.تنظیم متن(دام.با شناسه("out")، "در حال جابجایی") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`جابجا شده` seeked onseeked	وقتی پرش تمام شده و رسانه از زمان تازه می‌تواند پخش شود رخ می‌دهد. جفت `در حال جابجایی` است.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" جابجا شده = (): دام.تنظیم متن(دام.با شناسه("out")، "جابجایی تمام شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`در انتظار` waiting onwaiting	وقتی پخش می‌ایستد چون داده‌ی بعدی نرسیده و با رسیدنش خودش ادامه می‌دهد رخ می‌دهد؛ بعدش `در حال پخش` می‌آید. میان این دو یک چرخان نشان بدهید.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" در انتظار = (): دام.تنظیم متن(دام.با شناسه("out")، "منتظر داده") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر صدا` volume change onvolumechange	وقتی `volume` یا `muted` عوض می‌شود رخ می‌دهد. مقدار از ۰ (بی‌صدا) تا ۱ (کامل) است؛ برای به‌روز کردن لغزنده یا نماد بخوانیدش.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" تغییر صدا = (): دام.تنظیم متن(دام.با شناسه("out")، "صدا عوض شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر سرعت` rate change onratechange	وقتی `playbackRate` یا `defaultPlaybackRate` عوض می‌شود رخ می‌دهد. ۱ سرعت عادی است، ۰٫۵ نیم سرعت و ۲ دو برابر.	`صدا: کنترل‌ها = درست نشانی = "/sounds/bell.mp3" تغییر سرعت = (): دام.تنظیم متن(دام.با شناسه("out")، "سرعت عوض شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر نشانه` cue change oncuechange	روی عنصر `track` وقتی مجموعه‌ی نشانه‌های فعال عوض می‌شود رخ می‌دهد: زیرنویسی شروع یا تمام می‌شود. متن را از `track.activeCues` بخوانید. شیار باید نمایان یا نهان باشد، که `پیش‌فرض = درست` روی شیار زیرنویس همین را می‌کند.	`صدا: کنترل‌ها = درست نشانی = "/sounds/talk.mp3" شیار: نوع شیار = "captions" نشانی = "/captions/talk.vtt" پیش‌فرض = درست تغییر نشانه = (): دام.تنظیم متن(دام.با شناسه("out")، "زیرنویس عوض شد") پایان پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

پویانمایی و گذار

ویژگی	چه وقت رخ می‌دهد	نمونه
`شروع پویانمایی` animation start onanimationstart	وقتی یک پویانمایی CSS شروع می‌شود، بعد از `animation-delay` اگر باشد، روی عنصر رخ می‌دهد. `event.animationName` می‌گوید کدام پویانمایی است. اگر مدت پویانمایی صفر باشد رخ نمی‌دهد.	`جعبه: پویانمایی = "spin 2s linear 3" شروع پویانمایی = (): دام.تنظیم متن(دام.با شناسه("out")، "پویانمایی شروع شد") پایان محتوا = "بچرخ" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تکرار پویانمایی` animation iteration onanimationiteration	در پایان هر دور از پویانمایی‌ای که تکرار می‌شود رخ می‌دهد، جز دور آخر (که `animation end` را رخ می‌دهد). پویانمایی‌ای که سه بار اجرا شود دو بار آن را رخ می‌دهد.	`جعبه: پویانمایی = "spin 2s linear 3" تکرار پویانمایی = (): دام.تنظیم متن(دام.با شناسه("out")، "یک دور دیگر") پایان محتوا = "بچرخ" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام پویانمایی` animation end onanimationend	وقتی یک پویانمایی CSS همه‌ی دورهایش را تمام کرد رخ می‌دهد. پویانمایی‌ای که تا ابد تکرار شود (`infinite`) هرگز آن را رخ نمی‌دهد. برای برداشتن کلاسی که پویانمایی را شروع کرده بود به کار می‌رود.	`جعبه: پویانمایی = "fade 1s" اتمام پویانمایی = (): دام.تنظیم متن(دام.با شناسه("out")، "پویانمایی تمام شد") پایان محتوا = "محو" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`لغو پویانمایی` animation cancel onanimationcancel	وقتی پویانمایی‌ای که در جریان است نیمه‌کاره قطع می‌شود رخ می‌دهد: عنصرش با `display: none` پنهان شده، از صفحه برداشته شده یا ویژگی `animation` برداشته شده. بعد از آن `animation end` نمی‌آید.	`جعبه: پویانمایی = "spin 2s linear infinite" لغو پویانمایی = (): دام.تنظیم متن(دام.با شناسه("out")، "پویانمایی لغو شد") پایان محتوا = "بچرخ" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اجرای گذار` transition run ontransitionrun	وقتی یک گذار CSS ساخته می‌شود، پیش از تأخیرش، رخ می‌دهد. `event.propertyName` می‌گوید کدام ویژگی حرکت می‌کند. در آزمایش ما کرومیوم (موتور کروم و اج) این یکی را به‌عنوان ویژگی HTML نخواند، ولی فایرفاکس خواند؛ برای اطمینان آن را با `دام.هنگام رویداد جزئی(عنصر، "transitionrun", ...)` وصل کنید.	`جعبه: گذار = "transform 0.4s 0.3s" اشاره دگرگونی = "scale(1.2)" اجرای گذار = (): دام.تنظیم متن(دام.با شناسه("out")، "گذار ساخته شد") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`شروع گذار` transition start ontransitionstart	وقتی گذار واقعاً شروع به حرکت می‌کند، بعد از پایان تأخیرش، رخ می‌دهد. بدون تأخیر درست بعد از `اجرای گذار` می‌آید. در آزمایش ما کرومیوم (موتور کروم و اج) آن را به‌عنوان ویژگی HTML نخواند، ولی فایرفاکس خواند؛ با `دام.هنگام رویداد جزئی(عنصر، "transitionstart", ...)` وصلش کنید.	`جعبه: گذار = "transform 0.4s 0.3s" اشاره دگرگونی = "scale(1.2)" شروع گذار = (): دام.تنظیم متن(دام.با شناسه("out")، "حرکت شروع شد") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام گذار` transition end ontransitionend	وقتی گذار حرکتش را تمام کرد رخ می‌دهد، یک بار برای هر ویژگی که عوض شده. `event.propertyName` آن‌ها را از هم جدا می‌کند. اگر گذار نیمه‌کاره قطع شود رخ نمی‌دهد (آن `لغو گذار` است). مرورگرها این را همه‌جا به‌عنوان ویژگی می‌خوانند.	`جعبه: گذار = "transform 0.4s" اشاره دگرگونی = "scale(1.2)" اتمام گذار = (): دام.تنظیم متن(دام.با شناسه("out")، "گذار تمام شد") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`لغو گذار` transition cancel ontransitioncancel	وقتی گذار پیش از تمام شدن قطع می‌شود رخ می‌دهد، مثلاً ماوس وسط گذار اشاره بیرون می‌رود و مقدار برمی‌گردد، یا عنصر پنهان می‌شود. در آزمایش ما کرومیوم (موتور کروم و اج) آن را به‌عنوان ویژگی HTML نخواند، ولی فایرفاکس خواند؛ با `دام.هنگام رویداد جزئی(عنصر، "transitioncancel", ...)` وصلش کنید.	`جعبه: گذار = "transform 0.4s 0.3s" اشاره دگرگونی = "scale(1.2)" لغو گذار = (): دام.تنظیم متن(دام.با شناسه("out")، "گذار قطع شد") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 20 پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

شکاف، بوم و امنیت

ویژگی	چه وقت رخ می‌دهد	نمونه
`از دست رفتن زمینه` context lost oncontextlost	روی `canvas` وقتی مرورگر حافظه‌ی پشت زمینه‌ی ترسیم دوبعدی آن را از دست می‌دهد رخ می‌دهد، مثلاً بعد از بازنشانی درایور گرافیک یا عوض شدن کارت گرافیک. هر چه کشیده شده بود از بین رفته است. از صفحه نمی‌شود آن را ساخت؛ مرورگرها فقط وقتی رخ می‌دهند که سامانه‌ی گرافیک واقعاً از کار بیفتد. (بوم WebGL رویداد خودش، `webglcontextlost`، را دارد.)	`بوم: شناسه = "pad" عرض = 200 ارتفاع = 100 از دست رفتن زمینه = (): دام.تنظیم متن(دام.با شناسه("out")، "نقاشی از دست رفت") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بازیابی زمینه` context restored oncontextrestored	روی `canvas` وقتی زمینه‌ای که از دست رفته بود دوباره قابل استفاده شد، با نقاشی خالی، رخ می‌دهد. همه‌چیز را همین‌جا دوباره بکشید. مثل `از دست رفتن زمینه` فقط وقتی پیش می‌آید که سامانه‌ی گرافیک از یک خرابی برگردد.	`بوم: شناسه = "pad" عرض = 200 ارتفاع = 100 بازیابی زمینه = (): دام.تنظیم متن(دام.با شناسه("out")، "دوباره بکشید") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`نقض سیاست امنیتی` security policy violation onsecuritypolicyviolation	وقتی صفحه سیاست امنیت محتوای خودش را می‌شکند رخ می‌دهد، یعنی قاعده‌هایی که یک عنصر `meta` یا یک سرایند گذاشته، مثلاً با نوشتن ویژگی `style` وقتی `style-src-attr` آن را ممنوع کرده. رویداد `blockedURI` و `violatedDirective` را دارد. از عنصر به سند بالا می‌رود، ولی پرونده‌ی مسدودشده، مثل تصویر، فقط روی سند گزارش می‌شود.	`جعبه: نقض سیاست امنیتی = (): دام.تنظیم متن(دام.با شناسه("out")، "سیاست چیزی را مسدود کرد") پایان محتوا = "زیر نظر یک سیاست" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر شکاف` slot change onslotchange	روی عنصر `slot` درون یک درخت سایه وقتی گره‌هایی که شکاف را پر می‌کنند عوض شوند رخ می‌دهد: یکی افزوده، برداشته یا جابجا شده. `assignedNodes()` فهرست فعلی را می‌دهد. درخت سایه از یک `template` با `حالت ریشه سایه` می‌آید.	`جعبه: شناسه = "team" قالب: حالت ریشه سایه = "open" جایگاه: تغییر شکاف = (): دام.تنظیم متن(دام.با شناسه("out")، "محتوای شکاف عوض شد") پایان پایان پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

خودتان امتحان کنید

به پخش‌کننده دکمه‌ای بیفزایید که با گذاشتن currentTime یک ثانیه جلو می‌برد، و در گزارش نشان دهید که در حال جابجایی و جابجا شده رخ می‌دهند.
دکمه‌ای بسازید که سرعت را ۲ می‌کند، و برچسبی که تغییر سرعت را دنبال می‌کند.
نمونه‌ی گذار را با گذار فقط یک ویژگی اجرا کنید و گزارش را با نسخه‌ی دو ویژگی مقایسه کنید.
به نمونه‌ی شکاف یک شکاف دوم با نام بیفزایید و با ویژگی جایگاه عضو به آن اضافه کنید.