سایت رسمی گروه وب رسام | webrasam | طراحی سایت، فروش قالب وردپرسی، کدهای اسکریپتی، قالب html و…
آموزش جاوا اسکریپت – بخش اول (مقدمه + ساختار)
گروه وب رسام قصد دارد تا در یک آموزش جامع جاوا اسکریپت از 0 تا 100 به این زبان برنامه نویسی بپردازد و تمامی سرفصل ها را قسمت به قسمت همراه با مثال های کاربردی به شما همراهان گرامی آموزش دهد. پس پیشنهاد می کنیم در بخش اول آموزش (ساختار جاوا اسکریپت) همراه ما باشید.
جاوا اسکریپت چیست؟
یک زبان سطح بالا می باشد که توسط مرورگر تفسیر می شود و خروجی آن HTML است. در واقع با استفاده از جاوا اسکریپت می توان:
- محتوای درون تگ های HTML را تغییر داد.
- مقدار ویژگی تگ های HTML را تغییر داد.
- استایل تگ های HTML را تغییر داد.
- یک تگ HTML را مخفی و یا نمایان کرد.
نکته: جاوا اسکریپت از نظر مفهوم و طراحی کاملا با جاوا متفاوت می باشد.
در جاوا اسکریپ برای انجام هر اکشن (action) ای در سایت به سه آیتم اصلی نیازمندیم.
۱- شیء (object) : مثلا یک باکس (div)، یک دکمه (button) یا… که قرار است روی آن یک رویداد اتفاق بیفتد.
۲- رویداد (event) : عملی که قرار است روی یک شی انجام شود. مثلا کلیک کردن، دابل کلیک کردن، ماوس هاور شدن یا…
۳- فعالیت (activity) : اکشن و اتفاقی که قرار است بیفتد. مثلا تغییر رنگ، نمایش متن، تغییر ابعاد و یا…
طریقه ی نوشتن دستورات جاوا اسکریپت
به سه روش می توانیم دستورات جاوا اسکریپت را در پروژه خود پیاده سازی نماییم. (ساختار جاوا اسکریپت)
۱- نوشتن کدها و دستورات جاوا اسکریپت درون تگ HTML
داخل تگ اچ تی ام ال که درواقع شی (object) ما محسوب می شود دستورات جاوا اسکریپتی را می نویسیم. به عنوان مثال:
<!DOCTYPE html> <html> <head> <title> آموزش جاوا اسکریپت </title> <head/> <body> <button onclick=”alert(‘سلام به وب رسام خوش آمدید’)”> کلیک کنید <button> <body/> </html>
طبق تعریفی که در بالا آوردیم در مثال فوق، شیء (object) برابر است با تگ button، رویداد (even) برابر است با onclick (کلیک کردن بر روی دکمه)، و نتیجه عملیات بالا (activity) برابر است با نمایش پیغام خوش آمدگویی به سایت.
۲- نوشتن کدها و دستورات جاوا اسکریپت درون همان فایل HTML، PHP یا…
در این حالت تمامی دستورات را باید داخل یک تگ اسکریپت <script> نوشته و در داخل تگ body یا head قرار دهیم. در این حالت می توان با استفاده از اسم سلکتور (تگ p، تگ div یا…)، آی دی اختصاص داده شده به تگ و یا کلاس اختصاص داده شده به آن، شیء (object) مورد نظر را فراخوانی کرد. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title> آموزش جاوا اسکریپت </title>
<head/>
<body>
<button id=”btn”> کلیک کنید </button>
<script type="text/javascript">
Document.getElementById(“btn”).onclick=function(){
Alert(‘به سایت وب رسام خوش آمدید’);
}
</script>
<body/>
</html>
نکته: با استفاده از دستور getElementById میتوانیم المانی که قصد انتخابش را داریم فراخوانی نماییم.
۳- نوشتن کدها و دستورات جاوا اسکریپت در یک فایل خارجی
در این روش تمامی دستورات جاوا اسکریپتی را داخل یک فایل دیگر نوشته و سپس آن فایل را با استفاده از تگ <script> به فایل مورد نظر خود اضافه می کنیم. در اینجا لازم است به این نکته توجه داشته باشید زمانی که دستورات را داخل یک فایل با فرمت (script.js) می نویسیم، دیگر نیازی نیست در آن فایل از تگ <script> استفاده نماییم. به عنوان مثال:
یک فایل ایجاد می کنیم با نام script.js و دستورات مثال قبل را بصورت زیر در آن قرار می دهیم.
Document.getElementById(“btn”).onclick=function(){
Alert(‘به سایت وب رسام خوش آمدید’);
}
حال داخل فایل مورد نظر خود (در این مثال index.html) فایل script.js را بصورت زیر فراخوانی می نماییم.
<html> <head> <title> آموزش جاوا اسکریپت </title> <head/> <body> <button id=”btn”> کلیک کنید </button> <script src="script.js"></script> <body/> </html>
نکته: مزایای استفاده از اسکریپت خارجی:
قرار دادن دستورات جاوا اسکریپت در فایل های خارجی چندین مزیت دارد که در ادامه به آن ها می پردازیم:
1- جداسازی فایل های html و js از یکدیگر.
2- استفاده از فایل های HTML و JS و خواندن آن ها را آسان تر می نماید.
3- فایل های جاوا اسکریپت کش شده در مرورگر می تواند سرعت لود صفحات را تسریع بخشد.
محل قرارگیری اسکریپ در سند اچ تی ام ال
کدهای اسکریپت را می توانید داخل تگ <head></head> یا <body></body> قرار دهید. اما بهتر است برای بهبود بخشیدن به سرعت سایت در پایین عنصر body قرار گیرند.
بررسی کامل تگ <script> به همراه ویژگی های آن
همان طور که در ابتدا به آن اشاره نمودیم از این تگ برای نوشتن دستورات جاوا اسکریپت استفاده می گردد و بصورت کلی در مورد آن در مبحث html آموزش های لازم را دیده ایم اما لازم دانستیم بار دیگر به صورت کلی و جزئی در مورد این تگ موارد مهم را مرور نماییم.
ویژگی های مهم تگ <script> :
۱- src: برای مشخص کردن آدرس یک فایل خارجی استفاده می شود.
<script src=”file-name.js”></script>
۲- type: برای مشخص کردن نوع اسکریپت به کار می رود و در اغلب مباحث جاوا اسکریپت مقدار آن برابر با text/javascript می باشد.
<script type=”text/javascript”></script>
۳- charset: این ویژگی، رمزگذاری کاراکترهای مورد استفاده در یک فایل اسکریپت خارجی را مشخص می کند. زمانی کاربرد دارد که رمزگذاری کاراکتر در فایل خارجی با رمزگذاری در سند HTML متفاوت باشد. مقادیر آن می تواند UTF=8، ISO-8859-1 و… باشد.
<script src=”myscripts.js” charset=”UTF-8″></script>
۴- asynce: در حالت پیش فرض زمانی که مرورگر به تگ script می رسد، ابتدا اسکریپت ها را دانلود کرده سپس ادامه فایل html را لود می کند. با استفاده از این ویژگی زمانی که مرورگر به script رسیده دانلود آن را شروع می نمایداما منتظر اتمام دانلود نمی شود و بلافاصله ادامه فایل html را لود می کند.
<script src=”myscripts.js” async></script>
۵- defer: این ویژگی نیز دقیقا مانند async عمل می کند با این تفاوت که در async زمانی که اسکریپت بصورت کامل دانلود شد اجرا می گردد اما در ویژگی defer، اسکریپت حتی در صورت دانلود شدن نیز باید منتظر لود کامل html باشد و پس از آن اجرا گردد.
<script src=”myscripts.js” defer></script>
نکته: هر 4 ویژگی charset، src، defer، async فقط برای اسکریپت های خارجی قابل استفاده می باشد.
نکته: با توجه به توضیحی که در بالاتر اعلام شد اگر اسکریپت را داخل تگ <head> قرار دادید، بهتر است یکی از ویژگی های defer یا asynce را برای آن در نظر بگیرید.
نکته: در دستورات جاوا اسکریپت نیازی به نوشتن ویژگی type نیست چراکه بصورت پیش فرض برای زبان HTML مقدار این ویژگی جاوا اسکریپت می باشد.
<script type=”text/javascript”></script>
به پایان این بخش از آموزش جامع جاوا اسکریپت رسیده ایم. حتما دستوراتی که به عنوان مثال در بالا مطرح شد را خودتان چندین بار با ادیتور بنویسید و اجرا نمایید و بعد از تسط کافی بخش های بعدی را مطالعه نمایید.
در صورت هرگونه سوال، مشکل و یا راهنمایی از صفحه تماس با وب رسام با ما در ارتباط باشید.
