تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش JavaScript – بخش اول

آموزش JavaScript - بخش اول

آموزش جاوا اسکریپت درس اول

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

آشنایی اولیه با جاوا اسکریپت

در آموزش JavaScript درس اول می آموزیم کهاز طریق زبان جاوا اسکریپت میتوان محتوای سند HTML را تغییر داد.

به عنوان مثال با کلیک بر روی button محتوای پاراگراف p عوش می شود :

<html>
<head></head>
<body>
<p id="demo">Sitesazan Text 1</p>
<button type="button" onclick='document.getElementById("demo").innerHTML="Sitesazan Text 2"'>Click Here</button>

</body>

</html>

تابع onclick یعنی زمانی که بر روی دکمه کلیک شد، در این سند جزئی را که id آن demo است را پیدا کن و محتوای ان را تغییر بده ( innerHTML ) به: با کلیک بر روی دکمه متن اولیه به این متن تغییر میابد.

(به  single  یا  double quotesدستورات دقت کنید)

آموزش JavaScript – بخش اول :

<body>
 <h3>بعد از هر بار کلیک بر روی هر دکمه، صفحه را رفرش کنید تا به حالت اولیه باز گردد.</h3>
 <p id="demo">از طریق جاوا اسکریپت میتوان دستورات CSS را تغییر داد.</p>
 <button type="button" onclick="document.getElementById('demo').style.background='cyan' ">تغییر رنگ زمینه</button>
 <button type="button" onclick="document.getElementById('demo').style.fontSize='40px' ">افزایش فونت</button>
 <button type="button" onclick="document.getElementById('demo').style.display='none' ">پنهان کردن</button>
 <button type="button" onclick="document.getElementById('demo').style.display='block' ">نمایش</button>
</body>

در مثالهای بالا کاربردهای ساده ای از جاوا اسکریپت را دیدیم. اما ببینیم که کدهای جاوا اسکریپت را در کجای سند HTML باید بنویسیم؟

کدهای جاوا اسکریپت را میتوان درون خود سند HTML و در زوج تگ <script> نوشت. تگ <script> را همراه با کدهای درون آن، در تگ <head> و یا <body> میتواند قرار بگیرد. تگ <script> همیشه آخرین تگی است که در <body> قرار میگیرد. یعنی ابتدا صفحه را طرح بندی میکنید و بعد از نوشتن تمامی کدها، تگهای <script> را مینویسید. دلیل اینکه script را در انتهای body مینویسم، افزایش سرعت لود صفحه است.

در روش دیگر میتوان دستورات و کدهای جاوا اسکریپت را در فایلی جداگانه نوشت. همانند CSS میتوان دستورات جاوا اسکریپت را درون فایلی جداگانه نوشت و آن فایل را به سندمان ضمیمه کنیم. فایلی که کدهای جاوا اسکریپت درون آن نوشته میشوند را با پسوند .js ذخیره میکنیم. ضمیمه کردن فایل جاوا اسکریپت را از طریق همان تگ script انجام میدهیم. برای تگ <script> اتریبیوت  src را نوشته و مقدار آن را آدرس فایل جاوا اسکریپت میدهیم. این تگ <script> که قرار است دستورات جاوا اسکریپت را به سند ضمیمه کند، یا در body و یا در head میتواند قرار بگیرد. لازم به ذکر است وقتی که از فایل اکسترنال برای کدهای جاوا اسکریپت استفاده میکنیم، نیازی به نوشتن تگ <script> در این فایل اکسترنال نیست.

میتوان چندین فایل کدهای جاوا اسکریپت را به سند ضمیمه کرد که در این صورت برای هر فایل، تگ <script> جداگانه ای نوشته میشود.

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

برای نمایش خروجی های جاوا اسکریپت از ۴ متد زیر استفاده میکنیم:
۱) اگر بخواهیم داده ای را درون یکی از اجزاء سند HTML نمایش دهیم، از متد innerHTML استفاده میکنیم.
۲) اگر بخواهیم مثلا تابعی را تست کنیم، متد document.write()  را به کار میبریم.
۳) برای نمایش یک پیغام در پنجره اخطار، window.alert()  متدیست که به کار میرود.
۴) برای نمایش اطلاعاتی در کنسول مرورگر از متد console.loge()  استفاده میکنیم.

