Google Play badge

جاوا اسکریپت


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

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

سلام دوستان جوان امروز قصد داریم با جاوا اسکریپت آشنا شویم. جاوا اسکریپت نوع خاصی از زبان کامپیوتری است. این به ما کمک می کند تا صفحات وب را تعاملی و سرگرم کننده کنیم. وقتی روی دکمه ای کلیک می کنید یا می بینید که چیزی در یک وب سایت حرکت می کند، این اغلب به دلیل جاوا اسکریپت است.

تصور کنید که در حال بازی با یک ربات اسباب بازی هستید. برای اینکه ربات حرکت کند، باید به او بگویید چه کاری انجام دهد. به همین ترتیب، جاوا اسکریپت به رایانه می گوید که یک صفحه وب چگونه باید رفتار کند. دستورالعمل هایی را برای تغییر وب سایت ها در هنگام تماشا می دهد.

توسعه وب به معنای ساخت وب سایت است. وقتی با HTML کار می کنیم، ساختار یک وب سایت را ایجاد می کنیم. CSS وب سایت را زیبا جلوه می دهد. جاوا اسکریپت با وادار کردن وب‌سایت‌ها به هنگام کلیک کردن روی دکمه‌ها یا اسکرول کردن صفحه به پایین، جادو می‌افزاید. امروز، نحوه عملکرد جاوا اسکریپت را به روشی بسیار ساده بررسی خواهیم کرد.

این درس به زبان ساده نوشته شده است. ما از کلمات ساده و مثال هایی از زندگی روزمره استفاده خواهیم کرد. حتی اگر تازه وارد کامپیوتر هستید، می توانید این درس را درک کنید. اجازه دهید ماجراجویی یادگیری خود را با جاوا اسکریپت شروع کنیم!

جاوا اسکریپت چیست؟

جاوا اسکریپت زبانی است که کامپیوترها آن را می فهمند. این مجموعه ای از دستورالعمل ها است که به گونه ای نوشته شده است که رایانه بتواند از آن پیروی کند. هنگامی که از یک وب سایت بازدید می کنید، رایانه از جاوا اسکریپت برای ایجاد تغییر در بخش هایی از صفحه استفاده می کند. به عنوان مثال، وقتی روی ماوس کلیک می‌کنید، ممکن است یک عکس ظاهر شود یا پیامی ظاهر شود.

شما می توانید جاوا اسکریپت را به عنوان یک کمک کننده دوستانه در نظر بگیرید. درست همانطور که ممکن است از یک دوست بخواهید یک اسباب بازی به شما بدهد، جاوا اسکریپت به رایانه شما کمک می کند پیام ها را منتقل کند و تغییرات را روی صفحه نمایش دهد. به وب سایت ها حیات می بخشد.

بسیاری از وب سایت های محبوب از جاوا اسکریپت استفاده می کنند. وب سایت هایی مانند بازی های آنلاین، داستان های تعاملی و حتی انیمیشن های ساده همگی با جاوا اسکریپت کار می کنند. این مانند یک معجون جادویی است که وب سایت را هیجان انگیز می کند.

یاد بگیرید که چگونه جاوا اسکریپت به کندی کار می کند. گام به گام، خواهید دید که چگونه هر دستورالعمل می تواند یک وب سایت را تغییر دهد. ما مثال‌های ساده‌ای را برای کمک به شما در درک نحوه عملکرد آن خواهیم دید.

چرا جاوا اسکریپت در توسعه وب مهم است؟

جاوا اسکریپت بسیار مهم است زیرا تعامل ایجاد می کند. تصور کنید هر کتابی را که می‌خوانید فقط می‌توان بدون هیچ گزینه‌ای خواند. یک وب سایت بدون جاوا اسکریپت مانند آن است - یک صفحه ثابت که هرگز تغییر نمی کند.

