طراحی سایت و طراحی وب سایت حرفه ای را با گروه سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386
سفارش طراحی سایت

عبارات باقاعده، خطاها، اشکال زدایی و حالت محض

عبارات باقاعده، خطاها، اشکال زدایی و حالت محض
عبارات باقاعده، خطاها، اشکال زدایی و حالت محض
0
آموزش JavaScript آموزش طراحی سایت

دوستان عزیزم سلام. امروز در آموزش JavaScript – بخش هفتم در خدمت شما دوستان هستم با آموزش مطالب زیر:

  • عبارات باقاعده
  • خطاها
  • اشکال زدایی
  • خاصیت hoisting
  • حالت محض

در اولین مبحث شما عزیزان را با عبارات باقاعده (Regular Expression) آشنا می کنم. همراه من باشید:

عبارات باقاعده در جاوا اسکریپت

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

در جایگزینی یک لغت با لغتی دیگر از متد replace()  استفاده کردیم. احتمالا به خاطر داشته باشید که از پرچم g در پارامتر اول این متد استفاده کردیم:

var z = x.replace(/طراحی سایت/g, "web design");

عبارت “طراحی سایت” الگوی ما برای سرچ است و عبارتیست که می خواهیم در متغیر x (که یک متن می باشد) یافت شود.

با توجه به جملات بالا، در متغیر z پارامتر اول متد replace()  یک عبارت باقاعده می باشد. در حالت کلی ساختار یک عبارت با قاعده به صورت زیر می باشد:

/pattern/modifiers;

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

عبارات باقاعده معمولا هنگام استفاده از متد های search()  و replace()  به کار برده می شوند.

<body>
<button onclick="myFunction()">کل?ک کن?د</button>
<p id="p01">Lorem ipsum dolor sit amet</p>

 <script>
 function myFunction() {
 	var str = document.getElementById("p01").innerHTML;
 	var txt = str.replace("dolor","DOLOR");
 document.getElementById("p01").innerHTML = txt;
 }
 </script>
</body>

آموزش JavaScript – بخش هفتم

و مثال بالا را با استفاده از یک عبارت با قاعده می نویسیم:

<body>
<button onclick="myFunction()">کل?ک کن?د</button>
<p id="p01">Lorem ipsum dolor sit amet</p>

 <script>
 function myFunction() {
 	var str = document.getElementById("p01").innerHTML;
 	var txt = str.replace(/dolor/i, "DOLOR");
 document.getElementById("p01").innerHTML = txt;
 }
 </script>
</body>

آموزش JavaScript – بخش هفتم

تمرین: در مثال بالا با استفاده از متد search()  مکان کلمه ی dolor (و یا DOLOR) را بیابید.

در ساختار یک عبارت باقاعده کلمه ی modifier (تعدیل کننده) را می بینید. در اینجا دو تعدیل کننده i و g را استفاده می کنیم که حرف i عدم حساسیت به کوچک یا بزرگ بودن حروف را تعیین می کند.

همچنین متد های replace()  و search()  در اولین مکانی که پارامتر خود را پیدا کنند، جستجو را متوقف می کنند. اگر از تعدیل کننده g استفاده کنیم، عبارت تعیین شده در تمام متن جستجو و پیدا می شود.

الگوهای عبارات باقاعده

با استفاده از کروشه می توان محدوده ای از کاراکتر ها را پیدا کرد:

[abc]پیدا کردن تمام کاراکترهای نوشته شده در کروشه
[0-9]یافتن اعداد نوشته شده در کروشه (عدد 0 تا عدد9)
(x|y)یافتن کاراکتر های خاص (کاراکترها را با | از هم جدا می کنیم)

 

متا کاراکتر ها، کاراکترهایی با معنا و مفهوم خاصی هستند. در جدول زیر 4 متا کاراکتر مهم و پرکاربرد را می بینیم:

\dپیدا کردن اعداد
\sپیدا کردن فاصله خالی بین کاراکتر ها
\bپیدا کردن کاراکتری در ابتدا یا انتهای کلمه

 

در ساخت الگو می توان از کمیت سنج ها نیز بهره برد که در جدول زیر مهمترین آنها را می بینید:

