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

فرم ها و آبجکت های جاوا اسکریپت

فرم ها و آبجکت های جاوا اسکریپت

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

  • فرم ها در جاوا اسکریپت
  • آبجکت های جاوا اسکریپت

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

و اما در این جلسه می خواهیم کار مهمی را انجام دهیم!

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

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

به نظر شما بعد از طراحی و سبک دهی به یک فرم، چه کاری باید انجام دهیم؟

اولین کار، بررسی تکمیل شدن ورودی های مختلف می باشد. در قدم بعدی و زمانی که مطمئن شدیم تمام ورودی ها پر شده اند، باید داده ها بررسی شوند تا از معتبر بودن داده ها اطمینان یابیم. در واقع فرم را اعتبار سنجی (form validation) می کنیم و برای این کار می توان از جاوا اسکریپت کمک گرفت.

آیا اعتبار سنجی فقط در سمت کاربر صورت می پذیرد؟

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

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

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

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

<body>
 <form action="#" name="myForm" onsubmit="return validateForm()" method="post">
 	نام: <input type="text" name="fname">
 	<input type="submit" value="ارسال">
 </form>

 
 <script>
 function validateForm(d) {
	var x = document.forms["myForm"]["fname"].value;
	if (x == "") {
		alert("لطفا نام خود را وارد نمایید");
		return false;
	}
}
 </script>
</body>

آموزش JavaScript – بخش نهم

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

اما متغیر x چگونه مقدار دهی شده است؟

با توجه به دستور نوشته شده، جاوا اسکریپت از فرم های موجود در سند کنونی، فرمی که myForm نامگذاری شده است را یافته و ورودی fname  آن را انتخاب می کند و در نهایت مقدار آن را بر می دارد و در متغیر x قرار می دهد.

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

و اما یک مثال بهتر:

<body>
<p>لطفا یک عدد بین 50 تا 100 را وارد نمایید</p>
 	<input id="numb">
 	<input type="submit" value="ارسال" onclick="validateForm()">
<p id="p01"></p>
 
 <script>
 function validateForm() {
	var x, txt;
	x = document.getElementById("numb").value;
	
	if(isNaN(x) || x < 50 || x > 100) {
		txt = "لطفا مقدار صحیحی را وارد نمایید";
	} else {
		txt = "مقدار وارد شده صحیح است";
	}
document.getElementById('p01').innerHTML = txt;
}
 </script>
</body>

آموزش JavaScript – بخش نهم

حتما میپرسید isNaN()  چیه؟

عرض شود که isNaN()  یک تابع از جاوا اسکریپت می باشد که پارامترش را بررسی می کند که آیا عدد می باشد یا نه؟

NaN مخفف Not a Number می باشد. بنابراین اگر پارامتر عدد باشد false و در غیر اینصورت true را برمی گرداند.

توجه کنید که این تابع عدد ذخیره شده به صورت رشته ای را به عدد تبدیل می کند.

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

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

<body>
<p>لطفا یک عدد بین 50 تا 100 را وارد نمایید</p>
<form name="myForm" action="#" method="post">
 	<input name="numb" required>
 	<input type="submit" value="ارسال">
<p id="p01"></p>
</form>
</body>

آموزش JavaScript – بخش نهم

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

تا اینجای کار بررسی کردیم که آیا ورودی تکمیل شده است یا نه؟

حالا باید چکار کنیم؟

بله دوستان؛ باید داده وارد شده را بررسی کنیم تا مطمئن شویم که کاربر داده ی معتبر را وارد کرده است. مثلا در ورودی متن، عدد وارد نشده باشد. یا مقدار عددی وارد شده در یک ورودی، در بازه مورد نظر ما باشد و … .

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

بررسی محدودیت ورودی ها

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

checkValidity()با درست بودن ورودی، مقدار true را بر می گرداند
setCustomValidity()تنظیم پیغام نتیجه اعتبارسنجی

در مثال زیر می بینید که چگونه با استفاده از متد checkValidity()  می توان اعتبار یک ورودی را سنجید:

<body>
<p>لطفا یک عدد بین 50 تا 100 را وارد نمایید</p>
 	<input id="numb" type="number" min="50" max="100" required>
 	<button onclick="myFunction()">ارسال</button>
<p id="p01"></p>

 
 <script>
 function myFunction() {
	var x, txt;
	x = document.getElementById('numb');
	
	if (x.checkValidity() == false) {
		document.getElementById('p01').innerHTML = x.validationMessage;
	} else {
		document.getElementById('p01').innerHTML = "Input Ok";
	}
}
 </script>
</body>

آموزش JavaScript – بخش نهم

همانطور که در مثال می بینید، ورودی با استفاده از ویژگی های max  و min  به اعداد 50 تا 100 محدود شده است. حال اگر عددی خارج از این محدوده وارد شود، جاوا اسکریپت پیغام خطایی را به کاربر نمایش می دهد.

حتما کاربرد validationMessage()  سوال شماست!

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

validityمقدار بولی را برای درست یا غلط بودن ورودی بر می گرداند
validationMessageپیغام مرورگر را برای داده غلط بر می گرداند
willValidateورودی های معتبر را نمایش می دهد.

 

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

ویژگیtrue  می شوند اگر
customErrorاگر پیغام خطا تنظیم شده باشد.
patternMismatchاگر مقدار ورودی مطابق با خصیصه pattern نباشد
rangeOverflowاگر مقدار ورودی بیشتر از خصیصه max باشد
rangeUnderflowاگر مقدار ورودی کمتر از خصیصه min باشد
stepMismatchاگر مقدار ورودی با خصیصه step همخوانی نداشته باشد
tooLongاگر تعداد کاراکتر ورودی طولانی تر از مقدار خصیصه maxLength باشد
typeMismatchاگر مقدار ورودی مطابق با خصیصه type نباشد
valueMissingاگر ورودی که خصیصه requierd دارد خالی باشد
validاگر مقدار ورودی معتبر باشد

 

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

<body>
 	<input id="id1" type="number" max="100">
 	<button onclick="myFunction()">ارسال</button>
<p id="p01"></p>

 
 <script>
 function myFunction() {
	var txt = "";
	if (document.getElementById("id1").validity.rangeOverflow) {
		txt = "لطفا عددی کمتر از 100 را وارد نمایید ";
	} else {
		txt = "ورودی صحیح است";
	}
document.getElementById('p01').innerHTML = txt;
}
 </script>
</body>

آموزش JavaScript – بخش نهم

و اما مبحث بسیار مهم آبجکت ها:

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

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

آبجکت

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

در جاوا اسکریپت هر چیزی ( مانند توابع، Boolean، Number، Date، Array  و …) می تواند آبجکت باشد. همچنین تمام مقادیر، بجز مقادیر اولیه نیز آبجکت هستند.

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

داده های اولیه عبارت اند از:

  • string
  • number
  • boolean
  • null
  • undefined
<body>
<p id="p01"></p>

 
 <script>
 var x1 = {};
var x2 = "";
var x3 = 0;
var x4 = false;
var x5 = [];
var x6 = /()/;
var x7 = function(){};

document.getElementById("p01").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 ;
 </script>
</body>

آموزش JavaScript – بخش نهم

ساختار

ساختار یک آبجکت به صورت زیر می باشد:

var x = {name1: "val1", name2: "val2", name3: "val3"};

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

متد و ویژگی

همانطور که می دانید (در جلسه دوم آموزش جاوا اسکریپت گفته شد) آبجکت ها ویژگی ها و متد هایی دارند.

ویژگی ها در واقع مقادیری هستند که در آبجکت ذخیره شده اند. ویژگی می تواند یک آبجکت، مقداری اولیه و یا یک تابع باشد.

اما متد چیست؟

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

ایجاد یک آبجکت

به روش های زیر نیز می توانیم آبجکت ها را بسازیم:

1-تحت اللفظی

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

var person = {firstName:"Ali", lastName:"Nosrati", age:23};