وقتی که میخواهیم به جزئی درون سند HTML دسترسی داشته باشیم،  متد(document.getElementById(id را مینویسیم. این یعنی در این سند HTML المنتی را با آی دی id انتخاب کن. تا اینجا جزء را انتخاب کردیم. در ادامه باید تعیین کنیم که محتوایی که درون این المنت باید نمایش داده شود چیست؟ در ادامه متد بالا .innerHTML را مینویسم که عبارت دلخواه را بعد از علامت مساوی مینویسیم:

<body>
	<p id="p01"></p>

	<script>
		document.getElementById("p01").innerHTML = 5*6;
	</script>
</body>

اگر بخواهیم درون پاراگراف یک عبارت را بنویسیم باید عبارت را درون علامت نقل قول بنویسیم. مثلا “سلام ”

متدی بعدی که معرفی شد، متد document.write() است. این متد برای تست کردن دستوری به کار میرود. مثلا برای اطمینان از اینکه فایل جاوا اسکریپت به صفحه ضمیمه شده است یا نه، میتوانیم در فایل اکسترنال درون پرانتز عبارتی را بنویسیم. اگر این عبارت در مرورگر نمایش داده شد، پس فایل اکسترنال ضمیمه شده است.

دستور زیر را در فایل اکسترنال جاوا اسکریپت مینویسیم:

“);document.write فایل ضمیمه شده است(”

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

در مثال زیر با کلیک بر روی دکمه، دکمه و پاراگراف حذف میشوند و به جای آن حاصل ضرب دو عدد ۵ و ۶ یعنی عدد ۳۰ نمایش داده میشود:

<body>
	<p id="p01">بر روی دکمه زیر کلیک کنید</p>
	<button type="button" onclick="document.write(5 * 6)"> click me </button>
</body>

نکته: این متد فقط برای تست کردن استفاده میشود.

متدی سومی که معرفی شد، متد window.alert()  است که عبارتی را که درون پرانتز نوشته شود را در پنجره اخطار نمایش میدهد:

<body>
 <script>
  window.alert("سلام");
 </script>
</body>

آخرین متد هم console.log() است که برای دیباگ کردن ( یعنی بر طرف کردن اشکالات کدهای نوشته شده ) به کار میرود. با این متد در قسمتهای آتی بیشتر آشنا میشوید.

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

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

Statement های جاوا اسکریپت از ترکیب value ( مقادیر )، operator ( عملگرها) ، expression (اصطلاحات) ، keyword ( کلمات کلیدی ) و comment ها ساخته میشوند. در ادامه به تشریح این مفاهیم میپردازیم.

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

در زبان جاوا اسکریپت دو نوع مقدار داریم که عبارتند از مقادیر ثابت ( fixed values ) و مقادیر متغیر ( variable value ). مقادیر ثابت را literal و مقادیر متغیر را variable مینامیم. اما ببینیم تفاوت بین این دو مقدار در چیست؟

مقادیر literal را با در نظر گرفتن دو قاعده مهم مینویسیم. قاعده اول نوشتن مقادیر به صورت اعداد صحیح یا اعشاری دسیمال و یا دو دویی است. یعنی اعداد را یا در مبنای ۱۰ و یا در مبنای ۲ مینویسیم. قاعده بعدی نوشتن مقادیر string یا رشته ای درون علامت نقل قول ( single یا double ) است. منظور از مقادیر رشته ای همان حروف و کلمات است.

مقادیر variable برای ذخیره سازی اطلاعات هستند و باید با قاعده ای خاص تعریف شوند. ابتدا با استفاده از کلمه کلیدی var تعیین میکنیم که چه حروفی متغیر های ما هستند. در ادامه در خطهای بعدی به این متغیرها مقدار دهی میکنیم. در مثال زیر x و y را متغیر تعریف کرده ایم و به x مقدار ۱۰ و به y مقدار ۱۵ را داده ایم. طبیعتا بین متغیر و مقدارش علامت تساوی قرار میگیرد:

var x, y;

x = 10;

y = 15;

 

عملگرها در جاوا اسکریپت

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

اصطلاحات در جاوا اسکریپت

اصطلاحات یا expression ترکیبی از value، variable و operator هاست که مقادیری را با آنها محاسبه میکنیم. مثلا میتوانیم دو عدد را با هم جمع یا ضرب یا … کنیم، یا اینکه یک متغیر را بعد از تعریف در نقداری عددی ضرب کنیم. همچنین جمع کردن دو یا چند مقدار رشته ای ( string ) هم در دسته اصطلاحات قرار میگیرد.

کلمات کلیدی در جاوا اسکریپت

کلمات کلیدی را برای تعریف اعمالی که قرار است انجام شوند به کار میبریم. مثلا کلمه کلیدی var برای تعیین متغیر ها و در ادامه انجام عملی خاص بر روی آن متغیر ها استفاده میشود.

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

در هر زبان برنامه نویسی میتوان توضیحاتی اضافه را برای بررسی کدها در آینده قرار داد. در ابتدای متنی که قرار است کامنت شود، دوعدد اسلش ( // ) قرار میدهیم.و یا اینکه تمام متن را درون علامت  */ و /* قرار داد:

/* متن کامنت */

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

Identifier ها نامهایی هستند که برای متغیر ها، توابع و متغیر ها استفاده میشوند. مثلا وقتی میخواهیم برای عمل خواص تابعی را تعریف کنیم ابتدا باید آن تابع را نام گذاری کنیم.

نکته ای که در رابطه با identifier ها باید بدان توجه کرد این است که اولین کاراکتر باید یک حرف، یا آندِر اسکور (  underscore  _ ) یا دالر ساین ( dollar sign $ ) باشد.

در بیشتر مواقع برای نامگذاری از عبارتهای دو یا چند قسمتی استفاده میکنیم. در identifier ها نمیتوان از space برای جدا کردن کلمات استفاده کنیم. بنابراین از روشی به نام Camel Case استفاده میکنیم. به این ترتیب که حرف اول هر کلمه را با حرف بزرگ مینویسیم و بین کلمات فاصله قرار نمیدهیم. مثلا my function را به صورت MyFunction مینویسیم. توجه کنید که برای جدا سازی کلمات از هم نمیتوان از علامت هایفِن ( – ) استفاده کرد چون برای علامت تفریق از این علامت استفاده میکنیم. اما از underscore میتوانیم استفاده کنیم. پس برای جدا سازی کلمات از underscore و خاصیت Camel Case استفاده میکنیم.

نکته: جاوا اسکریپت  Case Sensitive است. یعنی به بزرگ یا کوچک بودن حروف حساس است. مثلا کلمه var را نمیتوان به صورت VAR یا Var نوشت. یا به عنوان مثال میتوان firstname و firstName را دو متغیر جدا تعریف کرد.

آشنایی بیشتر با statement ها در جاوا اسکریپت

Statement های جاوا اسکربیپت دستوراتی هستند که به وسیله مرورگر اجرا میشوند. مثلا در statement زیر به مرورگر میگوییم که در جزئی که id آن p01 است، عبارت سلام را بنویس:

document.getElementById(“p01”).innerHTML = “سلام

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

بیشتر برنامه های جاوا اسکریپت شامل statement های زیادی هستند. این statement ها به ترتیبی که نوشته شده اند اجرا میشوند. در مثال زیر یک برنامه ساده را مینویسیم. در ابتدا متغیر ها را تعریف میکنیم و سپس به آنها مقدار میدهیم و یک عمل ساده ضرب را روی آنها انجام میدهیم. در انتها نتیجه را در یک پاراگراف نمایش میدهیم:

<body>
 <p id="p01"></p>
 <script>
  var x, y, z;
  x = 7;
  y = 8;
  z = 2*x + 3*y;
  document.getElementById("p01").innerHTML = z;
 </script>
</body>

Semicolon

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

White Space در جاوا اسکریپت

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

var x="sitesazan";
var x = "sitesazan";

اما بهتر است برای خواناتر بودن کدها، در اطراف operator ها یک فاصله را قرار دهید.

نکته: برای خوانا بودن کدها، بهتر است که هر خط کد، بیشتر از ۸۰ کاراکتر نباشد. اگر کاراکترها بیشتر از ۸۰ کاراکتر بدند، بهتر است که بعد از اپراتورها به خط بعد برویم و ادامه کدها را در خط بعدی بنویسیم.

نکته: بعضی مواقع نیاز داریم که دو یا چند statement مختلف را برای دو یا چند جزء بنویسیم که در اینصورت اجرا نخواهند شد. برای اجرا شدن تمام statement ها باید آنها را در آکولاد بنویسیم تا همه باهم اجرا شوند. وقتی که چند statement را در یک آکولاد بنویسیم، یک تابع ایجاد میشود. برای تابع باید نام دلخواهی را سِت کرد:

<body>
 <button type="button" onclick="myFunction()">کلیک کنید</button>

<p id="p01"></p>
<p id="p02"></p>

<script>
function myFunction() {
    document.getElementById("p01").innerHTML = "برای تابع باید نام دلخواهی را سِت کرد";
    document.getElementById("p02").innerHTML = "بعد از انتخاب نام تابع، کدهای جاوا اسکریپت را درون آکولاد بنویسید";
}
</script>
</body>

با توابع در قسمت های بعدی بیشتر اشنا میشویم. توجه کنید که قبل از هر statement تعداد ۴ فاصله ( space ) را قرار میدهیم.

کلمات کلیدی در جاوا اسکریپت

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

کلمات کلیدی که با آنها آشنا میشویم عبارتند از:

break , continue , debugger , do … while , for , function , if … else , return , switch , try … catch , var

در قسمتهای بعدی با کاربرد این کلمات کلیدی آشنا میشویم.

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

در ادامه این بخش با متغیر ها بیشتر آشنا میشویم. همانطور که گفتیم متغیر ها ( variable ) برای ذخیره سازی داده ها هستند.

در مثال زیر x عدد ۱۰ را ذخیره کرده است، y عدد ۱۵ و z مجوع اعداد x و y است:

;var x = 10

;var y = 15

;var z = x + y

در زبان برنامه نویسی، مانند جبر، میتوانیم به متغیرها مقدار بدهیم و هر معادله دلخواهی را بسازیم و از هر تعداد عمل جبری استفاده کینم.

یک تفاوت اساسی که بین جبر و برنامه نویسی وجود دارد این است که در برنامه نویسی علامت مساوی برای تخصیص دادن یک مقدار به یک متغیر استفاده میشود ونباید با علامت مساوی جبری اشتابه شود. معادل علامت مساوی جبری در برنامه نویسی، == خواهد بود. بنابراین وقتی بین یک متغیر و مقدارش علامت مساوی قرار میدهیم، یعنی این مقدار خاص را به این متغیر تخصیص داده ایم. در برنامه نویسی عبارت x = x + 5 معنا دار است. چرا که عبارت x + 5 به متغیر x تخصیص داده شده است. اما در جبر عبارت مذکور معنا ندارد.

متغیر ها در زبان جاوا اسکریپت میتوانند مقدار عددی مثلا ۴۰ یا مقدار متنی ( string ) داشته باشند. داده های مختلفی را میتوان در متغیرها ریخت که در اینجا فقط داده های string و عددی را در نظر میگیریم و همانطور که در بالا ذکر شد، مقادیر string را بین علامت ”   ” یا ‘   ‘ قرار میدهیم ولی مقادیر عددی را بدون علامت نقل قول مینویسیم.

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

تعریف متغیر در جاوا اسکریپت را declaring میگویند. متغیر ها را با کلمه کلیدی var به اصطلاح declaring میکنیم. یعنی با کلمه var متغیر را تعریف کرده ایم که بعد از تعریف، متغیر مقدار ندارد ( به اصطلاح undefined است ) که باید به ان مقدار بدهیم. همانطور که گفتیم برای تخصیص مقدار به متغیر از علامت تساوی استفاده میکنیم. تخصیص مقدار را میتوان بعد از declaring یا همزمان با ان انجام داد:

;var carName

;”carName = “BMW

یا

;”var carName = “BMW

مقدار متغیر ها را میتوان در صفحه نمایش داد:

<body>

<p id="p01"></p>
<p id="p02"></p>

<script>
var carName = "BMW";
    document.getElementById('p01').innerHTML = "مقدار متغیر تعریف شده:" + carName;
</script>
</body>

نکته: بهتر است که در ابتدای script ها تمام متغیرها تعریف شوند.

نکته: میتوان چند متغیر را در یک statement تعریف کرد:

var firstName ;= “name”, lastName = “family name “, emailAddress

یا متغیر های بالا را به صورت زیر تعریف کرد:

,”var firstName = “name

,”lastName = “family name

;emailAddress

در ادامه میتوان یکی از این متغیر ها را call کرد. در مثال بالا متغیر emailAddress مقدار دهی نشده است. یعنی undefined شده است. اگر این متغیر را call کنیم عبارت undefined در مرورگر نمایش داده میشود:

<body>

<p id="p01"></p>
<p id="p02"></p>

<script>
var firstName = "name", lastName = "family name ", emailAddress;
    document.getElementById('p01').innerHTML = emailAddress;
</script>

       آشنایی بیشتر با operator ها در جاوا اسکریپت

operator یا عملگرها همان اعمال اصلی در ریاضی هستند. نکات تکمیلی در این باره را که در برنامه نویسی جاوا اسکریپت نیاز است را با هم می آموزیم.

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

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

علاوه بر assignment تساوی، علامتهای دیگری برای assignment داریم که در جدول زیر میبینیم:

عملگر نمایش در برنامه نویسی نمایش جبری
= x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

کاربرد عملگرها در داده های string

از طریق عملگرها میتوان داده های strint را هم با هم جمع کرد. مثلا برای ترکیب سایت سازان به صورت زیر عمل میکنیم:

<body>

<p id="p01"></p>
<p id="p02"></p>

<script>
var txt1 = "سایت";
var txt2 = "سازان";
var sum1 = txt1 + " " + txt2;
var sum2 = txt1 + txt2;
{
document.getElementById("p01").innerHTML = "پاراگراف اول:" + " " + sum1;
document.getElementById("p02").innerHTML = "پاراگراف دوم:" + " " + sum2;
}
</script>
</body>

همانطور که میبینید عملگرها داده های string را به هم میچسبانند. برای قرار دادن فاصله بین داده های رشته ای، باید یک double quotation ( ” ” ) قرار دهیم. فراموش نکنید که باید بین این علامت نقل قولی که برای فاصله قرار داده ایم، باید یک space قرار دهید. اگر قرار ندهید، داده ها همچنان به هم چسبیده خواهند بود.

سایت سازان را به روش زیر نیز میتوان ساخت:

<body>

<p id="p01"></p>
<p id="p02"></p>

<script>
txt1 = "سایت";
txt1 += " " + "سازان";
document.getElementById("p01").innerHTML = txt1;
</script>
</body>

در داده های string علامت + را concatenation میگوییم چون دو مقدار رشته ای را به هم متصل میکند.

جمع مقادیر رشته ای و عددی

جمع دو عدد، یک مقدار عددی را ایجاد میکند. اما جمع یک مقدار عددی و رشته ای، مقدار رشته ای را ایجاد میکند:

<body>

<p id="p01"></p>
<p id="p02"></p>

<script>
var a = 2 + 3;
var b = 4 + 9;
var c = "جمع" + ۲ + ۴;
var d = 2 + 4 + "جمع";
document.getElementById("p01").innerHTML = a + "<br>" + b + "<br>" + c + "<br>" + d;
</script>
</body>

به تفاوت بین متغیر c و d توجه کنید. در متغیر c اولین داده رشته ای است، پس ۲ و ۴ را نیز رشته ای جمع شده اند. در متغیر d اولین متغیر عددی است، پس ۲ و ۴ عددی با هم جمع شده اند.

عملگرهای مقایسه ای

در جدول زیر عملگرهای مقایسه ای را میبینیم:

عملگر توضیح
== برابر است با
=== مقدار و نوع برابرند
!= برابر نیست
!== مقدار و نوع برابر نیستند
> بزرگتر
< کوچکتر
>= بزرگتر مساوی
<= کوچکتر مساوی

عملگرهای منطقی

عملگر توضیح
&& گیت AND
|| گیت OR
! گیت NOT

عملگرهای دیگری مانند type و Bitwise داریم که در قسمت بعدی به طور کامل بررسی میشوند. با تشکر از شما همراهان همیشگی گروه سایت سازان لطفا نظرات خود را در جهت ارتقا مطالب با ما در میان بگدارید.

دیدگاه ‏خود را بنویسید