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

آشنایی با scope، رویداد، داده های رشته ای و داده های عددی در جاوا اسکریپت

آشنایی با scope، رویداد، داده های رشته ای و داده های عددی در جاوا اسکریپت

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

  • scope در جاوا اسکریپت
  • رویدادها در جاوا اسکریپت
  • داده های رشته ای و متد های آن در جاوا اسکریپت
  • داده های عددی و متد های آن در جاوا اسکریپت

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

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

منظور از محدوده (scope) مکانی است که متغیر ها را در آن ها تعریف می کنیم و در حالت کلی دو محدوده داریم که عبارتند از:

  • محدوده محلی (Local Scope)
  • محدوده سراسری (Global Scope)

متغیر هایی که در محدوده محلی تعریف شده اند را متغیر محلی و متغیر هایی را که در محدوده سراسری (global که بعضا کلی و جهانی هم ترجمه شده) تعریف شده اند را متغیر سراسری می گوییم. در ادامه با این دو دسته متغیر بیشتر آشنا می شویم:

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

متغیرهای محلی

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

<script>
function myFunc() {
	var firstName = "Ali";
}
</script>

در این تابع firstName یک متغیر محلی برای تابع myFunc می باشد و درون این تابع می توان هر عملیاتی را روی این متغیر انجام داد. اما در بیرون از تابع این متغیر قابل دسترس نخواهد بود.

در اینجا باید چند نکته رو خدمت شما عرض کنم:

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

متغیر های global

هر متغیری که بیرون از تابع (یا آبجکت) تعریف می شود، محدوده سراسری دارد پس یک متغیر سراسری خواهد بود. متغیر های سراسری را در توابع، آبجکت ها و … به کار برد. به مثال زیر توجه کنید:

var firstName = "Ali";
function myFunc() {
	some codes for executed
}

دراین مثال متغیر firstName یک متغیر سراسری می باشد که توسط هر اسکریپتی، چه درون تابع چه بیرون از آن، قابل دسترسی می باشد.

و اما در مورد این متغیر ها هم باید نکته زیر رو بدونید:

اگر به متغیری که تعریف نشده است (!) مقدار دهی کنید، جاوا اسکریپت آن را متغیر سراسری در نظر می گیرد.

حتما خواهید پرسید: آیا می توان یک متغیر را بدون تعریف مقدار دهی کرد؟

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

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

<script>
myfunction();
document.getElementById('p01').innerHTML = x;

function myfunction() {
 x = "Hello World!!!";
}
</script>
</body>

در مثال بالا متغیر x را با کلمه کلیدی var تعریف نکرده ام و درون تابع به آن مقدار Hello World را داده ام. اگر کدهای بالا را اجرا کنید، خواهید دید که مقدار متغیر x در مرورگر برگردانده می شود.

جاوا اسکریپت متغیر x را یک متغیر سراسری در نظر می گیرد.

بخش محدوده متغیر ها را با مطلب زیر به پایان می رسانم:

خدمت شما دوستان گرامی عرض شود که متغیر های جاوا اسکریپت عمر دارند!!!

عمر متغیر های سراسری زمانی شروع می شود که تعریف شوند و با بستن پنجره مرورگر به پایان می رسد و عمر متغیرهای محلی با شروع شدن تابع آغاز می شود و…

به نظر شما عمر متغیر های محلی کی به پایان میرسد؟ لطفا پاسخ خود را در بخش دیدگاها برای ما ارسال کنید.

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

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

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

اتمام بارگذاری صفحه، تغییر ورودی یک فرم و یا کلیک بر روی یک دکمه نمونه هایی ساده از رویدادها می باشند. حال به نظر شما رویداد ها را کاربر انجام می دهد یا مرورگر؟

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

به کدهای زیر دقت کنید:

<element&nbsp; event='javaScriptStatement' >
<element&nbsp; event="javaScriptStatement" >

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

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

<body>
 <p>دکمه 1 ساعت را در پاراگراف زیر مینویسد و دکمه دو درون خودش ساعت را نمایش میدهد</p>
 <p id="p01">ساعت در این پاراگراف نوشته میشود</p>

 <button onclick="document.getElementById('p01').innerHTML = Date()">دکمه 1 </button> <br> <br>
 <button onclick="this.innerHTML = Date()">دکمه 2</button>
</body>

آموزش JavaScript - بخش سوم

