طراحی سایت با جاوا اسکریپت + کاربرد های آن
همیشه هرجا وقتی صحبت از طراحی وبسایت هست اسم جاوا اسکریپت هم شنیده میشه. اگر وبسایت رو مثل بدن انسان در نظر بگیریم , HTML و CSS چارچوب بدن مثل اسکلت و بافت ها و جاوا اسکریپت مثل رفتار و حرکت بدن هست. در اصل این جاوا اسکریپت هست که به سایت پویایی میبخشه. عملاً اگر جاوا اسکریپت نباشه , وبسایت ما یک صفحه ساده با متن یا عکس هست که صرفاً جنبه بصری داره و کار خاصی انجام نمیده برای همین طراحی سایت با جاوا اسکریپت از مهم ترین اصل هاست .
جاوا اسکریپت در سال 1995 نوشته شده و از زبان‌هایی هست که از Ecma 262 پیروی میکنه.جاوا اسکریپت از زبان‌های برنامه نویسی مطرح دنیاست و جز زبان‌های سطح بالا به حساب میاد. وقتی به یک زبان سطح بالا گفته میشه ,ممکن هست این باور غلط به وجود بیاد که یاد گرفتن این زبان ها سخت هست در حالی که سطح بالا بودن میزان نزدیک بودن یک زبان رو به زبان انسان‌ها نشون میده ؛ درنتیجه یاد گرفتن و فهم این زبان‌ها اسون تر هست, مخصوصاً اگر مقداری زبان انگلیسی هم بلد باشیم همچنین دوره رایگان آموزش جاوا اسکریپت را نیز میتوانید از این لینک بگذرانید .
از مهمترین کاربرد های جاوا اسکریپت استفاده از آن در مرورگرها و طراحی وب هست اما به همین خلاصه نمیشه و دربرنامه نویسی موبایل و ساخت بازی هم کاربرد داره. با توجه به بازارکار عالی و اسون بودن این زبان به نسبت خیلی از زبان‌های برنامه نویسی دیگه اگر علاقه‌مند به یادگیری جاوا اسکریپت هستید, دوستانه پیشنهاد میکنم که حتماً یه سر به آموزش‌های سبزلرن در این زمینه بزنید
قبل از اینکه به سراغ اصل مطلب بریم , خوب هست به این نکته هم توجه کنیم که زبان جاوا و جاوا اسکریپت با هم تفاوت خیلی زیادی دارند و اصلاً نباید با هم اشتباه گرفته بشن
در ادامه برای اینکه با نقش جاوا اسکریپت در طراحی وب بیشتر آشنا بشیم , در قدم اول بررسی میکنیم که جاوا اسکریپت کجا نوشته و نمایش داده میشه.در قدم بعدی با هم میبینیم که کد های جاوا اسکریپت چطوری به سند HTML ما اضافه میشن. در قدم سوم با کمک چند مثال نحوه تعامل جاوا اسکریپت با HTML و CSS رو با هم بررسی میکنیم.
قدم اول : همونطور که زمان مدرسه برای نوشتن مشق به دفتر نیاز داشتیم اینجا هم برای نوشتن و نگهداری کد ها به دفتر نیاز داریم . به این دفتر در دنیای برنامه نویسی Text editor گفته میشه . Text editor های مختلفی وجود داره که از معروفترین اونها میشه به vscode اشاره کرد. برای نمایش دادن کد های جاوا اسکریپت فقط به یک مرورگر نیاز داریم؛ مثلاً همین مرورگری که با اون سایت سبز لرن رو بالا آوردید میتونه مناسب باشه. همینطور که میبینید نوشتن و اجرای کدهای جاوا اسکریپت برای طراحی سایت به ابزار خاص و پیچیده ایی نیاز نداره
قدم دوم : برای پیاده‌سازی جاوا اسکریپت و مشاهده تغییراتی که در وبسایت به وجود میاره , لازم هست که حتماً به فایل html اضافه بشه و این کار به روش‌های متفاوتی میتونه اتفاق بیوفته . گفتن این مسأله هم اینجا شاید خالی از لطف نباشه که اگر با ساختار کلی html آشنایی ندارید میتونید با کمک مقالاتی که در این باره در همین سایت نوشته شده درک بهتری از موضوع پیدا کنید . اضافه کردن جاوا اسکریپت در روش اول خیلی ساده هست این کار به کمک تگ های script در بدنه html انجام میشه.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
javascript code در این قسمت کدها نوشته میشوند
</script>
</body>
</html>
روش دوم که میشه از ان به عنوان اصولی‌ترین روش هم یاد کرد به این صورت هست که کد های جاوا اسکریپت رو در یک فایل جدا با پسوند .js نوشته و بعد این فایل رو هم با کمک تگ <script> به html اضافه میکنیم. در اینجا لازم هست که حتماً اسم فایل ما درست وارد بشه
شاید این مطلب در ابتدا گنگ به نظر برسه اما به کمک عکس زیر میشه بهتر این مطلب رو درک کرد
کاربرد جاوا اسکریپت در طراحی سایت
اگر با زبان های Html و Css کار کرده باشید، قطعا می دانید که این زبان ها برای توسعه ظاهر سایت استفاده می شوند و شما می توانید به کمک آن ها هر ظاهر هر وب سایتی که می خواهید را پیاده سازی کنید اما نمی توانید برای سایت مورد نظرتان رفتار و واکنش مختلفی را تعریف کنید.
به عنوان مثال نمی توانید برای اتفاقاتی که توسط کاربر در وب سایت رخ می دهند، نمی توانید با Html و Css عکس العمل های مناسبی را نشان دهید اما این کار به کمک جاوا اسکریپت امکان پذیر است. در اصل جاوا اسکریپت هدف و کاربردش همین است.
شما می توانید به کمک جاوا اسکریپت برای وب سایت خود رفتار های مختلف را تعریف کنید. به عنوان مثال اگر کاربر روی دکمه یا قسمتی از وب سایت کلیک کرد، وب سایت شما واکنش مناسب و مورد نیاز را نسبت به کاربر نشان دهد.
اگر بخواهم مثال بهتر و قابل درک تری بزنم، می توان به یک فروشگاه اینترنتی اشاره کرد.
شما اگر در یک فروشگاه روی دکمه های”اضافه کردن به سبد خرید” محصولات کلیک کنید، آن محصول به سبد خرید شما اضافه می شود. این عمل اضافه شدن به سبد خرید تنها با جاوا اسکریپت امکان پذیر بوده و بدون آن نمی توانید این عمل را پیاده سازی کنید.
برای طراحی سایت با جاوا اسکریپت از چه ابزار هایی استفاده می شود؟
شما می توانید برای برنامه نویسی با جاوا اسکریپت از نرم افزار های مختلف مثل وی اس کد، اتم، سابلایم تکست، پی اچ پی استورم و … استفاده کنید.
شما می توانید بنا به علاقه و معیار های خود با هر کدام از این نرم افزار ها که دوست داشتید با زبان جاوا اسکریپت کار کنید. موضوع مهم این است که ابزار های ذکر شده فقط ابزار هایی هستند که به برنامه نویسی شما سرعت می بخشند و کد های جاوا اسکریپت همیشه ثابت هستند. یعنی هیچ تفاوتی نمی کند که شما از کدام یک از این ابزار ها استفاده می کنید. با هر کدام که کار کنید، کد های یکسانی را می نویسید.
به عنوان مثال اگر بخواهیم به کمک زبان جاوا اسکریپت در نرم افزار وی اس کد یک پیغام خوش آمد گویی به کاربر نمایش دهیم، از کد زیر استفاده می کنیم:
alert("به وب سایت سبزلرن خوش آمدید")
حال اگر بخواهیم به جای وی اس کد از نرم افزار Atom استفاده کنیم، باز هم همین کد را خواهیم نوشت و از لحاظ کد هیچ تفاوتی ندارند و کد های جاوا اسکریپت همیشه یکسان هستند.
اما اگر بخواهید محبوب ترین و پر استفاده ترین نرم افزار را برای برنامه نویسی با جاوا اسکریپت استفاده کنید، قطعا وی اس کد را پیشنهاد می کنم.
شما می توانید نرم افزار وی اس کد (VsCode) را از این وب سایت دانلود و استفاده نمایید.
اما برای کار با جاوا اسکریپت علاوه نرم افزار، به یک مرورگر نیز نیاز داریم. به این شکل که کد های مورد نیاز را در نرم افزار مورد نظر نوشته و سپس کد های نوشته شده را در در مرورگر اجرا می کنیم تا خروجی حاصل را مشاهده و تست کنیم.
در این میان مرورگر های مختلفی مثل گوگل کروم، فایرفاکس، اپرا، بریو و … وجود دارند که برای این کار می توانید از آن ها استفاده کنید. همان طور که نرم افزار انتخابی شما برای کد نویسی تفاوتی نداشت چه نرم افزاری باشد، برای اجرای کد های جاوا اسکریپت نیز هیچ تفاوتی ندارد که آن ها را با چه مرورگری اجرا کنید. چون همه مرورگر تقریبا خروجی یکسانی را به شما نمایش می دهند اما اگر بخواهید از محبوب ترین و پر استفاده ترین مرورگر موجود استفاده کنید، قطعا مرورگر گوگل کروم را به شما پیشنهاد می کنم.
می توانید مرورگر گوگل کروم را از این لینک دانلود کرده و استفاده نمایید.
آیا جاوا اسکریپت برای طراحی سایت کافی است؟
همان طور که می دانید زبان های Html، Css و جاوا اسکریپت سه مهره اصلی برنامه نویسی فرانت اند و طراحی سایت هستند و اگر آن ها را بلد باشید می توانید ظاهر هر وب سایت دلخواه را توسعه دهید.
اما از آن جایی که امروزه زبان جاوا اسکریپت فریمورک ها و لایبرری (کتابخانه) های بسیار زیادی دارد، اکثر شرکت ها و تیم های برنامه نویسی ترجیح می دهند به جای استفاده مستقیم از جاوا اسکریپت، از تکنولوژی های آن استفاده کنند و اگر بخواهیم میانگینی از بازار کار داشته باشیم، شما نمی توانید فقط با جاوا اسکریپت سهم چشمگیری از بازار کار را به خود اختصاص بدید.
از تکنولوژی های جاوا اسکریپت که برای برنامه نویسی فرانت اند استفاده می شوند، می توان به ری اکت، ویو، انگیولار، جی کوئری و … اشاره کرد که برای ورود به بازار کار باید یکی از آن ها مسلط باشید.
از بین تکنولوژی های موجود لایبرری ری اکت بازار کار، محبوبیت بالا، جامعه آماری زیاد و … منابع آموزشی زیادی دارد و اگر موارد ذکر شده از معیار های شما می باشند، ری اکت را برایتان پیشنهاد می کنم.
شما می توانید برای شروع یادگیری ری اکت به داکیومنت آن به آدرس reactjs.org مراجعه کنید.
جاوا اسکریپت برای برنامه نویسی سمت سرور
همان طور که در ابتدای مقاله ذکر شد، امروزه از جاوا اسکریپت علاوه بر حوزه برنامه نویسی فرانت اند در حوزه برنامه نویسی سمت سرور نیز استفاده می شود.
از تکنولوژی های جاوا اسکریپت که در سمت سرور استفاده می شوند، می توان به node js، deno js، express، nest js و … اشاره کرد و از بین تکنولوژی های ذکر شده، node js بهترین بازار و جامعه آماری را دارد.
در واقع node js فریمورک یا کتابخانه جدا از جاوا اسکریپت نیست. بلکه یک رانتایم برای جاوا اسکریپت است که همان کد های جاوا اسکریپت را در خارج از مرورگر اجرا می شود.
با توجه به مطالب گفته شده اگر شما جاوا اسکریپت را به خوبی یاد بگیرید، می توانید علاوه بر حوزه برنامه نویسی فرانت اند در حوزه برنامه نویسی سمت سرور نیز فعالیت کرده و درآمد چندین برابری کسب کنید.
اگر قصد دارید زبان جاوا اسکریپت را به صورت اصولی و از مقدماتی تا پیشرفته یاد بگیرید، می توانید از دوره رایگان جاوا اسکریپت سبزلرن استفاده کنید.
سخن پایانی
دراین مقاله سعی کردیم در مورد طراحی سایت با جاوا اسکریپت و کاربرد های آن در این حوزه توضیح دهیم.
امیدوارم این مقاله برای شما مفید واقع شده باشد. اگر سوال یا پیشنهادی در این زمینه داشتید، حتما در قسمت کامنت های مقاله مطرح کنید تا پاسخ داده شود.
ضمنا، برای درک بهتر و عمیق مطالب گفته شده در مقاله پیشنهاد می کنم ویدئوی مرتبط با مقاله را نیز مشاهده کنید.
تا یک مقاله مفید دیگر خدانگهدار.
محمدامین سعیدی راد
نظرات
این مطلب هنوز هیچ نظری نداره، تو اولیش رو بنویس :)