آموزش جاوااسکریپت ، بخش اول – شروع با جاوااسکریپت

%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ac%d8%a7%d9%88%d8%a7%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d8%8c-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84-%d8%b4%d8%b1%d9%88%d8%b9-%d8%a8%d8%a7-%d8%ac

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

به مانند هر زبان برنامه نویسی دیگری برای کد زدن با جاوااسکریپت هم نیاز به محیطی دارید که بتوانید آن را تست کنید اشکال زدایی کنید و نهایت کد خود را منتشر کنید. جاوااسکریپت بیشتر در وب مورد استفاده قرار می گیرد و از آنجایی که زبانی سمت کاربر است اطلاعات سایت از سرور فراخوانی و سمت کاربر پردازش صورت می گیرد به این صورت که اگر بخشی از سایت را با جاوااسکریپت آماده کرده باشید پس از این که کاربر به آدرس سایت مراجعه کند اطلاعات به مرورگر آن منتقل شده و سپس در مرورگر اطلاعات شروع به پردازش می کنند و در خروجی نمایش نهایی نمایان می شود. پس برای کار با این زبان تنها چیزی که نیاز دارید که مرورگر می باشد به عنوان مثال می توان به گوگل کروم اشاره کرد همچنین از دیگر مروگر ها موجود می توان به Firefox , Microsoft EDGE , Apple Safari  و هر مروگر دیگری که از جاوااسکریپت پشتیبانی کند را می توانید استفاده کنید. همانطور که در بالا اشاره شد پس از پردازش ،‌اطلاعات در خروجی نمایش داده می شود، اما موضوع مهم تری که در بخش اشکال زدایی موجود است این است که بتوانیم کد هایی که نوشته ایم را اشکال زدایی کنیم برای این منظور مروگرها ابزار های درونی خود را تولید و در اختیار توسعه دهندگان قرار داده اند که به طور پیش فرض در تمامی مرورگر های معروف این امکانات موجود می باشد از جمله ابزار هایی که بسیار مورد استفاده قرار خواهیم داد ابزار Console است که برای رفتن به آن کافیست بخش Developer مرورگر خود را با فشردن دکمه F12  باز کنید و به تب کنسول مراجعه کنید اگر صفحه ای که در حال مشاهده آن هستید دارای خطای برنامه نویسی باشد در این بخش آن خطا توضیح داده خواهد شد و در حقیقت این بخش دیباگر مروگرها برای توسعه دهندگان وب محسوب می شود. در زیر عکس از کنسول مروگر کروم آورده شده است.

google-chrome-console-wpmen-ir

Google Chrome Console Version 53.0.2785.92 (64-bit)

 برای کار کردن با جاوااسکریپت حتما نیاز است که ابتدا با HTML کار کرده باشید و با مفهوم و طریقه استفاده از آن آشنا شده باشید برای به کار بردن جاوااسکریپت درون صفحه وب می بایست آن را در بخشی تعریف کنید و سپس اقدام به کد نویسی کنید دو روش برای این منظور موجود است که در زیر به آن ها اشاره خواهیم داشت:

۱. نوشتن کد درون سند HTML‌ :

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

<!DOCTYPE html>
<html>
<head>
	<title>استفاده از جاوااسکریپت درون سند اچ تی ام ال</title>
</head>
<body>
<script type="text/javascript"> // این تگ معرف بخش اسکریپت می باشد 
	console.log('مردان وردپرس'); // I      پرینت مقدار مردان وردپرس درون کنسول
</script> // پایان تگ اسکریپت
</body>
</html>

به همین سادگی می توانید درون سند HTML خود از اسکریپت های نوشته شده به زبان جاوااسکریپت استفاده کنید.

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

	console.log('مردان وردپرس'); // I      پرینت مقدار مردان وردپرس درون کنسول

مقدار بالا را درون یک فایل با نام main.js ذخیره کنید.

<!DOCTYPE html>
<html>
<head>
	<title>استفاده از جاوااسکریپت درون سدن HTML</title>
    <!--   فراخوانی فایل جاوااسکریپت از بیرون سند -->
	<script type="text/javascript" src="main.js"></script> 
</head>
<body>
</body>
</html>

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

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

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۱ آبان ۱۳۹۵
صادق مهدی لو

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

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.