دام dom
کار با صفحهی وب در مرورگر: عنصرها، رویدادها، زمانسنجها و اشیای جاوااسکریپت.
واردسازی دام
برنامهای که این بسته را به کار میبرد در مرورگر اجرا میشود. آن را با salam js app.salam --output=app.js به جاوااسکریپت ترجمه کنید و با یک تگ <script src="app.js"> در صفحه بگذارید؛ ریشه وقتی صفحه آماده شد اجرا میشود و سرچاپ در کنسول مرورگر مینویسد. نمونههای این صفحه برای همین اجرا نمیشوند و فقط درستیشان بررسی شده است.
عنصرها و اشیای جاوااسکریپت با یک عدد صحیح۶۴ نگه داشته میشوند. رویدادها و زمانسنجها یک روال بینام میگیرند، مثل (): ... پایان؛ روالی را که بعداً میخواهید با توقف رویداد بردارید در یک متغیر نگه دارید.
روالها
پرسمان Query
روال پرسمان(sel: رشته): صحیح۶۴واردسازی دام
روال ریشه:
فهرست := دام.بساز("ul")
دام.تنظیم ویژگی(فهرست، "id"، "books")
دام.افزودن(دام.بدنه()، فهرست)
تکرار ۳ در ش:
م := دام.بساز("li")
دام.تنظیم متن(م، "کتاب " + (ش + ۱))
دام.افزودن کلاس(م، "book")
دام.افزودن(فهرست، م)
پایان
سرچاپ دام.وجود دارد("books")، دام.وجود دارد("nothing")
همه := دام.پرسمان همه("li.book")
سرچاپ دام.تعداد(همه)
دوم := دام.عنصر شماره(همه، ۱)
سرچاپ دام.دریافت متن(دوم)
دام.تعویض کلاس(دوم، "selected")
سرچاپ دام.دریافت ویژگی(دوم، "class")
دام.حذف کلاس(دوم، "book")
سرچاپ دام.دریافت ویژگی(دوم، "class")
دام.تنظیم سبک(دوم، "color"، "red")
سرچاپ دام.دریافت سبک(دوم، "color")
اول := دام.پرسمان("li")
دام.برداشتن(اول)
سرچاپ دام.تعداد(دام.پرسمان همه("li"))
ج := دام.با شناسه("books")
دام.تنظیم اچ تی ام ال(ج، "<li>تازه</li>")
پایانپرسمان همه QueryAll
روال پرسمان همه(sel: رشته): صحیح۶۴تعداد و عنصر شماره بخوانیدش.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
با شناسه ById
روال با شناسه(id: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
وجود دارد Exists
روال وجود دارد(id: رشته): منطقینمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
بساز Create
روال بساز(tag: رشته): صحیح۶۴افزودن کنید.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
بدنه Body
روال بدنه(): صحیح۶۴body صفحه.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
سند Document
روال سند(): صحیح۶۴document.واردسازی دام
روال ریشه:
س := دام.سند()
سرچاپ دام.دریافت خاصیت رشته ای(س، "title")
دام.تنظیم خاصیت رشته ای(س، "title"، "صفحهی من")
سرچاپ دام.دریافت خاصیت رشته ای(س، "title")
پ := دام.پنجره()
سرچاپ دام.دریافت خاصیت عددی(پ، "innerWidth") == دام.عرض پنجره()
سرچاپ دام.عرض سند() > ۰، دام.ارتفاع سند() > ۰
جعبه := دام.بساز("input")
دام.تنظیم خاصیت منطقی(جعبه، "disabled"، درست)
سرچاپ دام.دریافت خاصیت منطقی(جعبه، "disabled")
دام.تنظیم خاصیت عددی(جعبه، "tabIndex"، ۳)
سرچاپ دام.دریافت خاصیت عددی(جعبه، "tabIndex")
دام.تنظیم خاصیت(جعبه، "parentRef"، دام.بدنه())
سرچاپ دام.دریافت خاصیت(جعبه، "parentRef") == دام.بدنه()
ریاضی := دام.سراسری("Math")
سرچاپ دام.فراخوان یک(ریاضی، "abs"، -۵)، دام.فراخوان دو(ریاضی، "max"، ۲، ۹)
سرچاپ دام.فراخوان سه(ریاضی، "max"، ۱، ۲، ۳)، دام.فراخوان چهار(ریاضی، "min"، ۴، ۳، ۲، ۱)
_ := دام.فراخوان(جعبه، "focus")
_ := دام.فراخوان رشته یک(جعبه، "removeAttribute"، "placeholder")
_ := دام.فراخوان رشته دو(جعبه، "setAttribute"، "name"، "q")
سرچاپ دام.دریافت ویژگی(جعبه، "name")
بوم := دام.بساز("canvas")
ز := دام.دریافت زمینه(بوم، "2d")
سرچاپ ز != ۰
دام.تنظیم عدد ذخیره("best"، ۴۲)
دام.تنظیم متن ذخیره("name"، "مریم")
سرچاپ دام.دریافت عدد ذخیره("best")، دام.دریافت متن ذخیره("name")
ت := دام.تصادفی()
سرچاپ ت >= ۰.۰ و ت < ۱.۰، دام.تصادفی صحیح(۶) < ۶
سرچاپ دام.اکنون() >= ۰.۰
دکمه := دام.بساز("button")
سلام کن := ():
سرچاپ "سلام"
پایان
دام.هنگام رویداد(دکمه، "click"، سلام کن)
دام.توقف رویداد(دکمه، "click"، سلام کن)
عکس := دام.بارگذاری تصویر("logo.png")
سرچاپ دام.تصویر آماده(عکس)
دام.صدا(۴۴۰، ۲۰۰)
اگر دام.تایید("ادامه بدهیم؟"):
نام := دام.درخواست ورودی("نامت چیست؟")
دام.هشدار("سلام " + نام)
پایان
پایانپنجره Window
روال پنجره(): صحیح۶۴window.واردسازی دام
ناپایا شمار := ۰
روال ریشه:
دکمه := دام.بساز("button")
دام.تنظیم متن(دکمه، "بزن")
دام.تنظیم ویژگی(دکمه، "data-autofire"، "click")
دام.افزودن(دام.بدنه()، دکمه)
دام.هنگام رویداد(دکمه، "click"، ():
شمار += ۱
سرچاپ "کلیک"، شمار
پایان)
جعبه := دام.بساز("input")
دام.تنظیم ویژگی(جعبه، "data-autofire"، "keydown")
دام.افزودن(دام.بدنه()، جعبه)
دام.تنظیم مقدار(جعبه، "سلام")
سرچاپ دام.دریافت مقدار(جعبه)
دام.هنگام رویداد جزئی(جعبه، "keydown"، (ر: صحیح۶۴):
اگر دام.کلید رویداد(ر) == "Enter":
دام.جلوگیری پیش فرض(ر)
پایان
دام.توقف انتشار(ر)
سرچاپ "هدف:"، دام.دریافت مقدار(دام.هدف رویداد(ر))
پایان)
دام.رویداد جزئی پنجره("mousemove"، (ر: صحیح۶۴):
سرچاپ دام.رویداد افقی(ر)، دام.رویداد عمودی(ر)
پایان)
دام.رویداد جزئی پنجره("touchstart"، (ر: صحیح۶۴):
سرچاپ دام.لمس افقی(ر)، دام.لمس عمودی(ر)
پایان)
دام.رویداد پنجره("scroll"، ():
سرچاپ دام.پیمایش افقی()، دام.پیمایش عمودی()
پایان)
دام.هنگام آماده(():
سرچاپ "صفحه آماده است"
پایان)
دام.هنگام تغییر اندازه(():
سرچاپ دام.عرض پنجره()، دام.ارتفاع پنجره()
پایان)
پایانسراسری Global
روال سراسری(name: رشته): صحیح۶۴Math.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
افزودن Append
روال افزودن(parent: صحیح۶۴، child: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
برداشتن Remove
روال برداشتن(el: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
تنظیم متن SetText
روال تنظیم متن(el: صحیح۶۴، text: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
دریافت متن GetText
روال دریافت متن(el: صحیح۶۴): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
تنظیم اچ تی ام ال SetHtml
روال تنظیم اچ تی ام ال(el: صحیح۶۴، html: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
تنظیم مقدار SetValue
روال تنظیم مقدار(el: صحیح۶۴، value: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
دریافت مقدار GetValue
روال دریافت مقدار(el: صحیح۶۴): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
تنظیم سبک SetStyle
روال تنظیم سبک(el: صحیح۶۴، prop: رشته، value: رشته)color.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
دریافت سبک GetStyle
روال دریافت سبک(el: صحیح۶۴، prop: رشته): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
تنظیم ویژگی SetAttr
روال تنظیم ویژگی(el: صحیح۶۴، name: رشته، value: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
دریافت ویژگی GetAttr
روال دریافت ویژگی(el: صحیح۶۴، name: رشته): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
افزودن کلاس AddClass
روال افزودن کلاس(el: صحیح۶۴، name: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
حذف کلاس RemoveClass
روال حذف کلاس(el: صحیح۶۴، name: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
تعویض کلاس ToggleClass
روال تعویض کلاس(el: صحیح۶۴، name: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
هنگام رویداد OnEvent
روال هنگام رویداد(el: صحیح۶۴، event: رشته، handler: روال())click.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
هنگام رویداد جزئی OnEventE
روال هنگام رویداد جزئی(el: صحیح۶۴، event: رشته، handler: روال(صحیح۶۴))کلید رویداد و مانند آن بخوانیدش.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
رویداد جزئی پنجره OnWindowE
روال رویداد جزئی پنجره(event: رشته، handler: روال(صحیح۶۴))keydown.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
توقف رویداد OffEvent
روال توقف رویداد(el: صحیح۶۴، event: رشته، handler: روال())نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
رویداد پنجره OnWindow
روال رویداد پنجره(event: رشته، handler: روال())scroll.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
هنگام آماده OnReady
روال هنگام آماده(handler: روال())نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
هنگام تغییر اندازه OnResize
روال هنگام تغییر اندازه(handler: روال())نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
درخواست فریم RequestFrame
روال درخواست فریم(handler: روال(اعشار۶۴))واردسازی دام
ناپایا تیک := ۰
ناپایا بازه := ۰ برگردان صحیح۶۴
روال ریشه:
دام.تنظیم عنوان("زمانسنج")
آغاز := دام.اکنون()
_ := دام.تنظیم مهلت(():
سرچاپ "یک ثانیه گذشت"
پایان، ۱۰۰۰)
لغو := دام.تنظیم مهلت(():
سرچاپ "این اجرا نمیشود"
پایان، ۵۰۰۰)
دام.پاک کردن مهلت(لغو)
بازه = دام.تنظیم بازه(():
تیک += ۱
اگر تیک == ۳:
دام.پاک کردن بازه(بازه)
پایان
پایان، ۲۰۰)
دام.درخواست فریم((زمان: اعشار۶۴):
سرچاپ "فریم پس از"، زمان - آغاز
پایان)
دام.چرخش فریم((زمان: اعشار۶۴):
_ := زمان
پایان)
پایانتنظیم مهلت SetTimeout
روال تنظیم مهلت(handler: روال()، ms: صحیح۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
تنظیم بازه SetInterval
روال تنظیم بازه(handler: روال()، ms: صحیح۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
پاک کردن مهلت ClearTimeout
روال پاک کردن مهلت(id: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
پاک کردن بازه ClearInterval
روال پاک کردن بازه(id: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
عرض پنجره WinWidth
روال عرض پنجره(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
ارتفاع پنجره WinHeight
روال ارتفاع پنجره(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
عرض سند DocWidth
روال عرض سند(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
ارتفاع سند DocHeight
روال ارتفاع سند(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
پیمایش افقی ScrollX
روال پیمایش افقی(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
پیمایش عمودی ScrollY
روال پیمایش عمودی(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
اکنون Now
روال اکنون(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
دریافت خاصیت GetProp
روال دریافت خاصیت(obj: صحیح۶۴، name: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
دریافت خاصیت عددی GetNum
روال دریافت خاصیت عددی(obj: صحیح۶۴، name: رشته): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
دریافت خاصیت رشته ای GetStr
روال دریافت خاصیت رشته ای(obj: صحیح۶۴، name: رشته): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
دریافت خاصیت منطقی GetBool
روال دریافت خاصیت منطقی(obj: صحیح۶۴، name: رشته): منطقینمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم خاصیت SetProp
روال تنظیم خاصیت(obj: صحیح۶۴، name: رشته، value: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم خاصیت عددی SetNum
روال تنظیم خاصیت عددی(obj: صحیح۶۴، name: رشته، value: اعشار۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم خاصیت رشته ای SetStr
روال تنظیم خاصیت رشته ای(obj: صحیح۶۴، name: رشته، value: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم خاصیت منطقی SetBool
روال تنظیم خاصیت منطقی(obj: صحیح۶۴، name: رشته، value: منطقی)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان Call0
روال فراخوان(obj: صحیح۶۴، method: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان یک Call1
روال فراخوان یک(obj: صحیح۶۴، method: رشته، a: اعشار۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان دو Call2
روال فراخوان دو(obj: صحیح۶۴، method: رشته، a: اعشار۶۴، b: اعشار۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان سه Call3
روال فراخوان سه(obj: صحیح۶۴، method: رشته، a: اعشار۶۴، b: اعشار۶۴، c: اعشار۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان چهار Call4
روال فراخوان چهار(obj: صحیح۶۴، method: رشته، a: اعشار۶۴، b: اعشار۶۴، c: اعشار۶۴، d: اعشار۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان رشته یک CallS1
روال فراخوان رشته یک(obj: صحیح۶۴، method: رشته، a: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
فراخوان رشته دو CallS2
روال فراخوان رشته دو(obj: صحیح۶۴، method: رشته، a: رشته، b: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
دریافت زمینه GetContext
روال دریافت زمینه(canvas: صحیح۶۴، kind: رشته): صحیح۶۴2d؛ برای رسم سادهتر بوم را ببینید.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
عنصر شماره ItemAt
روال عنصر شماره(listobj: صحیح۶۴، idx: صحیح۶۴): صحیح۶۴پرسمان همه برگرداند.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
تعداد CountOf
روال تعداد(listobj: صحیح۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Elements.salam
هدف رویداد EventTarget
روال هدف رویداد(ev: صحیح۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
رویداد افقی EventX
روال رویداد افقی(ev: صحیح۶۴): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
رویداد عمودی EventY
روال رویداد عمودی(ev: صحیح۶۴): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
کلید رویداد EventKey
روال کلید رویداد(ev: صحیح۶۴): رشتهEnter یا a.نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
جلوگیری پیش فرض PreventDefault
روال جلوگیری پیش فرض(ev: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
توقف انتشار StopPropagation
روال توقف انتشار(ev: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
هشدار Alert
روال هشدار(msg: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تایید Confirm
روال تایید(msg: رشته): منطقینمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
درخواست ورودی Prompt
روال درخواست ورودی(msg: رشته): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم عنوان SetTitle
روال تنظیم عنوان(title: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
چرخش فریم EveryFrame
روال چرخش فریم(handler: روال(اعشار۶۴))نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Timers.salam
تصادفی Random
روال تصادفی(): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تصادفی صحیح RandomInt
روال تصادفی صحیح(n: صحیح۶۴): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
صدا Tone
روال صدا(freq: اعشار۶۴، ms: اعشار۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
بارگذاری تصویر LoadImage
روال بارگذاری تصویر(src: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تصویر آماده ImageReady
روال تصویر آماده(img: صحیح۶۴): منطقینمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
دریافت عدد ذخیره StoreGetInt
روال دریافت عدد ذخیره(key: رشته): صحیح۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم عدد ذخیره StoreSetInt
روال تنظیم عدد ذخیره(key: رشته، v: صحیح۶۴)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
دریافت متن ذخیره StoreGetStr
روال دریافت متن ذخیره(key: رشته): رشتهنمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
تنظیم متن ذخیره StoreSetStr
روال تنظیم متن ذخیره(key: رشته، v: رشته)نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Objects.salam
لمس افقی TouchX
روال لمس افقی(ev: صحیح۶۴): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam
لمس عمودی TouchY
روال لمس عمودی(ev: صحیح۶۴): اعشار۶۴نمونهی این مورد همراه با موارد بالاتر آمده است: dom-Events.salam