با جاوا اسکریپت، تصاویر متحرک، تغییر متن و دکمه‌هایی را می‌بینید که با کلیک روی آن‌ها کارها را انجام می‌دهند. این وب سایت ها را سرزنده و سرگرم کننده می کند. حتی یک وب سایت ساده، مانند یک گالری تصاویر، با استفاده از جاوا اسکریپت می تواند هیجان انگیز شود.

هر بار که یک پیام پاپ آپ یا یک بازی کوچک در یک وب سایت می بینید، به کار جاوا اسکریپت نگاه می کنید. به همین دلیل است که گاهی اوقات پیام هایی مانند "خوش آمدید!" یا "از اینکه کلیک کردید متشکرم!"

با استفاده از جاوا اسکریپت، توسعه‌دهندگان وب می‌توانند وب‌سایت‌هایی بسازند که هم زیبا و هم مفید باشند و مطمئن شوند که بازدیدکنندگان از وقت آنلاین خود لذت می‌برند.

نحوه کار جاوا اسکریپت با HTML و CSS

وقتی یک وب سایت می سازیم، با HTML شروع می کنیم. HTML مانند اسکلت یک صفحه وب است. این نشان می دهد که تصاویر، متن و دکمه ها کجا می روند. سپس از CSS برای اضافه کردن رنگ ها و استایل ها استفاده می کنیم. CSS مانند لباس هایی است که اسکلت را جذاب می کند.

جاوا اسکریپت در بالای HTML و CSS اضافه می شود تا وب سایت تعاملی شود. مانند مغزی است که به وب‌سایت می‌گوید وقتی کسی با آن ارتباط برقرار می‌کند چه کاری انجام دهد.

به عنوان مثال، وقتی روی یک دکمه در یک صفحه وب کلیک می‌کنید، HTML دکمه را نشان می‌دهد، CSS آن را زیبا نشان می‌دهد و جاوا اسکریپت به صفحه وب می‌گوید یک پیام مخفی را نشان دهد. این ترکیب وب سایت ها را هوشمند و دوستانه می کند.

اجازه دهید به یک مثال نگاه کنیم. فرض کنید یک صفحه وب با دکمه ای داریم که می گوید "من را کلیک کن!". هنگامی که روی دکمه کلیک می کنید، جاوا اسکریپت پیامی با مضمون "سلام، دوست!" این یک چیز کوچک اما شگفت انگیز به نام تعامل است.

بلوک های ساختمان اصلی جاوا اسکریپت

قبل از اینکه وارد مثال های سرگرم کننده شویم، باید چند کلمه اساسی در جاوا اسکریپت یاد بگیریم. اینها مانند بلوک های ساختمانی هستند که به ما در نوشتن دستورالعمل ها کمک می کنند. برخی از مهم ترین بلوک ها متغیرها، توابع و رویدادها هستند.

متغیرها: یک متغیر مانند یک جعبه کوچک است. در این جعبه می توانید چیز خاصی را ذخیره کنید. ممکن است یک کلمه، یک عدد یا حتی یک تصویر باشد. وقتی می خواهیم بعداً از آن مقدار استفاده کنیم، به سادگی آن را از جعبه خارج می کنیم.

برای مثال، ممکن است جعبه‌ای به نام «نام» داشته باشید که کلمه «آلیس» را ذخیره می‌کند. آن را مانند نوشتن روی یک یادداشت چسبناک و قرار دادن آن در یک جعبه در نظر بگیرید، بنابراین هر زمان که نیاز به دانستن نام داشتید، فقط یادداشت را بخوانید.

توابع: تابع مجموعه ای از دستورات است که با هم کار می کنند. این مانند دستور العملی است که به رایانه می گوید چگونه یک کیک درست کند. هر بار که می خواهید کیک را درست کنید، دستور (یا عملکرد) را دنبال می کنید تا نتیجه یکسانی بگیرید.

وقتی جاوا اسکریپت می نویسیم، می توانیم توابعی برای انجام کارهای ساده ایجاد کنیم. به عنوان مثال، یک تابع می تواند پیام خوشامدگویی را هنگام شروع بازی یا بازدید از یک صفحه وب نشان دهد.

