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

درس ۱: مقدمه‌ای بر جاوااسکریپت (JS Introduction)

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

۱. تغییر محتوای HTML

جاوااسکریپت می‌تواند محتوای یک تگ را تغییر دهد. متد اصلی برای این کار getElementById() است.

        <p id=”demo1″>JavaScript can change HTML content.</p>

        <button type=”button” onclick=’document.getElementById(“demo1”).innerHTML = “Hello JavaScript!”‘>Click Me!</button>

خروجی زنده (روی دکمه کلیک کنید):

JavaScript can change HTML content.

۲. تغییر مقادیر ویژگی‌ها (Attributes)

در اینجا جاوااسکریپت مقدار ویژگی src یک تصویر را تغییر می‌دهد (لامپ را روشن و خاموش می‌کند).

        <button onclick=”document.getElementById(‘myImage’).src=’bulbon.gif'”>Turn on</button>

        <button onclick=”document.getElementById(‘myImage’).src=’bulboff.gif'”>Turn off</button>

خروجی زنده:

۳. تغییر استایل (CSS)

با جاوااسکریپت می‌توانید ظاهر هر المانی را تغییر دهید:

        document.getElementById(“demo2”).style.fontSize = “35px”;

        document.getElementById(“demo2”).style.color = “red”;

خروجی زنده:

جاوااسکریپت می‌تواند فونت و رنگ من را تغییر دهد!

۴. مخفی کردن و نمایش المان‌ها

یکی از کارهای رایج، مخفی کردن محتوا با تغییر display است:

        document.getElementById(“demo3”).style.display = “none”;

        document.getElementById(“demo3”).style.display = “block”;

خروجی زنده:

من یک متن هستم که می‌تواند غیب شود!

بازگشت به دوره

درس بعدی