سبد (0)

فیلم آموزش html

  • تگ samp در HTML

    21 شهریور 1397

    مثال (تگ samp در HTML)

    قالب متن در یک سند:

    <samp>Sample output from a computer program</samp>

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

    تعریف و کاربرد تگ samp در HTML

    تگ <samp> یک تگ عبارتی است. نمونه خروجی از یک برنامه کامپیوتری را مشخص می کند.

    نکته: استفاده از این تگ توصیه نمی شود. اما برای رسیدن به نتایج بهتر می توانید از CSSاستفاده کنید.

    تمام تگ های تعریفی:

    Tag توضیحات
    <em> متن را به صورت emphasized نمایش می دهد.
    <strong> متن را به صورت strong نمایش می دهد.
    <dfn> جهت تعریف definition term
    <code> متن را به صورت computer code نمایش می دهد.
    <samp> متن را به صورت sample computer code نمایش می دهد.
    <kbd> متن را به صورت keyboard نمایش می دهد.
    <var> متن را به صورت variable نمایش می دهد.

    پشتیبانی مرورگرها از تگ samp در HTML

    عنصر          
    <samp> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.

    ویژگی های عمومی تگ samp در HTML

    تگ <samp> از ویژگی های عمومی در HTML پشتیبانی می کند.

    رویدادهای عمومی تگ samp در HTML

    تگ <samp> از رویدادهای عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    آموزش HTML-فرمت دهی متن

    READ MORE

  • تگ script در HTML

    21 شهریور 1397

    مثال (تگ script در HTML)

    script زیر عبارت Hello World را چاپ می کند:

    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

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

    تعریف و کاربرد تگ script در HTML

    تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript

    عنصر <script> به دو صورت استفاده می شود یا با نوشتن دستورات درون تگ script یا به صورت یک فایل script خارجی که با خصوصیت src مشخص می شود.

    کاربردهای رایج برای JavaScript: دستکاری تصویر، اعتبار سنجی فرم و تغییرات محتوا بصورت پویا می باشد.

    پشتیبانی مرورگرها از تگ script در HTML

    عنصر          
    <script> بله بله بله بله بله

    نکته ها و ترفندها

    نکته: اگر از خصوصیت "src" استفاده کنیم , عنصر <script> باید خالی باشد.

    نکته: همچنین عنصر <noscript> زمانی استفاده می شود که script ها در مرورگر غیر فعال شده یا مرورگری است که script سمت کاربر را پشتیبانی نمی کنند.

    نکته: راه های مختلف برای اجرا شدن  script خارجی:

    • اگر خصوصیت "async="async باشد: اسکریپت غیر همزمان با بقیه از صفحه اجرا می شود (زمانی کی که اسکریپت شما به سایر اسکریپت ها وابستگی نداشته باشد).
    • اگر خصوصیت  async ارائه نشود و خصوصیت "defer="defer باشد: اسکریپت پس از بازگذاری کامل صفحه اجرا می شود و تمام دستورات نیز در آخرین مرحله اجرا می شوند.
    • اگر async یا defer هیچکدام ارائه نشوند: اسکریپت بلافاصله اجرا می شود قبل از اینکه مرورگر به بارگذاری آن صفحه ادامه دهد.

    تفاوت بین HTML 4.01 و HTML5

    خصوصیت "type" در HTML 4 الزامی است، اما در HTML5 اختیاری است.

    خصوصیت "async" در HTML5 جدید است.

    خصوصیت "xml:space" موجود در HTML 4.01، در HTML5 پشتیبانی نمی شود.

    تفاوت بین HTMLوXHTML

    در XHTML، محتویات درون اسکریپت به عنوان PCDATA# (به جای CDATA) اعلام می شود، بدان معنی است که موجودیت تجزیه خواهد شد.

    این به این معنی است که در XHTML، تمام کاراکترهای خاص باید کد گذاری شود، یا تمام مطالب باید در داخل یک بخش CDATA پنهان شود:

    <script type="text/javascript">
    //<![CDATA[
    var i = 10;
    if (i < 5) {
      // some code
    }
    //]]>
    </script>

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    async async مشخص می کند که اسکریپت غیر همزمان با بقیه از صفحه اجرا می شود. (فقط برای اسکریپت خارجی)
    charset charset نحوه کد گذاری کاراکترها را در اسکریپت مشخص می کند.
    defer defer مشخص می کند که اسکریپت پس از بازگذاری کامل صفحه اجرا می شود. (فقط برای اسکریپت خارجی)
    src URL مسیر کامل فایلی که دستورات اسکریپت در آن قرار دارد را مشخص می کند.
    type media_type نوع اسکریپت را مشخص می کند.
    xml:space preserve در HTML5 پشتیبانی نمی شود.
    مشخص می کند که  whitespace در کد باید حفظ شود.

    ویژگی های عمومی تگ script در HTML

    تگ <script> از ویژگی های عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    آموزش HTML-جاوا اسکریبت 

    مرجع اشیاء اچ تی ام ال: تگ script در JavaScript 

    READ MORE

  • تگ section در HTML

    21 شهریور 1397

    مثال (تگ section در HTML)

    یک بخش یا قسمت مجزا در یک سند وب:

    <section>
      <h1>WWF</h1>
      <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>

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

    تعریف و کاربرد تگ section در HTML

    تگ <section> تعیین یک بخش یا قسمت مجزا در یک سند وب، مانند فصل، هدر، پاورقی، و یا هر بخش دیگر از سند را مشخص می کند.

    پشتیبانی مرورگرها از تگ section در HTML

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

    عنصر          
    <section> 6.0 9.0 4.0 5.0 11.1

    تفاوت بین HTML 4.01 و HTML5

    تگ <section> یک تگ جدید در HTML5 است.

    ویژگی های عمومی تگ section در HTML

    تگ <section> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ section در HTML

    تگ <section> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE

  • تگ select در HTML

    21 شهریور 1397

    مثال (تگ select در HTML)

    یک لیست drop-down برای چهار options:

    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

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

    تعریف و کاربرد تگ select در HTML

    تگ <select> برای ایجاد یک لیست کشویی (drop-down) استفاده می شود.

    تگ <option> درون عنصر <select> گزینه های موجود در لیست را تعریف می کند.

    پشتیبانی مرورگرها از تگ select در HTML

    عنصر          
    <select> بله بله بله بله بله

    نکته ها و ترفندها

    نکته: عنصر <select> برای کنترل فرم است، و در یک فرم می تواند برای جمع آوری ورودی کاربر استفاده شود.

    تفاوت بین HTML 4.01 و HTML5

    برخی از خصوصیت های جدید در HTML5 اضافه شده است.

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    autofocus autofocus مشخص می کند که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.
    disabled disabled مشخص می کند که لیست drop-down باید غیر فعال باشد.
    form form_id فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.
    multiple multiple مشخص می کند که مقادیر متعددی را می توان یکمرتبه انتخاب کرد.
    name name یک name برای لیست drop-down تعریف می کند.
    required required مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.
    size number تعداد مقادیر قابل مشاهده در لیست را مشخص می کند.

    ویژگی های عمومی تگ select در HTML

     تگ <select> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ select در HTML

    تگ <select> از رویدادهای عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ select در JavaScript 

    READ MORE

  • تگ small در HTML

    21 شهریور 1397

    مثال (تگ small در HTML)

    نمایش یک متن کوچکتر:

    <p>W3Schools.com - the world's largest web development site.</p>
    <p><small>Copyright 1999-2050 by Refsnes Data</small></p>

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

    تعریف و کاربرد تگ small در HTML

    تگ <small> متن درونش را یک واحد کوچکتر از متون اطرافش مشخص می کند.

    پشتیبانی مرورگرها از تگ small در HTML

    عنصر          
    <small> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.

    ویژگی های عمومی تگ small در HTML

    تگ <small> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ small در HTML

    تگ <small> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE

  • تگ source در HTML

    21 شهریور 1397

    مثال (تگ source در HTML)

    پخش کننده های صوتی با دو منبع فایل، که مرورگر یکی را انتخاب می کند،بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند:

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

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

    تعریف و کاربرد تگ source در HTML

    تگ <source> برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند<video> و <audio> استفاده می شود.

    تگ <source> به شما اجازه می دهد که سورس های متفاوت صوتی یا ویدیویی برای مرورگر تعیین کنید تا بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند، یکی را انتخاب کند.

    پشتیبانی مرورگرها از تگ source در HTML

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

    عنصر          
    <source> 4.0 9.0 3.5 4.0 10.5

    تفاوت بین HTML 4.01 و HTML5

    تگ <source> یک تگ جدید در HTML5 است.

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    media media_query نوع منبع media را مشخص می کند.
    src URL آدرس فایل صوتی یا تصویری را مشخص می کند.
    type media_type نوع media را برای منبع  media مشخص می کند.

    ویژگی های عمومی تگ source در HTML

    تگ <source> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ source در HTML

    تگ <source> از-رویدادهای عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    آموزش HTML5-پخش ویدئو 

    آموزش HTML5-پخش صوت

    مرجع اشیاء اچ تی ام ال: تگ source در JavaScript 

    READ MORE

  • تگ span در HTML

    21 شهریور 1397

    مثال (تگ span در HTML)

    استفاده از عنصر span برای متمایز کردن رنگ قسمتی از متن:

    <p>My mother has <span style="color:blue">blue</span> eyes.</p>

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

    تعریف و کاربرد تگ span در HTML

    تگ <span> یک عنصر درون خطی (inline) در سند است.

    تگ <span> بدون تغییرات بصری هیچ چیز در صفحه نشان نمی دهند.

    تگ <span> راهی را برای اضافه کردن قالب به بخشی از یک متن و یا بخشی از یک سند فراهم می کند.

    پشتیبانی مرورگرها از تگ span در HTML

    عنصر          
    <span> بله بله بله بله بله

    نکته ها و ترفندها

    نکته: هنگامی که شما از تگ <span> استفاده می کنید، می توانید از ویژگی های CSSیا JavaScriptبرای این تگ استفاده کنید.

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.

    ویژگی های عمومی تگ span در HTML

    تگ <span> از ویژگی های عمومی در HTML پشتیبانی می کند.

    رویدادهای عمومی تگ span در HTML

    تگ <span> از رویدادهای عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    آموزش HTML-عنصر div و span  

    مرجع اشیاء اچ تی ام ال: تگ span در JavaScript 

    READ MORE

  • تگ strong در HTML

    21 شهریور 1397

    مثال (تگ strong در HTML)

    قالب متن در یک سند:

    <strong>Strong text</strong>

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

    تعریف و کاربرد تگ strong در HTML

    تگ <strong> یک تگ تعریفی است و متن مهم را تعریف می کند.

    نکته: استفاده از این تگ توصیه نمی شود. اما برای رسیدن به نتایج بهتر می توانید از CSSاستفاده کنید.

    همه تگ های تعریفی:

    Tag توضیحات
    <em> متن را به صورت emphasized نمایش می دهد.
    <strong> متن را به صورت strong نمایش می دهد.
    <dfn> جهت تعریف definition term
    <code> متن را به صورت computer code نمایش می دهد.
    <samp> متن را به صورت sample computer code نمایش می دهد.
    <kbd> متن را به صورت keyboard نمایش می دهد.
    <var> متن را به صورت variable نمایش می دهد.

    پشتیبانی مرورگرها از تگ strong در HTML

    عنصر          
    <strong> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    در HTML 4.01، تگ <strong> متن را به صورت  strong emphasized  نشان می دهد، اما در HTML5، متن مهم را معرفی می کند.

    ویژگی های عمومی تگ strong در HTML

    تگ <strong> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ strong در HTML

    تگ <strong> از رویدادهای عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    آموزش HTML-فرمت دهی متن 

    READ MORE

  • تگ style در HTML

    21 شهریور 1397

    مثال (تگ style در HTML)

    طریقه استفاده از عنصر <style> در سند HTML:

    <html>
    <head>
    <style>
    h1{color:red;}
    p{color:blue;}
    </style>
    </head>
    <body>

    <h1>A heading</h1>
    <p>A paragraph.</p>

    </body>
    </html>

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

    تعریف و کاربرد تگ style در HTML

    تگ <style> برای تعریف اطلاعات استایل برای یک سند HTMLاستفاده می شود.

    در داخل عنصر <style> مشخص می کنید که چگونه عناصر HTML باید در یک مرورگر نمایش داده شود.

    هر سند HTML می تواند شامل چند تگ <style> باشد .

    پشتیبانی مرورگرها از تگ style در HTML

    عنصر          
    <style> بله بله بله بله بله

    نکته ها و ترفندها

    نکته: برای لینک کردن به یک  فایل CSS خارجی، از تگ <link> استفاده می کنیم.

    نکته: برای کسب اطلاعات بیشتر در مورد CSS، به بخش آموزش CSS بروید.

    نکته: اگر خصوصیت "scoped" استفاده نشود، هر تگ <style> باید در قسمت head قرار گیرد.

    تفاوت بین HTML 4.01 و HTML5

    خصوصیت "scoped" در HTML5 جدید است، که اجازه می دهد styles برای بخش مشخصی از سند تعریف شود. اگر خصوصیت"scoped" وجود داشته باشد، آن styles فقط به عناصر style عنصر والد و عنصر فرزند اعمال می شود.

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    media media_query مشخص می کند که چه media یا دستگاهی برای منبع media مناسب است.
    scoped scoped مشخص می کند که styles فقط به عناصر style عنصر والد و عنصر فرزند اعمال می شود.
    type text/css نوع media در تگ <style> را مشخص می کند.

    ویژگی های عمومی تگ style در HTML

    تگ <style> از ویژگی های عمومی در HTML پشتیبانی می کند.

    رویدادهای عمومی تگ style در HTML

    تگ <style> از رویدادهای عمومی در HTML پشتیبانی می کند.

    آموزش های مرتبط

    آموزش HTML-سی اس اس 

    مرجع اشیاء اچ تی ام ال: تگ style در JavaScript 

    READ MORE

  • تگ sub در HTML

    21 شهریور 1397

    مثال (تگ sub در HTML)

    متن زیرنویس:

    <p>This text contains <sub>subscript</sub> text.</p>

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

    تعریف و کاربرد تگ sub در HTML

    تگ <sub> متن را به صورت زیرنویس تعریف می کند. زیرنویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر پایین تر از بقیه ی کاراکتر قرار می گیرند و گاهی اوقات در یک فونت کوچکتر ارائه می شوند . از زیرنویس می توان برای نمایش فرمول شیمیایی استفاده کرد، مانند: H2O.

    نکته:از تگ <sup> برای تعریف متن به صورت بالانویس استفاده می کنیم.

    پشتیبانی مرورگرها از تگ sub در HTML

    عنصر          
    <sub> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.

    ویژگی های عمومی تگ sub در HTML

    تگ <sub> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ sub در HTML

    تگ <sub> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE

  • تگ summary در HTML

    21 شهریور 1397

    مثال (تگ summary در HTML)

    استفاده از عنصر <summary>:

    <details>
    <summary>Copyright 1999-2011.</summary>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
    </details>

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

    تعریف و کاربرد تگ summary در HTML

    تگ <summary> یک عنوان قابل مشاهده برای عنصر <details> تعریف می کند. که عنوان را می توان با استفاده از کلیک کردن باز یا بسته نمایید.

    پشتیبانی مرورگرها از تگ summary در HTML

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

    عنصر          
    <summary> 12.0 پشتیبانی نمی شود پشتیبانی نمی شود 6.0 15.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <summary> یک تگ جدید در HTML5 است.

    نکته ها و ترفندها

    نکته: تگ <summary> باید به صورت اولین عنصر فرزند تگ <details> قرار گیرد.

    ویژگی های عمومی تگ summary در HTML

    تگ <summary> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ summary در HTML

    تگ <summary> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE

  • تگ sup در HTML

    21 شهریور 1397

    مثال (تگ sup در HTML)

    متن بالانویس:

    <p>This text contains <sup>superscript</sup> text.</p>

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

    تعریف و کاربرد تگ sup در HTML

    تگ <sup> متن را به صورت بالانویس تعریف می کند. بالا نویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر بالاتر از بقیه ی کاراکتر قرار می گیرند و گاهی اوقات در یک فونت کوچکتر ارائه می شوند. بالانویس می تواند برای پانوشت استفاده شود، مانند: WWW[1].

    نکته: از تگ <sub> برای تعریف متن به صورت زیر نویس استفاده می کنیم.

    پشتیبانی مرورگرها از تگ sup در HTML

    عنصر          
    <sup> بله بله بله بله بله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.

    ویژگی های عمومی تگ sup در HTML

    تگ <sup> از ویژگی های عمومی در HTMLپشتیبانی می کند.

    رویدادهای عمومی تگ sup در HTML

    تگ <sup> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE

  • توضیحات در HTML

    23 شهریور 1397

    مثال (توضیحات در HTML)

    توضیحات در HTML:

    <!--This is a comment. Comments are not displayed in the browser-->

    <p>This is a paragraph.</p>

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

    تعریف و کاربرد

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

    پشتیبانی مرورگرها

    عنصر          
    <!--...--> بله بله بله بله بله

     

    تفاوت بین HTML4.01 و HTML5

    تفاوتی وجود ندارد.

    نکته ها وترفندها

    نکته: از تگ<--...--!> (توضیحات) می توان برای مخفی و غیر فعال کردن اسکریپت ها در مرورگرهایی که آن را پشتیبانی نمی کنند استفاده کرد.

     

    <script type="text/javascript">
    < !--
    function displayMsg()
    {
    alert("Hello World!")
    }
    //-->
    < /script>

    نکته:برای کامنت کردن کدهای جاوااسکریپت و به منظور جلوگیری از اجرای آن، در انتهای کامنت، از دو اسلش رو به جلو ( // )  استفاده می کنیم.

    Standard خصوصیت ها

    تگ <--..--!> (توضیحات) هیچ یک از ویژگی های استانداردها را پشتیبانی نمی کند.

    مطالعه بیشتر در مورد: مرجع HTML-خصوصیت های عمومی

    رویدادهای عمومی

    تگ <--..--!> (توضیحات) هیچ یک از ویژگی های رویداد را پشتیبانی نمی کند.

    مطالعه بیشتر در مورد: مرجع HTML-رویدادهای عمومی

    READ MORE

  • جابه جا کردن عناصر در HTML5

    23 شهریور 1397

    کشیدن (Drag) و انداختن (Drop) عناصر، بخشی از استاندارد html5 است.

    کشیدن (Drag) و انداختن (Drop)

    کشیدن و انداختن عناصر یکی از ویژگی های خیلی معمول HTML5است. منظور از کشیدن و انداختن زمانی است که یکی از اشیاء داخل صفحه را بگیرید و به محلی دیگر بکشید و رها نمایید.

    در HTML5 هر عنصری در صفحه می تواند قابل کشیدن (draggable) باشد.

    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari جابه جا کردن عناصر را پشتیبانی می کنند.

    توجه: Safari 5.1.2 و نسخه های قدیمی تر آن، جابه جا کردن عناصر را پشتیبانی نمی کنند.

    مثال کشیدن و انداختن عناصر در HTML5

    مثال زیر یک مثال ساده از کشیدن و انداختن است:

    مثال (جابه جا کردن عناصر در HTML5)

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>

    <div id="div1" ondrop="drop(event)"
    ondragover="allowDrop(event)"></div>

    <img id="drag1" src="/img_logo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69">

    </body>
    </html>
    خودتان امتحان کنید »

    مثال بالا ممکن است کمی پیچیده بنظر برسد، اما اجازه بدهید بعد از مرور تمام بخش های آن در پایین قضاوت نمایید.

    عنصر مورد نظر را قابل جا به جا کردن کنید 

    در مرحله اول باید کاری کنید تا عنصر مورد نظرتان، قابل جا به جا شدن باشد.

    برای این منظور باید خاصیت drggable را با مقدار true تنظیم نمایید:

    <img draggable="true">

    تعیین عنصری که می خواهید جا به جا شود

    در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از کشیدن آن قرار است بیافتد را تعیین نمایید.

    در کد بالا، خاصیت ondragstart عنصر <img>، را با رویداد (drag(event تنظیم کرده ایم. این رویداد تعیین می کند چه عنصری می خواهد جابه جا شود. این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید.

    متد ()dataTransfer.setData اطلاعات عنصری که قرار است کشیده شود، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد. این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

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

    رویداد ondragover مشخص کننده محلی است که داده ی جابه جا شده را می توان رها نمود.

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

    این کار هنگامی که رویداد ondragover اتفاق می افتد، با صدا زدن متد ()ev.preventDefault انجام می شود:

    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    رها کردن عنصر جابه جا شده

    پس از انتخاب عنصر و جابه جا کردن آن، باید مکانی که فرود (drop) می آید را تعیین کرده و سپس آنرا رها نمایید.

    در مثال بالا، هنگامی که عکس را در مکان تعیین شده رها می کنید، رویداد ondrop تگ <div> رخ داده و تابع drop را فراخوانی می کند.

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }

    توضیح کد:

    • بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین با صدا زدن متد ()ev.preventDefault از این کار جلوگیری می کنیم.
    • توسط متد ()ev.dataTransfer.getData، شناسه یا همان id عنصر drag شده را دریافت می کنیم. این متد شناسه همان نوع داده ای را که در متد ()setData تنظیم کردید، برمی گرداند.
    • این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
    • متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط می سازد.

    مثال - خودتان امتحان کنید

     جابه جا کرد عکس بین دو محل
    در این مثال، نشان داده شده است که چگونه یک عکس را بین دو عنصر <div> جابه جا کنیم.

    READ MORE

  • خصوصیت ها در xHTML

    18 شهریور 1397

    خصوصیت های XHTML همان خصوصیت های HTML است که مانند XML نوشته شده اند.

    خصوصیت های XHTML - قوانین نوشتاری

    Wiki

    • نام خصوصیت ها باید به صورت کوچک نوشته شود.
    • مقادیر خصوصیت ها باید درون دابل کوتیشن باشد.
    • خلاصه نویسی خصوصیت ها ممنوع است.

    نام خصوصیت ها باید با حروف کوچک نوشته شود

    Wiki

    قطعه کد زیر غلط است:

    <table WIDTH="100%">

    این درست است:

    <table width="100%">

    مقدار خصوصیت ها باید درون دابل کوتیشن باشند

    Wiki

    قطعه کد زیر غلط است:

    <table width=100%>

    این درست است:

    <table width="100%">

    خلاصه نویسی خصوصیت ها ممنوع است

    Wiki

    قطعه کد زیر غلط است:

    <input checked>
    <input readonly>
    <input disabled>
    <option selected>

    این درست است:

    <input checked="checked" />
    <input readonly="readonly" />
    <input disabled="disabled" />
    <option selected="selected" />
    READ MORE

  • خصوصیت های جدید در HTML5

    23 شهریور 1397

    خصوصیت های جدید در HTML5

    چندین خصوصیت جدید در HTML5برای تگ های <form> و <input> اضافه شده است.

    خصوصیت های جدید برای تگ <form>

    • autocomplete
    • novalidate

    خصوصیت های جدید برای تگ <input>

    • autocomplete
    • autofocus
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • height and width
    • list
    • min and max
    • multiple
    • pattern
    • placeholder
    • required
    • step

    خصوصیت autocomplete در <form> / <input>

    این خصوصیت مشخص می کند که مقادیر یک فرم یا یک فیلد متنی بصورت اتوماتیک پر شود یا نه.

    زمانی که کاربر شروع به تایپ در فیلدهای autocomplete می کند، مرورگر گزینه هایی را که قبلاً کاربر وارد کرده است نمایش می دهد.

    نکته: این امکان وجود دارد که خصوصیت autocomplete برای form فعال و برای یک فیلد بخصوص غیرفعال باشد و یا برعکس.

    توجه:خصوصیت autocomplete برای تگ <form> و تگ <input>ی که از انواع زیر باشد کار می کند:
     text, search, url, tel, email, password, datepickers, range, color

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <form action="demo_form.php" autocomplete="on">
      First name:<input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      E-mail: <input type="email" name="email" autocomplete="off"><br>
      <input type="submit">
    </form>
    خودتان امتحان کنید »

    نکته: در بعضی مرورگرها باید خاصیت Autocomplete را فعال کنید تا این مثال کار کند.

    خصوصیت novalidate در <form>

    خصوصیت novalidate یک خصوصیت boolean است.

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

    اگر این خصوصیت برای فرم مشخص شده باشد هیچ یک از فیلدهای آن فرم از نظر اعتبارسنجی بررسی نمی شود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <form action="demo_form.php" novalidate>
      E-mail: <input type="email" name="user_email">
      <input type="submit">
    </form>
    خودتان امتحان کنید »

    خصوصیت autofocus در <input>

    خصوصیت autofocus یک خصوصیت boolean است.

    این خصوصیت باعث می شود که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.

    نکته: خصوصیت autofocus برای تمام انواع فیلدهای ورودی کار می کند.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    First name:<input type="text" name="fname" autofocus>
    خودتان امتحان کنید »

    خصوصیت form در <input>

    این خصوصیت فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.

    نکته: خصوصیت form برای تمام انواع فیلدهای ورودی کار می کند و برای اتصال یک فیلد به چند فرم باید با space بین id فرم ها فاصله بگذارید.

    این خصوصیت باید به id فرم مورد نظرتان اشاره کند.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <form action="demo_form.php" id="form1">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="Submit">
    </form>

    Last name: <input type="text" name="lname" form="form1">
    خودتان امتحان کنید »

    خصوصیت formaction در <input>

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

    خصوصیت formaction، خصوصیت action عنصر <form>را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

    نکته: خصوصیت formaction با انواع ورودی submit و image استفاده می شود.

    نکته: از این صفات می توان برای ساخت دکمه های submit متفاوت که کارهای متفاوتی انجام می دهند استفاده کرد.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    یک فرم HTML با دو دکمه submit، و دو action متفاوت:

    <form action="demo_form.php">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit"><br>
      <input type="submit" formaction="demo_admin.php"
      value="Submit as admin">
    </form>
    خودتان امتحان کنید »

    خصوصیت formenctype در <input>

    خصوصیت formenctype، چگونگی رمز کردن داده های فرم، هنگام ارسال را مشخص می کند. (تنها زمانی که خصوصیت method عنصر <form> با مقدار "post" تنظیم شده باشد)

    خصوصیت formenctype، خصوصیت enctype عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

    نکته: خصوصیت formenctype با انواع ورودی submit و image استفاده می شود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    در دکمه اول، داده ها براساس enctype پیشفرض فرم ارسال می شوند، و در دکمه دوم داده ها بر اساس "multipart/form-data" رمزگذاری و ارسال می شوند:

    <form action="demo_post_enctype.php" method="post">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="Submit">
      <input type="submit" formenctype="multipart/form-data"
      value="Submit as Multipart/form-data">
    </form>
    خودتان امتحان کنید »

    خصوصیت formmethod در <input>

    خصوصیت formmethod، مشخص می کند که ارسال اطلاعات از فرم HTMLبه سرور به چه شکل باشد، اگر آنرا با مقدار "get" پر کنیم، اطلاعات فرم در آدرس صفحه قرار می گیرد و ارسال می شود، و اگر آنرا با مقدار "post" تنظیم کنیم، اطلاعات به صورت یک آرایه ارسال می شود.(به صورت پیشفرض get در نظر گرفته می شود)

    خصوصیت formmethod، خصوصیت method عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

    نکته: خصوصیت formmethod با انواع ورودی submit و image استفاده می شود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <form action="demo_form.php" method="get">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
      <input type="submit" formmethod="post" formaction="demo_post.php"
      value="Submit using POST">
    </form>
    خودتان امتحان کنید »

    خصوصیت formnovalidate  در <input>

    خصوصیت formnovalidate یک خصوصیت boolean است.

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

    خصوصیت formnovalidate، خصوصیت novalidate عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

    نکته: خصوصیت formnovalidate با نوع ورودی submit استفاده می شود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    یک فرم با دو دکمه (با و بدون اعتبار سنجی):

    <form action="demo_form.php">
      E-mail: <input type="email" name="userid"><br>
      <input type="submit" value="Submit"><br>
      <input type="submit" formnovalidate value="Submit without validation">
    </form>
    خودتان امتحان کنید »

    خصوصیت formtarget در <input>

    خصوصیت formtarget نشان می دهد، پاسخی که از سرور دریافت شده است کجا نمایش داده شود و می تواند شامل: صفحه جاری، صفحه جدید، صفحه پدر، یك فریم خاص و... باشد.

    خصوصیت formtarget، خصوصیت target عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

    نکته: خصوصیت formtarget با انواع ورودی submit و image استفاده می شود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    یک فرم با دو دکمه submit و targetهای متفاوت:

    <form action="demo_form.php">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit as normal">
      <input type="submit" formtarget="_blank"
      value="Submit to a new window">
    </form>
    خودتان امتحان کنید »

    خصوصیت های height و width در <input>

    خصوصیت های height و width، ارتفاع و عرض برای نوع ورودی image را مشخص می کند.

    توجه: همانطور که مشخص است این خصوصیت فقط برای نوع ورودی image کار می کند.

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

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    تعریف یک عکس بعنوان submit، با خصوصیت های height و width:

    <input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">
    خودتان امتحان کنید »

    خصوصیت list در <input>

    این خصوصیت یک datalist را به یک فیلد متنی متصل می کند.

    زمانی که کاربر داده وارد می کند، یک لیست کشویی ظاهر می شود و می تواند از گزینه های پیشنهاد داده شده یکی را انتخاب نماید.

    برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <input list="browsers">

    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    خودتان امتحان کنید »

    خصوصیت های min و max در <input>

    خصوصیت های min و max، حداقل و حداکثر مقدار برای یک عنصر <input> را مشخص می کند.

    توجه: این خصوصیت ها فقط برای انواع ورودی زیر استفاده می شود:
    number, range, date, datetime, datetime-local, month, time ,week

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    Enter a date before 1980-01-01:
    <input type="date" name="bday" max="1979-12-31">

    Enter a date after 2000-01-01:
    <input type="date" name="bday" min="2000-01-02">

    Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
    خودتان امتحان کنید »

    خصوصیت multiple در <input>

    خصوصیت multiple یک خصوصیت boolean است.

    این خصوصیت نشان میدهد که مقادیر متعددی را می توان برای عنصر <input> تنظیم نمود. مقادیر را با کاما (,) از هم جدا کنید.

    توجه: این خصوصیت فقط برای انواع ورودی email و file استفاده می شود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    Select images: <input type="file" name="img" multiple>
    خودتان امتحان کنید »

    خصوصیت pattern در <input>

    این خصوصیت الگویی برای بررسی اعتبار یک فیلد ورودی مشخص می کند. این الگو یک یک عبارت منظم (regular expression) است که می توانید در اینترنت، عبارات منظم و نحوه ایجاد آن ها را بیابید.

    توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
    text, search, url, tel, email, password

     نکته: می توان از خصوصیت title برای توضیح درباره الگو، جهت کمک به فهم کاربر استفاده نمود.

    اگر مایلید درباره عبارات منظم در JavaScript بیشتر بدانید به مطلب JS Validation مراجعه کنید. همچنین سایت http://html5pattern.com نیز برای بررسی بیشتر بسیار مناسب است.

    قطعا با عبارت منظم آشنا هستید، در زیر مفهوم برخی از علائم عبارات منظم آورده شده است:

    • ^ : نشانه شروع می باشد. به طور مثال دستور bcd^ به معنی هر عبارتی است که با bcd شروع شود.
    • $ : نشانه پایان می باشد. به طور مثال دستور $bcd به معنی هر عبارتی است که در انتها به bcd ختم شود.
    • + : نشانه تکرار است و اگر پشت عبارتی قرار بگیرید باید حداقل یکبار تکرار شود.
    • * : همانند + می باشد با این تفاوت که آن عبارت می تواند تکراری نداشته باشد.
    • ? : اگر پشت عبارتی قرار بگیرد یعنی اینکه آن عبارت باید صفر یا یک بار تکرار شود.
    • () : برای قسمت بندی عبارات به زیر عبارات و اولویت بندی نیز می باشد.
    • [] : لیستی از کاراکترها که می خواهیم تطبیق دهیم در این دو کروشه قرار می گیرد.
    • [ ^] : لیستی از کاراکترهائی که نمی خواهیم تطبیق داده شوند از این عبارت استفاده می کنیم.
    • d\ : نشانه ارقام می باشد یعنی وقتی این عبارت بیاید منظور یکی از ارقام است.
    • D\ : نشانه هر کاراکتری غیر از رقم می باشد.
    • w\ : نشانه حرف یا عدد می باشد و کاراکترهای خاص نیست و معادل [a-zA-Z_0-9] است.
    • W\ : نشانه کاراکترهای خاص می باشد و عدد یا حروف یا space نیست.
    • s\ : نشانه کاراکتر space می باشد.
    • S\ : نشان هر کاراکتری غیر از space می باشد.
    • {} : مشخص کننده تعداد تکرارا می باشد و اگر داخل آن یک عدد نوشته شود یعنی اینکه عبارت قبل از آن دقیقا باید به تعداد آن عدد تکرارا شود ولی اگر دو عدد نوشته شود عبارت قبل از آن باید تکراری بین آن دو عدد باشد.
    • | : بمعنی یا است. بعنوان مثال a|b یعنی یا a یا b
    • - : بمعنی تا است. بعنوان مثال a-z یعنی از a تا z
    • . : می تواند هر کاراکتری باشد.
    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    یک فیلد متنی که می تواند فقط شامل 3 حرف باشد و بیشتر از آن را نمی پذیرد. (3 حرف و نه اعداد یا کاراکترهای خاص)

    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    خودتان امتحان کنید »

    خصوصیت placeholder در <input>

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

    توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
    text, search, url, tel, email, password

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <input type="text" name="fname" placeholder="First name">
    خودتان امتحان کنید »

    خصوصیت required در <input>

    خصوصیت required یک خصوصیت boolean است.

    این خصوصیت مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.

    توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
    text, search, url, tel, email, password, date pickers, number, checkbox, radio, file

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    Username: <input type="text" name="usrname" required>
    خودتان امتحان کنید »

    خصوصیت step در <input>

    خصوصیت step، فاصله اعداد مجاز برای یک عنصر <input> را مشخص می کند.

    مثال: اگر "3"=step باشد، اعداد مجاز می تواند... 6 ، 3 ، 0 ، 3- ، 6-... باشد.

    نکته:خصوصیت step را می توان همراه با خصوصیت های min  و max برای مشخص کردن یک محدوده ای از اعداد مجاز استفاده نمود.

    توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
    number, range, date, datetime, datetime-local, month, time ,week

    OperaSafariChromeFirefoxInternet Explorer

    مثال (خصوصیت های جدید در HTML5)

    <input type="number" name="points" step="3">
    خودتان امتحان کنید »
    READ MORE

  • ذخیره داده ها بر روی کامپیوتر کاربر

    23 شهریور 1397

    ذخیره داده ها بر روی کامپیوتر کاربر (Client)

    در گذشته این کار توسط کوکی ها انجام می شد. کوکی ها برای تعداد زیاد داده کارایی ندارد، زیرا کوکی ها با هر بار درخواست از سرور انتقال پیدا می کنند، که این باعث کاهش سرعت و عدم کارایی مناسب می شود.

    در HTML5داده ها با هر بار درخواست از سرور ارسال نمی شوند و فقط زمانی که نیاز به آنها داشته باشیم استفاده می شوند. همچنین امکان ذخیره مقدار زیادی اطلاعات بدون تاثیر منفی روی کارایی سایت نیز وجود دارد.

    داده های سایت های مختلف بصورت key/value ذخیره می شوند و هر وب سایت فقط به داده هایی که خودش ذخیره کرده می تواند دسترسی پیدا کند.

    HTML5 از JavaScriptبرای ذخیره سازی و دسترسی به داده ها استفاده می کند.

    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 8+, Firefox, Opera, Chrome, Safari ذخیره داده ها را پشتیبانی می کنند.

    توجه: Internet Explorer 7 و نسخه های قدیمی تر آن، web storage را پشتیبانی نمی کنند.

    localStorage و sessionStorage 

    HTML5 دو شیء جدید برای ذخیره سازی داده ها بر روی کلاینت معرفی کرده است:

    • localStorage: ذخیره داده ها بدون زمان انقضاء
    • sessionStorage: داده های یک جلسه (session) را ذخیره می کند.

    قبل از استفاده از اشیاء بالا، باید بررسی کنید که مرورگر، localStorage و sessionStorage را پشتیبانی می کند یا نه.

    if(typeof(Storage)!=="undefined")
      {
      // Yes! localStorage and sessionStorage support!
      // Some code.....
      }
    else
      {
      // Sorry! No web storage support..
      }

    شیء localStorage

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

    چگونگی ایجاد و دسترسی به loaclStorage

    مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

    localStorage.lastname="Smith";
    document.getElementById("result").innerHTML="Last name: "
    + localStorage.lastname;
    خودتان امتحان کنید »

    توضیح مثال:

    • ابتدا یک شیء loaclStorage با نام "lastname" و مقدار "Smith" ایجاد شده است.
    • در ادامه مقدار "lastname" را بازیابی می کنیم و سپس محتوای عنصر با شناسه "result" را با آن مقداردهی می کنیم.

    توجه: داده ها همیشه بصورت رشته ای ذخیره می شوند. بیاد داشته باشید که در صورت نیاز باید آنرا تبدیل کنید.

    در مثال زیر، تعداد دفعات کلیک کاربر روی یک دکمه را نشان می دهد. در این کد برای اینکه بتوان شمارنده را افزایش داد، مقدار رشته ای به عددی تبدیل شده است:

    مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

    if (localStorage.clickcount)
      {
      localStorage.clickcount=Number(localStorage.clickcount)+1;
      }
    else
      {
      localStorage.clickcount=1;
      }
    document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
    خودتان امتحان کنید »

    شیء sessionStorage

    این شیء اطلاعات یک جلسه را ذخیره می کند. این اطلاعات زمانی که کاربر پنجره مرورگر را می بندد از بین می رود.

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

    مثال (ذخیره داده ها بر روی کامپیوتر کاربر)

    if (sessionStorage.clickcount)
      {
      sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
      }
    else
      {
      sessionStorage.clickcount=1;
      }
    document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
    خودتان امتحان کنید »
    READ MORE

  • ذخیره صفحات بر روی کامپیوتر کاربر

    23 شهریور 1397

    در HTML5 به سادگی می توان یک نسخه offline از برنامه وب را با ایجاد یک فایل Manifest ساخت.

    Application Cache چیست؟

    Html5قابلیت جدیدی را با نام Application Cache به کاربران وب ارائه داده است و امکان ذخیره شدن صفحات مرور شده بر روی کامپیوتر کاربر و مشاهده آنها را در زمان قطع ارتباط با اینترنت (offline) را فراهم می کند.

    Application Cache سه مزیت را در اختیار کاربران قرار می دهد:

    • مرور offline: کاربران می توانند صفحات مورد نظر را حتی در زمان offline، نیز مشاهده نمایند.
    • سرعت بالاتر: صفحات ذخیره شده بر روی کامپیوتر کاربر با سرعت بیشتری لود و فراخوانی می شوند.
    • کاهش حجم اطلاعات ارسالی از سرور: باعث کاهش حجم اطلاعات ارسالی از سرور شده و مرورگر فقط صفحاتی که تغییر کرده اند، را مجددا فراخوانی می کند.

    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 10+, Firefox, Opera, Chrome, Safari متد Application Cache را پشتیبانی می کنند.

    مثالی از یک صفحه HTML با قابلیت Application Cashe

    مثال زیر، یک صفحه وب با قابلیت مرور offline صفحات در کامپیوتر کاربر را نشان می دهد. در این صفحه قابلیت Application Cache فعال است. توجه نمایید که این خاصیت در حالت عادی، فعال نیست.

    مثال (ذخیره صفحات بر روی کامپیوتر کاربر)

    <!DOCTYPE HTML>
    <html manifest="demo.appcache">

    <body>
    The content of the document......
    </body>

    </html>
    خودتان امتحان کنید »

    فعال نمودن قابلیت Application Cache

    برای فعال کردن این قابلیت، در تگ <html>، خاصیت manifest را با نام فایل manifest تنظیم نمایید:

    <!DOCTYPE HTML>
    <html manifest="demo.appcache">
    ...
    </html>

    هر صفحه ای که خاصیت manifest برای آن تنظیم شده باشد، با هر بار مشاهده کاربر در حافظه ذخیره می شود (Cached). اگر خاصیت manifest مشخص نشده باشد، صفحه مورد نظر در حافظه ذخیره نمی شود (مگر اینکه بطور مستقیم صفحه مورد نظر را در فایل manifest مشخص نمایید.)

    فرمت رایج برای ذخیره فایل های manifest، فرمت "appcache." است.

    فایل Manifest

    فایل Manifest یک فایل متنی ساده است و به مرورگر می گوید که چه چیزهایی را باید و نباید Cache نماید.

    این فایل شامل 3 قسمت اصلی است:

    • Cashe ManiFest:فایل های تعیین شده در این قسمت، در هر بار مشاهده کاربر، دانلود و Cache خواهند شد.
    • Network:فایل های تعیین شده در این قسمت نیازمند وجود ارتباط اینترنتی به سرور بوده و هیچگاه ذخیره نمی شوند.
    • Fallback: فایل یا فایل های ذخیره شده در این قسمت، در صورتی که به هر دلیل صفحه مورد نظر کاربر، قابل دسترسی نباشد، فراخوانی می شوند. (به جای فایل اصلی)

    در این قسمت به تشریح خط به خط فایل Manifest می پردازیم:

    CACHE MANIFEST

    در خط اول، ذکر عبارت CACHE MANIFEST الزامی است:

    CACHE MANIFEST
    /theme.css
    /logo.gif
    /main.js

    در فایل Manifest بالا، لیست فایل هایی که باید Cache شوند آورده شده است، یک فایل CSS، یک عکس با فرمت gif. و یک فایل JavaScript

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

    NETWORK

    در قسمت بعدی، عبارت Network قرار داده می شود. فایل هایی که در زیر عبارت Network تعیین شوند هیچگاه توسط مرورگر Cache نخواهند شد:

    NETWORK:
    login.asp

    از علامت ستاره (*) می توانید برای نشان دادن اینکه تمام فایل ها، نیاز به ارتباط اینترنتی دارند استفاده نمایید:

    NETWORK:
    *

    FALLBACK

    در قسمت آخر نیز، عبارت FALLBACK قرار داده می شود. در صورتی که صفحه به هر دلیلی قابل دسترسی و مشاهده نباشد، فایلی که در زیر این عبارت تعیین شود، نشان داده خواهد شد.

    در مثال زیر، فایل "offline.html" در صورتی که ارتباط با اینترنت میسر نباشد، بجای تمام فایل هایی که در پوشه /html/ قرار دارند، بکار خواهد رفت:

    FALLBACK:
    /html/ /offline.html

    Update و به روز رسانی فایل های Cache شده

    فایلی که بر روی کامپیوتر کاربر ذخیره می شود بدون تغییر باقی می ماند. مگر اینکه یکی از حالات زیر اتفاق بیافتد:

    • کاربر اطلاعات Cache شده مرورگر را پاک کند.
    • فایل Manifest تغییر کند.
    • Application Cache بصورت برنامه ریزی شده تغییر کند.

    مثال - فرم نهایی فایل MANIFEST

    CACHE MANIFEST
    # 2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js

    NETWORK:
    login.asp

    FALLBACK:
    /html/ /offline.html

    توجه:خطوطی که با کاراکتر "#" شروع می شوند، توضیحات اند (comments)، اما علاوه بر این، می توان از آن برای اهداف دیگری نیز استفاده نمود. مرورگر پس از ذخیره صفحه بر روی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد، مگر اینکه فایل Manifest آنرا Update کنید. یکی از راه های دوباره Cache کردن فایل ها توسط مرورگر، این است که تاریخ و نسخه مشخص شده در خط Comment را تغییر دهید.

    نکاتی درباره Application Cache

    در استفاده از این قابلیت و اینکه چه فایل هایی را بر روی کامپیوتر کاربران Cache می کنید، دقت نمایید.

    مرورگر پس از ذخیره صفحه برروی کامپیوتر کاربر، همواره صفحه ذخیره شده را نمایش داده و اگر فایل اصلی تغییر کند به کاربر اطلاع نمی دهد. مگر اینکه فایل Manifest آنرا Update کنید.

    همچنین مرورگرهای مختلف محدودیت مشخصی در حجم فایل های ذخیره شده لحاظ می کنند (معمولا مرورگرها، حداکثر 5 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)

    READ MORE

  • سیستم موقعیت یاب جهانی HTML5

    23 شهریور 1397

    سیستم موقعیت یاب HTML5 برای پیدا کردن موقعیت یک کاربر استفاده می شود.

    سیستم موقعیت یاب جهانی HTMl5

    بوسیله سیستم موقعیت یاب جهانی Html5 می توانید مختصات و موقعیت جغرافیایی یک کاربر را پیدا کرده و به وی نمایش دهید. این سیستم از اطلاات ماهواره ها و ISP ای که به آن متصل هستید، برای اطلاع از موقعیت شما استفاده می کند.

    از آنجایی که موقعیت یابی می تواند حریم خصوصی کاربر را تحت تاثیر قرار دهد، موقعیت وی تا زمانی که خودش تایید نکند، در اختیار برنامه قرار نخواهد گرفت.

    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari سیستم موقعیت یاب HTML5 را پشتیبانی می کنند.

    توجه: سیستم موقعیت یاب HTML5در دستگاه هایی که دارای GPS هستند (مانند iPhone) دقیق تر کار می کند.

    اطلاع از موقعیت کنونی کاربر

    از متد ()getCurrentPosition برای اطلاع از موقعیت کنونی کاربر استفاده می شود.

    مثال زیر یک کد ساده موقعیت یابی را نشان می دهد که بوسیله آن عرض و طول جغرافیایی مکان کاربر را بر روی صفحه، نمایش می دهد:

    مثال (سیستم موقعیت یاب جهانی HTML5)

    <script>
    var x=document.getElementById("demo");
    function getLocation()
    {
    if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
    x.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
    }
    </script>
    خودتان امتحان کنید »

    توضیح مثال:

    • در مرحله اول چک شده که آیا مرورگر از سیستم موقعیت یاب در HTML پشتیبانی می کند یا خیر و در صورت لزوم کد های مناسب اجرا می شود.
    • اگر مرورگر از این سیستم پشتیبانی کند، متد ()getCurrentPosition اجرا شده و در غیر این صورت یک پیام هشدار مبنی بر عدم پشتیبانی مرورگر صادر می شود.
    • اگر متد ()getCurrentPosition با موفقیت اجرا شود، مختصات نقطه قرارگیری کاربر را بوسیله یک پارامتر به تابع ()ShowPosition برمی گرداند.
    • تابع ()ShowPosition طول و عرض جغرافیایی کاربر را در خروجی نمایش می دهد.

    مثال فوق کد ساده یک عملیات موقعیت یابی بدون امکان خطا یابی بود و در بخش بعد نحوه خطا یابی در این سیستم را آموزش می دهیم.

    مدیریت خطاها و عدم جوابگویی سیستم

    ممکن است در فرایند موقعیت یابی، خطا هایی رخ دهد. از پارامتر دوم متد ()getCurrentPosition می توان برای مدیریت خطا های احتمالی استفاده کرد.

    این پارامتر یک تابع را تعیین می کند تا در صورت بروز خطا، اجرا شده و پیام لازم را به کاربر نمایش دهد:

    مثال (سیستم موقعیت یاب جهانی HTML5)

    function showError(error)
    {
    switch(error.code)
    {
    case error.PERMISSION_DENIED:
    x.innerHTML="User denied the request for Geolocation."
    break;
    case error.POSITION_UNAVAILABLE:
    x.innerHTML="Location information is unavailable."
    break;
    case error.TIMEOUT:
    x.innerHTML="The request to get user location timed out."
    break;
    case error.UNKNOWN_ERROR:
    x.innerHTML="An unknown error occurred."
    break;
    }
    }
    خودتان امتحان کنید »

    توضیح کد:

    • PERMISSION_DENIED: در این حالت کاربر اجازه دسترسی به موقعیت یابی را نداده است.
    • POSITION_UNAVAILABLE: در این حالت یافتن موقعیت صحیح کاربر به علت مشکلات فنی ممکن نیست.
    • TIMEOUT: در این حالت مدت زمان لازم برای اجرای درخواست تمام شده است.
    • UNKNOWN_ERROR: خطای ایجاد شده نا مفهوم است.

    نمایش موقعیت کاربر بر روی یک نقشه

    برای نمایش موقعیت کاربر بر روی یک نقشه، به یک سرویس دهنده مانند Google Maps نیاز دارید:

    مثال (سیستم موقعیت یاب جهانی HTML5)

    function showPosition(position)
    {
    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
    }
    خودتان امتحان کنید »

    در مثال بالا، از طول و عرض جغرافیایی برای نمایش موقعیت کاربر در Google Maps استفاده شده است. (از یک عکس استاتیک استفاده شده است)

    Google Map Script
    در این مثال، چگونگی نمایش یک نقشه تعاملی تر با ابزارهای zoom ،drag و marker نشان داده شده است.

    داده هایی که متد ()getCurrentPosition برمی گرداند

    اگر متد ()getCurrentPosition با موفقیت اجرا شود، یک شیء برمی گرداند. خصوصیت های latitude ,longitude و accuracy همیشه برگردانده می شوند. در جدول زیر دیگر خصوصیت های این شیء آورده شده است:

    خصوصیت توضیحات
    coords.latitude

    عرض جغرافیایی
    coords.longitude

    طول جغرافیایی
    coords.accuracy

    دقت و درستی مکان کاربر
    coords.altitude The altitude in meters above the mean sea level
    coords.altitudeAccuracy The altitude accuracy of position
    coords.heading The heading as degrees clockwise from North
    coords.speed The speed in meters per second
    timestamp The date/time of the response

    متدهای دیگر شیء geolocation

    متد ()watchPosition: مکان فعلی کاربر را برمی گرداند و در صورت جابه جا شدن کاربر، داده را تازه سازی می کند. (مانند دستگاه GPS در یک خودرو)

    متد ()clearWatch: باعث توقف متد ()watchPosition می شود.

    در مثال زیر، متد ()watchPosition، نشان داده شده است. برای تست این مثال، به یک دستگاه GPS دقیق نیاز دارید: (مانند iPhone)

    مثال (سیستم موقعیت یاب جهانی HTML5)

    <script>
    var x=document.getElementById("demo");
    function getLocation()
    {
    if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
    else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
    x.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
    }
    </script>
    خودتان امتحان کنید »
    READ MORE

  • شیء Attribute

    23 شهریور 1397

    HTML DOM Nodes

    در مدل HTML DOM، هر چیزی یک گره است:

    • سند خودش به تنهایی یک گره سند، می باشد.
    • تمام عناصر HTML، گره های عنصر هستند.
    • تمام خصوصیت های HTML گره های خصوصیت هستند.
    • متن های درون عناصر HTML گره هستند.
    • کامنت ها نیز، گره کامنت هستند.

    The Attr Object

    در HTML DOM، اشیاء Attr، یک خصوصیت HTMLرا مشخص می کنند.

    یک خصوصیت HTML همواره به یک عنصر HTML تعلق دارد.

    The NamedNodeMap Object

    در مدل HTML DOM، شیء NamedNodeMap یک مجموعه ی نامنظم از گره خصوصیت عنصرها را مشخص می کند.

    گره های درون NamedNodeMap می توانند به وسیله ی نام یا اندیس، مورد دسترسی قرار بگیرند.

    پشتیبانی مرورگرها

    Object          
    Attr بله بله بله بله بله
    NamedNodeMap بله بله بله بله بله

    شیء Attr و شیءNamedNodeMap در تمام مرورگرهای بزرگ پشتیبانی می شوند.

    خصوصیت ها و متدها

    Property / متد توضیحات
    attr.isId

    در صورتی که خصوصیت مورد نظر از نوع ID باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
    attr.name

    نام یک خصوصیت را برمی گرداند.
    attr.value

    مقدار خصوصیت مورد نظر را ست کرده یا برمی گرداند.
    attr.specified

    در صورتی که خصوصیت مورد نظر، مشخص شده باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
       
    nodemap.getNamedItem()

    یک گره خصوصیت، مشخص شده را از شیء NamedNodeMap برمی گرداند.
    nodemap.item()

    گره خصوصیت را با یک اندیس مشخص  در یک شیء NamedNodeMap برمی گرداند.
    nodemap.length

    تعداد گره های خصوصیت را در یک شیء NamedNodeMap برمی گرداند.
    nodemap.removeNamedItem()

    یک گره خصوصیت مشخص شده را حذف می کند.
    nodemap.setNamedItem()

    گره خصوصیت مشخص شده را ست می کند(به وسیله ی نام).

    DOM 4 اخطار !!!

    در هسته ی W3C DOM، شیء Attr، تمام خصوصیت ها و متد ها را از شیء Node به ارث می برد.

    در DOM4، شیء Attr مانند قبل از Node چیزی را به ارث نمی برد.

     برای اینکه کیفیت کدنویسی در آینده بهتر شود، شما باید از استفاده از خصوصیات شیء node و متدهای اشیاء attribute خود داری کنید.

     Property / متد Reason for avoiding
    attr.appendChild()

    خصوصیت ها گره های فرزند ندارند.
    attr.attributes

    خصوصیت ها، attribute ندارند.
    attr.baseURI

    به جای آن از دستور document.baseURI استفاده کنید.
    attr.childNodes

    خصوصیت ها گره های فرزند ندارند.
    attr.cloneNode()

    به جای آن می توانید attr.value را گرفته یا ست کنید.
    attr.firstChild

    خصوصیت ها گره های فرزند ندارند.
    attr.hasAttributes()

    خصوصیت ها، attribute ندارند.
    attr.hasChildNodes

    خصوصیت ها، گره های فرزند ندارند.
    attr.insertBefore()

    خصوصیت ها گره های فرزند ندارند.
    attr.isEqualNode()

    هیچ مفهومی ندارد.
    attr.isSameNode()

    هیچ مفهومی ندارد.
    attr.isSupported()

    همواره true می باشد.
    attr.lastChild

    خصوصیت ها گره های فرزند ندارند.
    attr.nextSibling

    خصوصیت ها، ویژگی sibling(عناصر هم نیا) ندارند.
    attr.nodeName

    به جای آن از attr.name استفاده کنید.
    attr.nodeType

    این همواره 2 می باشد(ATTRIBUTE_NODE).
    attr.nodeValue

    به جای آن از attr.value استفاده کنید.
    attr.normalize()

    خصوصیت ها نمی توانند normalized شوند.
    attr.ownerDocument

    این همواره سند HTML شما می باشد.
    attr.ownerElement

    این، عنصر html ی است که شما از آن برای دسترسی به خصوصیت استفاده کرده اید.
    attr.parentNode

    این، عنصر html ی است که شما از آن برای دسترسی به خصوصیت استفاده کرده اید.
    attr.previousSibling

    خصوصیت ها، ویژگی sibling(عناصر هم نیا) ندارند.
    attr.removeChild

    خصوصیت ها، گره های فرزند ندارند.
    attr.replaceChild

    خصوصیت ها گره های فرزند ندارند.
    attr.textContent

    به جای آن از attr.value استفاده کنید.

     

    READ MORE

  • شیء Document

    23 شهریور 1397

    HTML DOM Nodes

    در مدل HTML DOM هر چیزی یک گره(Node) است:

    • سند خودش به تنهایی یک گره است.
    • تمام عناصر HTML گره هستند.
    • تمام خصوصیت های اچ تی ام ال، گره هستند.
    • متن های درون عناصر اچ تی ام ال، گره متنی هستند.
    • کامنت ها نیز گره comment هستند.

    کلیه ی توابع و خصوصیت های شیء Document در جاوا اسکریپت

    هنگامی که یک سند HTMLدر یک مرورگر وب بارگذاری می شود، تبدیل به یک شیء سند(document object) می شود.

    شیء سند(document node) در واقع گره ریشه ی سند HTML و تمام گره های دیگر است:

    گره های عنصر، گره های متن، گره های صفت، و گره های کامنت.

    شیء سند، خصوصیات و متد ها را برای دسترسی به تمام اشیاء گره، از داخل جاوااسکریپت، ارائه می دهد.

    نکته: سند(document) یک قسمت از شیء window است و می تواند توسط دستور window.document مورد دسترسی قرار بگیرد.

    پشتیبانی مرورگرها

    Object          
    Document بله بله بله بله بله

    از جاوااسکریپت در تمام مرورگرهای بزرگ، پشتیبانی می شود.

    کلیه توابع و خصوصیت های شیء Document در JavaScript Properties and Methods

    خصوصیت ها و متدهای پیش رو می توانند بر روی اسناد HTML استفاده شوند:

    Property / متد توضیحات
    document.addEventListener()

    این متد، یک شنونده ی رویداد را به document اضافه می کند.
    document.adoptNode()

    گرفتن یک node از یک document دیگر.
    document.anchors

     این خصوصیت، یک مجموعه از عناصر <a> را در صفحه برمی گرداند. این عناصر دارای خصوصیت name هستند.
    document.applets

    این خصوصیت، یک مجموعه از تمام عناصر <applet> را که در صفحه قرار دارند، برمی گرداند.
    document.baseURI

    این خصوصیت، URI پایه و مطلق یک صفحه را برمی گرداند.
    document.body

    این خصوصیت، عنصر <body> از صفحه را ست کرده یا برمی گرداند.
    document.close()

    این متد، جریان خروجی که قبلا توسط document.open باز شده است را می بندد.
    document.cookie

    این خصوصیت، تمام نام و مقدار کوکی ها را در سند برمی گرداند.
    document.createAttribute()

    این متد، یک گره attribute را ایجاد می کند.
    document.createComment()

    این متد، یک گره comment را با یک متن مشخص، ایجاد می کند.
    document.createDocumentFragment()

    این متد، یک گره خالی DocumentFragment را ایجاد می کند.
    document.createElement()

    این متد، یک گره Element را ایجاد می کند.
    document.createTextNode()

    این متد، یک گره Text را ایجاد می کند.
    document.doctype

    این خصوصیت، تعریف نوع سند ، که با سند(document) همراه شده است را برمی گرداند.
    document.documentElement

    این خصوصیت، عنصر Document را از سند برمی گرداند(همان عنصر <html>).
    document.documentMode

    این خصوصیت، حالتی که توسط مرورگر برای ارائه دادن سند استفاده شده است را برمی گرداند.
    document.documentURI

    این خصوصیت، مکان سند را ست کرده یا برمی گرداند.
    document.domain

    این خصوصیت، نام دامنه ای از سرور،که سند را بارگذاری کرده است، برمی گرداند.
    document.domConfig

    منسوخ شده. پیکربندی DOM سند را برمی گرداند.
    document.embeds

    این خصوصیت، یک مجموعه از  تمام عناصر <embed>  از سند را برمی گرداند.
    document.forms

    این خصوصیت، یک مجموعه از تمام عناصر <form> را در سند برمی گرداند.
    document.getElementById()

    این متد، یک عنصر را با یک خصوصیت ID ، با یک مقدار مشخص، را برمی گرداند.
    document.getElementsByClassName()

    این متد، یک لیست از تمام عنصر ها، با یک نام کلاس مشخص را برمی گرداند.
    document.getElementsByName()

    این متد، یک لیست که در بر دارنده ی تمام عناصر با یک نام مشخص است را برمی گرداند.
    document.getElementsByTagName()

    این متد، یک لیست از تمام عنصر ها که دارای یک نام تگ مشخص هستند را برمی گرداند.
    document.head

    این خصوصیت، عنصر <head>  از سند را برمی گرداند.
    document.images

    این خصوصیت، یک مجموعه از تمام عناصر <img> در سند را برمی گرداند.
    document.implementation

    این خصوصیت، شیء DOMImplementation که این سند را بکار می برد، برمی گرداند.
    document.importNode()

    این متد، یک گره را از یک سند دیگر وارد می کند.
    document.inputEncoding

     این خصوصیت، کاراکتر رمزگذاری شده برای سند را برمی گرداند.
    document.lastModified

     این خصوصیت، تاریخ و زمان آخرین دفعه ای که سند تغییر کرده (اصلاح شده) است را برمی گرداند.
    document.links

     یک مجموعه از تمام عناصر <a> و  <area> در سند، که دارای یک خصوصیت href می باشند را برمی گرداند.
    document.normalize()

     این متد، گره های خالی را حذف کرده و گره های مجاور هم را با یکدیگر الحاق می کند.
    document.normalizeDocument()

     این متد، گره های متنی خالی را حذف کرده و گره های مجاور را به یکدیگر الحاق می کند.
    document.open()

     این متد، یک جریان خروجی را برای به دست آوردن خروجی از document.write ، باز می کند.
    document.querySelector()

     این متد، اولین عنصری که با یک سلکتور css مشخص در سند تطابق یابد را برمی گرداند.
    document.querySelectorAll()

     این متد، یک NodeList ایستا را که شامل تمام عناصری است که با یک سلکتور css مشخص در سند تطابق دارند را برمی گرداند.
    document.readyState

     این خصوصیت، وضعیت(لود شدن) سند را برمی گرداند.
    document.referrer

     این خصوصیت url سندی که سند جاری را بارگذاری کرده است،برمی گرداند.
    document.removeEventListener()

     یک شنونده ی رویداد را از سند حذف می کند(که توسط متد addEventListener ایجاد شده است).
    document.renameNode()

    این متد یک گره مشخص شده را تغییر نام می دهد.
    document.scripts

     یک مجموعه از عناصر <script> در سند را برمی گرداند.
    document.strictErrorChecking

     این خصوصیت، مشخص می کند که آیا error-checking اجرا شده است یا نه.
    document.title

     این خصوصیت، عنوان سند را ست کرده یا برمی گرداند.
    document.URL

     این خصوصیت، url کامل سند HTML را برمی گرداند.
    document.write()

     این متد، عبارت های HTML یا کدهای جاوااسکریپت را در سند چاپ می کند.
    document.writeln()

     این متد، شبیه متد ()write می باشد اما یک کاراکتر newline را بعد از هر عبارت، اضافه می کند.

    اخطار!!!

    در هسته ی W3C DOM شیء Document تمام خصوصیت ها و متدها را از شیء گره به ارث می برد.

    بسیاری از این خصوصیت ها و متدهای به کار رفته در سندها، هیچ معنی ندارند.

    از استفاده از این خصوصیت های شیء گره و متدها در اشیاء سند HTML اجتناب کنید.

     Property / متد Reason for avoiding
    document.attributes

    سند ها خصوصیت attribute را ندارند.
    document.hasAttributes()

    سندها خصوصیت attribute را ندارند.
    document.nextSibling

    سندها خصوصیت sibling ندارند.
    document.nodeName

    این همواره document# است.
     document.nodeType

    این همواره 9(DOCUMENT_NODE)است.
    document.nodeValue

    سند ها node value ندارند.
    document.ownerDocument

    سند ها owner document ندارند.
    document.ownerElement

    سند ها owner element ندارند.
    document.parentNode

    سند ها، parent Node  ندارند.
    document.previousSibling

    سند ها sibling ندارند.
    document.textContent

    سند ها text content ندارند.
    READ MORE

  • شیء Element

    23 شهریور 1397

    HTML DOM Nodes

    در مدل HTML DOM، هر چیزی یک گره است:

    • سند خودش به تنهایی یک گره است.
    • تمام عناصر HTML گره هستند.
    • تمام خصوصیت های HTML، گره های خصوصیت هستند.
    • متن های درون عناصر HTML گره متنی هستند.
    • کامنت ها گره کامنت هستند.

     کلیه توابع و خصوصیت های شیء Element در JavaScript

    در HTML DOM، شیء Element، یک عنصر HTML  را مشخص می کند.

    اشیاء Element(عناصر)  می توانند گره های فرزند، از نوع گره های عنصر، یا گره های متنی، یا گره های کامنت، را داشته باشند.

    یک شیء NodeList، لیستی از گره ها را مشخص می کند، مانند یک مجموعه عناصر HTML از گره های فرزند.

    عناصر می توانند دارای خصوصیت ها باشند. خصوصیت هادر واقع گره های خصوصیت هستند.

    پشتیبانی مرورگرها

    Object          
    Element بله بله بله بله بله
    NodeList بله بله بله بله بله

    شیء Element و شیء Nodelist در تمام مرورگرهای بزرگ پشتیبانی می شوند. 

    Properties and Methods

    خصوصیت ها و متد های پیش رو می توانند بر روی تمام عناصر اچ تی ام ال، استفاده شوند.

    Property / متد توضیحات
    element.accessKey

    این ویژگی، خصوصیت accesskey از عنصر را ست کرده یا برمی گرداند.
    element.addEventListener()

    این متد، یک شنونده ی رویداد را به یک عنصر مشخص شده متصل می کند.
    element.appendChild()

    یک گره فرزند جدید را بعنوان آخرین فرزند گره، به یک عنصر اضافه می کند.
    element.attributes

    از خصوصیت های یک عنصر، NamedNodeMap را برمی گرداند.
    element.blur()

    این متد، فوکس را از یک عنصر حذف می کند.
    element.childElementCount

    این خصوصیت، تعداد عناصر فرزند یک عنصر را برمی گرداند.
    element.childNodes

    یک مجموعه از گره های فرزند یک عنصر را برمی گرداند(شامل گره های متن و کامنت نیز می شود).
    element.children

    یک مجموعه از عنصر های فرزند یک عنصر را برمی گرداند(شامل گره های متن و کامنت نیز می شود).
    element.classList

    برگرداندن نام کلاس(های) یک عنصر.
    element.className

     مقدار خصوصیت class از یک عنصر را ست کرده یا برمی گرداند.
    element.click()

    این متد، کلیک شدن موس را بر روی یک عنصر شبیه سازی می کند.
    element.clientHeight

    این خصوصیت، ارتفاع یک عنصر را که شامل padding نیز می باشد، برمی گرداند.
    element.clientLeft

    این خصوصیت، عرض border سمت چپ از یک عنصر را برمی گرداند.
    element.clientTop

    این خصوصیت، عرض border بالایی از یک عنصر را برمی گرداند.
    element.clientWidth

    این خصوصیت، عرض یک عنصر را که شامل padding نیز می باشد، برمی گرداند.
    element.cloneNode() شبیه سازی کردن یک عنصر.
    element.compareDocumentPosition()

    این متد،مکان دو عنصر را در سند مورد مقایسه قرار می دهد.
    element.contains()

    در صورتی که یک گره از نسل یک گره دیگر باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
    element.contentEditable

    ست کرده یا برمی گرداند که محتوای یک عنصر قابل ویرایش هست یا نه.
    element.dir

    این خصوصیت، مقدار خصوصیت dir از یک عنصر را ست کرده یا برمی گرداند.
    element.firstChild

    این خصوصیت، اولین گره فرزند یک عنصر را برمی گرداند.
    element.firstElementChild

    این خصوصیت، اولین عنصر فرزند یک عنصر را برمی گرداند.
    element.focus()

    این متد، فوکس را به یک عنصر می دهد.
    element.getAttribute()

    مقدار خصوصیت مشخص شده را از یک گره عنصر برمی گرداند.
    element.getAttributeNode()

    این متد، گره خصوصیت مشخص شده را برمی گرداند.
    element.getElementsByClassName()

    یک مجموعه از تمام عناصر فرزند با یک نام کلاس مشخص را برمی گرداند.
    element.getElementsByTagName()

    یک مجموعه از تمام عناصر فرزند با یک تگ مشخص را برمی گرداند.
    element.getFeature()

    یک شیء را برمی گرداند که API های یک ویژگی مشخص شده را اجرا می کند.
    element.hasAttribute()

    در صورتی که یک عنصر یک خصوصیت مشخص را دارا باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
    element.hasAttributes()

    درصورتی که یک عنصر هر کدام از خصوصیات را دارا باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
    element.hasChildNodes()

    در صورتی که یک عنصر، هرکدام از گره های فرزند را دارا باشد،true را برمی گرداندو در غیر این صورت false برگردانده خواهد شد.
    element.id

    این خصوصیت، مقدار خصوصیت id از یک عنصر را ست کرده یا برمی گرداند.
    element.innerHTML

    این خصوصیت، محتوای یک عنصر را ست کرده یا برمی گرداند.
    element.insertBefore()

    اضافه کردن یک گره فرزند، قبل از یک گره فرزند مشخص و موجود.
    element.isContentEditable

    برگرداندن true در صورتی که محتوای یک عنصر قابل ویراِش باشد، و در غیر این صورت false را برمی گرداند.
    element.isDefaultNamespace()

    برگرداندن true در صورتی که یک namespaceURI به صورت پیش فرض باشد، در غیر این صورت false برگردانده می شود. 
    element.isEqualNode()

    این متد، بررسی می کند که آیا دو عنصر برابر هستند یا نه.
    element.isSameNode()

    بررسی اینکه آیا در حقیقت دو گره یکسان هستند یا نه.
    element.isSupported()

    در صورتی که یک عنصر، یک ویژگی مشخص شده را پشتیبانی کند، true را برمی گرداند.
    element.lang

    مقدار خصوصیت lang از یک عنصر را ست کرده یا برمی گرداند.
    element.lastChild

    این خصوصیت، آخرین گره فرزند یک عنصر را برمی گرداند.
    element.lastElementChild

    این خصوصیت، آخرین عنصر فرزند از یک عنصر را برمی گرداند.
    element.namespaceURI

    این خصوصیت، فضای نام URI یک عنصر را برمی گرداند.
    element.nextSibling عنصر بعدی که در مرحله ی مشابه درخت گره، قرار دارد را برمی گرداند.
    element.nextElementSibling

    عنصر بعدی که در مرحله ی مشابه درخت گره، قرار دارد را برمی گرداند.
    element.nodeName

    این خصوصیت، نام یک گره را برمی گرداند.
    element.nodeType

    این خصوصیت، نوع گره یک گره، را برمی گرداند.
    element.nodeValue

    این خصوصیت، مقدار یک گره را ست کرده یا برمی گرداند.
    element.normalize()

    این متد در یک عنصر، گره های متنی مجاور را با یکدیگر الحاق کرده و گره های خالی متنی را حذف می کند.
    element.offsetHeight

    این خصوصیت، ارتفاع یک عنصر را، که شامل padding و border و scrollbar می شود را برمی گرداند.
    element.offsetWidth

    این خصوصیت، عرض یک عنصر را که شامل padding و border و scrollbar نیز می شود، را برمی گرداند.
    element.offsetLeft Returns the horizontal offset position of an element
    element.offsetParent Returns the offset container of an element
    element.offsetTop Returns the vertical offset position of an element
    element.ownerDocument

    عنصر ریشه را(شیء سند)برای یک عنصر برمی گرداند.
    element.parentNode

    این خصوصیت، گره والد یک عنصر را برمی گرداند.
    element.parentElement

    این خصوصیت، گره عنصر والد از یک عنصر را برمی گرداند.
    element.previousSibling

    گره قبلی را در مرحله ی درخت گره مشابه برمی گرداند.
    element.previousElementSibling

    عنصر قبلی را در مرحله ی درخت گره مشابه برمی گرداند.
    element.querySelector()

    اولین عنصر فرزندی که با یک سلکتور(های) css مشخص از یک عنصر، تطابق دارد را برمی گرداند.
    element.querySelectorAll()

    تمام عناصر فرزند که با یک سلکتور(های) css مشخص از یک عنصر، تطابق دارند را برمی گرداند.
    element.removeAttribute()

    یک خصوصیت مشخص شده را از یک عنصر، حذف می کند.
    element.removeAttributeNode()

    یک گره خصوصیت مشخص شده را حذف کرده و گره حذف شده را برمی گرداند.
    element.removeChild()

    این متد، یک گره فرزند از یک عنصر را حذف می کند.
    element.replaceChild()

    این متد، یک گره فرزند را در یک عنصر جایگزین می کند.
    element.removeEventListener()

    این متد، یک شنونده ی رویداد را که به وسیله ی متد ()addEventListener ایجاد شده است، حذف می کند.
    element.scrollHeight

    ارتفاع سراسری یک عنصر را که شامل padding نیز می باشد، برمی گرداند.
    element.scrollLeft

    این خصوصیت، تعداد پیکسل هایی که محتوای یک عنصر، به صورت افقی، اسکرول شده است را، ست کرده یا برمی گرداند.
    element.scrollTop

    این خصوصیت، تعداد پیکسل هایی که محتوای یک عنصر، به صورت عمودی، اسکرول شده است را، ست کرده یا برمی گرداند.
    element.scrollWidth

    عرض کلی یک عنصر را، که شامل padding نیز می باشد، برمی گرداند.
    element.setAttribute()

    این متد، خصوصیت مشخص شده را به یک مقدار مشخص ست کرده یا تغییر می دهد.
    element.setAttributeNode()

    این متد، گره خصوصیت مشخص شده را ست کرده یا تغییر می دهد.
    element.style

    این خصوصیت، مقدار خصوصیت استایل یک عنصر را ست کرده یا برمی گرداند.
    element.tabIndex

    این خصوصیت، مقدار خصوصیت tabindex از یک عنصر را ست کرده یا برمی گرداند.
    element.tagName

    این خصوصیت، نام تگ یک عنصر را برمی گرداند.
    element.textContent

    این خصوصیت، محتوای متنی یک گره و فرزندان آن را ست کرده یا برمی گرداند.
    element.title

    این خصوصیت، مقدار خصوصیت عنوان یک عنصر را ست کرده یا برمی گرداند.
    element.toString()

    این متد، یک عنصر را تبدیل به یک رشته می کند.
    nodelist.item()

    این متد، به وسیله ی یک اندیس مشخص، گره مورد نظر را از یک NodeList برمی گرداند.
    nodelist.length

    این خصوصیت، تعداد گره های یک NodeList را برمی گرداند.
    READ MORE

  • صدا و تصویر در HTML

    18 شهریور 1397

    مولتی مدیا در وب شامل صدا، موزیک، ویدئو و انیمیشن هاست.

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

    مولتی مدیا چیست؟

    Wiki

    مولتی مدیا فرمت های زیادی را شامل می شود و تقریبا هر چیزی که می شنوید یا می بینید مانند متن، عکس، موزیک، صدا، ویدئوها، موارد ضبط شده، فیلم ها، انیمیشن ها و... را شامل می شود.

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

    در این خودآموز در مورد فرمت های مختلف مولتی مدیا و چگونگی کار با آن ها در صفحات وب چیزهایی خواهید آموخت.

    پشتیبانی مرورگرها از مولتی مدیا

    Wiki

    مرورگرهای اولیه، تنها از متن پشتیبانی می کردند و حتی این پشتیبانی به یک فونت با یک رنگ محدود می شد. سپس مرورگرهایی آمدند که از فونت ها و رنگ های مختلف و سبک دهی ها به متون پشتیبانی می کردند و پشتیبانی از تصاویر نیز به آنها اضافه شد.

    صدا، انیمیشن و ویدئو به روش های مختلف، توسط مرورگرهای متفاوت پشتیبانی می شوند. بعضی عناصر به صورت درون برنامه ای (inline) و بعضی نیاز به نرم افزارهای کمکی (plug-ins) بیشتری دارند. (نرم افزارهایی که باید روی سیستم عامل نصب شوند)

    در مورد نرم افزارهای جانبی (plug-ins) در فصل های بعد، بیشتر خواهید آموخت.

    فرمت های مولتی مدیا

    Wiki

    عناصر مولتی مدیا (مثل ویدئو و صدا) در فایل های مدیا ذخیره می شوند.

    راه معمول برای اینکه نوع مدیا را تشخیص دهیم نگاه کردن به پسوند آن فایل است. هنگامی که یک مرورگر با پسوند های htm. یا html. برخورد می کند فرض می کند که یک صفحه HTML است. پسوند xml. دلالت بر فایل XML دارد و پسوند css. دلالت بر یک style sheet دارد. عکس ها نیز با پسوند jpg. و png. و یا gif. شناخته می شوند.

    عناصر مولتی مدیا نیز فرمت های مربوط به خود با پسوند های مختلفی مثل swf، .wmv، .mp3. و mp4. دارند. 

    فرمت های ویدئویی

    Wiki

    Videoformats         


    فرمت MP4 فرمت جدیدی برای ویدئوهای اینترنتی است. این فرمت توسط YouTube، Flash players و HTML5 پشتیبانی می شود.
    فرمت پسوند توضیحات
    AVI .avi

    فرمت AVI یا (Audio Video Interleave) توسط ماکروسافت ارائه شده و روی تمام کامپیوترهایی که دارای سیستم عامل ویندوز باشد، توسط مرورگر اجرا می شود. AVI یک فرمت رایج در اینترنت است اما در کامپیوترهایی که ویندوز روی آن ها نصب نیست همیشه اجرا نمی شود.
    WMV .wmv

    فرمت WMV یا (Windows Media) توسط ماکروسافت ارائه شده و در اینترنت رایج است اما در کامپیوترهایی که ویندوز روی آن ها نیست بدون نصب یک کامپوننت اضافی(رایگان) نمایش داده نمی شوند. بعضی از فیلم های WMV قدیمی نمی توانند به هیچ عنوان در کامپیوترهای غیر ویندوزی نمایش داده شوند زیرا هیچ نمایش دهنده ای برای آن وجود ندارد.
    MPEG .mpg
    .mpeg

    فرمت MPEG یا (Moving Pictures Expert Group) فرمت رایجی در اینترنت می باشد. این فرمت cross-platform می باشد و توسط تمامی مرورگرهای وب پشتیبانی می شود.
    QuickTime .mov

    فرمت QuickTime توسط Apple ارائه شد. QuickTime فرمت رایجی در اینترنت است اما فیلم های QuickTime نمی توانند بدون نصب یک کامپوننت اضافی(رایگان) در کامپیوترهای ویندوزی نمایش داده شوند.
    RealVideo .rm
    .ram

    فرمت RealVideo توسط شرکت Real Media در اینترنت ارائه شد. به خاطر اولویت در پهنای باند کم، کیفیت این نوع فایل ها، اغلب کاهش داده می شود.
    Flash .swf
    .flv

    فرمت Flash یا (Shockwave) توسط Macromedia ارائه شد. فرمت Shockwave نیاز به یک کامپوننت اضافه، برای نمایش دارد. اما این کامپوننت به صورت از قبل نصب شده با مرورگرهایی مثل Firefox و Internet Explorer وجود دارد.
    Mpeg-4 .mp4

    Mpeg-4 فرمت جدیدی در اینترنت است (with H.264 video compression). در حقیقت، YouTube استفاده از MP4 را توصیه می کند. YouTube چندین فرمت را می پذیرد و آن ها را برای انتشار تبدیل به flv. یا mp4. می کند. بیشتر نشر دهنده های online ویدئو در حال حرکت به سمت MP4 به عنوان فرمت به اشتراک گذاری در اینترنت هم در Flash player و هم در HTML5 هستند. 

    فرمت های صوتی

    Wiki

    فرمت پسوند توضیحات
    MIDI .mid
    .midi

    MIDI که مخفف (Musical Instrument Digital Interface) است فرمتی برای وسایل الکترونیکی موزیک مثل کارت های صوتی کامپیوتری و synthesizerها (ترکیب کننده ها) می باشد. فایل های MIDI شامل صدا نیست و فقط شامل دستورالعمل اجرای نوت ها می باشد.
    برای اجرای یک فایل MIDI، کلیک کنید.

    به دلیل اینکه فرمت MIDI تنها شامل نوت ها می باشد بنابراین بسیار کم حجم هستند. مثال بالا تنها 23 کیلو بایت حجم دارد اما حدود 5 دقیقه می باشد. MIDI توسط سیستم های نرم افزاری زیادی پشتیبانی می شود. MIDI توسط تمام مرورگرهای اینترنت پشتیبانی می شود.
    RealAudio .rm
    .ram

    فرمت RealAudio توسط شرکت Real Media در اینترنت گسترش یافت. این فرمت همچنین ویدئو را نیز پشتیبانی می کند. این فرمت اجازه می دهد که فایل های صوتی با پهنای باند کم منتقل شود. به خاطر اولویت در پهنای باند کم، کیفیت این نوع فایل ها، اغلب کاهش داده می شود
    Wave .wav

    فرمت WMA یا (waveform) توسط IBM و Microsoft ارائه شد و روی تمام کامپیوترهایی که دارای سیستم عامل ویندوز باشد، توسط مرورگر اجرا می شود. (بیشتر مرورگرهای معروف بجز Google Chrome آنها را اجرا می کنند)
    WMA .wma

    فرمت WMA یا (Windows Media Audio) در کیفیت با MP3 مقایسه می شود، و با بیشتر پخش کننده ها غیر از iPod سازگار است. فایل های WMA برای رادیو اینترنتی و یا موزیک Online مناسب است.
    MP3 .mp3
    .mpga

    فایل های MP3 درحقیقت بخش شنیداری فایل های MPEG هستند. فرمت MPEG در اصل برای ویدئو ارائه شده است. فرمت MP3 یکی از رایج ترین فرمت های صوتی است که در عین فشرده سازی، کیفیت بالایی دارد.

    از چه فرمتی استفاده کنیم؟

    Wiki

    فرمت صوتی WAVE فایل های uncompressed(بدون فشرده سازی) متداولی در اینترنت هستند و توسط همه مرورگرها پشتیبانی می شوند. اگر می خواهید فایل های صوتی uncompressed(مثل: موزیک یا سخنرانی) برای بازدیدکنندگان تان به راحتی قابل دسترس باشد، باید از فرمت WAVE استفاده کنید.

    فرمت MP3 یکی از جدیدترین فرمت های صوتی compressedشده است. MP3 مترادف با "موسیقی دیجیتال" است. اگر سایت تان شامل فایل های صوتی است، فرمت MP3 می تواند یک انتخاب باشد.

    READ MORE

  • عناصر جدید برای فرم ها در HTML5

    23 شهریور 1397

    عناصر جدید برای فرم ها در HTML5

    HTML5 چندین تگ و خصوصیت جدید برای فرم ها در نظر گرفته است.

    • datalist
    • keygen
    • output

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

    عنصر <datalist>

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

    زمانی که کاربر داده وارد می کند، یک لیست کشویی ظاهر می شود و می تواند از گزینه های پیشنهاد داده شده یکی را انتخاب نماید.

    برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (عناصر جدید برای فرم ها در HTML5)

    <input list="browsers">

    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    خودتان امتحان کنید »

    عنصر <keygen>

    هدف این عنصر مهیا کردن راهی مطمئن برای شناسایی کاربران است.

    این عنصر یک تولید کننده جفت کلید است (key-pair generator).

    وقتی یک فرم ارسال می شود، 2 کلید تولید می شود، یک کلید عمومی (public) و یک کلید خصوصی (private).

    کلید خصوصی در کلاینت ذخیره می شود و کلید عمومی به سرور ارسال می شود. کلید عمومی می تواند برای ایجاد یک گواهی کلاینت برای شناسایی کاربر در آینده به کار رود.

    OperaSafariChromeFirefoxInternet Explorer

    مثال (عناصر جدید برای فرم ها در HTML5)

    <form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name">
    Encryption: <keygen name="security">
    <input type="submit">
    </form>
    خودتان امتحان کنید »

    عنصر <output>

    این عنصر برای انواع مختلف خروجی مثل نتیجه یک محاسبه ریاضی کاربرد دارد (شبیه زمانی که محاسبه بوسیله یک اسکریبت اجرا می شود عمل می کند).

    OperaSafariChromeFirefoxInternet Explorer

    مثال (عناصر جدید برای فرم ها در HTML5)

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100 +
    <input type="number" id="b" value="50">=
    <output name="x" for="a b"></output>
    </form>
    خودتان امتحان کنید »
    READ MORE

  • عناصر جدید در HTML5

    23 شهریور 1397

    عناصر جدید در HTML5

    از زمانی که HTML 4.01 در سال 1999 به عنوان یک استاندارد معرفی شد خیلی چیزها در اینترنت و حتی در مورد کاربران و نیازهای آنها تغییر کرده است.

    امروزه بسیاری از قابلیت های HTML 4.01 منسوخ شده یا مورد استفاده قرار نمی گیرند. بیشتر ویژگی های بی استفاده از HTML5حذف شده اند یا در مورد بعضی از آنها بازنگری هایی صورت گرفته است.

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

    عنصر <canvas>

    تگ توضیحات
    <canvas> از این تگ برای ترسیم گرافیک های دو بعدی از طریق کدنویسی (معمولا جاوا اسکریپت) استفاده می شود

    تگ های مربوط به رسانه

    تگ توضیحات
    <audio> تعریف محتوای صوتی
    <video>

    تعریف محتوای تصویری مانند فیلم و کلیپ
    <source> تعریف منابع مختلف برای صدا و تصویر
    <embed> تعریف یک ظرف برای برنامه های خارجی یا یک محتوای تعاملی مانند پلاگین ها
    <track> تعریف متن برای <audio> و <video>

    المان های فرم

    تگ توضیحات
    <datalist> یک فهرست از حالت های پیش فرض برای کنترل های ورودی
    <keygen> تعریف یک تولید کننده جفت کلید برای شناسایی کاربران
    <output> تعریف نتیجه یک خروجی

    المان های معنایی و ساختاری

    HTML5 المان هایی جدیدی را برای ساختار دادن به متون وب به شرح زیر در بر گرفته است:

    تگ توضیحات
    <article> تعریف یک مقاله
    <aside> تعریف یک محتوای در کنار متن اصلی
    <bdi> جهت تعریف متن در جهتی غیر از جهت اصلی که خارج از آن در نظر گرفته شده
    <command> تعریف یک دکمه دستوری که کاربر می تواند آن را فعال نماید
    <details> تعریف جزییات بیشتر
    <dialog> تعریف یک پنجره dialog
    <summary> تعریف بخش قابل مشاهده از یک تگ <details>
    <figure> تعریف یک محتوای مجزا مانند عکس، نمودار و...
    <figcaption> تعریف یک عنوان برای تگ <figure>
    <footer> تعریف یک بخش پایینی برای یک صفحه یا بخش
    <header> تعریف یک بخش بالایی برای یک صفحه یا بخش
    <mark> جهت برجسته کردن متن
    <meter> تعریف یک واحد اندازه گیری
    <nav> تعریف لینک های پیمایش صفحات
    <progress> نمایش پیشرفت یک وظیفه
    <section> تعریف یک بخش از متن
    <time> تعریف تاریخ و زمان
    <wbr> تعریف یک خط جدید

    المان های حذف شده از HTML5

    عناصر زیر از HTML5 حذف شده اند:

    • <acronym>
    • <applet>
    • <basefont>
    • <big>
    • <center>
    • <dir>
    • <font>
    • <frame>
    • <frameset>
    • <noframes>
    • <strike>
    • <tt>

     

    READ MORE

  • عناصر در xHTML

    18 شهریور 1397

    عناصر در XHTML همان عناصر HTML هستند که مانند XML نوشته شده اند.

    عناصر XHTML - قوانین نوشتاری

    Wiki

    • عناصر XHTML باید به طور صحیح به صورت تودرتو نوشته شوند.
    • عناصر XHTML باید همیشه بسته شوند.
    • عناصر XHTML باید با حروف کوچک نوشته شوند.
    • یک سند XHTML باید یک عنصر ریشه ای داشته باشند. (کل عناصر موجود در سند، در یک عنصر ریشه ای قرار داده شوند)

    عناصر XHTML باید به طور صحیح به صورت تودرتو نوشته شوند

    Wiki

    در HTML، بعضی عناصر می توانند به طور نادرست با یکدیگر تودرتو شوند، مثل مورد زیر: 

    <b><i>This text is bold and italic</b></i>

      در XHTML، تمامی عناصر باید به طور صحیح با یکدیگر تو در تو نوشته شوند، مثل مورد زیر: 

    <b><i>This text is bold and italic</i></b>

    عناصر XHTML باید همیشه بسته شوند

    Wiki

    قطعه کد زیر غلط است:

    <p>This is a paragraph
    <p>This is another paragraph

    این درست است:

    <p>This is a paragraph</p>
    <p>This is another paragraph</p>

    عناصر تهی نیز باید بسته شوند

    Wiki

    قطعه کد زیر غلط است:

    A break: <br>
    A horizontal rule: <hr>
    An image: <img src="/happy.gif" alt="Happy face">

    این درست است:

    A break: <br />
    A horizontal rule: <hr />
    An image: <img src="/happy.gif" alt="Happy face" />

    عناصر XHTML باید با حروف کوچک نوشته شوند

    Wiki

    قطعه کد زیر غلط است:

    <BODY>
    <P>This is a paragraph</P>
    </BODY>

    این درست است:

    <body>
    <p>This is a paragraph</p>
    </body>
    READ MORE

  • عناصر معنایی در HTML5

    23 شهریور 1397

    semantic = معنایی

    عناصر semantic = عناصر معنایی

    عناصر معنایی (semantic) چه هستند؟

    عناصر معنایی (semantic)، عناصری هستند که از نام آنها می توان به وضوح به محتوای آنها پی برد.

    عناصر non-semantic مانند: <div> و <span> - از نام آنها نمی توان به محتوای آنها پی برد.

    عناصر semanticمانند: <form>, <table>, <img> - به وضوح، محتوای خود را توصیف می کنند.

    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عناصر semantic را پشتیبانی می کنند.

    توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عناصر semantic را پشتیبانی نمی کنند. (در پایان این مطلب راه حلی برای این موضوع مطرح شده است)

    عناصر Semantic جدید در HTML5

    امروزه بیشتر وب سایت ها، برای طراحی ظاهر صفحات خود از کدهایی شبیه زیر استفاده می کنند:

    <div id="nav">, <div class="header">, <div id="footer">

    HTML5 برای تعریف بخش های مختلف یک صفحه وب، عناصر Semantic را ارائه داده است:

    • <header>
    • <nav>
    • <section>
    • <article>
    • <aside>
    • <figcaption>
    • <figure>
    • <footer>

    عنصر <section> در HTML5

    از عنصر <section> برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود.

    بر طبق مستندات کنسرسیوم جهانی وب (W3C) درباره HTML5: "عنصر <section> یک بخش از محتویات مربوط بهم است که بطور نمونه می تواند شامل یک عنوان باشد".

    مثال (عناصر معنایی در HTML5)

    <section>
      <h1>WWF</h1>
      <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>
    خودتان امتحان کنید »

    عنصر <article> در HTML5

    از عنصر <article> برای تعریف یک مقاله مجزا از سایر محتویات صفحه استفاده می شود.

    موارد مختلف استفاده از تگ <article>:

    • متن پست ها در فروم ها
    • متن مطالب جدید در وبلاگ ها
    • متن خبری در سایت های خبری
    • توضیحات

    مثال (عناصر معنایی در HTML5)

    <article>
      <h1>Internet Explorer 9</h1>
      <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
      the  public on March 14, 2011 at 21:00 PDT.....</p>
    </article>
    خودتان امتحان کنید »

    عنصر <nav> در HTML5

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

    لینک هایی که درون این تگ تعیین شوند، به ترتیب در کنار هم قرار می گیرند.

    تمام لینک های یک صفحه را نباید در این عنصر تعریف نمود. فقط لینک های اصلی و پایه ای صفحه در این بخش تعریف می شوند. 

    مثال (عناصر معنایی در HTML5)

    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
    خودتان امتحان کنید »

    عنصر <aside> در HTML5

    این عنصر برای تعریف یک محتوای در کنار متن اصلی استفاده می شود (مانند میله کناری سایت)

    محتویات عنصر <aside> باید با مطالب اطراف آن همخوانی داشته باشد.

    مثال (عناصر معنایی در HTML5)

    <p>My family and I visited The Epcot center this summer.</p>

    <aside>
      <h4>Epcot Center</h4>
      <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>
    خودتان امتحان کنید »

    عنصر <header> در HTML5

    از عنصر <header> برای تعیین یک سرصفحه برای یک سند HTMLیا یک عنوان برای یک بخش (Section) استفاده می شود.

    عنصر <header> می تواند شامل مقدمه ای از محتویات صفحه باشد.

    می توان چندین عنصر <header> را در یک صفحه استفاده نمود.

    در مثال زیر، یک عنوان برای مقاله تعریف شده است:

    مثال (عناصر معنایی در HTML5)

    <article>
      <header>
        <h1>Internet Explorer 9</h1>
        <p><time pubdate datetime="2011-03-15"></time></p>
      </header>
      <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
      the  public on March 14, 2011 at 21:00 PDT.....</p>
    </article>
    خودتان امتحان کنید »

    عنصر <footer> در HTML5

    از عنصر <footer> برای تعیین یک پاورقی برای یک سند HTML یا یک بخش (Section) استفاده می شود.

    می توان چندین عنصر <footer> را در یک صفحه استفاده نمود.

    یک پاورقی (footer)، بطور نمونه می تواند شامل نام نویسنده، حق چاپ (copyright)، اطلاعات تماس و... باشد.

    مثال (عناصر معنایی در HTML5)

    <footer>
      <p>Posted by: Hege Refsnes</p>
      <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>
    خودتان امتحان کنید »

    عناصر <figure> و  <figcaption> در HTML5

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

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

    از تگ <figcaption> ، برای تعیین یک عنوان یا توضیح برای تگ <fiqure> استفاده می شود.

    این عنوان هم می تواند در ابتدا و هم در انتهای عنصر مادر قرار داده شود.

    در مثال زیر، نحوه استفاده از تگ <fiqure> و تعیین یک عنوان توسط تگ <figcaption>، برای آن در عمل نمایش داده شده است:

    مثال (عناصر معنایی در HTML5)

    <figure>
      <img src="/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
      <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
    </figure>
    خودتان امتحان کنید »

    آیا می توان شروع به استفاده از عناصر معنایی کرد؟

    تمام عناصر توضیح داده شده در بالا، بجز عنصر <figcaption> از عناصر block هستند.

    توجه:یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

    برای اینکه عناصر معنایی در تمام مرورگرهای اصلی به طور صحیح کار کنند، باید خصوصیت display آنها را با مقدار block تنظیم کنید (در این صورت مرورگرهای قدیمی نیز این عناصر را به طور صحیح نمایش می دهند)

    header, section, footer, aside, nav, article, figure
    {
    display: block;
    }

    مشکل با Internet Explorer 8 و نسخه های قدیمی تر آن

    IE8 و نسخه های قدیمی تر، نمی توانند CSSرا روی عناصری که تشخیص نداده اند، اعمال کنند. در واقع نمی توانید عناصر معنایی و دیگر عناصر جدید HTML5را سبک دهی کنید.

    برای سبک دهی عناصر HTML5 در نسخه های قبل از IE9، خوشبختانه Sjoerd Visscher روشی را با نام HTML5 Shivدر JavaScript ارائه داده است.

    برای دانلود و مطالعه بیشتر درباره HTML5 Shiv به لینک روبرو مراجعه نمایید: http://code.google.com/p/html5shiv

    برای فعال کردن HTML5 Shiv، کد زیر را در قسمت <head> صفحه قرار دهید:

    <!--[if lt IE 9]>
    <script src="/html5shiv.js"></script>
    <![endif]-->

    کد comment شده بالا تنها در نسخه های قبل از IE9 خوانده می شود. آنرا باید در عنصر <head> صفحه قرار دهید تا عناصر معنایی شناسایی شده و قابل سبک دهی شوند.

    READ MORE

  • عنصر canvas در HTML5

    23 شهریور 1397

    عنصر <canvas>

    عنصر <canvas> در HTML5 از طریق اسکریپت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می کند.

    عنصر Canvas متدهای زیادی برای رسم مستطیل، دایره، خطوط، حروف و همچنین افزودن تصاویر دارد.

    پشتیبانی مرورگرها

    Internet Explorer Firefox Opera Google Chrome Safari

    مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <canvas> را پشتیبانی می کنند.

    توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <canvas> را پشتیبانی نمی کنند.

    ایجاد عنصر <canvas>

    عنصر <canvas> یک ناحیه مستطیل شکل برای نقاشی کشیدن در صفحه HTMLایجاد می کند.

    توجه: بصورت پیشفرض، در عنصر <canvas> لبه و محتوایی تنظیم نشده است.

    نحوه استفاده:

    <canvas id="myCanvas" width="200" height="100"></canvas>

    توجه: همیشه در عنصر <canvas>، خصوصیت های id (برای مراجعه به آن در یک اسکریبت)، width و height را تنظیم نمایید.

    نکته: می توانید چندین عنصر <canvas> را در یک صفحه HTML ایجاد نمایید.

    برای اضافه کردن لبه به عنصر <canvas>، از خصوصیت style استفاده نمایید:

    مثال (عنصر canvas در HTML5)

    <canvas id="myCanvas" width="200" height="100"
    style="border:1px solid #000000;">
    </canvas>
    خودتان امتحان کنید »

    رسم کردن داخل <canvas> با JavaScript

    تمام کارها در عنصر <canvas> توسط JavaScriptانجام می شود:

    مثال (عنصر canvas در HTML5)

    <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    </script>
    خودتان امتحان کنید »

    توضیح مثال:

    ابتدا عنصر <canvas> را پیدا می کنیم:

    var c=document.getElementById("myCanvas");

    سپس، متد ()getContext را صدا می زنیم (باید آنرا با پارامتر رشته ای "2d" تنظیم نمایید):

    var ctx=c.getContext("2d");

    شیء ()getContext یکی از اشیاء توکار HTML5 است، که دارای خصوصیات و متدهای برای رسم مسیرها، جعبه، دایره، متن، عکس و... است.

    دو خط بعدی، یک مستطیل قرمز رنگ رسم می کند:

    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

    خصوصیت fillStyle را می توان با یک رنگ، یک طیف (gradient) و یا یک الگو مقدار دهی نمود. مقدار پیشفرض fillStyle، رنگ سیاه یعنی "000000#" است.

    متد ()fillRect یک مستطیل رسم می کند و آنرا با مقداری که برای خصوصیت fillStyle تنظیم کرده اید، پر می کند.

    مختصات در <canvas>

    <canvas> یک شبکه دوبعدی است.

    مختصات گوشه ی سمت چپ-بالا (0,0) است.

    چهار پارامتر متد (0,0,150,75)fillRect که در مثال بالا استفاده شد به صورت زیر خواهد بود:

    • پارامتر اول(x): فاصله از چپ نسبت به محور x
    • پارامتر دوم(y): فاصله از بالا نسبت به محور y
    • پارامتر سوم(width): عرض مستطیل، یا فاصله از موقعیت x
    • پارامتر چهارم(height): ارتفاع مستطیل، یا فاصله از موقعیت y

    بنابراین با شروع از گوشه سمت چپ-بالا (0,0) یک مستطیل 150x75 رسم می شود.

    مثال: در این مثال، با قرار دادن موس روی مستطیل، مختصات x و y نمایش داده می شود:

    مثال (عنصر canvas در HTML5)

    function cnvs_getCoordinates(e)
    {
     x=e.clientX;
     y=e.clientY; 
     document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
    }
    function cnvs_clearCoordinates()
    {
     document.getElementById("xycoordinates").innerHTML="";
    }
    خودتان امتحان کنید »

    رسم خط در <canvas>

    برای رسم خطوط مستقیم در <canvas>، نیاز به دو متد زیر است:

    moveTo(x,y) -

     نقطه شروع خط را تعریف می کند.

    lineTo(x,y) -

     نقطه پایان خط را تعریف می کند.

    عملاً برای رسم خط، یکی از متدهای "مرکب زدن" مانند ()stroke نیز باید استفاده شود.

    مثال (عنصر canvas در HTML5)

    در این مثال، نقطه شروع (0,0) و نقطه پایان (200,100) تعریف شده است. سپس برای رسم خط از متد ()stroke استفاده می کنیم.

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
    خودتان امتحان کنید »

    برای رسم دایره یا یک منحنی در <canvas>، از متد زیر استفاده می کنیم:

    arc(x,y,r,start,stop) -

    پارامترهای متد ()arc:

    • x, y: رنگ سبزه در شکل بالا
    • r: شعاع دایره
    • start: رنگ قرمز در شکل بالا
    • stop: رنگ بنفش در شکل بالا

    عملاً برای رسم دایره، یکی از متدهای "مرکب زدن" مانند ()stroke یا ()fill نیز باید استفاده شود.

    مثال (عنصر canvas در HTML5)

    ایجاد دایره با استفاده از متد ()arc:

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    خودتان امتحان کنید »

    متن در <canvas>

    مهمترین خصوصیت ها و متدها برای نوشتن متن در <canvas>:

    font -

    خصوصیت font را برای متن تعریف می کند.

    fillText(text,x,y) -

    یک متن "تو پر" تعریف می کند.

    strokeText(text,x,y) -

    یک متن "تو خالی" تعریف می کند.

    مثال (عنصر canvas در HTML5)

    استفاده از متد ()fillText

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50);
    خودتان امتحان کنید »

    مثال 

    استفاده از متد ()strokeText

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.strokeText("Hello World",10,50);
    خودتان امتحان کنید »

    طیف رنگ در <canvas>

    طیف رنگ را می توان برای رنگ آمیزی مستطیل، دایره، خط، متن و... استفاده نمود. اشکال در <canvas> به رنگ های ثابت و یکنواخت محدود نمی شوند.

    دو نوع مختلف طیف رنگ وجود دارد:

    createLinearGradient(x,y,x1,y1) -

    یک طیف رنگی خطی ایجاد می کند.

    createRadialGradient(x,y,r,x1,y1,r1) -

    یک طیف رنگی دایره ای ایجاد می کند.

    زمانی که از شیء طیف رنگ (gradient) استفاده می کنید، باید حداقل دو رنگ تعریف نمایید.

    متد ()addColorStop برای مشخص کردن رنگ ها استفاده می شود. موقعیت رنگ ها می تواند در هرجایی بین 0 و 1 در طول طیف رنگ باشد. پارامتر اول در این متد، موقعیت رنگ (عددی بین 0 و 1) و پارامتر دوم، مقدار رنگ است.

    در ادامه باید طیف رنگ تعریف شده را برای خصوصیت fillStyle یا strokeStyle تنظیم نمایید و سپس شکلی مانند مستطیل، دایره، خط یا متن را رسم نمایید.

    مثال (عنصر canvas در HTML5)

    استفاده از متد ()createLinearGradient

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // Create gradient
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
    خودتان امتحان کنید »

    مثال (عنصر canvas در HTML5)

    استفاده از ()createRadialGradient

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // Create gradient
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
    خودتان امتحان کنید »

    عکس در <canvas>

    برای رسم عکس در <canvas>، از متد زیر استفاده می کنیم:

    drawImage(image,x,y) -

    مثال (عنصر canvas در HTML5)

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
    خودتان امتحان کنید »
    READ MORE

  • کلیه رویدادهای JavaScript

    23 شهریور 1397

    کلیه رویدادهای مدل DOM در HTML

    تصور کنید بخواهیم به ازای کلیک کردن کاربر روی یک عنصر، کار مشخصی انجام شود، به عملیات کلیک کردن "رویداد" گفته می شود. در HTMLبراحتی می توانیم، رویدادها را بعنوان یک ویژگی یا attribute به عناصر HTML اضافه کنیم. بطور معمول، رویدادها با یک تابع JavaScript تنظیم می شوند و زمانی که رویداد اتفاق افتاد، تابع JavaScriptاجرا می شود.

    نکته: کنسرسیوم W3C، استاندارد سازی مدل رویداد، را در DOM سطح 2 انجام داد.

    رویدادهای مدل DOM در HTML

    ستون DOM نشان می دهد که رویداد مورد نظر در کدام Level مدل DOM، معرفی شده است.

    کلیه رویدادهای مربوط به موس

    رویداد توضیحات DOM
    onclick

    این رویداد، زمانی که کاربر روی عنصر کلیک می کند، اتفاق می افتد.

    		 2
    oncontextmenu

    این رویداد، زمانی روی می دهد که، کاربر برای باز کردن منوی زمینه، روی یک عنصر راست کلیک می کند.

    		 3
    ondblclick

    این رویداد، زمانی روی می دهد که، کاربر روی یک عنصر دبل-کلیک کند .

    		 2
    onmousedown

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

    		 2
    onmouseenter

    این رویداد، زمانی روی می دهد که،  کاربر نشانگر ماوس را به روی یک عنصر وارد کند.

    		 2
    onmouseleave

    این رویداد، زمانی روی می دهد که،  نشانگر موس از روی یک عنصر خارج شود.

    		 2
    onmousemove

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

    		 2
    onmouseover

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

    		 2
    onmouseout

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

    		 2
    onmouseup

    این رویداد، زمانی روی می دهد که کاربر،دکمه ی ماوس را بر روی یک عنصر رها کند.

    		 2

    کلیه رویدادهای مربوط به کیبورد (keyboard)

    رویداد توضیحات DOM
    onkeydown

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

    		 2
    onkeypress

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

    		 2
    onkeyup

    این رویداد زمانی روی می دهد که، کاربر یک دکمه را رها کند. 

    		 2

    Frame/Object Events

    رویداد توضیحات DOM
    onabort

    این رویداد زمانی روی می دهد که، لود شدن یک منبع بی نتیجه باشد.

    		 2
    onbeforeunload

    این رویداد زمانی روی می دهد که، صفحه(document)می خواهد از بارگذاری خارج شود(بسته یا رفرش شود).

    		 2
    onerror

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

    		 2
    onhashchange

    این رویداد زمانی روی می دهد که، تغییری در قسمت لنگری(anchor part) یک URL به وجود بیاید.

    		 3
    onload

    این رویداد زمانی روی می دهد که، یک شیء لود شود. (بارگزاری شود).

    		 2
    onpageshow

     این رویداد زمانی روی می دهد که، کاربر به یک صفحه وب هدایت شود(بعبارت دیگر: وارد شود).

    		 3
    onpagehide

    این رویداد زمانی روی می دهد که، کاربر از یک صفحه وب بیرون برود.

    		 3
    onresize

    این رویداد زمانی روی می دهد که، اندازه ی صفحه وب تغییر کند.

    		 2
    onscroll

    این رویداد زمانی روی می دهد که، اسکرول بار، حرکت داده شود(اسکرول شود).

    		 2
    onunload

    این رویداد زمانی روی می دهد که، کاربر بخواهد صفحه وب را از بارگذاری خارج کند.(صفحه را ببندد یا اینکه refresh کند).

    		 2

    کلیه رویدادهای مربوط به فرم (form)

    رویداد توضیحات DOM
    onblur

    این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را از دست می دهد.

    		 2
    onchange

    این رویداد زمانی روی می دهد که، مقدار یک عنصر تغییر کند. این عنصر می تواند <input> یا <keygen> یا <textarea> باشد.

    		 2
    onfocus

    این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را به دست آورد.

    		 2
    onfocusin

    این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی گرفتن focus(فوکس)می باشد.

    		 2
    onfocusout

     این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی از دست دادن focus(فوکس)می باشد.

    		 2
    oninput

     این رویداد زمانی روی می دهد که، یک عنصر ورودی را از کاربر دریافت می کند

    		 3
    oninvalid

     این رویداد زمانی روی می دهد که، یک عنصر نامعتبر است.

    		 3
    onreset

     این رویداد زمانی روی می دهد که، یک فرم reset شود.

    		 2
    onsearch

     این رویداد زمانی روی می دهد که، یک کاربر در فیلد search چیزی را بنویسد.

    		 3
    onselect

     این رویداد زمانی روی می دهد که، کاربر مقداری از یک متن را انتخاب کند(select کند).

    		 2
    onsubmit

     این رویداد زمانی روی می دهد که، یک فرم submit شود.

    		 2

    کلیه رویدادهای مربوط به کشیدن عناصر (drag)

    رویداد توضیحات DOM
    ondrag

    این رویداد زمانی روی می دهد که، یک عنصر در حال درگ شدن(کشیده شدن) است.

    		 3
    ondragend

    این رویداد زمانی روی می دهد که، کاربر درگ کردن(کشیده شدن) عنصر را پایان دهد.

    		 3
    ondragenter

     این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده) وارد منطقه رها شدن(drop)شود.

    		 3
    ondragleave

    این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، منطقه رها شدن(drop)را ترک می کند.

    		 3
    ondragover

     این رویداد زمانی روی می دهد که، عنصر  درگ شده(کشیده شده)، بر روی منطقه رها شدن(drop) قرا بگیرد.

    		 3
    ondragstart

     این رویداد زمانی روی می دهد که، کاربر شروع به درگ کردن(کشیدن) یک عنصر می کند.

    		 3
    ondrop

     این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، بر روی منطقه رها شدن(drop)، رها می شود.

    		 3

    کلیه رویدادهای مربوط به حافظه کلیپ بورد (Clipboard)

    رویداد توضیحات DOM
    oncopy

    این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را کپی می کند.

    		  
    oncut

    این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را cut می کند.

    		  
    onpaste

    این رویداد زمانی روی می دهد که، یک کاربر محتوایی را در یک عنصر paste(الصاق) می کند.

    		  

    کلیه رویدادهای مربوط به پرینت (Print )

    رویداد توضیحات DOM
    onafterprint

    این رویداد زمانی روی می دهد که، یک صفحه شروع به print می کند یا اینکه پنجره مربوط به print بسته می شود.

    		 3
    onbeforeprint

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

    		 3

    کلیه رویدادهای مربوط به مدیا (Media )

    رویداد توضیحات DOM
    onabort

    این رویداد زمانی روی می دهد که لود شدن یک مدیا بی نتیجه باشد.

    		 3
    oncanplay

    این رویداد زمانی روی می دهد که، مرورگر بتواند نمایش مدیا را شروع کند. 

    		 3
    oncanplaythrough

    این رویداد زمانی روی می دهد که، مرورگر بتواند بدون توقف برای لود کردن، مدیا را نمایش دهد.

    		 3
    ondurationchange

    این رویداد زمانی روی می دهد که، مدت یک مدیا تغییر کند.

    		 3
    onemptied

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

    		 3
    onended

    این رویداد زمانی روی می دهد که، مدیا به پایان می رسد (قابل استفاده برای پیام اتمام  مدیا).

    		 3
    onerror

    این رویداد زمانی روی می دهد که، یک error در طول لود شدن فایل مدیا رخ دهد.

    		 3
    onloadeddata

    این رویداد زمانی روی می دهد که، داده های مدیا، لود شده اند.

    		 3
    onloadedmetadata

     این رویداد زمانی روی می دهد که، داده های متا، لود شوند.

    		 3
    onloadstart

     این رویداد زمانی روی می دهد که، مرورگر شروع به جستجوی مدیای مورد نظر می کند.

    		 3
    onpause

     این رویداد زمانی روی می دهد که، مدیا متوقف شود، خواه توسط کاربر یا بصورت برنامه نویسی.

    		 3
    onplay

     این رویداد زمانی روی می دهد که، پخش مدیا شروع شود or is no longer paused

    		 3
    onplaying

     این رویداد زمانی روی می دهد که، مدیا بعد از متوقف شدن(pause) یا توقف برای دانلود ادامه(buffering)، شروع به پخش کند.

    		 3
    onprogress

     این رویداد زمانی روی می دهد که، مرورگر در پروسه ی گرفتن داده های مدیا می باشد(دانلود کردن مدیا).

    		 3
    onratechange

     این رویداد زمانی روی می دهد که، سرعت پخش مدیا تغییر کند.

    		 3
    onseeked

     این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را به پایان ببرد.

    		 3
    onseeking

     این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را شروع می کند.

    		 3
    onstalled

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

    		 3
    onsuspend

     این رویداد زمانی روی می دهد که، مرورگر به طور عمدی داده های مدیا را دریافت نمی کند.

    		 3
    ontimeupdate

     این رویداد زمانی روی می دهد که، مکان پخش تغییر کند(درست مانند زمانی که کاربر به سرعت مدیا را از نقطه ای به نقطه ی دیگر می برد)

    		 3
    onvolumechange

     این رویداد زمانی روی می دهد که، میزان صدای مدیا تغییر کند(همچنین هنگامی که صدا در حالت mute قرار دارد)

    		 3
    onwaiting

     این رویداد زمانی روی می دهد که، مدیا برای دانلود فریم بعدی متوقف شده است و در حالت(resume)قرار دارد.

    		 3

    کلیه رویدادهای مربوط به متحرک سازی (Animation)

    رویداد توضیحات DOM
    animationend

    این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس کامل شود.

    		 3
    animationiteration

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

    		 3
    animationstart

    این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس شروع شود.

    		 3

    کلیه رویدادهای مربوط به انتقال (Transition)

    رویداد توضیحات DOM
    transitionend

    این رویداد زمانی روی می دهد که یک transition در سی اس اس کامل شود.

    		 3

    کلیه رویدادهای مربوط به سمت سرور (Server-Sent)

    رویداد توضیحات DOM
    onerror

     این رویداد زمانی روی می دهد که یک error در منبع رویداد(event source) ایجاد شود.

    		  
    onmessage

     این رویداد زمانی روی می دهدکه، یک پیام از منبع رویداد(event source)دریافت شود.

    		  
    onopen

     این رویداد زمانی روی می دهد که، یک اتصال با منبع رویداد(event source) باز شود.

    		  

    Misc Events

    رویداد توضیحات DOM
    onmessage این رویداد زمانی روی می دهد که، یک پیام از منبع رویداد(event source) دریافت شود. 3
    onmousewheel

    غیر قابل استفاده. به جای آن از رویداد onwheel استفاده کنید.

    		  
    ononline

    این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آنلاین می کند.

    		 3
    onoffline

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

    		 3
    onpopstate

    این رویداد زمانی روی می دهد که، تاریخچه ی(history) پنجره تغییر می کند.

    		 3
    onshow

     این رویداد زمانی روی می دهد که، یک عنصر <menu> بصورت منوی محتوا(context menu)، نشان داده شود.

    		 3
    onstorage

    این رویداد زمانی روی می دهد که، یک منطقه ی ذخیره سازی وب بروز رسانی شود.

    		 3
    ontoggle

    این رویداد زمانی روی می دهد که، یک کاربر عنصر <details> را باز کند یا ببندد.

    		 3
    onwheel

    این رویداد زمانی روی می دهد که، دکمه ی چرخان ماوس، بر روی یک عنصر به سمت بالا یا پایین بچرخد.

    		 3

    Touch Events

    رویداد توضیحات DOM
    ontouchcancel

    این رویداد زمانی روی می دهد که، لمس کردن صفحه قطع شود.

    		  
    ontouchend

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

    		  
    ontouchmove

    این رویداد زمانی روی می دهد که، انگشت فرد بر روی صفحه نمایش حرکت کند.

    		  
    ontouchstart

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

    		  

    مرجع کلیه رویدادهای JavaScript

    Constants

    Constant توضیحات DOM
    CAPTURING_PHASE

    رویداد کنونی در فاز capture قرار دارد(1).

    		 1
    AT_TARGET

    رویداد کنونی در فاز target قرار دارد(2).

    		 2
    BUBBLING_PHASE

    رویداد کنونی در فاز bubbling قرار دارد(3).

    		 3

    Properties

    متد توضیحات DOM
    bubbles

     این خصوصیت، مشخص می کند که آیا یک رویداد خاص، ویژگی bubbling را دارد یا نه.

    		 2
    cancelable

    این خصوصیت، مشخص می کند که آیا می توان از اقدام پیش فرض یک رویداد جلوگیری کرد یا نه. 

    		 2
    currentTarget

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

    		 2
    defaultPrevented

    این خصوصیت، مشخص می کند که آیا متد ()preventDefault برای رویداد صدا شده است یا نه.

    		 3
    eventPhase

    این خصوصیت، مشخص می کند که، چه فازی از رویداد در حال حاضر در حال ارزیابی است.

    		 2
    isTrusted

    این خصوصیت، مشخص می کند که آیا یک رویداد معتبر است یا نه. 

    		 3
    target

    این خصوصیت، عنصری که  رویداد را به وجود آورده است، برمی گرداند.

    		 2
    timeStamp

    از این خصوصیت، برای برگرداندن زمانی که در آن، رویداد، ایجاد شده است(به میلی ثانیه)، استفاده می شود..

    		 2
    type

    این خصوصیت، نام رویداد را برمی گرداند.

    		 2
    view

    این خصوصیت، یک ارجاع به شیء window را در جایی که رویداد اتفاق افتاده است، برمی گرداند.

    		 2

    Methods

    متد توضیحات DOM
    initEvent()

    نوع رویداد را مشخص می کند، خواه رویداد ویژگی bubble را داشته باشد یا نه و خواه رویداد قابل cancel شدن باشد یا نه.

    		 2
    preventDefault()

    رویداد را در صورتی که قابلیت cancel شدن داشته باشد، cancel می کند. این بدین معنی است که، اقدام پیش فرض متعلق به رویداد رخ نخواهد داد.

    		 2
    stopImmediatePropagation()

    از صدا شدن دیگر شنوندگان رویداد کنونی جلوگیری می کند.

    		 3
    stopPropagation()

     از انتشار بیشتر یک رویداد در طی اجرای رویداد(event flow)، جلوگیری می کند.

    		 2

    Mouseمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    altKey

    این خصوصیت، یک مقدار بولی را برمی گرداند که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید ALT فشار داده شده است یا نه.

    		 2
    button

    این خصوصیت، مشخص می کند که، هنگام  اجرای یک رویداد موس، کدام دکمه ی موس فشار داده شده است.

    		 2
    buttons

    این خصوصیت، مشخص می کند که، هنگام اجرای یک رویداد موس، کدام دکمه های موس فشار داده شده اند.

    		 3
    clientX

     این خصوصیت، نسبت به پنجره ی کنونی، هنگامی که یک رویداد موس اجرا می شود، مختصات افقی(x) موس را برمی گرداند.

    		 2
    clientY

     این خصوصیت، نسبت به پنجره کنونی، هنگامی که یک رویداد موس اجرا می شود، مختصات عمودی(y) موس را برمی گرداند.

    		 2
    ctrlKey

     این خصوصیت یک مقدار بولی را برمی گرداند که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید CTRL فشار داده شده است یا نه.

    		 2
    detail

     این خصوصیت، یک عدد را برمی گرداند که مشخص می کند، که چند بار موس کلیک شده است.

    		 2
    metaKey

     این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن یک رویداد، کلید META فشار داده شده است یا نه.

    		 2
    relatedTarget

    Returns the element related to the element that triggered the mouse event

    		 2
    screenX

     این خصوصیت، مختصات افقی(x) موس را هنگامی که یک رویداد اتفاق بیافتد، برمی گرداند.

    		 2
    screenY

     این خصوصیت، مختصات عمودی(y) موس را هنگامی که یک رویداد اتفاق بیافتد، برمی گرداند.

    		 2
    shiftKey

     این خصوصیت یک مقدار بولی را بری گرداند، که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید SHIFT فشار داده شده است یا نه.

    		 2
    which

     این خصوصیت، مشخص می کند که هنگام اتفاق افتادن رویداد، کدام دکمه ی موس فشار داده شده است.

    		 2

    Keyboardمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    altKey

    این خصوصیت، مشخص می کند که، آیا در هنگام اتفاق افتادن رویداد، کلید ALT فشار داده شده است یا نه.

    		 2
    ctrlKey

    این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن رویداد، کلید CTRL فشار داده شده است یا نه. 

    		 2
    charCode

     این خصوصیت، کد کاراکتر یونیکد دکمه ای که به وسیله ی رویداد onkeypress ایجاد شده است را برمی گرداند.

    		 2
    key

     این خصوصیت، هنگامی که در رویداد های دکمه، کلیدی(دکمه ای) فشار داده می شود، نام آن کلید را برمی گرداند.

    		 3
    keyCode

    این خصوصیت، کد کاراکتر یونیکدی که در رویداد onkeypress ایجاد شده است را برمی گرداند. یا اینکه، کد کاراکتر یونیکدی که در رویداد های onkeydown یا onkeyup  ایجاد شده است را برمی گرداند.

    		 2
    location

     این خصوصیت، مکان قرارگیری کلید را برروی صفحه کلید مشخص می کند.

    		 3
    metaKey

     این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن رویداد کلید، کلید meta فشرده شده است یا نه.

    		 2
    shiftKey

     این خصوصیت مشخص می کند که آیا در هنگام اتفاق افتادن رویداد کلید، کلید SHIFT فشار داده شده است یا نه.

    		 2
    which

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

    		 2

    HashChangeمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    newURL

    از این خصوصیت، برای برگرداندن URL سند، هنگامی که قسمت هش(hash) تغییر می کند، استفاده می شود.

    		  
    oldURL

    از این خصوصیت برای برگرداندن url سند، قبل از اینکه قسمت هش(hash) تغییر کند، استفاده می شود.

    		  

    PageTransitionمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    persisted

    این خصوصیت، مشخص می کند که آیا یک صفحه وب توسط مرورگر ذخیره(cached) شده است یا نه.

    		  

    Focusمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    relatedTarget Returns the element related to the element that triggered the event 3

    Animationمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    animationName نام انیمیشن را برمی گرداند.  
    elapsedTime

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

    		  

    Transitionمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    propertyName

    خصوصیت css که با transition همراه شده است را برمی گرداند.

    		  
    elapsedTime

    این خصوصیت، تعداد ثانیه هایی که یک انتقال(transition) در حال کار کردن است را برمی گرداند.

    		  

    Wheelمرجع کلیه رویدادهای JavaScript

    متد توضیحات DOM
    deltaX

    مقدار اسکرول افقی دکمه چرخان موس را برمی گرداند(محور x).

    		 3
    deltaY

    مقدار اسکرول عمودی دکمه ی چرخان موس را برمی گرداند(محور y).

    		 3
    deltaZ

    مقدار اسکرول دکمه ی چرخان موس برای محور z را برمی گرداند.

    		 3
    deltaMode

    یک عدد را برمی گرداند که این عدد مشخص کننده ی واحد اندازه گیری برای مقادیر delta می باشد(پیکسل یا خط یا صفحه).

    		 3
    READ MORE

  • مثال های HTML

    18 شهریور 1397

    HTML Basic

    یک مثال خیلی ساده از HTML
    عنوان ها در HTML
    پاراگراف ها در HTML
    لینک ها در HTML
    تصاویر در HTML

    توضیح مثال ها

    HTML Headings

    عنوان ها در HTML
    درج یک توضیح (Comment) در کد HTML
    درج یک خط افقی

    توضیح مثال ها

    HTML Paragraphs

    پاراگراف ها در HTML
    چند پاراگراف در یک صفحه
    رفتن به خط جدید
    مشکل خطوط و فاصله های اضافه در کد HTML (حذف می شوند)

    توضیح مثال ها

    HTML Text Formatting

    فرمت بندی متن
    حفظ کردن خطوط و فاصله های اضافه درون یک متن (Preformatted)
    تگ های مختلف computer-output (استفاده در برنامه نویسی کامپیوتری)
    درج کردن اطلاعات تماس
    این کلمه مخفف یا مختصر چیست؟
    معکوس کردن یک متن (از آخر به اول)
    اضافه کردن نقل قول
    نحوه علامت گذاری متن های زیر خط دار یا حذف شده(روی آن خط کشیده شده)

    توضیح مثال ها

    HTML Styles

    تغییر شیوه نمایش عناصر HTML
    تغییر رنگ پس زمینه
    تغییر فونت، رنگ و اندازه متن
    ترازبندی متن
    تنظیم فونت یک متن
    تنظیم اندازه یک متن
    تنظیم رنگ یک متن
    تنظیم فونت، رنگ و اندازه یک متن
    استفاده از CSS در head صفحه
    لینکی که خط زیر ندارد
    لینک به یک فایل CSS خارجی

    توضیح مثال ها

    HTML Links

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

    توضیح مثال ها

    HTML Images

    درج یک تصویر
    درج کردن تصویری که در فولدر یا سروری دیگر قرار دارد
    تراز بندی تصویر
    قرار دادن یک تصویر در سمت راست یا چپ یک پاراگراف
    چگونه از یک تصویر به عنوان لینک استفاده کنیم
    چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود

    توضیح مثال ها

    HTML Tables

    یک جدول ساده
    لبه های مختلف یک جدول (Border)
    چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم
    نحوه ایجاد سرتیترهای جدول
    نحوه اضافه کردن عنوان به یک جدول
    چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند
    نمایش عناصر دیگر درون یک جدول
    چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم
    چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم
    چگونه از خصوصیت "frame" برای کنترل بوردر های دور جدول استفاده کنیم

    توضیح مثال ها

    HTML Lists

    یک لیست غیرترتیبی
    یک لیست ترتیبی
    نمایش انواع دیگر لیست های ترتیبی
    نمایش انواع دیگر لیست های غیر ترتیبی
    نمایش لیست های تو در تو
    نمایش لیست های تو در توی پیچیده تر
    نمایش لیست تعریفی

    توضیح مثال ها

    HTML Forms and Input

    چگونه یک فیلد متنی ایجاد کنیم. کاربر می تواند داخل فیلد متنی یک متن دلخواه تایپ کند
    چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم
    چگونه یک checkbox ایجاد کنیم
    چگونه یک radio button ایجاد کنیم
    چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم
    چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم
    چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم
    چگونه یک دکمه برای کلیک کردن ایجاد کنیم
    چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم
    چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم
    چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم
    چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم
    ارسال ایمیل از طریق form

    توضیح مثال ها

    HTML IFrame

    قرار دادن یک frame داخل صفحه HTML دیگر

    توضیح مثال

    HTML head Elements

    مشخص کردن عنوان یک سند
    نحوه استفاده از تگ برای اینکه معین کنیم تمام لینک های یک صفحه در یک پنجره جدید باز شوند
    از عنصر برای توصیف سند استفاده کنید
    از عنصر برای تعریف کلمات کلیدی سند استفاده کنید
    چگونه یک کاربر را به آدرس وب جدیدی redirect کنیم (تغییر مسیر دهیم)

    توضیح مثال ها

    HTML Scripts

    نحوه وارد کردن یک script در یک سند HTML
    چاپ یک پیام مناسب برای مرورگرهایی که scripting را پشتیبانی نمی کنند یا scripting غیر فعال دارند

    توضیح مثال ها

    READ MORE

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه