وبلاگ با برنامه
» برنامه نویسی جاوااسکریپت: معرفی کوئری سلکتور
برنامه نویسی جاوااسکریپت: معرفی کوئری سلکتور
شروع یادگرفتن برنامه نویسی جاوااسکریپت شاید بیشتر بخاطر ارتباط این زبان با html و بخش فرانت اند در طراحی ظاهر سایت است. اینجا درباره مباحث مقدماتی از همین حوزه صحبت میشود. اگر چه javascript در بک اند هم با Nodejs فعالیت میکند.
سلکت کردن یک تگ div در برگه html
var x1 = document.querySelector('#id1')
در خط بالا یک querySelector استفاده کردیم تا یک المنت از html را select کنیم. پس از select کردن این المنت, آن را در یک متغیر به نام x1 ریختیم. کلمه document که قبل از کوری سلکتور نوشته شده, اشاره به تمام کد های داخل برگه html دارد. در حقیقت کد بالا اینطور تفسیر میشود: یک تگ (المنت) در میان کدهای html وجود دارد که آی دی آن برابر id1 است. آن را بگیر و داخل یک متغیر به نام x1 قرار بده تا بعدا از آن استفاده کنیم یا تغییری در استایل یا حتی محتوایش ایجاد کنیم.
مطلب مرتبط
آموزش Communication در هوانوردیآماده اید آزمایش کنیم؟
گام اول: پوشه بندی را آغاز میکنیم.
یک new folder در دسکتاپ بسازید و نامش را test بگذارید.
گام دوم: داخل پوشه test یک فایل به نام index.html ایجاد کنید.
خیلی ساده است. کافیست با موس کلیک راست کنید و گزینه new simple text document را انتخاب کنید. سپس آن را نامگذاری کنید.
نکته: اگر پسوند فایل یعنی html را نمیتوانید تغییر دهید کافیست مطابق شکل زیر از منو view گزینه show file name extention را تیک بزنید. آنگاه قادر هستید پسوند فایل ها را ببینید و تغییر دهید.
گام سوم: یک ویرایشگر کد باز کنید notepad++ هم برای این کار کافیست.
گام چهارم: برگه index.html را در ویرایشگر خود باز کنید. داخل برگه html خود این کد ها را کپی پیست کنید!
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>example</title> </head> <body> <div id="id1"> Hello World! </div> <script src='script.js'> </script> </body> </html>
گام پنجم: به همان ترتیبی که index.html ایجاد کردید, یک برگه به نام script.js ایجاد کنید. جای این برگه در همتن پوشه test است.
گام ششم: برگه script.js را در نود پد پلاس پلاس باز کنید.
گام هفتم: کد های زیر را به آن کپی پیست کنید!
var x1 = document.querySelector('#id1')
console.log(x1)
گام هشتم: به پوشه test رفته و روی index.html کلیک کنید. بروزر باز میشود.
گام نهم: اگر browser شما chrome باشد کافیست دکمه F12 را در کیبورد فشار دهید تا در این بروزر console باز شود. مانند تصویر زیر!
گام دهم: اگر کنسول شما مطابق شکل بالا است کدهایتان درست کار میکنند.
گام یازدهم: میتوانید در برگه index.html کدها را ویرایش کنید.
مثلا بجای Hello World , میتوانید نام خود را به لاتین بنویسید و با فشردن همزمان ctrl + S ذخیره کنید.
گام دوازدهم: بروزر را رفرش کنید! تا نام خود را در کنسول مشاهده نمایید.
از مطالعه شما سپاسگذارم!