onclick  یک رویداد است و یعنی زمانی که روی المان کلیک شد، کدهای نوشته شده اجرا شوند.

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

<body>
<p id="p01">ساعت در این پاراگراف نوشته می شود</p>
<button onclick="time()">دکمه 1 </button>

<script>
 function time() {
 document.getElementById('p01').innerHTML = Date();
 }
</script>
</body>

آموزش JavaScript - بخش سوم

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

onchangeزمانی که المنت عوض شد
onclickزمانی که بر روی المان کلیک شد
onmouseoverزمانی که نشانگر موس بر روی المان حرکت کرد
onmouseoutزمانی که نشانگر موس از المان دور شد
onkeydownزمانی که یکی از دکمه های صفحه کلید فشار داده شد
onloadزمانی که صفحه کاملا بارگذاری شد

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

داده های رشته ای و متدهای آن در جاوا اسکریپت مبحث بعدی در این جلسه می باشد:

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

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

جاوا اسکریپت با استفاده از ویژگی length تعداد کاراکتر های یک داده رشته ای را به ما نمایش می دهد:

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

<script>
 var txt = "سایت سازان";
 document.getElementById('p01').innerHTML = txt.length;
</script>
</body>

آموزش JavaScript - بخش سوم

فاصله نیز یک کاراکتر محسوب می شود.

و اما یک مطلب مهم رو بهتره که بدونید:

به نظر شما می توان متغیری را به صورت زیر تعریف کرد؟

var txt1 = "This is a text "and" This is another text";

و یا به صورت زیر:

var  txt2 = 'This is a text 'and' This is another text';

در حالت عادی نمی توان چنین کاری را انجام دهیم. اما با استفاده از کاراکتر (\) می توان این متغیر ها را به صورت زیر تعریف کرد:

var txt1 = "This is a text \"and\" This is another text";

var  txt2 = 'This is a text \'and\' This is another text';

نکات زیر رو هنگام نوشتن کدها رعایت کنید:

  • در یک خط کد، بیشتر از 80 کاراکتر ننویسید.
  • هنگام نوشتن دستورات و کدها، اگر تعداد کاراکتر ها بیشتر از 80 تا شد، بعد از عملگرها، آن خط را برش داده و ادامه کدها را در خطوط بعدی بنویسید.

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

document.getElementById("p01").innerHTML = "Some text" +

"and another text!";

البته می توانیم از (\) و به صورت زیر این کار را انجام دهیم:

document.getElementById("p01").innerHTML = "Some text\

and another text!";

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

در ادامه متدهای رشته ای را با هم بررسی می کنیم:

متدهای رشته ای

حتما با تعجب می پرسید متد رشته ای چیه؟ حضور شما عارضم که متدهای رشته ای توابعی در جاوا اسکریپت هستند که به اما اجازه کار با داده های رشته ای را می دهند!

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

یافتن یک رشته در رشته ای دیگر

متدهای indexOf()   و lastIndexOf()   برای پیدا کردن مکان یک رشته در رشته ای دیگر استفاده می شوند. اما تفاوت این دو در چیست؟

این دو متد داده ای رشته ای (فرضا یک لغت) را دریافت می کنند و به جستجوی آن در داده ی رشته ای دیگر می پردازند. حال متد indexOf()   اولین مکان لغت را بر می گرداند و lastIndexOf()   آخرین مکان آن را بر می گرداند.

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

<body>
<p id="p01">یادگیری طراحی سایت آسان است، از طراحی سایت لذت ببرید</p>

<button onclick="myFunction()">طراحی</button>
<p id="p02"></p>

<script>
function myFunction() {
var x = document.getElementById('p01').innerHTML;
var y = x.indexOf("طراحی");
var z = x.lastIndexOf("طراحی");

document.getElementById('p02').innerHTML = "کلمه طراحی شماره 1 بعد از" + " " + y +
"امین کاراکتر" + "و کلمه طراحی دوم بعد از" + z +
"مین کاراکتر نوشته شده اند";
}
</script>
</body>

آموزش JavaScript - بخش سوم

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

حال اگر لغتی را در متن پیدا نکنند، به نظر شما چه اتفاقی رخ می دهد؟

اتفاق خاصی رخ نمی دهد. فقط عدد 1- در مرورگر برگردانده می شود.

و اما یک نکته ریز:

تمام شمارش ها در جاوا اسکریپت از 0 شروع می شوند. پس هنگام شمارش کاراکتر ها نیز کاراکتر اول شماره 0، کاراکتر دوم شماره 1 و … .

همانطور که می بینید این متدها از کاراکتر صفرم جستجو را آغاز می کنند. جاوا اسکریپت به ما این اجازه را می دهد که مکان آغاز جستجو را تعیین کنیم. مثلا می توانیم تعیین کنیم که از کاراکتر 10ام به بعد، جستجو آغاز شود. که در این صورت باید پارامتر دومی را به این متد ها بدهیم. مقدار پارامتر دوم چیست؟ طبیعتا مکان شروع جستجو. مثلا:

var y = x.indexOf("طراحی", 20);

در دستور بالا، جستجو از کاراکتر بیستم به بعد آغاز می شود.

متد دیگری که در اینجا باید معرفی شود، متد search()  است. این متد دقیقا مانند indexOf()  عمل می کند. یعنی رشته دریافتی را در رشته ای دیگر جستجو می کند و مکان آن را نمایش می دهد. تفاوت این دو متد در این است که متد search()  قدرت بیشتری دارد ولی پارامتر دوم (مکان شروع جستجو) را نمیپذیرد. در قسمت های بعدی این متد و کاربردهایش تشریح خواهد شد.

استخراج بخشی از مقادیر رشته ای

3 متد برای این کار وجود دارد که عبارتند از:

  • slice()
  • substring()
  • substr()

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

متد slice()

این متد دو مقدار عددی را می تواند دریافت کند و کاراکتر هایی که بین این دو مقدار وجود دارد را به صورت یک داده رشته ای در مرورگر بر می گردند.

<body>
<p id="p01">یادگیری طراحی سایت آسان است، از طراحی سایت لذت ببرید</p>

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

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

<script>
 function myFunction() {
 var x = document.getElementById('p01').innerHTML;
 document.getElementById('p02').innerHTML = "کاراکتر 8 تا 18 در پاراگراف بالا:" + "<<" + x.slice(8, 18) + ">> است";
 }
</script>
</body>

آموزش JavaScript - بخش سوم

به نظر شما می توان مقدار منفی را به این متد داد؟ اگر مقدار منفی را به آن بدهیم چه اتفاقی رخ می دهد؟

بله می توان مقدار منفی را به این متد داد که در اینصورت شمارش از انتهای داده رشته ای شروع می شود.

می توانید حدس بزنید اگر این متد تنها یک مقدار را دریافت کند چه اتفاقی روی می دهد؟

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

<body>
<p id="p01">یادگیری طراحی سایت آسان است، از طراحی سایت لذت ببرید</p>

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

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


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

document.getElementById('p02').innerHTML =
"کاراکتر -20 تا -10 در پاراگراف بالا:" + "<<" + x.slice(-20, -10) + ">> است" + "<br>" +
"کاراکتر -20 به بعد در پاراگراف بالا:" + "<<" + x.slice(-20) + ">> است" + "<br>" +
"کاراکتر 29 به بعد در پاراگراف بالا:" + "<<" + x.slice(29) + ">> است";
}
</script>
</body>

آموزش JavaScript - بخش سوم

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

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

متد substring()

این متد دقیقا مانند متد slice()  است و تنها تفاوت آنها در این است که این متد مقادیر منفی نمی پذیرد.

متد substr()

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

<body>
<p id="p01">یادگیری طراحی سایت آسان است، از طراحی سایت لذت ببرید</p>

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

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


<script>
 function myFunction() {
 var x = document.getElementById('p01').innerHTML;
 document.getElementById('p02').innerHTML = x.substr(8, 10);
 }
</script>
</body>

آموزش JavaScript - بخش سوم

دوستان عزیز به 3 نکته ی زیر در مورد این متد توجه فرمایید:

  • در این متد مقدار پارامتر اول را می توان منفی لحاظ کرد که در این مورد نیز مانند موارد قبل شمارش از انتها آغاز می شود.
  • مقدار پارامتر دوم نمی تواند منفی باشد. (چون پارامتر دوم طول را تعیین می کند که طول نمی تواند منفی باشد.)
  • اگر پارمتر دوم تعیین نشود، تمام کاراکتر های باقیمانده (یعنی کاراکترهایی که شماره آنها بیشتر از پارامتر اول است) برگردانده می شوند.

حتما می پرسید آیا می توان یک مقدار رشته ای را با یک مقدار رشته ای دیگر جایگزین کرد؟

