دانلود و کاربرد جاوااسکریپت
در این بخش از آموزش جاوااسکریپت از تاپ سایت 98 قصد داریم به بحث دانلود جاوااسکریپت بپردازیم توضیح دهیم که جاوااسکریپت چیست و چه کاربردی دارد؟ چگونه و با چه ادیتوری باید کار کنیم؟
چگونه جاوااسکریپت را دانلود کنم؟
اولین سوالی که افراد مبتدی مطرح می کنند این است که : چگونه جاوااسکریپت را دانلود کنم؟
جاوااسکریپت نیاز به دانلود ندارد و کافی است روش کار با آن را یاد بگیرید.
برای استفاده از جاوااسکریپت می توانید از ادیتور یا نرم افزار phpstorm یا نرم افزارهای حرفه ای دیگر استفاده کرد.
ادیتور ساده برای کار با جاوااسکریپت notepad++ است.
ما برای کارهای حرفه ای از ادیتور phpstorm استفاده می کنیم و برای کارهای کوچک از notepad++ استفاده می کنیم.
برای دانلود ادیتور جاوااسکریپت می توانید آن را در گوگل جستجو نمایید و آن را از سایت های دنلودی ، دانلود نمایید.
جاوا اسکریپت چیست
جاوا اسکریپت چیست و چه کاربردی دارد؟
چرا JavaScript را مطالعه می کنیم؟
JavaScript یکی از 3 زبانی است که توسعه دهندگان وب باید یاد بگیرند:
HTML برای تعریف محتوای صفحات وب
CSS برای مشخص کردن چیدمان صفحات وب
جاوا اسکریپت برای برنامه ریزی رفتار صفحات وب
صفحات وب تنها مکانی برای استفاده از JavaScript نیستند. بسیاری از برنامه های دسکتاپ و سرور از JavaScript استفاده می کنند. Node.js شناخته شده ترین است. برخی از بانکهای اطلاعاتی مانند MongoDB و CouchDB نیز از JavaScript به عنوان زبان برنامه نویسی خود استفاده می کنند.
جاوا اسکریپت و جاوا کاملاً متفاوت از نظر مفهومی و طراحی هستند.
جاوا اسکریپت در سال 1995 توسط Brendan Eich اختراع شد و در سال 1997 به یک استاندارد ECMA تبدیل شد.
ECMA-262 نام رسمی استاندارد است. ECMAScript نام رسمی زبان است.
قابلیت های جاوا اسکریپت تا حد زیادی به محیطی که در آن اجرا می شود بستگی دارد. به عنوان مثال ، Node.js از عملکردهایی پشتیبانی می کند که به JavaScript امکان خواندن / نوشتن پرونده های دلخواه ، انجام درخواست های شبکه و غیره را می دهد.
جاوا اسکریپت در مرورگر می تواند همه موارد مربوط به دستکاری صفحه وب ، تعامل با کاربر و وب سرور را انجام دهد.
به عنوان مثال ، جاوا اسکریپت در مرورگر قادر است:
HTML جدید را به صفحه اضافه کنید ، محتوای موجود را تغییر دهید ، سبک ها را تغییر دهید.
به اقدامات کاربر واکنش نشان دهید مانند روی کلیک های ماوس ، حرکات اشاره گر ، فشار کلیدها .
درخواست ها را از طریق شبکه به سرورهای از راه دور ارسال ، بارگیری و بارگذاری پرونده ها (به اصطلاح فناوری های AJAX و COMET ) ارسال کنید.
کوکی ها را دریافت و تنظیم کنید ، به بازدید کننده سؤال کنید ، پیام دهید.
مثالهای جاوا اسکریپت قدیمی ممکن است از یک ویژگی خاص استفاده کنند:
ویژگی type مورد نیاز نیست. JavaScript زبان نویسی پیش فرض در HTML است.
کدهای جاوا اسکریپت را می توان در قسمت head قرار داد.
می توان قبل از تگ بسته body قرار داد.
می توان در یک فایل اکسترنال با پسوند js قرار داد. برای اتصال فایل جاوا اسکریپت به html از تگ script استفاده نمایید مثلا:
مزایای فایل اکسترنال JavaScript
قرار دادن اسکریپت ها در فایل های اکسترنال جاوا اسکریپت با پسوند js مزایایی دارد:
کد HTML و کد جاوا اسکریپت را از هم جدا می کند.
باعث می شود کدهای HTML و جاوا اسکریپت خوانایی بهتری داشته باشند و نگهداری آنها راحت تر است.
فایلهای جاوا اسکریپت ذخیره شده می توانند سرعت لود صفحه را افزایش دهند.
برای افزودن چندین فایل اسکریپت به یک صفحه - از چندین برچسب script استفاده کنید.
چه چیزی JavaScript را منحصر به فرد می کند؟
حداقل سه نکته عالی در مورد جاوا اسکریپت وجود دارد:
ادغام کامل با HTML / CSS.
کارهای ساده به سادگی انجام می شوند.
پشتیبانی توسط همه مرورگرهای اصلی و به طور پیش فرض فعال است.
JavaScript تنها فناوری مرورگر است که ترکیبی از این سه چیز است.
این همان چیزی است که جاوا اسکریپت را بی نظیر می کند. به همین دلیل گسترده ترین ابزار برای ایجاد رابط های مرورگر است.
گفته می شود ، جاوا اسکریپت همچنین امکان ایجاد سرور ، برنامه های موبایل و غیره را فراهم می آورد.
کاربرد جاوااسکریپت
حال به کاربرد جاوااسکریپت می رسیم.
JavaScript می تواند محتوای HTML را تغییر دهد.
JavaScript می تواند مقادیر یا attribute ها را در HTML را تغییر دهد.
جاوا اسکریپت می تواند استایل یا css عناصر html را تغییر دهد.
جاوا اسکریپت می تواند عناصر HTML را مخفی کند.
JavaScript می تواند عناصر HTML را نمایش دهد.
فریمورک هایی برای ساخت اپلیکیشن اندروید و ios وجود دارند که از html,css و جاوااسکریپت استفاده می کنند.
تغییر محتوای html با جاوا اسکریپت
یکی از کارهایی که می توان با جاوا اسکریپت انجام داد تغییر محتوای html با جاوا اسکریپت می باشد.
در مثال زیر با کلیک روی دکمه متن و محتوای تگ a تغییر می کند.
با استفاده از متد getElementById می توان این کار را انجام داد. این متد به دنبال عنصر با id خاص می گردد و پس از پیدا کردن آن مقدار یا محتوا را تغییر می دهد.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1>TopSite98.com</h1>
<a id="top" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick='document.getElementById("top").innerHTML = "click TopSite98"'>Change</button>
</body>
</html>
تغییر css با جاوااسکریپت
حال به سراغ تغییر css با جاوااسکریپت می رویم.
در مثال زیر با کلیک روی دکمه و با رویداد onclick می توانیم استایل یا css را تغییر دهیم.
جاوااسکریپت ابتدا عنصر با id ی h را پیدا می کند سپس رنگ آن را تغییر می دهد.
با کلیک روی دکمه مشاهده می کنید رنگ h1 تغییر می کند.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="hh">TopSite98.com</h1>
<a id="top" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick='document.getElementById("hh").style.color = "red"'>Change</button>
</body>
</html>
تغییر ویژگی عنصر html با جاوااسکریپت
یکی دیگر از کاربردهای جاوااسکریپت ، تغییر ویژگی عنصر html با جاوااسکریپت می باشد.
ما در تگ a یک ویژگی بنام title داریم. وقتی با موس روی تگ a قرار بگیریم یا اصطلاحا هاور کنیم متن داخل title نمایش داده می شود.
در مثال زیر با استفاده از جاوااسکریپت ، متن داخل ویژگی title را تغییر می دهیم.
ابتدا با استفاده از id ، عنصر را پیدا کرده و سپس ویژگی آن را تغییر می دهیم.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="hh">TopSite98.com</h1>
<a id="top" href="https://topsite98.com/">topsite98</a>
<script> document.getElementById('top').title='abbasi'; </script> </body>
</html>
مخفی کردن عنصر html با جاوااسکریپت
برای مخفی کردن عنصر html با جاوااسکریپت می توانیم با متد getElementById عنصر html را پیدا کنیم سپس با استفاده از دستور display ویژگی none را برای آن تعیین کنیم این کار باعث مخفی شدن عنصر html می شود.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="hh">TopSite98.com</h1>
<a id="top" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="document.getElementById('hh').style.display='none'">hide</button>
</body>
</html>
نمایان کردن عنصر html با جاوااسکریپت
در قسمت بالا نحوه مخفی کردن عنصر html را یاد گرفتید.
برای نمایش و نمایان کردن عنصر html با جاوااسکریپت می توانیم با متد getElementById عنصر html را پیدا کرده و با استفاده از دستور display ویژگی block را برای آن اعمال کنیم این کار باعث نمایش عنصر مخفی html می شود.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="hh">TopSite98.com</h1>
<a id="top" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="document.getElementById('hh').style.display='none'">hide</button>
<button type="button" onclick="document.getElementById('hh').style.display='block'">show</button>
</body>
</html>
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید