0 0 تومان

دسته‌بندی‌ها

آموزش طراحی سایت (HTML CSS Javascript) | آتریا
آموزش سی شارپ

فیلم آموزش html

  • تگ script در HTML

    مثال (تگ 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 

  • تگ section در HTML

    مثال (تگ 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 پشتیبانی می کند.

  • تگ select در HTML

    مثال (تگ 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 

  • تگ small در HTML

    مثال (تگ 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 پشتیبانی می کند.

  • تگ source در HTML

    مثال (تگ 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 

  • تگ span در HTML

    مثال (تگ 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 

  • تگ strong در HTML

    مثال (تگ 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-فرمت دهی متن 

  • تگ style در HTML

    مثال (تگ 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 

  • تگ sub در HTML

    مثال (تگ 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 پشتیبانی می کند.

  • تگ summary در HTML

    مثال (تگ 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 پشتیبانی می کند.

  • تگ sup در HTML

    مثال (تگ 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 پشتیبانی می کند.

  • توضیحات در HTML

    مثال (توضیحات در 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-رویدادهای عمومی

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

    کشیدن (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> جابه جا کنیم.

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

    خصوصیت های 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" />

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

    خصوصیت های جدید در 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">
    خودتان امتحان کنید »

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

    ذخیره داده ها بر روی کامپیوتر کاربر (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.";
    خودتان امتحان کنید »

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

    در 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 مگابایت برای ذخیره فایل های هر سایت اختصاص می دهند)

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

    سیستم موقعیت یاب 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>
    خودتان امتحان کنید »

  • شیء Attribute

    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 استفاده کنید.

     

  • شیء Document

    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 ندارند.

صفحه5 از7

قالب وردپرس | لرن دی ال

تبلیغات

آموزش ASP.NET Core
آموزش برنامه نویسی
سرور اختصاص ایران سرور
طراحی سایت مشهد
ثبت دامنه
خرید هاست
ثبت دامنه com
ثبت دامنه ir
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی