رویدادها در HTML5 Events) HTML5)

منتشرشده در آموزش HTML5
پنج شنبه, 18 دی 1393 ساعت 21:03

رویداد ها (Events) در HTML5

هنگامی که یک کاربر وب سایت شما را مشاهده میکند، کارهایی مانند کلیک بر روی متن و تصاویر و لینک های داده شده و... را انجام می دهد. ببا استفاده از رویداد ها می توان فعل و انفعالاتی در مرورگر ایجاد کرد و مثلا با کلیک بر روی عناصر کد های جاوا اسکریپت را اجرا کرد.

HTML5 گامی فراتر رفته و امکان ایجاد رویدادهای جدیدی مانند رویداد مالتی مدیا که بسیار کاربردی می باشد را ، فراهم کرده است.

در زیر لیستی از صفات رویداد جهانی در HTML را مشاهده می نمایید:

(موارد ستاره دار"*" خواص رویداد جدید در HTML5 می باشند.)

خواص رویداد درپنجره مرورگر (Window Events):

صفات یا خواص زیر داخل تگ <body> اعمال میشوند:

صفت ها مقادیر شرح عملکرد
onafterprint* script اسکریپت پس از چاپ یک سند اجرا می شود.
onbeforeprint* script اسکریپت قبل از چاپ یک سند اجرا می شود.
onbeforeunload* script اسکریپت در صورت لود نشدن سند اجرا می شود.
onerror* script اسکریپت در صورتی که خطایی رخ دهد اجرا می شود.
onhashchange* script اسکریپت در صورتی که تغییری در url سند اتفاق بیافتد، اجرا می شود.
onload script اسکریپت پس از اتمام لود صفحه اجرا می شود.
onmessage* script اسکریپت هنگامی که پیام دریافت شده است،اجرا می شود.
onoffline* script اسکریپت زمانی اجرا می شود که مرورگر کار خود را به صورت آفلاین آغاز می کند.
ononline* script اسکریپت زمانی اجرا می شود که مرورگر کار خود را به صورت آنلاین آغاز می کند.
onpagehide* script اسکریپت زمانی اجرا می شود، که پنجره سند مخفی شود.
onpageshow* script اسکریپت زمانی اجرا می شود، که پنجره سند نمایان شود.
onpopstate* script اسکریپت زمانی که تغییراتی در history پنجره مرورگر رخ دهد، اجرا می شود.
onresize* script اسکریپت زمانی که اندازه پنجره مرورگرتغییر کند، اجرا می شود.
onstorage* script اسکریپت زمانی اجرا می شود که صفحه وب لود و بروز شده است.
onunload script اسکریپت در صورت لود نشدن صفحه یا زمانی که پنجره مرورگر توسط کاربر بسته شود اجرا می شود.

خواص رویداد درفرم (Form Events):

رویدادهایی که توسط فرم HTML فراخوانی می شود. تقریبا در تمام تگ ها (عناصر) HTML5 اعمال می شود اما بیشتر در تگ های فرم آن ها را اعمال می کند.

صفت ها مقادیر شرح عملکرد
onblur script اسکریپت زمانی که تمرکز بر عنصر از دست برود، اجرا می شود.
onchange script اسکریپت زمانی که مقدار عنصر تغییر کند، اجرا می شود.
oncontextmenu* script اسکریپت زمانی اجرا می شود که یک منوی context menu اجرا شود.
onfocus script اسکریپت زمانی اجرا می شود که بر روی یک عنصر تمرکز شود.
oninput* script اسکریپت زمانی اجرا می شود که عنصر یک مقدار ورودی از کاربر بگیرد.
oninvalid* script اسکریپت زمانی اجرا می شود که یک عنصر نا معتبر باشد.
onreset* script اسکریپت زمانی اجرا می شود که بر روی دکمه ریست فرم کلیک شود.
onsearch script اسکریپت زمانی اجرا می شود که کاربر در فیلد جستجو چیزی بنویسد.
onselect script اسکریپت زمانی اجرا می شود که یک عنصر انتخاب شده است.
onsubmit script اسکریپت زمانی اجرا می شود که یک فرم ثبت شود.

خواص رویداد در صفحه کلید (KeyBoard Events) :

صفت ها مقادیر شرح عملکرد
onkeydown script اسکریپت زمانی اجرا می شود که کاربر یک دکمه را فشار دهد.
onkeypress script اسکریپت زمانی اجرا می شود که کاربر یک دکمه را فشار داده و رها کند.
onkeyup script اسکریپت زمانی اجرا می شود که کاربر یک دکمه را رها کند.

خواص رویداد در ماوس (Mouse Events) :

صفت ها مقادیر شرح عملکرد
onclick script اسکریپت زمانی ماوس کلیک شود، اجرا می شود.
ondblclick script اسکریپت زمانی ماوس دابل کلیک شود، اجرا می شود.
ondrag* script اسکریپت زمانی که عنصری درگ شود، اجرا می شود.
ondragend* script اسکریپت زمانی که درگ کردن عنصری پایان یابد، اجرا می شود.
ondragenter* script اسکریپت زمانی که عنصر به یک مقصد معتبر درگ شود، اجرا می شود.
ondragleave* script اسکریپت زمانی که عنصر یک مقصد معتبر را ترک کند، اجرا می شود.
ondragover* script اسکریپت زمانی که یک عنصر روی یک مقصد معتبر درگ شود، اجرا می شود.
ondragstart* script اسکریپت زمانی که درگ کردن عنصری آغاز شود، اجرا می شود.
ondrop* script اسکریپت زمانی که عنصر درگ شده رها شود، اجرا می شود.
onmousedown script اسکریپت زمانی که دکمه ماوس به پایین فشار داده شود، اجرا می شود.
onmousemove script اسکریپت زمانی که نشانگرماوس حرکت کند، اجرا می شود.
onmouseout script اسکریپت زمانی که نشانگرماوس خارج از محیط یک عنصر حرکت کند، اجرا می شود.
onmouseover script اسکریپت زمانی که نشانگرماوس در محیط یک عنصر حرکت کند، اجرا می شود.
onmouseup script اسکریپت زمانی که دکمه ماوس رها شود، اجرا می شود.
onmousewheel script اسکریپت زمانی که چرخ ماوس حرکت کند، اجرا می شود.
onscroll* script اسکریپت زمانی که اسکرول بار صفحه پیمایش شود، اجرا می شود.
onwheel* script اسکریپت زمانی که چرخ ماوس در محیط یک عنصر به بالا و پایین حرکت کند، اجرا می شود.

خواص رویداد در کلیپ برد (Clipboard Events) :

صفت ها مقادیر شرح عملکرد
oncopy script اسکریپت زمانی که کاربر محتوای یک عنصر را کپی کند، اجرا می شود.
oncut script اسکریپت زمانی که کاربر محتوای یک عنصر را برش یا cut دهد، اجرا می شود.
onpaste script اسکریپت زمانی که کاربر محتوایی را دریک عنصر paste کند، اجرا می شود.

خواص رویداد رسانه ای (Media Events) :

صفت ها مقادیر شرح عملکرد
onabort script اسکریپت زمانی که رویداد abort (لغو) رخ دهد، اجرا می شود.
oncanplay* script اسکریپت زمانی اجرا می شود ،که یک رسانه آماده اجرا باشد، (هنگامی که بافر به اندازه شروع انجام شده باشد).
oncanplaythrough* script اسکریپت زمانی اجرا می شود که یک رسانه بدون اینکه برای بافر مکث کند، می تواند تا انتها اجرا شود.
oncuechange* script اسکریپت زمانی تغییرات نشانه در یک عنصر رخ دهد ، اجرا می شود.
ondurationchange* script اسکریپت زمانی که طول رسانه تغییر کند، اجرا می شود.
onemptied* script اسکریپت زمانی اجرا می شود که اتفاق بدی بیافتد و فایل در دسترس نباشد.(مانند قطع اتصال غیر منتظره)
onended* script اسکریپت زمانی که اجرای یک رسانه به پایان برسد، اجرا می شود.( یک رویداد مفید برای زمانی که میخواهیم پیامی مانند "با تشکر از شما برای گوش فرا دادن به این رسانه" را نمایش دهیم.)
onerror* script اسکریپت زمانی که خطایی در هنگام بارگزاری فایل رخ دهد، اجرا می شود.
onloadeddata* script اسکریپت زمانی که اطلاعات رسانه بارگزاری شده باشد، اجرا می شود.
onloadedmetadata* script اسکریپت زمانی که اطلاعات مربوط به مدت زمان و دیگر اطلاعات رسانه (metadata) بارگزاری شده باشد، اجرا می شود.
onloadstart* script اسکریپت زمانی که مرورگر بارگزاری اطلاعات رسانه را آغاز کرده باشد، اجرا می شود.(قبل از بارگذاری هرچیز دیگر)
onpause* script اسکریپت زمانی اجرا می شود که یک رسانه pause شود.( چه بوسیله کاربر و چه از طریق برنامه نویسی)
onplay* script اسکریپت زمانی اجرا می شود که یک رسانه آماده شروع می باشد.
onplaying* script اسکریپت زمانی اجرا می شود که یک رسانه در حال اجرا می باشد.
onprogress* script اسکریپت زمانی اجرا می شود مرورگر در روند دریافت رسانه می باشد.
onratechange* script اسکریپت زمانی که اندازه زمان اجرا ی یک رسانه تغییر کرده باشد، اجرا می شود. (مانند زمانی که کاربر حرکت آهسته یا دور تند را انتخاب می کند.)
onseeked* script اسکریپت زمانی که خاصیت seeking عنصر media مقدار false دارد و پیمایش تمام شده است اجرا می شود.
onseeking* script اسکریپت زمانی که خاصیت seeking عنصر media مقدار true دارد و پیمایش آغاز شده است اجرا می شود.
onstalled* script اسکریپت زمانی اجرا می شود، که مرورگر به هردلیلی قادر به گرفت یک رسانه از منبع نباشد.
onsuspend* script اسکریپت زمانی اجرا می شود، که گرفتن رسانه توسط مرورگر به هردلیلی قبل از کامل شدن متوقف شود.
ontimeupdate* script اسکریپت زمانی اجرا می شود، که موقعیت اجرایی رسانه تغییر کند. (مانند زمانی که کاربر رسانه را جلو بزند به موقعیتی دیگر)
onvolumechange* script اسکریپت زمانی اجرا می شود، که صدای رسانه تغییر کند یا قطع شود.
onwaiting* script اسکریپت زمانی اجرا می شود، که رسانه متوقف شود اما امکان resume وجود داشته باشد.