n+تطابق رشته ای که حداقل یک کاراکتر n دارد
n*تطابق رشته ای که هر تعداد کاراکتر n را داشته باشد. (0 با بیشتر)
n?تطابق رشته ای که 0 و یا 1 بار کاراکتر n در آن به کار رفته باشد

 

آبجکت های عبارات با قاعده

در ادامه دو آبجکت test()  و exec()  را خدمت شما دوستان معرفی می کنم:

آبجکت test()  الگوی تعیین شده را در عبارتی جستجو می کند و بسته به نتیجه مقدار true یا false را بر می گرداند:

<body>
<p id="p01">Lorem ipsum dolor sit amet</p>
<button onclick="myFunction()">کلیک کنید</button>
<p id="p02"></p>

 <script>
  function myFunction() {
  	text = document.getElementById('p01').innerHTML;

  	document.getElementById('p02').innerHTML = /o/.test(text);
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

یعنی صرفا وجود الگو را در متن بررسی می کند.

متد exec()  الگوی تعیین شده را در پارامتر خود جستجو می کند و در صورتی که الگو را بیابد، آن را در مرورگر بر میگرداند و اگر چیزی را یافت نکند مقدار null را بر می گرداند:

<body>
<p id="p01">Lorem ipsum dolor sit amet</p>
<button onclick="myFunction()">کلیک کنید</button>
<p id="p02"></p>

 <script>
  function myFunction() {
  	text = document.getElementById('p01').innerHTML;

  	document.getElementById('p02').innerHTML = /o/.exec(text);
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

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

var x = /o/;
document.getElementById('p02').innerHTML = x.test(text);

خب دوستان عزیز، در مبحث دوم از این بخش، خطاها در جاوااسکریپت را بررسی می کنیم:

خطاها در جاوا اسکریپت

هنگام اجرای کدهای جاوا اسکریپت ممکن است خطاهای مختلفی به هر دلیلی رخ دهد. مثلا ممکن است خود برنامه نویس در نوشتن کدها اشتباه کرده باشد یا این که ورودی به اشتباه تکمیل شده باشد. اما تکلیف چیست؟ چگونه باید خطا را رفع کنیم؟

در جاوا اسکریپت دستوراتی داریم که از آنها برای پیدا و رفع خطاها استفاده می شود. چه دستوراتی؟

همراه من باشید، در ادامه با آنها آشنا می شویم:

try و catch

از دستوراتی که در جاوا اسکریپت برای پیدا کردن خطا استفاده می شود، try  و catch  هستند که ساختاری به صورت زیر دارند:

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}

در بلوک try  کدهایی را می نویسیم که می خواهیم خطای آنها را تست کنیم.

در بلوک catch  نیز کدهایی را می نویسیم که در صورت وجود خطا در بلوک try ، باید اجرا شوند.

نتیجه تست کدهای try  به catch  پاس داده می شود که می توان این نتیجه را نام گذاری کرد (که در ساختار بالا err نامگذاری شده است) و مقدار آن را در مرورگر نمایش داد.

به مثال زیر توجه کنید:

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

 <script>
  try {
  	getElementById('p01').innerHTML = "سلام";
  }
  catch(err) {
  	document.getElementById('p01').innerHTML = err.message;
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

در بخش try  من .document  را ننوشته ام. بنابراین با اجرای کدهای catc h، پیغامی که در تصویر بالا مشاهده می کنید نمایش داده می شود.

دستور throw

به نظر شما اگر در اجرای کدهای جاوا اسکریپت خطایی رخ دهد چه اتفاقی میفتد؟

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

با استفاده از دستور throw  می توان پیغام خطا را شخصی سازی کنیم. خب این یعنی چی؟

فرض کنید که یک فرم داریم و می خواهیم کاربر عددی مثلا بین 50 تا 100 را در یکی از ورودی های آن وارد کند. پس جهت اعتبار سنجی ورودی، اسکریپت هایی را می نویسیم.

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

به مثال زیر توجه کنید:

<body>
<p>یک عدد بین 50 تا 100 را وارد نمایید:</p>
<input id="inp" type="text">
<button type="button" onclick="myFunction()">تست ورودی</button>
<p id="errmes"></p>

 <script>
  function myFunction() {
  	var errmes, x;
  	errmes = document.getElementById('errmes');
  	errmes.innerHTML = "";
  	x = document.getElementById('inp').value;
  	try {
  		if (x == "") throw "مقداری را وارد نمایید";
  		if (isNaN(x)) throw "لطفا مقدار عددی را وارد نمایید";
  		x = Number(x);
  		if (x < 50) throw "مقدار وارد شده کمتر از 50 است";
  		if (x > 100) throw "مقدار وارد شده بزرگتر از 100 است";
  	}
  	catch(err) {
  		errmes.innerHTML = "<p><b>خطا:</b></p>" + err;
  	}
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

و اما یک سوال ساده:

در مثال بالا پارامتر err مقدار خود را از کجا دریافت می کند؟

لطفا از بخش دیدگاه ها پاسخ خود را برای ما ارسال نمایید.

دستور finally

این دستور در واقع بلوک کدی است که بعد از بلوک های try/catch  نوشته می شود و در واقع کدهایی هستند که صرف نظر از نتیجه بلوک try/catch  می توانند اجرا شوند.

در مثال زیر می بینید که با استفاده از این دستور می توان مقدار وارد شده در ورودی را حذف کرد:

<body>
<p>یک عدد بین 50 تا 100 را وارد نمایید:</p>
<input id="inp" type="text">
<button type="button" onclick="myFunction()">تست ورودی</button>
<p id="errmes"></p>

 <script>
  function myFunction() {
  	var errmes, x;
  	errmes = document.getElementById('errmes');
  	errmes.innerHTML = "";
  	x = document.getElementById('inp').value;
  	try {
  		if (x == "") throw "مقداری را وارد نمایید";
  		if (isNaN(x)) throw "لطفا مقدار عددی را وارد نمایید";
  		x = Number(x);
  		if (x < 50) throw "مقدار وارد شده کمتر از 50 است";
  		if (x > 100) throw "مقدار وارد شده بزرگتر از 100 است";
  	}
  	catch(err) {
  		errmes.innerHTML = "<p><b>خطا:</b></p>" + err;
  	}
  	finally {
  		document.getElementById('inp').value = "";
  	}
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

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

آبجکت خطا

آبجکت خطا دو ویژگی قدرتمند name و message را ایجاد می کند که ویژگی name نام خطا را تنظیم می کند و یا نام آن را در مرورگر بر می گرداند.

ویژگی message نیز پیغام خطا را تنظیم و یا بر می گرداند.

در ادامه 5 مقدار مهم را که توسط ویژگی name برگردانده می شوند را خدمت شما معرفی می کنم:

Range Error

خطای RangeError  زمانی اتفاق میفتد که از عددی خارج از محدوده منطقی استفاده شده باشد. مثلا عدد 5 ضربدر 10 به توان 500 مقداری غیر منطقی است:

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

 <script>
  var x = 5;
  try {
  	x.toPrecision(500);
  }
  catch(err) {
  	document.getElementById('errmes').innerHTML = err.name;
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

Reference Error

این خطا زمانی اتفاق میفتد که متغیر بدون مقداری را در عبارت ریاضی استفاده کرده باشید:

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

 <script>
  var x;
  try {
  	x = y + 10;
  }
  catch(err) {
  	document.getElementById('errmes').innerHTML = err.name;
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

Syntax Error

اگر در نوشتن کدها خطایی رخ داده باشد این مقدار در مرورگر برگردانده می شود:

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

 <script>
  try {
  	eval("alert('Hello)");
  }
  catch(err) {
  	document.getElementById('errmes').innerHTML = err.name;
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

Type Error

اگر از داده ای استفاده کنیم که نوع آن غیرقابل قبول باشد، این خطا رخ می دهد. به عنوان مثال یک مقدار عددی را نمی توان در تابع toUpperCase()  استفاده کرد:

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

 <script>
  var x = 5
  try {
  	x.toLowerCase();
  }
  catch(err) {
  	document.getElementById('errmes').innerHTML = err.name;
  }
 </script>
</body>

آموزش JavaScript – بخش هفتم

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

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

پیدا کردن خطا و بر طرف کردن آن را اشکال زدایی (debugging) می گویند.

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

متد console.log()

در جاوا اسکریپت متد consol.log()  را برای پیدا کردن خطاها استفاده می کنند. این متد از خاصیت خود مرورگر برای پیدا کردن خطاها استفاده می کند که باید در هر مرورگر فعال باشد. (با سرچ در اینترنت نحوه فعال کردن debugger در مرورگر خود را پیدا کنید.)

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

اما چطور از این متد استفاده کنیم؟

در هر قسمت از کدهای جاوا اسکریپت که حدس میزنید خطا در آنجا رخ داده است، این متد را نوشته و پارامتری را به آن پاس دهید. خب و در ادامه:

با فشار دادن دکمه F12 منوی Developer Tools فعال می شود که باید به قسمت Console مراجعه کنید. اگر پارامتر نوشته شده در console.log()  را مشاهده کردید، پس تا خطی که console.log()  نوشته شده است خطایی رخ نداده. بنابراین خطوط پایینتر را بررسی کنید.

یک مثال خیلی خیلی ساده را در ادامه می بینید:

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

 <script>
  a = 9;
  b = 10;
  c = a + b;
  console.log(c);
 </script>
</body>

آموزش JavaScript – بخش هفتم

چون عدد 19 (یعنی جمع دو عدد a و b) در console نوشته شده است پس کدهایی نوشته شده صحیح هستند.

بسیار خب. و اما یک سوال از شما دارم!

به نظر شما یک متغیر را می توان ابتدا مقدار دهی کرد و سپس با استفاده از کلمه کلیدی var تعریف کرد؟

بله دوستان. این کار شدنی است!

در واقع جاوا اسکریپت قابلتی به نام بالا بردن (hoisting) دارد که در ادامه با این قابلیت آشنا می شویم:

خاصیت hoisting در جاوا اسکریپت

در جاوا اسکریپت یک متغیر را می توان بعد از مقدار دهی و استفاده تعریف کرد. به کدهای زیر دقت کنید:

x = 5; // Assign 5 to x
elem = document.getElementById("demo");
elem.innerHTML = x;                    
var x; // Declare x

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

var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo");
elem.innerHTML = x;

خدمت شما عرض شود که جاوا اسکریپت تمام کدهایی را که به تعریف متغیر ها مربوط می شود را به بالا ترین نقطه محدوده ای که متغیر در آن تعریف شده است (یعنی محدوده محلی یا محدوده سراسری) منتقل می کند که به این رفتار جاوا اسکریپت، بالابردن یا hoisting می گویند.

و اما توجه داشته باشید که:

جاوا اسکریپت فقط کدهای تعریف متغیر ها را به بالاترین محدوده منتقل می کند. کدهای مقدار دهی به متغیرها را جابجا نمی کند.

در کدهای زیر متغیر y فقط تعریف شده است و مقداری نخواهد داشت، چون جاوا اسکریپت مقدار دهی را جابجا نمی کند:

var x = 5; // Initialize x
elem = document.getElementById("demo");
elem.innerHTML = x + " " + y;          
var y = 7; // Initialize y

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

و اما آخرین مبحث این جلسه:

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

در جاوا اسکریپت یک اصطلاح تحت اللفظی داریم که تعیین می کند که کدها باید در حالت محض (strict mode) نوشته شوند. خب حالت محض به چه معناست؟

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

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

خب حالت محض چرا استفاده می شود؟

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

اما حالت محض را با استفاده از اصطلاح “use strict”;  در ابتدای اسکریپت ها یا توابع، تعریف می کنیم. طبیعتا اگر در ابتدای اسکریپت ها نوشته شود پس محدوده کلی و اگر در تابع نوشته شود، محدوده محلی دارد.

به مثال زیر توجه کنید:

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

 <script>
  x = 10;
  myFunction();

  function myFunction() {
  	"use strict";
  	y = 15;
  	document.getElementById('p01').innerHTML = x + y;
  }
 </script>
</body>

در مثال بالا اگر تنها از متغیر x استفاده شود، با وجود اینکه تعریف نشده و تنها مقدار دهی شده است، خطایی رخ نخواهد داد. اما محدوده تابع باید در حالت محض نوشته شود. یعنی متغیر ها باید تعریف و سپس مقدار دهی شوند.

متغیر y در مثال بالا تنها مقدار دهی شده است و تعریف نشده است. بنابراین تابع اجرا نخواهد شد و مقداری در مرورگر مشاهده نمی شود.

اما با نوشتن کلمه کلید var قبل از متغیر y خطا رفع می شود و حاصل جمع متغیر های x و y در مرورگر نمایش داده می شود.

 

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

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