یا

 var person = {
 	firstName:"Ali", 
 	lastName:"Nosrati", 
 	age:23
 };
2-استفاده از کلمه کلیدی new

یکی دیگر از روش های ایجاد آرایه، استفاده از کلمه کلیدی new  می باشد:

var person = new Object();
 	person.firstName = "Ali";
 	person.lastName = "Nosrati";
 	person.age = 23;

همانطور که می دانید اگر کلمه کلیدی new را قبل از هر چیزی قرار دهیم ( ()naw array()، new Object() ، new RegExp()،  new Function  )، جاوا اسکریپت با آن مانند یک آبجکت رفتار می کند.

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

3-استفاده از تابع سازنده آبجکت

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

function person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}

این تابع می گوید که آرگومان اول را برابر firstName و آرگومان دوم را lastName و آرگومان سوم را age قرار بده. (آرگومان ها هر تعدادی می توانند باشند.) حال هر تعداد آبجکت را به راحتی می توان با پاس دادن مقادیر مختلف به تابع، ساخت:

var studentOne = new person("Ali", "Nosrati", 23);
var studentTow = new person("Yazdan", "Mirvaziri", 21);

و با توجه به تابع Person آبجکت studentOne به صورت زیر تعریف می شود:

var studentOne = {
  	firstName: "Ali",
  	lastName: "Nosrati",
  	age: 22
  }

کلمه کلیدی this اگر در هر شیئ ( تابع، آبجکت، آرایه و … ) به کار رود، مقدار آن آبجکتی است که متعلق به آن شیئ می باشد. مثلا اگر در یک تابع به کار رود، مقدار آن آبجکتی است که به آن تابع تعلق دارد. اما زمانی که در تابع سازنده یک آبجکت به کار رود، مقدار خاصی ندارد و تنها جایگزین new object می شود.

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

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

ویژگی های آبجکت

گفتیم که ویژگی ها در واقع مقادیری هستند که در یک آبجکت ذخیره شده اند و به صورت زیر می توان به آن ها دسترسی داشت:

objectName.property

یا

objectName["property"]

دوستان عزیز، در ادامه مواردی که باید در مورد ویژگی های یک آبجکت بدانید را شرح می دهم. همراه من باشید:

حلقه for…in

از این حلقه برای قراردادن یک آبجکت در حلقه for مطابق با ساختار زیر استفاده می کنیم:

for (variable in object) {
    کدهایی که باید اجرا شوند
}

که بلوک کدها برای هر ویژگی یک بار اجرا خواهند شد.

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

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

 
 <script>
 var txt = "";
 var person = {firstName:"Ali", lastName:"Nosrati", age:23};
 var x;
 for (x in person) {
 	txt += person[x] + " ";
 }
 document.getElementById('p01').innerHTML = txt;
 </script>
</body>

آموزش JavaScript – بخش نهم

افزودن ویژگی جدید

در مثال زیر نحوه افزودن یک ویژگی جدید به یک آبجکت را می بینید:

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

 
 <script>
 var person = {firstName:"Ali", lastName:"Nosrati", age:23};
 person.newProperty = "added";
 document.getElementById('p01').innerHTML = person.newProperty;
 </script>
</body>

آموزش JavaScript – بخش نهم

حذف یک ویژگی

با استفاده از کلمه کلیدی delete  می توان هر ویژگی از آبجکت ها را حذف کرد:

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

 
 <script>
 var person = {firstName:"Ali", lastName:"Nosrati", age:23};
delete person.age;
 document.getElementById('p01').innerHTML = person.newProperty;
 </script>
</body>

کلمه کلیدی delete  فقط برای حذف ویژگی های یک آبجکت استفاده می شود و تاثیری بر توابع و مقادیر ندارد.

متد های آبجکت

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

مطابق ساختار زیر می توان یک متد را ایجاد نمود:

methodName : function() { code lines }

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

objectName.methodName()

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

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

 
 <script>
 var person = {
 	firstName: "Ali",
 	lastName: "Nosrati",
 	age: 23,
 	fullName : function() {
 		return this.firstName + " " + this.lastName;
 	}
 };
 document.getElementById('p01').innerHTML = person.fullName();
 </script>