خواص سایر رویداد ها (Misc Events) :

صفت ها مقادیر شرح عملکرد
onerror* script اسکریپت زمانی اجرا می شود، که که یک خطا رخ دهد.
onshow* script اسکریپت زمانی اجرا می شود، که یک عنصر menu به عنوان یک منوی زمینه (context menu) نشان داده شود.
ontoggle* script اسکریپت زمانی اجرا می شود، که کاربر عنصر
را باز و بسته کند.

 

با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

آموزش قواعد نوشتاری (Syntax) در HTML5

منتشرشده در آموزش HTML5
یکشنبه, 07 دی 1393 ساعت 22:17

قواعد نوشتاری یا سینتکس ها در HTML5 :

قواعد نوشتاری یا HTML5 Syntax  با  HTML 4 و اسناد XHTML1  که بر روی وب منتشر شده است،سازگار می باشد اما با ویژگی های باطنی تر SGML از HTML 4  سازگار نیست.
HTML5  از موارد زیر پشتیبانی می کند و بسیار انعطاف پذیر می باشد:

•    تگ های دارای حروف بزرگ.
•    نقل قول برای صفات.
•    مقادیر برای صفات اختیاری است.
•    بستن عناصر خالی اختیاری است.

DOCTYPE :

مشخص می کند که از چه نوع تگ هایی استفاده می شود.
DOCTYPEs  در نسخه های قدیمی تر HTML  طولانی تر بودند زیرا  زبانHTML برپایه SGML  استوار بود و به همین دلیل نیازمند ارجاع به یک DTD بود.
نویسندگان HTML 5 می توانند از کد ساده زیر برای مشخص کردن  DOCTYPE استفاده کنند:

<!DOCTYPE html>

کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

کدگذاری در HTML5 :

نویسندگان HTML 5 می توانند از کد ساده زیر برای مشخص کردن نوع  Encoding استفاده کنند:

<"meta charset="UTF-8>

 کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

 کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

تگ <script> :

روشی معمول برای اضافه کردن یک ویژگی با محتوای " متن / جاوا اسکریپت "  به صورت زیر است :

<script type="text/javascript" src="/scriptfile.js"></script>

 HTML 5 اطلاعات اضافی اما مورد نیاز را حذف می کند و شما می توانید به سادگی زیر از استفاده کنید:

<script src="/scriptfile.js"></script>

 تگ <link> :

تا کنون تگ <link> را شکل زیر نوشته می شد:

<link rel="stylesheet" type="text/css" href="/stylefile.css">

 HTML 5 اطلاعات اضافی اما مورد نیاز را حذف می کند و شما می توانید به سادگی زیر استفاده کنید:

<link rel="stylesheet" href="/stylefile.css">

 عناصر درHTML5  :