رویدادها: رویداد چیزی است که در یک صفحه وب رخ می دهد. وقتی روی دکمه ای کلیک می کنید، ماوس خود را حرکت می دهید یا کلیدی را فشار می دهید، این اقدامات رویداد هستند. جاوا اسکریپت به این رویدادها گوش می دهد و سپس اتفاقی می افتد. مثل زنگ در است که وقتی کسی به در می آید.

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

اجازه دهید چند نمونه بسیار ساده از کد جاوا اسکریپت را ببینیم. این مثال‌ها نشان می‌دهند که چگونه دستورالعمل‌ها را به رایانه می‌دهیم.

مثال 1: نمایش یک پیام

در اینجا یک کد کوچک وجود دارد که یک پیام را نشان می دهد:

 <code>var message = "سلام، دنیا!";
هشدار(پیام)؛</code>

در این کد، کلمه var به کامپیوتر می‌گوید که کادری به نام پیام ایجاد کند و کلمات "Hello, world!" داخل آن جعبه سپس دستور alert() آن پیام را در یک پنجره کوچک روی صفحه نمایش شما نشان می دهد.

مثال 2: استفاده از یک تابع

در اینجا یک تابع ساده وجود دارد که یک تبریک را نشان می دهد:

 <کد>
تابع greet() {
  هشدار ("سلام، دوست!");
}
  </code>

این تابع greet نام دارد. وقتی از این تابع استفاده می شود، به رایانه می گوید که پنجره ای با سلام "سلام، دوست!" نشان دهد.

مثال 3: پاسخ به کلیک

وقتی روی یک دکمه کلیک می‌کنید، می‌توانید یک صفحه وب را وادار به انجام کاری کنید. به این کد نگاه کنید:

 <کد>
<button onclick="greet()">روی من کلیک کنید!</button>
  </code>

در اینجا، وقتی دکمه ای را فشار دهید که می گوید «من را کلیک کنید!»، عملکرد سلام فعال می شود و پیام تبریک را مشاهده می کنید. این نشان می دهد که چگونه جاوا اسکریپت به آنچه شما انجام می دهید گوش می دهد و باعث می شود صفحه مطابق با آن تغییر کند.

درک متغیرها با مثال های ساده

اجازه دهید در مورد متغیرها بیشتر بیاموزیم. متغیر نامی است که به جعبه ای داده می شود که دارای مقداری مانند عدد یا کلمه است. متغیری را به عنوان جعبه اسباب بازی مورد علاقه خود در نظر بگیرید که اسباب بازی های مورد علاقه خود را در آن نگهداری می کنید. می توانید هر زمان که بخواهید به داخل جعبه نگاه کنید تا ببینید چه چیزی در آن وجود دارد.

به عنوان مثال، ممکن است متغیری به نام age برای ذخیره سن خود یا متغیری به نام color برای ذخیره رنگ مورد علاقه خود ایجاد کنید. هنگامی که از جاوا اسکریپت استفاده می کنید، می توانید هر زمان که نیاز داشته باشید، این مقادیر را تغییر دهید، درست مانند قرار دادن یک اسباب بازی جدید در جعبه خود.

به این ترتیب، متغیرها به شما کمک می کنند اطلاعات را ذخیره کرده و بعداً از آن استفاده کنید. کد شما را سازماندهی کرده و خواندن آن را آسان می کند. با یادگیری بیشتر متوجه می شوید که متغیرها در نوشتن یک برنامه بسیار مهم هستند.

یادگیری در مورد توابع

توابع بلوک های خاصی از کد هستند که می توانند یک کار را انجام دهند. تصور کنید که یک طلسم جادویی در یک کتاب داستان دارید. هر بار که کلمات جادویی را به زبان می آورید، یک اتفاق شگفت انگیز رخ می دهد. در جاوا اسکریپت، یک تابع مانند آن طلسم جادویی است.

