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

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

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

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

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

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

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

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

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

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

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

/pattern/modifiers;

1	/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>

<body>

<p id="p01">Lorem ipsum dolor sit amet</p>

function myFunction() {

var str = document.getElementById("p01").innerHTML;

var txt = str.replace("dolor","DOLOR");

document.getElementById("p01").innerHTML = txt;

}

</script>

</body>

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

<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>

<body>

<p id="p01">Lorem ipsum dolor sit amet</p>

function myFunction() {

var str = document.getElementById("p01").innerHTML;

var txt = str.replace(/dolor/i, "DOLOR");

document.getElementById("p01").innerHTML = txt;

}

</script>

</body>

تمرین: در مثال بالا با استفاده از متد 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>

<body>

<p id="p01">Lorem ipsum dolor sit amet</p>

function myFunction() {

text = document.getElementById('p01').innerHTML;

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

}

</script>

</body>

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

متد 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>

<body>

<p id="p01">Lorem ipsum dolor sit amet</p>

function myFunction() {

text = document.getElementById('p01').innerHTML;

document.getElementById('p02').innerHTML = /o/.exec(text);

}

</script>

</body>

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

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

1 2	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 {

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>

<body>

try {

getElementById('p01').innerHTML = "سلام";

}

catch(err) {

document.getElementById('p01').innerHTML = err.message;

}

</script>

</body>

در بخش 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>

<body>

<p>یک عدد بین 50 تا 100 را وارد نمایید:</p>

<button type="button" onclick="myFunction()">تست ورودی</button>

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>

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

در مثال بالا پارامتر 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>

<body>

<p>یک عدد بین 50 تا 100 را وارد نمایید:</p>

<button type="button" onclick="myFunction()">تست ورودی</button>

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>

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

آبجکت خطا

آبجکت خطا دو ویژگی قدرتمند 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>

<body>

var x = 5;

try {

x.toPrecision(500);

}

catch(err) {

document.getElementById('errmes').innerHTML = err.name;

}

</script>

</body>

Reference Error

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

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

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

<body>

var x;

try {

x = y + 10;

}

catch(err) {

document.getElementById('errmes').innerHTML = err.name;

}

</script>

</body>

Syntax Error

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

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

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

<body>

try {

eval("alert('Hello)");

}

catch(err) {

document.getElementById('errmes').innerHTML = err.name;

}

</script>

</body>

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>

<body>

var x = 5

try {

x.toLowerCase();

}

catch(err) {

document.getElementById('errmes').innerHTML = err.name;

}

</script>

</body>

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

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

پیدا کردن خطا و بر طرف کردن آن را اشکال زدایی (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>

<body>

a = 9;

b = 10;

c = a + b;

console.log(c);

</script>

</body>

چون عدد 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 = 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;

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

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>

<body>

x = 10;

myFunction();

function myFunction() {

"use strict";

y = 15;

document.getElementById('p01').innerHTML = x + y;

}

</script>

</body>

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

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

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

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

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

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

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

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

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

try و catch

دستور throw

دستور finally

آبجکت خطا

Range Error

Reference Error

Syntax Error

Type Error

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

متد console.log()

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

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

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