JavaScript:مقدمه ای بر جاوا اسکریپت

از ویکی کد
(تفاوت) → نسخهٔ قدیمی‌تر | نمایش نسخهٔ فعلی (تفاوت) | نسخهٔ جدیدتر ← (تفاوت)
پرش به ناوبری پرش به جستجو

الگو:منو عمودی جاوااسکریپت این صفحه شامل مثالهایی از کارهایی است که به وسیله زبان جاوااسکریپت می‌توان انجام داد.[۱]

جاوااسکریپت می‌تواند محتوای صفحه HTML را تغییر دهد

یکی از متدهای (به انگلیسی: Methods) زبان جاوااسکریپت که برای HTML قابل استفاده است متدgetElementById()است.

این مثال از متدgetElementByIdاستفاده می‌کند تا یک عنصر HTML ای با استفاده ازشناسه(id)که در این مثال برابر با کلمه demo است را بیابد:(with id="demo") و محتوای این عنصر(innerHTML)را به عبارت"Hello JavaScript"تغییر دهد:

خودتان آزمایش کنید:

 1 Example
 2 
 3 <!DOCTYPE html>
 4 <html>
 5 <body>
 6 
 7 <h2>What Can JavaScript Do?</h2>
 8 
 9 <p id="demo">JavaScript can change HTML content.</p>
10 
11 <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
12 
13 </body>
14 </html>

جاوااسکریپت هم از تک کوتیشن «′» و هم از دو کوتیشن «"» پشتیبانی می‌کند:

Example

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>


جاوااسکریپت می‌تواند مقادیر ویژگی‌های (Attribute) زبان HTML را تغییر دهد

در این مثال به وسیلهٔ زبان جاوااسکریپت مقدار ویژگی src (به انگلیسی: Source) را که از ویژگی‌های تگ<img>زبان html است را تغییر می‌دهیم:

خودتان آزمایش کنید:

جاوااسکریپت می‌تواند طرح صفحه HTML (CSS صفحه) را تغییر دهد

تغییر طرح(style)یک عنصر زبان html، نوعی از تغییر مقدار ویژگی‌های(attribute)زبان html است.

خودتان آزمایش کنید:

Example

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

جاوااسکریپت می‌تواند عناصر یک سند HTML را مخفی کند

مخفی کردن عناصر یک سند html می‌تواند از طریق تغییر مقدار ویژگی display یا نمایش عنصر مورد نظر، انجام گیرد.

خودتان آزمایش کنید:

Example
document.getElementById("demo").style.display = "none";

جاوااسکریپت می‌تواند عناصر یک صفحه HTML را نمایش دهد

نمایش عناصرHTML ای را که از دید کاربر پنهان هستند را می‌توان به وسیلهٔ ویژگیdispalyدر زبان جاوااسکریپت انجام داد:

خودتان آزمایش کنید:

1 Example
2 document.getElementById("demo").style.display = "block";

منابع آموزشی

الگو:منو افقی جاوااسکریپت