شروع جاوا اسکریپت و دستورات مقدماتی آن – جلسه اول

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

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

این تگ در بعضی موارد در قسمت Body و در بعضی مواقع در قمست Head استفاده می شود

نکته : شما می توانید اسکریپت خود را در فایل خارجی با پسوند js ذخیره کرده و با استفاده از خصوصیت src تگ < script > آن را فراخوانی کنید ، نکته قایل توجه دیگری که وجود دارد این است که شما می توانید بسته به نیاز و اصول جاوا اسکریپت آن را در قسمت Body یا Head فراخوانی کنید.

حال باید بدانیم تگ اسکریپت چه مواقعی در Body و چه مواقعی در Head استفاده می شود؟

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

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

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

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

 

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

 

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

  • جاوا اسکریپت از فضا های خالی و شکسته شدن خط ها چشم پوشی میکند و این قابلیت باعث میشود که شما جوری کد بزنید که آن ها را راحت بخوانید
  • در جاوا اسکریپت استفاده از سمیکالن اختیاری است ولی باعث خوانا تر شدن کد شما می شود
  • جاوا اسکریپت یک زبان case-sensitive است یعنی به بزرگ یا کوچک بودن حروف حساس می باشد پس کلمات Time,tIme,TIME با هم متفاوت هستند
  • در اسکریپت های نوشته شده  ، می توان توضیحات مورد نظر را قالب کامنت وارد کرد . این توضیحات از سوی مرورگر نادیده گرفته شده و در خروجی نمایش داده نمی شوند . این توضیحات در دو نوع کامنت یک خطی و کامنت چند خطی می باشند. در نوع اول در ابتدای کد مورد نظر از دو بک اسلش “//” استفاده شده می شود که تا اخر آن خط کامنت در نظر گرفته می شود و در نوع دوم از از یک نماد */ در ابتدای اولین خط توضیحات و یک نماد /* استفاده می شود که کدهای ما بین این نماد کامنت در نظر گرفته می شود

  • در هنگام تعریف و استفاده از عبارت های متنی در دستوراتی نظیر document.write و … ، می توان ادامه متن را به کمک یک کاراکتر \ به سطر بعدی انتقال داد . این مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد
<script type="text/javascript">
  document.write ( "جاوا اسکریپت یه زبان سمت کلاینت می باشد . \
  این دستور در کامپیوتر کاربر اجرا می شود " ) ;
</script>

خروجی :

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

متغیر ها (Variables)

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

پیش از توضیح متغیر ها لازم است که انواع داده ها را بررسی کنیم .

در جاوا اسکریپت ما سه نوع داده ی اصلی داریم:

  1. اعداد (Numbers) : این نوع داده برای ذخیره سازی اعداد استفاده می شود. مثلا : ۳ ، ۱۰٫۷۳ و …
  2. رشته ای (String) : این نوع داده برای ذخیره سازی متن ها و رشته هایی از کاراکتر ها استفاده می شود . مثلا : آموزش جاوا اسکریپت!
  3. بولین (Boolean ) : این نوع داده تنها مقدار True(درست) و یا Flase (غلط) را در خود جای می دهد.

مفهوم متغیر

متغیر به زبان ساده و قابل فهم ، یک مکان در حافظه است که مقادیر داده ها در طول اجرای برنامه در آن ذخیره می شود.

تعریف متغیر

در حالت کلی تعریف یک متغیر به این صورت امکان پذیر است که ابتدا نوع متغیر مشخص می شود و سپس بعد از یک فضای خالی نام متغیر نوشته می شود ، اما در جاوا اسکریپت برای تعریف متغیر از کلمه کلیدی var استفاده می شود. در کد زیر در خط اول و دوم ، متغیر هایی با نام های Num و Text تعریف کردیم ، در خط سوم و چهارم متغیرهای تعریف شده را مقدار دهی کردیم ، و در خطر آخر دو متیغر را در زمان تعریف مقدار دهی کرده ایم .

var num;
var text;

num = 85;
text = "این یک متن است.";

var url = "www.solutionz.ir";
var flag = true;

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

قراردادی در تعریف متغیرها

اگر می خواهید یک متغیری تعریف کنید که دو کلمه ایست باید کلمه اول را با حرف کوچک شروع کنید و کلمه دیگر را با حرف بزرگ شروع کنید

<script type="text/javascript">

var myNameIS = "Milad"; 

</script>

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

بطور کلی در جاوا اسکریپت ۵ نوع عملگر وجود دارد:

  1. عملگرهای ریاضی
  2. عملگرهای انتسابی
  3. عملگرهای مقایسه ای
  4. عملگرهای منطقی
  5. عملگر رشته ای

۱ ) عملگرهای ریاضی :