شما فهرستی از دستورالعمل ها را در داخل یک تابع می نویسید و سپس می توانید از آن تابع برای انجام کار هر زمان که نیاز داشتید استفاده کنید. این به شما کمک می کند تا از نوشتن دوباره و دوباره دستورالعمل های یکسان خودداری کنید.

به عنوان مثال، اگر می خواهید بگویید "سلام!" در بسیاری از صفحات مختلف، می توانید یک تابع بنویسید و هر بار آن را فراخوانی کنید. این کد شما را کوتاه و مرتب نگه می دارد. توابع کار شما را آسان تر و برنامه های شما را منظم تر می کنند.

رویدادها در جاوا اسکریپت

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

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

برای مثال، ممکن است دکمه ای داشته باشید که رنگ صفحه را تغییر می دهد. وقتی روی دکمه کلیک می کنید، یک رویداد فعال می شود و جاوا اسکریپت رنگ را تغییر می دهد. این نشان می دهد که چگونه رویدادهای ساده می توانند یک وب سایت را سرزنده و سرگرم کننده کنند.

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

یک مثال ساده تعاملی

بیایید ایده ها را با یک مثال ساده کنار هم قرار دهیم. یک صفحه وب را تصور کنید که با کلیک روی یک دکمه از شما استقبال می کند. در اینجا یک نسخه ساده از کدی است که ممکن است ببینید:

 <کد>
<!DOCTYPE html>
<html>
  <سر>
    <title>صفحه خوش آمدگویی</title>
    <اسکریپت>
      تابع sayHello() {
        alert ("به وب سایت ما خوش آمدید!");
      }
    </script>
  </head>
  <بدن>
    <h1>سلام!</h1>
    <p>برای دیدن پیام خوش آمدگویی روی دکمه زیر کلیک کنید.</p>
    <button onclick="sayHello()">روی من کلیک کنید!</button>
  </body>
</html>
  </code>

این کد یک صفحه وب ساده ایجاد می کند. HTML صفحه را می سازد، CSS (اگر اضافه شود) آن را جذاب می کند، و جاوا اسکریپت باعث می شود دکمه کار کند. وقتی روی دکمه کلیک می کنید، عملکرد sayHello فعال می شود و یک پیام ظاهر می شود.

این یک نمایش اساسی از این است که چگونه جاوا اسکریپت می تواند هیجان را به یک صفحه وب استاتیک بیاورد. این به شما نشان می دهد که چگونه تکه های کوچک کد می توانند آنچه را که روی صفحه نمایش شما اتفاق می افتد تغییر دهد.

کاربردهای واقعی جاوا اسکریپت

جاوا اسکریپت در بسیاری از وب سایت هایی که هر روز بازدید می کنید استفاده می شود. به عنوان مثال، هنگامی که از یک وب سایت خرید آنلاین استفاده می کنید، جاوا اسکریپت به به روز رسانی سبد خرید بدون بارگیری مجدد صفحه کمک می کند. هنگامی که در فید رسانه های اجتماعی پیمایش می کنید، جاوا اسکریپت مطمئن می شود که پست های جدید به آرامی ظاهر می شوند.

حتی ابزارهای ساده ای مانند ماشین حساب در صفحات وب با جاوا اسکریپت کار می کنند. ماشین حسابی را تصور کنید که می تواند اعداد را جمع، تفریق، ضرب یا تقسیم کند. جاوا اسکریپت دستورالعمل هایی را برای کارکرد ماشین حساب می نویسد، همانطور که ممکن است از انگشتان خود برای شمارش و اضافه کردن اعداد استفاده کنید.

در دنیای بازی ها، جاوا اسکریپت به ایجاد تجربیات سرگرم کننده کمک می کند. انیمیشن های رنگارنگ، شخصیت های متحرک و پازل های تعاملی همگی به دلیل جاوا اسکریپت امکان پذیر هستند. دنیای دیجیتال ما را به مکانی جذاب تر تبدیل می کند.