</body>

آموزش JavaScript – بخش نهم

تمرین: در مثال بالا و در دستور person.fullName()  عملگر ()  را حذف کنید و نتیجه را مشاهده نمایید.

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

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

 
 <script>
 function person(firstName, lastName, age, weight) {
 	this.firstName = firstName;
 	this.lastName = lastName;
 	this.age = age;
 	this.weight = weight;
 	this.nickName = function (name) {
 		this.firstName = name;
 	}
 }
 var myFriend = new person("Ali", "Nosrati", 22, 78);
 myFriend.nickName("Yazdan");
 document.getElementById('p01').innerHTML = "Ali's nickname is" + " " + myFriend.firstName;
 </script>
</body>

آموزش JavaScript – بخش نهم

prototype

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

شاید برای شما جالب باشد که می توان متدها و یا ویژگی هایی را به آبجکتی که بر اساس الگویی خاص ساخته شده است، افزود!

در مثال زیر نحوه افزودن ویژگی جدید را به یک آبجکت می یینیم:

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

 
 <script>
 function Person(firstName, lastName, age, weight) {
 	this.firstName = firstName;
 	this.lastName = lastName;
 	this.age = age;
 	this.weight = weight;
 }

 var myFriend1 = new Person("Ali", "Nosrati", 22, 78);
 var myFriend2 = new Person("Yazdan", "Mirvaziri", 21, 55);
 myFriend1.from = "Tabriz";
 myFriend2.from = "Kerman";
 document.getElementById('p01').innerHTML = "Ali from" + " " + myFriend1.from + " " + "and Yazdan from" + " " + myFriend2.from;
 </script>
</body>

آموزش JavaScript – بخش نهم

در مثال بالا می بینید که آبجکت های myFriend1 و myFriend2 مطابق پروتوتایپ Person ساخته شده اند و بدون تغییر پروتوتایپ، ویژگی from را به آنها افزودیم.

حال اگر بخواهیم متد from را به این دو آبجکت بیفزاییم به صورت زیر عمل می کنیم:

myFriend1.from = function Name(argument) {
 	Some code to be execute...
 }

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

آیا می توان به الگوها نیز به این روش متد و ویژگی جدید بیفزاییم؟

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

خب دو راه داریم:

راه اول: تعریف ویژگی یا متد در الگو می باشد. به مثال زیر توجه کنید:

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

 
 <script>
 function Person(firstName, lastName, age, weight) {
 	this.firstName = firstName;
 	this.lastName = lastName;
 	this.age = age;
 	this.weight = weight;
 	this.fullName = function () {
 		return this.firstName + " " + this.lastName;
 	}
 }

 var myFriend1 = new Person("Ali", "Nosrati", 22, 78);
 var myFriend2 = new Person("Yazdan", "Mirvaziri", 21, 55);

 document.getElementById('p01').innerHTML = "Ali full name is" + " " + myFriend1.fullName() + " " + "and Yazdan full name is" + " " + myFriend2.fullName();
 </script>
</body>

آموزش JavaScript – بخش نهم

راه دوم: اگر نخواهیم به الگو دست بزنیم، از دستور prototype  به شکلی که در مثال زیر گفته شده است استفاده می کنیم:

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

 
 <script>
 function Person(firstName, lastName, age, weight) {
 	this.firstName = firstName;
 	this.lastName = lastName;
 	this.age = age;
 	this.weight = weight;
 }
 	Person.prototype.fullName = function () {
 		return this.firstName + " " + this.lastName;
 	}

 var myFriend1 = new Person("Ali", "Nosrati", 22, 78);
 var myFriend2 = new Person("Yazdan", "Mirvaziri", 21, 55);

 document.getElementById('p01').innerHTML = "Ali full name is" + " " + myFriend1.fullName() + " " + "and Yazdan full name is" + " " + myFriend2.fullName();
 </script>
</body>

آموزش JavaScript – بخش نهم

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

 

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

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