تبلیغات
یادداشت های من - آموزش جاوااسکریپت – جلسه دوم: چگونه

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

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش جاوااسکریپت – جلسه دوم: چگونه

یکشنبه 1 خرداد 1390   09:54 ب.ظ

تگ <script> در HTML برای قرار دادن یک کد جاوااسکریپت در آن صفحه استفاده می شود.

نوشتن در یک صفحه HTML

مثال زیر یک عنصر <p> را که شامل تاریخ و ساعت حاضر است در صفحه درج می کند:

<html>
<body>

<h1>My First Web Page</h1>

<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>

</body>
</html>

نکته: سعی کنید از document.write() در استفاده واقعیتان از کد جاوااسکریپت استفاده نکنید. با این کار صفحه HTML جاری در صورتی که document.write() در داخل یک تابع و یا بعد از لود صفحه نوشته شده باشد دوباره نویسی می شود. هر چند document.ready() راحت ترین مثالی است که می توان کدهای جاوااسکریپت را در آموزش نشان داد.

 

تغییر عناصر HTML

مثال زیر تاریخ و ساعت جاری را در داخل یک عنصر <p> که در داخل صفحه وجود دارد نشان می دهد:

<html>
<body>

<h1>My First Web Page</h1>

<p id="demo"></p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Date();

</script>

</body>

</html>

نکته: جاوااسکریپت برای دستیابی به عناصر HTML از متد getElementById() که در DOM موجود است استفاده می کند.

(آموزش DOM به طور هم زمان در حال بارگزاری در وبلاگ است.)

 

مثالهای تشریح شده:

برای قرار دادن یک کد جاوا اسکریپت در صفحه HTML از تگ <script> استفاده کنید.

در داخل تگ <script> از خاصیت type برای تعریف زبان اسکریپت نویسی استفاده نمایید.

<script> و </script> ابتدا و انتهای کدهای جاوا اسکریپت را نشان می دهد.

<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
... some JavaScript code ...
</script>
</body>
</html>

خطوط بین <script> و </script> نشان دهنده کد های جاوااسکریپت است و توسط مرورگر اجرا می شود.

در این حالت مرورگر محتویات عنصر HTML با id=”demo” را برابر با تاریخ جاری قرار می دهد.

<html>
<body>
<h1>My First Web Page</h1>

<p id="demo">This is a paragraph.</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>

</body>
</html>

بدون تگ (های) <script> مرورگر قاطی می کند. و فقط عبارت

"document.getElementById("demo").innerHTML=Date();"

در صفحه نوشته می شود مثل یک متن عادی.

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

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

کافی است فقط تگ کامنت HTML یعنی یک <!— را قبل از اولین دستور جاوااسکریت و یک --> را بعد از آخرین دستور جاوااسکریپت قرار دهیم. مثل مثال زیر:

<html>
<body>
<script type="text/javascript">
<!--
document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>

این دو بک اسلش (//) قبل از تگ کامنت نشانه کامنت در جاوااسکریپت است. این کار باعث می شود که جاوااسکریپت تگ --> را اجرا نکند.


پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.



نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : JavaScript ،