هر بار که با یک وب‌سایت پویا تعامل برقرار می‌کنید - چه در حال بررسی آب و هوا، تماشای یک ویدیو یا انجام یک بازی باشید - جاوا اسکریپت در پشت صحنه کار می‌کند تا آن تجربه را روان و پاسخگو کند.

پروژه های سرگرم کننده با جاوا اسکریپت

با افزایش سن و یادگیری بیشتر در مورد جاوا اسکریپت، ممکن است شروع به ایجاد پروژه های کوچک خود کنید. می توانید یک برنامه طراحی ساده بسازید که در آن از ماوس خود برای نقاشی استفاده کنید یا یک بازی کوچک ایجاد کنید که در آن شخصیت ها روی صفحه حرکت می کنند. امکانات بی پایان هستند!

پروژه ها می توانند به همان اندازه که شما می خواهید ساده یا پیچیده باشند. حتی شروع با یک دکمه ساده که رنگ را تغییر می دهد می تواند یک پروژه سرگرم کننده باشد. با هر پروژه کوچک، کمی بیشتر در مورد نحوه عملکرد جاوا اسکریپت چیزها یاد می گیرید.

در این پروژه‌ها، شما از ایده‌های اساسی که امروز آموخته‌ایم استفاده خواهید کرد: متغیرها برای ذخیره اطلاعات، توابع برای انجام وظایف، و رویدادها برای مدیریت تعاملات. هر پروژه به شما کمک می کند تا مشکل گشا و متفکر خلاق تری باشید.

لذت خلق چیزی از ابتدا بسیار هیجان انگیز است. با جاوا اسکریپت، قدرت تبدیل ایده ها به تجربیات دیجیتال واقعی را دارید. مثل این است که یک تصویر بکشید و سپس شخصیت ها را زنده کنید!

نکاتی برای یادگیری جاوا اسکریپت

یادگیری یک زبان جدید می تواند سرگرم کننده و جالب باشد. در اینجا چند نکته ساده وجود دارد که می تواند به شما در سفر با جاوا اسکریپت کمک کند:

به یاد داشته باشید، هر متخصص زمانی یک مبتدی بود. از فرآیند کشف نحوه عملکرد جاوا اسکریپت لذت ببرید و به زودی می توانید وب سایت های شگفت انگیزی برای خود ایجاد کنید.

کاوش در ایده های پیشرفته تر (با سرعت ملایم)

همانطور که با جاوا اسکریپت راحت تر می شوید، ممکن است درباره ایده های پیشرفته تری بشنوید. اما نگران نباشید! در حال حاضر، روی اصول اولیه تمرکز کنید. وقتی آماده شدید، می توانید در مورد حلقه ها، شرایط و آرایه ها بیاموزید.

به عنوان مثال، یک حلقه مانند یک چرخ و فلک است که دور می شود و یک کار را بارها تکرار می کند. شرایط به رایانه کمک می کند تا تصمیم بگیرد - مانند انتخاب بین دو عمل مختلف بر اساس آنچه در صفحه وب اتفاق می افتد.

این ایده ها مانند طعم های اضافی هستند که کدنویسی شما را هیجان انگیزتر می کنند. وقتی بزرگتر شدید و با جاوا اسکریپت بیشتر آشنا شدید، می توانید به آرامی این ایده های پیشرفته را امتحان کنید. امروز کافی است تکه های ساده را یاد بگیرید.

هر ذره کوچکی از یادگیری، پایه ای قوی برای آینده می سازد. به هر قدمی که در یادگیری جاوا اسکریپ برمی دارید افتخار کنید!

خلاصه

در این درس متوجه شدیم:

به خاطر داشته باشید که یادگیری جاوا اسکریپت یک سفر است. هر ذره تمرین شما را باهوش تر و خلاق تر می کند. از یادگیری لذت ببرید و از کاوش در جادوی توسعه وب لذت ببرید!

Download Primer to continue