خواندن ۳ دقیقه·۳ سال پیش

جاوا اسکریپت بجای HTML با یک مثال ساده

نمایش دادن "Hello World" روی یک صفحه وب زیاد طول نمی‌کشه. کافیه یه فایل html. درست کنید و این محتویات رو بریزید توش:

<html>
    <body>
        <div>Hello World</div>
    </body>
</html>

حالا اون فایل رو با هر مرورگری که دوست دارید باز کنید و بوم! تبریک.

ولی اولین چالشتون یحتمل وقتی بوجود میاد که تصمیم می‌گیرید مثلاً وقتی روی همون متنِ "Hello World" ای که توی پاراگراف قبلی ساختیمش کلیک شد، متن عوض بشه و یه جمله جدید بهمون بده. مثلاً تغییر کنه به "You Clicked Me".

خب برای اینکار لازمه که از یه زبان برنامه‌نویسی استفاده کنیم (HTML که مخففِ Hyper Text Markup Language هست، همونطور که از اسمش برمیاد، زبان نشانه گذاریه). و برای اینکار زبان جاوا اسکریپت رو داریم. مرورگر شما، کد HTML ای که نوشتید رو توسط یک موتور مخصوص (مثلاً اگر از chrome استفاده می‌کنید موتور V8) به شکل یک Object درمیاره و به جاوا اسکریپت تحویل میده. که اون Object رو بهش میگیم DOM (مخفف Document Object Model). اینطوری جاوا اسکریپت می‌تونه با کد HTML تون تعامل کنه؛ مثلاً‌ بهش node های جدیدی اضافه یا کم کنه. یا حتی محتوایات و ویژگی های node های فعلی رو عوض کنه. (توی جاوا اسکریپت به المان های HTML میگیم nodes و یا به طور کامل تر DOM nodes).

پس برای دسترسی به Hello World توی مثالمون و تغییر دادن متنش وقتی که رویداد کلیک اتفاق افتاد، کافیه که از جاوا اسکریپت و توابع از پیش تعریف شده ای که برای دستکاری DOM توی خودش داره استفاده کنیم. دسترسی به node ها با تعریف کردنِ ویژگیِ id واسشون خیلی ساده تر میشه:

<div id=&quotgreet&quot>Hello World</div>

بعد می‌تونیم توی خط بعدی از تگ برای ورود به دنیای جاوا اسکریپت، و برنامه نویسیِ تغییر جمله در پاسخ به رویداد کلیک، استفاده کنیم:


    let greetElement = document.getElementById(&quotgreet&quot);
    greetElement.addEventListener(&quotclick&quot, () => {
        return greetElement.textContent = &quotYou Clicked Me&quot
    });

پس نهایتاً نمای کلیِ فایلمون اینطوری میشه:

<html>
    <body>
        <div id=&quotgreet&quot>Hello World</div>
        
            let greetElement = document.getElementById(&quotgreet&quot);     
            greetElement.addEventListener(&quotclick&quot, () => {
                return greetElement.textContent = &quotYou Clicked Me&quot     
            }); 
        
    </body>
</html>

حتی می‌تونیم تگ div با id ی greet و مقدار اولیهٔ Hello World رو هم با جاوا اسکریپت تولید و روی صفحه نمایش بدیم:

<html>
     <body>
         
             let greetElement = document.createElement(&quotdiv&quot);
             greetElement.textContent = &quotHello World&quot
             document.body.append(greetElement);
             greetElement.addEventListener(&quotclick&quot, () => {
                 return greetElement.textContent = &quotYou Clicked Me&quot
             });
          
     </body>
</html>

بعد از ذخیره کردن، کافیه این فایل رو با هر مرورگری که می‌خواید باز کنید. روی صفحه Hello World خواهید دید که اگه روش کلیک کنید به You Clicked Me تغییر پیدا میکنه.

جاوا اسکریپتjavascriptjshtmlبرنامه نویسی

جلال حامد

توسعه دهنده فرانت‌اند

شاید از این پست‌ها خوشتان بیاید