عملگر شرح مثال
+   جمع دو عملوند خود را با هم جمع می کند . x = 2      y = 2     x + y = 4
–   تفریق دو عملوند خود از هم کم می کند . x = 4      y = 2     x – y = 2
*   ضرب دو عملوند خود را در هم ضرب می کند . x = 2      y = 3     x * y = 6
/   تقسیم عملوند اول خود را بر عملوند دوم تقسیم می کند . x = 6      y = 2     x / y = 3
%   باقی مانده باقی مانده حاصل از تقسیم عملوند اول بر عملوند دوم را محاسبه می کند . x = 8      y = 3     x % y = 2
++   افزاینده عملوند خود را یک واحد افزایش می دهد . x = 7      x++     x = 8
– –   کاهنده عملوند خود را یک واحد کاهش می دهد . x = 8      x- –     x = 7

۲ ) عملگرهای انتسابی :

از عملگرهای انتسابی ، برای نسبت دادن مقدار به یک متغیر استفاده می شود

عملگر مثال برابر است با
=    انتساب x = y   یا   x = 5 y = 5    x = y    نتیجه :    x = 5
var x ;      x = 5   (x انتساب مقدار ۵ به )
+=    جمع 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

 

۳ ) عملگرهای مقایسه ای :

از این عملگرها برای مقایسه یک متغیر با یک مقدار و یا مقایسه ۲ متغیر با هم استفاده می شود

عملگر شرح مثال
= =   تساوی امتحان برابری با یک مقدار یا یک متغیر دیگر x = = y    یا    y = = 8
= = =   تساوی امتحان برابری با یک مقدار یا یک متغیر دیگر هم از لحاظ مقدار و هم از لحاظ نوع داده ای x = = = y    یا    y = = = “8”
مثال: x = 5   ,   y = “5”   ,   اگر    x = = = y    نتیجه : غلط است
! =    عدم تساوی امتحان عدم برابری با یک مقدار یا یک متغیر دیگر x ! = y    یا    y ! = 4
مثال : x = 5   ,   y = 6   ,   اگر    x ! = y    نتیجه : درست است
>    بزرگتر بودن امتحان بزرگتر بودن x > y    یا    y > 4
مثال : x = 5   ,   y = 6   ,   اگر    x > y    نتیجه : غلط است
<    کوچکتر بودن امتحان کوچکتر بودن x < y    یا    y < 4
مثال : x = 5   ,   y = 6   ,   اگر    x < y    نتیجه : درست است
مساوی یا بزرگتر بودن    >= امتحان مساوی یا بزرگتر بودن x >= y    یا    y >= 4
مثال : x = 5   ,   y = 6   ,   اگر    x >= y    نتیجه : غلط است
مساوی یا کوچکتر بودن    <= امتحان مساوی یا کوچکتر بودن x < y    یا    y < 4
مثال : x = 5   ,   y = 5   ,   اگر    x <= y    نتیجه : درست است
مثال : x = 5   ,   y = 7   ,   اگر    x <= y    نتیجه : غلط است

۴ ) عملگرهای منطقی :

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

عملگر شرح مثال
&&    عملگر ” و “ این عبارت برای ترکیب دو یا چند عبارت با هم استفاده می شود . نتیجه ترکیب این عملگر فقط زمانی صحیح است ، که تمام عبارات ترکیب شده با هم درست باشند . مثال : x = 5   ,   y = 7   ,   اگر  ( x < 3   &&   y > 9 )    نتیجه : غلط است
مثال : x = 5   ,   y = 7   ,   اگر  ( x < 6   &&   y > 8 )    نتیجه : درست است
||    عملگر ” یا “ این عبارت برای ترکیب دو یا چند عبارت با هم استفاده می شود . نتیجه ترکیب این عملگر در صورت درست بودن حداقل یکی از عبارات ترکیب شده ، درست خواهد بود. مثال : x = 5   ,   y = 7   ,   اگر  ( x < 3   ||   y > 4 )    نتیجه : درست است
مثال : x = 5   ,   y = 7   ,   اگر  ( x < 3   ||   y > 8 )    نتیجه : غلط است
!    عملگر not این عملگر برای بر عکس کردن درستی یا عدم درستی یک عبارت استفاده می شود . استفاده این عملگر قبل از یک عبارت صحیح باعث نادرست شدن جواب و برعکس خوهد شد . مثال : x = 5   ,   y = 5   ,   اگر  ! ( x == y ) نتیجه : غلط است
مثال : x = 5   ,   y = 7   ,   اگر  ! ( x == y ) نتیجه : درست است

۵ ) عملگر رشته ای :

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

< script type="text/javascript" >
  var matn1 = "Welcome to" ;
  var matn2 = "Developer Studio" ;
  var welcome = matn1 + " " + matn2 ;
  document.write (welcome) ;
< /script > 

خروجی:


 Welcome to Developer Studio 

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

در کد نویسی دستورات جاوا اسکریپت ، از برخی از کاراکترها به منظور ویژه های استفاده می کنیم:

شرح خروجی نحوه استفاده
علامت نقل قول تکی     ‘ ‘\
علامت نقل قول جفتی     “ “\
علامت و در انگلیسی     & & &\
علامت اسلش در متن     \ \ \\
رفتن به خط جدید در متن n\
<script type="text/javascript">
   var matn = "این یک آموزش در مورد \"جاوا اسکریپت\" می باشد" ;
   document.write ( matn ) ;
</script>

خروجی :

این یک آموزش در مورد "جاوا اسکریپت" می باشد
نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.