خدمت شما عرض شود که، بله. این کار را با متد replacing()  انجام می دهیم.

متد replacing()

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

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

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

<body>
<p id="p01">یادگیری طراحی سایت آسان است، از طراحی سایت لذت ببرید</p>

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

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


<script>
function myFunction() {
 var x = document.getElementById('p01').innerHTML;
 var y = x.replace("طراحی سایت", "web design");
 var z = x.replace(/طراحی سایت/g, "web design");

 document.getElementById('p02').innerHTML = y;
 document.getElementById('p03').innerHTML = z;
 }
</script>
</body>

آموزش JavaScript - بخش سوم

در مثال بالا در جمله اصلی دو بار عبارت “طراحی سایت” تکرار شده است. اگر از پرچم g استفاده نکنیم، فقط اولین مقدار را تغییر می دهد.

اما یک سوال مهم؛

به نظر شما متد replacing()  به حروف کوچک و بزرگ در متون لاتین، حساس می باشد؟

بله دوستان. حساس می باشد و برای از بین بردن این حساسیت (!) از پرچم i استفاده می کنیم. یعنی به جای حرف g از حرف i استفاده می کنیم.

متد toUpperCase()

در متون لاتین برای تبدیل حروف کوچک به حروف بزرگ از این متد استفاده می کنیم:

<body>
<p id="p01">learning web design is easy</p>

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

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

<p id="p03"></p>



<script>
function myFunction() {
    var x = document.getElementById('p01').innerHTML;
    document.getElementById('p02').innerHTML = x.toUpperCase();
 }
</script>
</body>

آموزش JavaScript - بخش سوم

متد toLowerCase()

این متد نیز در متون لاتین، حروف بزرگ را به حروف کوچک تبدیل می کند:

<body>

 <p id="p01">LEARNING WEB DESIGN IS EASY</p>

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

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

 <p id="p03"></p>



 <script>

            function myFunction() {

                        var x = document.getElementById('p01').innerHTML;

                        document.getElementById('p02').innerHTML = x.toLowerCase();

            }

 </script>

</body>

آموزش JavaScript - بخش سوم

متد concat()

این متد برای اتصال دو یا چند مقدار رشته ای به کار می رود و می تواند جایگزین عملگر + در اتصال دو رشته باشد:

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


<script>
var x = "یادگیری طراحی سایت آسان است";
var y = "از طراحی سایت لذت ببرید";
document.getElementById('p01').innerHTML = x.concat("، ", y);
</script>
</body>

آموزش JavaScript - بخش سوم

و اما توجه کنید که:

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

استخراج کاراکترهای رشته ای

برای استخراج یک کاراکتر با شماره خاص (مثلا کاراکتر هفتم) از دو متد استفاده می کنیم که عبارتند از:

متد charAt()  که مقداری عددی را دریافت می کند. مثلا اگر مقدار 5 را دریافت کند، کاراکتر شماره 5 را بر می گرداند.

متد charCodeAt()  است که یونیکد کاراکتر تعیین شده را بر می گرداند.

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


<script>
 var x = "یادگیری طراحی سایت آسان است";
 document.getElementById('p01').innerHTML = x.charAt(5);
 document.getElementById('p02').innerHTML = x.charCodeAt(5);
</script>
</body>

آموزش JavaScript - بخش سوم

حال توجه شما را به مطلب بسیار مهم زیر جلب می کنم:

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

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


<script>
 var x = "یادگیری طراحی سایت آسان است";
 document.getElementById('p01').innerHTML = x[11];
</script>
</body>

آموزش JavaScript - بخش سوم

دستور  varName[a]  با داده های رشته ای مانند یک آرایه رفتار می کند در صورتی که مقادیر رشته ای آرایه نیستند. پس استفاده از این دستور، کار نادرستی است و ممکن است که در بعضی از مرورگر ها نیز کار نکند و نتایج غیر قابل پیش بینی همراه داشته باشد.

متد split()

برای تبدیل یک متغیر رشته ای به آرایه از متد splite()  استفاده می کنیم. بعد از اینکه متغیر را به آرایه تبدیل کردیم می توانیم کاراکترهای آن را صدا بزنیم. اما همانطور که می دانید مقادیر درون یک آرایه باید جداسازی شوند که با استفاده از همین متد و به صورت زیر می توان کاراکترها را جداسازی کرد:

var x = "یادگیری طراحی سایت آسان است";

 x.split(",");

 x.split(" ");

 x.split("|");

کاراکتر جداکننده باید درون علامت نقل قول قرار بگیرد.اگر یکی از متدهای بالا را برای متغیر x به کار ببریم می توانیم با آن مثل یک آرایه رفتار کنیم و هر کاراکتر دلخواهی را صدا کنیم:

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


<script>
 var x = "یادگیری طراحی سایت آسان است";
 x.split(",");
 document.getElementById('p01').innerHTML = x[11];
</script>
</body>

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

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

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

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

شاید بپرسید بجز اعداد دسیمال، اعداد دیگری هم وجود دارد؟

بله دوستان. وجود دارد. در دیگر زبان های برنامه نویسی چندین نوع عدد مانند integer، short و long و … داریم. اما در زبان جاوا اسکریپت فقط یک نوع عدد داریم که در 64 بیت و با فرمت زیر ذخیره می شوند.

مقدارتوانعلامت
52 bits (0 – 51)11 bits (52 – 62)1 bit (63)
52 bits (0 – 51)11 bits (52 – 62)1 bit (63)

 

دقت

اعداد صحیح تا 15 رقم، دقیق می باشند. یعنی تا 15 رقم دقیقا همان عدد برگردانده می شود ولی اگر تعداد ارقام بیشتر از 15 باشد، با تقریب برگردانده می شوند:

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


<script>
 var x = 999999999999999;
 var y = 9999999999999999;
 document.getElementById('p01').innerHTML = "متغیر x عددی 15 رقمی است پس دقیق نمایش داده می شود:" + " " + x + "<br>" + "متغیر y عددی 16 رقمی است پس با تقریب نمایش داده می شود:" + " " + y;
</script>
</body>

آموزش JavaScript - بخش سوم

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

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

<script>
 var x = 0.2 + 0.1;
 document.getElementById("p01").innerHTML = "جمع دو عدد 0.2 + 0.1 = " + x;
</script>
</body>

آموزش JavaScript - بخش سوم

برای حل این مشکل متغیر x را به صورت زیر تعریف می کنیم:

var x = (0.2 * 10 + 0.1 * 10) / 10;

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

جاوا اسکریپت برای اعمال زیر چه نتیجه ای را بر می گرداند؟

var x = 100 / "text";

var y = "100" * "10";

var z = 100 / "10";

var h = 10 / 0;

var k = -10 / 0;

 

لطفا پاسخ خود را از بخش نظرات برای ما ارسال کنید.

اعداد هگزا دسیمال

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

به صورت پیش فرض جاوا اسکریپت تمام اعداد را در مبنای 10 تفسیر می کند. برای تغییر مبنای اعداد از متد toString()  استفاده می کنیم که مبنای دلخواه را در پرانتر می نویسیم:

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

<script>
 var x = 525;
 document.getElementById("p01").innerHTML = "عدد 525 در مبناهای مختلف:" + "<br>" +
 "در مبنای 2:" + " " + x.toString(2)+ "<br>" +
 "در مبنای 4:" + " " + x.toString(4)+ "<br>" +
 "در مبنای 8:" + " " + x.toString(8)+ "<br>" +
 "در مبنای 16:" + " " + x.toString(16)+ "<br>";
</script>

آموزش JavaScript - بخش سوم

در جاوا اسکریپت تقسیم عدد بر صفر، بینهایت (infinity) را بر می گرداند. همچنین عملگر typeof مقدار number را برای بینهایت بر می گرداند.

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

محاسبات غیر منطقی

منظور از محاسبات غیر منطقی این است که اعمال ریاضی را برروی یک مقدار عددی و یک مقدار رشته ای انجام دهید. مثلا عدد 10 را بر عبارت ” سلام ” تقسیم کردن یک عمل غیر منطقی است و وقتی این کار را انجام دهید، جاوا اسکریپت مقدار NaN را بر میگرداند.

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

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

<script>
 document.getElementById("p01").innerHTML =
 "تقسیم عدد بر داده رشته ای یک عمل غیر منطقی است و " + "سلام"/10 + " " + "برگردانده میشود" + "<br>" +
 "اما میتوان داده عددی را مانند داده رشته ای در محاسبات وارد کرد:" + "50"/10;
</script>
</body>

آموزش JavaScript - بخش سوم