عناصر HTML5 با یک تگ شروع و یک تگ پایان مشخص می شوند. تگ ها ،با نام تگ در بین دو براکت زاویه مشخص می شود.
تفاوت بین این دو تگ وجود یک علامت اسلش "/" قبل از نام تگ پایان است.
نمونه ای از یک عنصر HTML5 :

<p>...</p>

 نام تگ ها در  HTML5 به حروف کوچک و بزرگ حساس نیست و ممکن است تماما با حروف بزرگ و یا  ترکیبی از حروف بزرگ و کوچک نوشته شود، اگر چه معمولا با حروف کوچک نوشته می شود.

بسیاری از تگ ها درHTML5  مطالبی را در برمی گیرند مانند تگ <p>...</p> که شامل یک پاراگراف می شود.
برخی از تگ ها در HTML5 محتوایی را در بر نمی گیرند که آنها را تگ خالی می نامیم مانند br ،  hr، link ، meta و ...
در قسمت عناصر HTML5 می توانید لیست کاملی از عناصر HTML5 را مشاهده کنید.

صفت ها (Attributes ) در HTML5 :

عناصر ممکن است دارای خواص مختلفی باشد که شما می توانید با صفت ها در HTML5 این خواص را تنظیم کنید.
برخی از صفت ها در سطح عمومی تعریف شده و می توانید بر روی تمام عناصراستفاده کنید.
 سایر صفت ها که به صورت ویژه تعریف شده ، تنها برای یک عنصر استفاده می شود.
صفت ها در HTML5 از یک نام و یک مقدار تشکیل می شود، که در مثال زیر نمونه آن را مشاهده می کنید.
در زیر نمونه ای از صفت ها در HTML5 قرار دارد ، که در آن عنصر div با صفت class و مقدار صفت example را مشاهده می کنید .

<div class="example">...</div>

 صفت ها تنها در تگ شروع قرار می گیرند و از آنها در تگ پایان نبایداستفاده کرد.

صفت ها در  HTML5 به حروف کوچک و بزرگ حساس نیست و ممکن است تماما با حروف بزرگ و یا  ترکیبی از حروف بزرگ و کوچک نوشته شود، اگر چه معمولا با حروف کوچک نوشته می شود.
در قسمت صفت ها در HTML5 می توانید لیست کاملی از عناصر HTML5 را مشاهده کنید.

صفحات در HTML5 :

برای درک بهتر شما برخی از تگ ها در زیر معرفی می شوند:
section : ازتگ section برای بخش بندی صفحه استفاده می شود، به این صورت که قسمت هایی را که با هم ارتباط معنایی دارند به عنوان یک بخش در نظر گرفته وبه عنوان نماینده آن بخش عمل می کند. همچنین می توان از H1-H6 در کنارش برای مشخص کردن ساختار سند استفاده کرد.
article : از تگ  article برای ایجاد یک قسمت مستقل از محتوای یک صفحه، مانند وبلاگ یا مقاله روزنامه استفاده می شود. این تگ نسبت به تگ section مستقل تر و دقیقتر می باشد، نکته دیگر در تفاوت این دو تگ در این است که تگ article را به صورت تو در تو نمی توان استفاده کرد اما همانند تگ section میتوان در داخل تگ article از تگ های section, nav, aside به همراه تگ  header و footer استفاده کرد.
aside : این تگ نشان دهنده یک قطعه از محتوا است که تنها کمی به بقیه صفحه مربوط است. همچنین برای استفاده در ستونهای کناری کاربرد دارد، در صورتی که ازتگ aside در تگ دیگری استفاده می کنیم (برای مثال تگ article )باید قسمت هایی که در این تگ قرار می گیردبا محتوای تگ article ارتباط معنایی داشته باشد.
header : از تگ header برای قرار دادن سرصفحه یا سربرگ در یک بخش استفاده ه می شود.
footer : از تگ footer برای قرار دادن پانویس در یک بخش استفاده ه می شود می توانند اطلاعاتی از قبیل نویسنده، اطلاعات کپی رایت، و ...را در برگیرد.
Nav : با استفاده از تگ nav می توان بخشی را به لینک ها اختصاص داد.
Dialog : از تگ dialog برای ایجاد یک کادر محاورهای یا باکس استفاده می شود.
figure :  از تگ figure برای همراه کردن محتوای متنی با تصاویر یا ویدیو استفاده می شود.

در زیر نمونه ای ازیک  سند HTML5 را مشاهده می کنید:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

 

با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

عضویت در وب استیودنت

در شبکه های اجتماعی همراه ما باشید

با ما در ارتباط باشید

سامانه پیامک: 50004657100

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper