مقدمه

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


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

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

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

این مثال از متد getElementById استفاده می‌کند تا یک عنصر HTML ای با استفاده از شناسه (id) که در این مثال برابر با کلمه demo است را بیابد:

(with id="demo") و محتوای این عنصر(innerHTML)را به عبارت "Hello JavaScript" تغییر دهد:

مثال

document.getElementById("demo").innerHTML = "Hello JavaScript";

مثال

<!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>

Responsive demo.svg


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

مثال

document.getElementById('demo').innerHTML = 'Hello JavaScript';

مثال

<!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>

Responsive demo.svg



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

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

روشنایی لامپ

Responsive demo.svg





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

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

مثال

document.getElementById("demo").style.fontSize = "35px";

مثال

<!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>

Responsive demo.svg



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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

Responsive demo.svg



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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

Responsive demo.svg



منابع آموزشی