تابع isNaN() تابعی سراسری (global) در جاوا اسکریپت است که یکی از کاربرد های آن بررسی منطقی بودن یک عملیات ریاضی می باشد.

اگر مقدار true برگردانده شد، پس عمل انجام شده غیر منطقی است و اگر false برگردانده شد، عمل انجام شده منطقی خواهد بود.

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

<script>
 var x = "سلام"/10;
 document.getElementById("p01").innerHTML = "آیا محاسبه انجام شده در متغیر x غیر منطقی است؟" + " " + isNaN(x);
</script>
</body>

آموزش JavaScript - بخش سوم

حال خواهیم دید که با چه متد هایی می توان با داده های عددی کار کرد؟

همراه من باشید.

متد های عددی

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

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

متد toString()

این متد برای تغییر مقادیر عددی به رشته ای به کار می رود.

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

<script>
 var x = 250;
 document.getElementById("p01").innerHTML =
 "برگرداندن خود متغیر:" + " " + x.toString() + "<br>" +
 "برگرداندن عدد 250 به صورت تحت اللفظی:" + " " + (250).toString() + "<br>" +
 "برگرداندن عدد 250 از یک عبارت جبری: " + (100/2 + 200).toString();
</script>
</body>

آموزش JavaScript - بخش سوم

متد toExponential()

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

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

<script>
 var x = 2.123456789;
 document.getElementById("p01").innerHTML =
 x.toExponential() + "<br>" +
 x.toExponential(5) + "<br>" +
 x.toExponential(8) + "<br>" +
 x.toExponential(10);
</script>
</body>

آموزش JavaScript - بخش سوم

اگر پارامتری را درون پرانتز ننویسید، جاوا اسکریپت خود عدد را رند نشده اما به صورت توانی بر می گرداند.

متد toFiexed()

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

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


<script>
 var x = 7.8995;
 document.getElementById("p01").innerHTML =
 x.toFixed(0) + "<br>" +
 x.toFixed(3) + "<br>" +
 x.toFixed(6) + "<br>" +
 x.toFixed(8);
</script>
</body>

آموزش JavaScript - بخش سوم

این متد نیز در مرورگر یک مقدار رشته ای بر می گرداند.

متد toPrecision()

این متد (که یک رشته را بر می گرداند) نیز برای رند کردن اعداد (با تعداد ارقام مشخص) استفاده می شود. تعدا ارقام (که تعداد ارقام هم بخش صحیح و هم بخش اعشار را شامل می شود) را با پارامتر درون پرانتز مشخص می کنیم:

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


<script>
 var x = 7.8995;
 document.getElementById("p01").innerHTML =
 x.toPrecision() + "<br>" +
 x.toPrecision(3) + "<br>" +
 x.toPrecision(5) + "<br>" +
 x.toPrecision(6);
</script>
</body>

آموزش JavaScript - بخش سوم

متد های سراسری

در جاوا اسکریپت متد هایی برای کار با انواع داده (نه تنها داده های عددی) داریم که به آن ها متد های سراسری (global) می گوییم.

متدهایی را که در این جلسه می خواهم خدمت شما عزیزان معرفی کنم عبارتند از:

  • Number()
  • parseFloat()
  • parseInt()

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

متد Number()

این متد برای تبدیل متغیر ها به عدد کاربرد دارد:

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


<script>
 var x = 7.8995;
 document.getElementById("p01").innerHTML =
 Number(true) + "<br>" +
 Number(false) + "<br>" +
 Number(" 9") + "<br>" +
 Number("9 ") + "<br>" +
 Number("9 9");
</script>
</body>

آموزش JavaScript - بخش سوم

متد parseInt()

این متد آرگومانش (که یک رشته می باشد) را تجزیه می کند و یک عدد کامل را بر می گرداند. توجه داشته باشید که فاصله بین اعداد مجاز است و اولین عدد برگردانده می شود. به مثال زیر توجه کنید:

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


<script>
 document.getElementById("p01").innerHTML =
 parseInt("10") + "<br>" +
 parseInt("10.33") + "<br>" +
 parseInt("10 6") + "<br>" +
 parseInt("10 years") + "<br>" +
 parseInt("years 10");
</script>
</body>

آموزش JavaScript - بخش سوم

در کنار این متد، متد parseFloat()  نیز وجود دارد که داده رشته ای را تجزیه می کند و مقدار اعشاری اعداد را نیز بر می گرداند.

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

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

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