آشنایی با جاوا اسکریپت
فهرست مطالب
در این مقاله قصد داریم با یکی از مهم ترین و محبوب ترین زبان های برنامه نویسی جهان یعنی جاوا اسکریپت آشنا بشویم.
جاوا اسکریپت به قدری زبان مهمی است که شاید ما باید خیلی زودتر درباره ی آن مقاله ای می نوشتیم.
جاو اسکریپت یک زبان front-end می باشد که اکثریت کاربرد آن و کتابخانه هایش در طراحی فرانت وبسایت ها می باشد.
اما کاربری جاوا اسکریپت به همینجا خلاصه نمی شود ؛ جاوا اسکریپت یک زبان برنامه نویسی پویا است که برای توسعه وب اپلیکیشن ، توسعه بازی و بسیاری موارد دیگر استفاده می شود.
بدون جاوا اسکریپت ، تمام چیزی که در وب خواهید داشت HTML و CSS خواهد بود.
اینها به تنهایی شما را به پیاده سازی صفحات وب نسبتا استاتیک محدود می کنند.
با ما در ادامه همراه باشید تا به صورت کامل شما را با این زبان آشنا کنیم.
لازم به ذکر است ما در این مقاله در درجه ی اول قصد تنها آشنایی با جاوا اسکریپت را داریم و در درجه ی دوم آموزش های ما نیز به صورت کاملا ابتدایی و پایه ی زبان جاوا اسکریپت می باشد.
(همچنین در آموزش های خود از موارد تکراری مانند لیست عملگرها ، دستورات شرطی و … که معمولا در تمامی زبان ها یکسان است پرهیز کرده ایم.)
چرا جاوا اسکریپت
همانطور که گفته شد اگر میخواهید یک وبسایت زیبا ، پویا و سرشار از انیمیشن های جذاب داشته باشید باید جاوا اسکریپت بلد باشید.
همانطور که می دانید جاوا اسکریپت در دنیای توسعه نرم افزار تا بازی سازی تحت وب همه جا وجود دارد.
این پایه و اساس توسعه وب فرانت اند است و عنصر اصلی در فریمورک هایی مانند ReactJS، Angular و VueJS می باشد.
همچنین میتواند به ایجاد solid backends با پلتفرمهایی مانند Nodejs کمک کند ، برنامههای دسکتاپ مانند Slack، Atom و Spotify را اجرا کند و روی تلفنهای همراه بهعنوان برنامههای (PWA) اجرا شود.
برای شروع، در مقایسه با زبان های دیگر مانند C و جاوا ، یادگیری جاوا اسکریپت به طور کلی آسان تر است.
وقتی میگوییم «آسانتر»، منظورمان این است که چقدر سریع میتوانید از یک تازهکار جاوا اسکریپت به شخصی تبدیل شوید که واقعاً میتواند در نوشتن کد جاوا اسکریپت حرفهای و با کیفیت بالا باشد.
بنابراین ، از این نظر ، نسبت به برخی از زبان های دیگر مانند C و جاوا در دسترس تر است.
جاوا اسکریپت همچنین جامعه پشتیبانی بسیار خوبی دارد ، بنابراین اگر به مشکل خوردید ؛ افراد زیادی برای کمک به شما هستند.
چگونه جاوا اسکریپت پویاسازی می کند ؟
HTML ساختار داکیومنت وب شما و محتوای آن را تعریف می کند.
CSS سبک های مختلفی را برای نمایش آن محتوا ارائه می کند.
HTML و CSS اغلب به جای زبان های برنامه نویسی، زبان های نشانه گذاری (markup languages) نامیده می شوند ، زیرا آنها در هسته خود نشانه گذاری هایی را برای داکیومنت ها با پویایی بسیار کمی ارائه می دهند.
از سوی دیگر ، جاوا اسکریپت یک زبان برنامه نویسی پویا است که از محاسبات ریاضی پیچیده ای پشتیبانی می کند و به شما امکان می دهد به صورت پویا محتویات HTML را به DOM اضافه کنید، و یک وبسایت را به انواع و اقسام جلوه های انیمیشنی و متحرک پویا کنید.
قبل از اینکه به نحوه انجام همه این کارها توسط جاوا اسکریپت بپردازیم، اجازه دهید به یک مثال سریع نگاه کنیم.
این کدپن را بررسی کنید : https://codepen.io/Dillion/full/XWjvdMG
در کدپن ، خواهید دید که وقتی در فیلد ورودی تایپ می کنید ، متن روی صفحه نمایش داده می شود ؛ که این قابلیت توسط جاوا اسکریپت ممکن شده است.
شما نمی توانید این را با HTML یا CSS پیاده سازی کنید.
این ساده ترین و ابتدایی ترین قابلیت جاوا اسکریپت است که ما برای شروع در قالب یک مثال به شما گفتیم ؛ با ما همراه باشید تا با قابلیت های بیشتر و پیچیده تر این زبان آشنا شویم.
کاربردهای دیگر جاوا اسکریپت
۱- وب سرور
از طریق Node.js ، جاوا اسکریپت به توسعهدهندگان اجازه میدهد تا وب سرورها و زیرساختهای بکاند بسازند و در زمان و تلاش شما در ایجاد وب سرور صرفهجویی کنند.
ماژول HTTP داخلی به شما امکان می دهد یک سرور HTTP پایه ایجاد کنید که متن ساده را هنگام دسترسی کاربران به یک صفحه وب نمایش می دهد.
میتوانید از وب سرور Node.js، Node-OS یا سرورهای شخص ثالث مانند Microsoft Internet Information Services (IIS) و Apache برای رسیدگی به درخواستهای HTTP استفاده کنید.
به خاطر داشته باشید که Node-OS بر روی سیستم عامل های لینوکس بهترین عملکرد را دارد زیرا بر روی هسته لینوکس ساخته شده است.
۲- بهبود تجربه کاربری صفحات وب
یکی از عملکردهای اصلی جاوا اسکریپت افزودن پویایی به صفحات وب است.
این شامل نمایش انیمیشن ها ، تغییر قابلیت مشاهده متن و المان های تعامل گرا می باشد.
در حالی که شما می توانید تنها از کدهای HTML و CSS برای ساخت یک وب سایت استفاده کنید ، اما فقط یک صفحه نمایش ثابت خواهید داشت.
با جاوا اسکریپت، کاربر می تواند با صفحات وب تعامل داشته باشد و تجربه مرور بهتری داشته باشد.
علاوه بر این ، جاوا اسکریپت به شما امکان می دهد محتوای HTML و مقادیر attribute ها را بدون بارگیری مجدد صفحه وب تغییر دهید (ajax). ا
ین به این دلیل است که جاوا اسکریپت از انواع داده های زیر پشتیبانی می کند :
- String
- Number
- Boolean
- BigInt
- Null
- Undefined
- Symbol
- Object
با جاوا اسکریپت ، می توانید تجربه مرور وب کاربران را با استفاده از کوکی ها نیز بهبود بخشید.
ایجاد، خواندن و حذف کوکی ها در جاوا اسکریپت به ویژگی document.cookie نیاز دارد که به عنوان گیرنده و تنظیم کننده مقادیر کوکی ها عمل می کند.
انواع داده های اولیه که از همه انواع داده ها به جز شی تشکیل شده اند ، فقط می توانند یک داده را ذخیره کنند.
در همین حال ، نوع داده شی می تواند شامل مجموعه ای از مقادیر باشد.
با جاوا اسکریپت، می توانید تجربه مرور وب کاربران را با استفاده از کوکی ها نیز بهبود بخشید.
ایجاد، خواندن و حذف کوکی ها در جاوا اسکریپت به ویژگی document.cookie نیاز دارد که به عنوان گیرنده و تنظیم کننده مقادیر کوکی ها عمل می کند.
۳- توسعه بازی
جاوا اسکریپت اگر با HTML5 و یک رابط برنامه نویسی کاربردی (API) مانند WebGL استفاده شود، می تواند به شما در ساخت یک بازی نیز کمک کند.
بسیاری از موتورهای بازی مبتنی بر جاوا اسکریپت مانند Phaser، GDevelop و Kiwi.js برای رندر کردن گرافیک ، بازیافت کد و برنامههای کراس پلتفرم در دسترس هستند.
برخی از بازی های ساخته شده با موتورهای بازی جاوا اسکریپت عبارتند از Angry Birds ، The Wizard و 2048.
مهم ترین ویژگی های زبان جاوا اسکریپت
سادگی :
داشتن ساختار ساده یادگیری و پیادهسازی ، جاوا اسکریپت را آسانتر میکند و همچنین سریعتر از برخی از زبانهای دیگر اجرا میشود.
خطاها نیز به راحتی قابل تشخیص و تصحیح هستند.
سرعت :
جاوا اسکریپت ، اسکریپت ها را مستقیماً در مرورگر وب بدون اتصال به سرور یا نیاز به کامپایلر اجرا می کند.
علاوه بر این ، اکثر مرورگرهای اصلی به جاوا اسکریپت اجازه می دهند تا کد را در طول اجرای برنامه کامپایل کند.
محبوبیت :
منابع و انجمن های زیادی برای کمک به مبتدیان با مهارت های فنی محدود و دانش جاوا اسکریپت در دسترس هستند.
بار سرور :
یکی دیگر از مهم ترین مزایای زبان جاوا اسکریپت عملکرد آن در سمت کلاینت است به اینصورتکه جاوا اسکریپت درخواست های ارسال شده به سرور را کاهش می دهد.
اعتبار سنجی داده ها را می توان از طریق مرورگر وب انجام داد و به روز رسانی ها فقط برای بخش های خاصی از صفحه وب اعمال می شود.
بهروزرسانیها :
تیم توسعه جاوا اسکریپت و ECMA International بهطور مداوم فریمورک ها و کتابخانههای جدید را بهروزرسانی و ایجاد میکنند.
برخی از مشکلات جاوا اسکریپت
مانند هر زبان برنامه نویسی دیگری ، جاوا اسکریپت نیز یک سری محدودیت هایی دارد که برخی از مهم ترین آن ها عبارتند از :
سازگاری مرورگر : مرورگرهای وب مختلف کد جاوا اسکریپت را به طور متفاوتی تفسیر می کنند که باعث ناسازگاری می شود.
بنابراین، باید اسکریپت جاوا اسکریپت خود را در همه مرورگرهای وب محبوب ، از جمله نسخههای قدیمیتر، آزمایش کنید تا به تجربه کاربر آسیب نرسانید.
امنیت : کد جاوا اسکریپت که در سمت کلاینت اجرا می شود در برابر سوء استفاده توسط کاربران آسیب پذیر است.
نحوه استفاده از جاوا اسکریپت درون html
درست مانند کاری که برای CSS انجام می دهیم ، یک فایل جدید برای نوشتن جاوا اسکریپت به نام script.js در دایرکتوری پورتفولیو ایجاد خواهیم کرد.
حالا فایل index.html را باز کنید و درست قبل از بسته شدن تگ بدن (</body>)، این خط را وارد کنید.
حال مانند CSS ، جاوا اسکریپت را می توان در HTML به روش های مختلفی استفاده کرد ، مانند :
۱- Inline JavaScript :
در اینجا ، کد جاوا اسکریپت را در تگ های HTML در برخی JS-based attributes دارید.
به عنوان مثال ، تگهای HTML دارای event attributes هستند که به شما امکان میدهند در هنگام راهاندازی یک event ، برخی از کدها را به صورت درون خطی اجرا کنید.
به کد زیر توجه کنید :
این نمونه ای از جاوا اسکریپت درون خطی است.
مقدار onclick می تواند هر مقداری باشد ، یک افزودنی پویا به DOM یا هر کد جاوا اسکریپت معتبر از لحاظ سینتکسی.
۲- Internal JavaScript با تگ script :
درست مانند تگ style برای اعلان های style در یک صفحه HTML، تگ اسکریپت برای جاوا اسکریپت وجود دارد.
در اینجا نحوه استفاده از آن آمده است :
۳- External JavaScript :
ممکن است بخواهید کد جاوا اسکریپت خود را در فایل دیگری داشته باشید.
External JavaScript این اجازه را می دهد.
برای چنین موارد استفاده ، در اینجا نحوه انجام آن آمده است :
// script.js
alert("I am inside an external file");
اتریبیوت src در تگ اسکریپت به شما امکان می دهد یک منبع برای کد جاوا اسکریپت اعمال کنید.
این مرجع مهم است زیرا به مرورگر اطلاع می دهد که محتوای script.js را نیز پویا کند.
script.js می تواند در یک فهرست با index.html باشد یا می توان آن را از وب سایت دیگری دریافت کرد.
برای مورد دوم، باید URL کامل (https://…/script.js) را ارسال کنید.
.js پسوند فایل های جاوا اسکریپت است ، درست مانند HTML که دارای .html است.
متغیر ها در جاوا اسکریپت
متغیرها محفظه هایی برای مقادیر هر نوع داده ای هستند.
آنها مقادیری را طوری نگه می دارند که وقتی از متغیرها استفاده می شود ، جاوا اسکریپت از مقداری که آنها برای آن عملیات نشان می دهند استفاده می کند.
متغیرها را می توان اعلام کرد و می توان به آنها یک مقدار اختصاص داد.
متغیر ها در جاوا اسکریپت به شکل زیر نوشته می شوند :
let name;
در مثال بالا name اعلام شده است ، اما هنوز مقداری ندارد.
زمانیکه مقداری ندهید ؛ جاوا اسکریپت به طور خودکار مقدار undefined را به name اختصاص می دهد.
بنابراین اگر سعی کنید از name در هر جایی استفاده کنید، undefined برای آن عملیات استفاده خواهد شد.
نحوه ی اختصاص مقدار به متغیر :
let name = "JavaScript";
جاوا اسکریپت از سه روش اعلان متغیرها پشتیبانی می کند که عبارتند از :
عملگر var : شما می توانید متغیرها را اعلام کنید و مقادیری را به آنها اختصاص دهید که می توانند بعداً در کد تغییر کنند.
var name = "JavaScript";
name = "Language";
عملگر let : این نیز بسیار شبیه به var است ؛ مقادیری را به متغیرهایی که میتوانند بعداً در کد تغییر دهند، اعلام و تخصیص میدهد.
تفاوت عمده بین این عملگرها این است که var چنین متغیرهایی را hoists میکند ، در حالی که let به نحوی hoists نمیبرد.
مفهوم hoists را می توان با کد زیر به طور خلاصه توضیح داد :
function print() {
console.log(name);
console.log(age);
var name = "JavaScript";
let age = 5;
}
print();
هنگام فراخوانی تابع () print ، اولین console.log به صورت تعریف نشده چاپ میشود در حالی که دومین console.log خطای «Cannot access age before initialization» میدهد.
این به این دلیل است که اعلان نام متغیر به بالا می رود و تخصیص متغیر در همان خط باقی می ماند در حالی که اعلان سن و انتساب در همان خط می ماند.
در اینجا نحوه کامپایل کد بالا آمده است :
function print() {
var name;
console.log(name);
console.log(age);
name = "JavaScript";
let age = 5;
}
print();
عملگر const : این نیز متغیرها را بالا نمیبرد ، اما یک کار دیگر را انجام میدهد ؛ تضمین میکند که به یک متغیر نمیتوان مقدار دیگری غیر از مقداری که در زمان اولیه اختصاص داده شده است، اختصاص داد.
let name = "JavaScript"
name = "Language" // no errors
const age = 5
age = 6 // error, cannot reassign variable
توابع در جاوا اسکریپت
قبل از استفاده از یک تابع ، باید آن را تعریف کنیم.
متداول ترین راه برای تعریف یک تابع در جاوا اسکریپت استفاده از کلمه کلیدی function و به دنبال آن یک نام تابع منحصر به فرد ، لیستی از پارامترها (که ممکن است خالی باشد) و یک statement block احاطه شده است.
با توابع ، می توانید بلوکی از کد را ذخیره کنید که می تواند در مکان های دیگر کد استفاده شود.
فرض کنید می خواهید دو عبارت “JavaScript” و “Language” را در مکان های مختلف کد خود چاپ کنید.
به جای انجام این کار :
console.log("JavaScript")
console.log("Language")
// some things here
console.log("JavaScript")
console.log("Language")
// more things here
console.log("JavaScript")
console.log("Language")
اینکار را انجام می دهید :
function print() {
console.log("JavaScript")
console.log("Language")
}
print()
// some things here
print()
// more things here
print()
به این ترتیب ، ما بلوک کد مکرر را در یک تابع ذخیره کرده ایم که می تواند در هر کجا که بخواهیم استفاده شود.
اما این همه ماجرا نیست. فرض کنید می خواستیم میانگین سه عدد را پیدا کنیم.
کد به اینصورت خواهد بود :
let num1 = 5
let num2 = 6
let num3 = 8
let average = (num1 + num2 + num3) / 3
انجام این کار خارج از یک تابع ممکن است ضرری نداشته باشد، اما اگر مجبور بودیم این کار را در بسیاری از جاها انجام دهیم ؛ تابع ما به شکل زیر می شد :
function findAverage(n1, n2, n3) {
let aver = (n1 + n2 + n3) / 3
return aver
}
let num1 = 5
let num2 = 6
let num3 = 8
let average = findAverage(num1, num2, num3)
// later on, somewhere else
let average2 = findAverage(...)
// later on, somewhere else
let average3 = findAverage(...)
همانطور که در اعلان findAverage متوجه خواهید شد ، n1، n2، n3 را در پرانتز داریم.
اینها پارامترهایی هستند که به عنوان placeholders برای مقادیری عمل می کنند که هنگام فراخوانی تابع ارائه می شوند.
بلوک کد از این متغیرها برای یافتن میانگین استفاده می کند و کلمه کلیدی returns the average را از تابع برمی گرداند.
Placeholder ها توابع شما را قابل استفاده مجدد میکنند به طوری که مقادیر مختلف در زمانهای مختلف میتواند برای استفاده از منطق یکسان به توابع ارسال شود.
پارامترهای تابع
تاکنون توابع بدون پارامتر را دیدهایم.
اما امکان ارسال پارامترهای مختلف در حین فراخوانی یک تابع وجود دارد.
این پارامترهای ارسال شده را می توان در داخل تابع ثبت کرد و هر گونه دستکاری را می توان روی آن پارامترها انجام داد.
یک تابع می تواند چندین پارامتر را که با کاما از هم جدا شده اند، بگیرد.
به مثال زیر را توجه کنید.
ما تابع sayHello خود را در اینجا تغییر داده ایم. حالا دو پارامتر می گیرد.
Click the following button to call the function
Use different parameters inside the function and then try...
return Statement
یک تابع جاوا اسکریپت می تواند یک عبارت بازگشتی اختیاری داشته باشد.
اگر می خواهید مقداری را از یک تابع برگردانید، این مورد ضروری است.
این دستور باید آخرین عبارت در یک تابع باشد.
به عنوان مثال ، می توانید دو عدد را در یک تابع ارسال کنید و سپس می توانید انتظار داشته باشید که تابع ضرب آنها را در برنامه فراخوانی شما برگرداند.
مثال زیر تابعی را تعریف می کند که دو پارامتر را می گیرد و آنها را قبل از برگرداندن نتیجه در برنامه فراخوانی به هم متصل می کند.
Click the following button to call the function
Use different parameters inside the function and then try...
اشیا در جاوا اسکریپت
آخرین مفهوم مهم مورد نیاز برای وب سایت ما شی جاوا اسکریپت است.
اشیاء صرفاً محفظههایی برای جفتهای key-value هستند.
در یک شی جاوا اسکریپت ، یک key یک نام است و یک value می تواند هر چیزی باشد ، حتی اشیاء دیگر.
بیایید به یک مثال نگاه کنیم :
let fullName = {
firstName: 'John',
lastName: 'Doe'
}
در شیء مثال ما که “fullName” نامیده می شود ، firstName و lastName کلیدها هستند و “John” و “Doe” مقادیر هستند.
ما می توانیم با استفاده از علامت نقطه (.) به firstName دسترسی پیدا کنیم.
در زیر آلرت “John” نشان داده می شود.
let fullName = {
firstName: 'John',
lastName: 'Doe'
}
alert(fullName.firstName);
همانطور که گفته شد ، اشیا می توانند اشیاء و توابع دیگری در داخل خود داشته باشند.
به مثال زیر توجه کنید :
let personDetails = {
fullName: {
firstName: 'John',
lastName: 'Doe'
},
alertMessage: function(message) {
alert(message);
}
}
personDetails.alertMessage('Hello World');
انتخاب عناصر html
قدرت جاوا اسکریپت در وب در قدرت آن در انتخاب و تغییر کد HTML نهفته است.
برای مثال ، میتوانیم تابعی را در جاوا اسکریپت بنویسیم که با کلیک بر روی دکمه «send» در فرم فوتر ، فراخوانی میشود.
برای انجام این کار ، ابتدا دکمه ارسال خود را انتخاب کرده و یک تابع «click listener» را به آن متصل کنید.
وقتی یک click listener را به یک المان متصل می کنیم، با کلیک روی دکمه، تابع listener را فراخوانی می کند.
برای اینکه بتوانیم دکمه خود را انتخاب کنیم ، به آن یک ویژگی ID با یک شناسه منحصر به فرد در فایل HTML خود می دهیم.
اکنون که یک شناسه برای انتخاب داریم ، بیایید به فایل جاوا اسکریپت خود برویم و از یک تابع جاوا اسکریپت ، ()document.querySelector برای انتخاب المان خود استفاده کنیم.
همانطور که میتوانیم عناصر HTML را با نام ، ویژگیهای کلاس یا شناسههایشان در CSS انتخاب کنیم ، در جاوا اسکریپت نیز با استفاده از این تابع میتوانیم همین کار را انجام دهیم.
document.querySelector می تواند Selector را به عنوان پارامتر خود بگیرد و عنصر HTML را که با Selector مطابقت دارد را به شکل یک Object برگرداند. (به یاد داشته باشید که Object فقط محفظه هایی برای جفت داده های key-value هستند.)
سپس می توانیم این المان HTML را در یک متغیر ذخیره کنیم و انواع عملیات را روی آن انجام دهیم.
let submitButton = document.querySelector('#submit-button');
توجه کنید که چگونه ID باید با کاراکتر pound (#) پیشوند شود، درست مانند زمانی که شناسه ها را در CSS انتخاب می کنید.
اگر نام کلاس بود ، از یک نقطه (.) مانند .submit-button استفاده می کردید.
نکته : در صورت شک ، console.log (<variable>) را برای “log” امتحان کنید.
یعنی یک پیام خاص را در Chrome Developer Console در جاوا اسکریپت نشان دهید.
به عنوان مثال ، پس از نوشتن خط قبلی ، سعی کنید متغیر submitButton را با کد زیر وارد کنید :
console.log(submitButton);
و خروجی را بررسی کنید اگر «undefined» یا «null» را مشاهده کردید، به این معنی است که چیزی نادرست است.
Attaching a ‘click’ listener
اکنون که عنصر HTML را انتخاب و در یک متغیر جاوا اسکریپت ذخیره کردهایم ، اجازه دهید یک تابع click listener به آن اضافه کنیم.
یک click listener ، همانطور که از نام آن پیداست ، گوش می دهد یا منتظر یک کلیک است.
ما click listener را به عناصر خاصی که مورد علاقه ما هستند ؛ برای مثال دکمه های ارسال فرم ، متصل می کنیم.
هنگامی که بر روی عنصر HTML مذکور کلیک می شود ، تابع click listener فراخوانی می شود.
function clickListener() {
console.log('Button clicked');
}
submit.addEventListener('click', clickListener);
توجه کنید که تابع click listener فقط یک تابع معمولی است که ما آن را به تابع ()addEventListener منتقل می کنیم (بله، انتقال توابع به توابع دیگر به عنوان آرگومان امکان پذیر است و در جاوا اسکریپت بسیار رایج است!).
اما قبل از اینکه بخواهیم این را اجرا کنیم ، باید تغییراتی در کد بالا ایجاد کنیم تا مطمئن شویم که به درستی اجرا می شود.
همچنین می توانید قطعه CodePen را اجرا کنید.
روی دکمه “Send Message” کلیک کنید و سپس Developer Console را در همان پنجره ای که در حال خواندن این course در آن هستید باز کنید.
باید دکمه متنی را که در کنسول کلیک شده است، ببینید.
JavaScript
let submitButton = document.querySelector('#submit-button');
function clickListener(event) {
event.preventDefault();
console.log('Button clicked');
}
submitButton.addEventListener('click', clickListener);
Html
اساساً ، ما پارامتر event ارائهشده به تابع خود را میگیریم ، که حاوی جزئیات event کلیک است (مانند چیزی که کلیک شد، ویژگیهای دکمه، و …)، و از بازخوانی صفحه با () event.preventDefault جلوگیری میکنیم.
ذخیره و بارگیری مجدد تب Developer Tools، Console را باز کنید و روی دکمه کلیک کنید.
گام بعدی ما دریافت مقادیر وارد شده به فرم با استفاده از جاوا اسکریپت است.
دریافت مقادیر وارد شده توسط کاربر
ما یک فرم در صفحه وب خود داریم ، اما درباره نحوه استخراج داده هایی که کاربر ممکن است در فرم ما وارد کند صحبت نکرده ایم.
برای اینکه هر فرمی کار کند ، ما معمولا داده ها را در داخل عناصر فرم (ورودی ها ، بخش های متنی و غیره) در متغیرهای جاوا اسکریپت دریافت می کنیم و سپس آن را به سرور ارسال می کنیم.
به صورت اختیاری ، بسیاری از توسعه دهندگان دوست دارند قبل از ارسال داده ها به سرور ، برخی اعتبارسنجی ها را روی داده ها انجام دهند.
یک نمونه اعتبارسنجی می تواند بررسی قالب ایمیل وارد شده باشد.
document.querySelector را که در بخش قبل استفاده کردیم را به خاطر دارید ؟
ما از آن برای انتخاب عناصر HTML استفاده کردیم.
از آنجایی که ورودی های فرم چیزی جز عناصر HTML نیستند و داده هایی که کاربر ممکن است در آن ورودی ها وارد کند در داخل عناصر HTML ذخیره می شود ،
می توانیم از همان document.querySelector استفاده کرده و عناصر HTML خود را انتخاب کنیم.
سپس ، ما باید اطلاعات مهمی را بدانیم.
مقدار ورودی HTML یا دادههای داخل آن از طریق key-value قابل دسترسی است.
اشیاء را به خاطر دارید؟ شی المان ورودی HTML دارای یک کلید “value” خواهد بود که متن فعلی را در داخل المان نگه می دارد.
در نهایت ، مقادیر ورودی و textarea را console.log می کنیم و می بینیم که در متغیرهای emailText و messageText چه چیزی دریافت می کنیم.
function clickListener(event) {
event.preventDefault();
let emailInput = document.querySelector('#email');
let messageInput = document.querySelector('#message');
let emailText = emailInput.value;
let messageText = messageInput.value;
console.log('email:', emailText, 'message:', messageText);
}
اعتبار سنجی ها در جاوا اسکریپت
در بخش قبلی اگرچه فیلدهای ورودی درخواست ایمیل و پیام را می کنند ، اما تقریباً میتوانید هر چیزی را وارد کنید و همچنان آن را میپذیرد و چاپ میکند.
در واقع، حتی به شما اجازه می دهد تا یک آدرس ایمیل و پیام خالی را وارد کنید. این خوب نیست.
ما باید محدودیتهایی را برای مواردی که وارد میشود ، بهویژه قسمت ایمیل تعیین کنیم.
برای اهداف ما ، بررسی اینکه آیا متن وارد شده در فیلد ایمیل دارای نویسه «@» است، انجام میشود.
برای تأیید اعتبار ایمیل ، باید یک تابع اعتبار سنجی بنویسیم.
اعتبارسنجی همانطور که در قسمت قبل ذکر شد چکر هستند.
آنها می توانند بررسی هایی برای اطمینان از اینکه داده ها در قالب مورد انتظار ما هستند یا برای فیلتر کردن کلمات ناخواسته از متن یا هر چیز دیگری بررسی شوند.
آنها به عنوان یک راه آسان برای آگاه کردن کاربران از هرگونه خطا در ارسال داده های خود عمل می کنند.
در مثال تأیید اعتبار آدرس ایمیل ما ، بررسی ما برای «@» ممکن است موردی را پیدا کند که کاربران ما فراموش کنند «@» را تایپ کنند یا آدرس ایمیل خود را اشتباه تایپ کنند.
function emailValidate(email) {
if(email.includes('@')) {
return true;
} else {
return false;
}
}
این تابع بررسی میکند که آیا ایمیل پارامتر متنی ارائهشده حاوی کاراکتر «@» است یا خیر.
از دستورات شرطی استفاده می کند («if» و «else» که می بینید).
میتوانید آن را بهصورتی بخوانید که اگر بله، درست است.
در غیر این صورت، false برمی گردد.
بیایید با وارد کردن آن به کنسول ، آن را در تابع clickListener خود آزمایش کنیم.
console.log(emailValidate('abc@xyz.cm'));
اکنون می توانیم همه چیز را در داخل تابع clickListener خود جمع آوری کنیم و پیام مناسب را نمایش دهیم.
if(emailValidate(emailText) !== true) {
console.log('The email address must contain @');
return false;
}
console.log('Thanks for your message');
html
javascript
function emailValidate(email) {
if(email.includes('@')) {
return true;
}
else {
return false;
}
}
function clickListener(event) {
event.preventDefault();
let emailInput = document.querySelector('#email');
let messageInput = document.querySelector('#message');
let emailText = emailInput.value;
let messageText = messageInput.value;
if(emailValidate(emailText) !== true) {
console.log('The email address must contain @');
return false;
}
console.log('Thanks for your message');
}
let submitButton = document.querySelector('#submit-button');
submitButton.addEventListener('click', clickListener);
در اینجا، ابتدا ایمیل را بررسی می کنیم.
اگر ارور بدهد ، پیام خطا را ثبت می کنیم و false را برمی گردانیم (که یکی از راه های جلوگیری از اجرای بیشتر یک تابع است ، به این معنی که آخرین console.log ما اجرا نخواهد شد).
اگر بلوک «if» اجرا نشود (به این معنی که بازگشت نادرست وجود ندارد و تابع هنوز در حال اجرا است)، فرض میکنیم که همه چیز خوب پیش رفته و یک پیام موفقیت آمیز نمایش میدهیم.
کوکی ها
مرورگرها و وب سرویس ها از پروتکل HTTP برای برقراری ارتباط استفاده می کنند و HTTP یک پروتکل stateless است.
اما برای یک وب سایت تجاری، نیاز به حفظ اطلاعات session در بین صفحات مختلف است.
به عنوان مثال ، ثبت نام یک کاربر پس از تکمیل بسیاری از صفحات به پایان می رسد.
اما چگونه می توان اطلاعات session کاربران را در تمام صفحات وب حفظ کرد.
در بسیاری از موقعیتها، استفاده از کوکیها کارآمدترین روش برای به خاطر سپردن و ردیابی اولویتها، خریدها و سایر اطلاعات مورد نیاز برای تجربه بهتر بازدیدکنندگان یا آمار سایت است.
سرور شما برخی از داده ها را به صورت یک کوکی به مرورگر بازدید کننده ارسال می کند.
مرورگر ممکن است کوکی را بپذیرد.
اگر این کار را کرد ، به عنوان یک رکورد متن ساده در هارد دیسک بازدیدکننده ذخیره می شود.
اکنون ، هنگامی که بازدیدکننده به صفحه دیگری در سایت شما می رسد ، مرورگر همان کوکی را برای بازیابی به سرور ارسال می کند.
پس از بازیابی ، سرور شما آنچه را که قبلاً ذخیره شده بود به خاطر می آورد.
کوکی ها یک رکورد داده متنی ساده از 5 فیلد با طول متغیر ، هستند
Expires : تاریخی که کوکی منقضی می شود.
اگر این خالی باشد ، زمانی که بازدیدکننده از مرورگر خارج شود ، کوکی منقضی می شود.
Domain : نام دامنه سایت شما.
Path : مسیر دایرکتوری یا صفحه وب که کوکی را تنظیم کرده است.
اگر بخواهید کوکی را از هر دایرکتوری یا صفحه ای بازیابی کنید، ممکن است خالی باشد.
Secure : اگر این فیلد حاوی کلمه “secure” باشد، کوکی فقط با یک سرور امن قابل بازیابی است.
اگر این قسمت خالی باشد، چنین محدودیتی وجود ندارد.
Name=Value : کوکی ها به شکل جفت key-value تنظیم و بازیابی می شوند.
کوکی ها در ابتدا برای برنامه نویسی CGI طراحی شده بودند.
دادههای موجود در یک کوکی به طور خودکار بین مرورگر وب و سرور وب منتقل میشود ، بنابراین اسکریپتهای CGI روی سرور میتوانند مقادیر کوکیهایی را که در مشتری ذخیره میشوند بخوانند و بنویسند.
جاوا اسکریپت همچنین می تواند کوکی ها را با استفاده از ویژگی Document object دستکاری کند.
جاوا اسکریپت می تواند کوکی هایی را که در صفحه وب فعلی اعمال می شود بخواند، ایجاد کند، تغییر دهد و حذف کند.
ساده ترین راه برای ایجاد یک کوکی، اختصاص یک مقدار رشته به شی document.cookie است که به شکل زیر است.
document.cookie = "key1 = value1;key2 = value2;expires = date";
مقادیر کوکی ممکن است شامل نقطه ویرگول ، کاما یا فضای خالی نباشد.
به همین دلیل، ممکن است بخواهید از تابع ()escape جاوا اسکریپت برای رمزگذاری مقدار قبل از ذخیره آن در کوکی استفاده کنید.
اگر این کار را انجام دهید، هنگام خواندن مقدار کوکی، باید از تابع ()unescape مربوطه نیز استفاده کنید.
مثال زیر را امتحان کنید و نام مشتری را در یک کوکی ورودی تنظیم می کند.
اکنون دستگاه شما یک کوکی به نام name دارد.
میتوانید چند کوکی را با استفاده از جفتهای key = value که با کاما از هم جدا شدهاند تنظیم کنید.
خواندن کوکی ها
خواندن یک کوکی به سادگی نوشتن یک کوکی است، زیرا مقدار شی document.cookie همان کوکی است.
بنابراین می توانید هر زمان که بخواهید به کوکی دسترسی پیدا کنید از این رشته استفاده کنید.
رشته document.cookie فهرستی از جفتهای name=value را نگه میدارد که با نقطه ویرگول جدا شدهاند، جایی که name نام یک کوکی و مقدار مقدار رشته آن است.
می توانید از تابع ()split برای شکستن یک رشته به کلید و مقادیر به صورت زیر استفاده کنید.
مثال زیر را برای دریافت همه کوکی ها امتحان کنید.
نکته : در اینجا length متدی از کلاس Array است که طول یک آرایه را برمی گرداند.
let submitButton = document.querySelector('#submit-button');
function clickListener(event) {
event.preventDefault();
console.log('Button clicked');
}
submitButton.addEventListener('click', clickListener);
تنظیم تاریخ انقضای کوکی ها
با تعیین تاریخ انقضا و ذخیره تاریخ انقضا در کوکی می توانید عمر یک کوکی را فراتر از سشن مرورگر فعلی افزایش دهید.
این را می توان با تنظیم ویژگی “expires” روی تاریخ و زمان انجام داد.
مثال زیر را امتحان کنید.
این نشان می دهد که چگونه می توان تاریخ انقضای یک کوکی را تا 1 ماه تمدید کرد.
حذف یک کوکی
گاهی اوقات میخواهید یک کوکی را حذف کنید تا تلاشهای بعدی برای خواندن کوکی چیزی برگرداند.
برای این کار فقط باید تاریخ انقضا را روی زمانی در گذشته تنظیم کنید.
مثال زیر را امتحان کنید.
نحوه حذف یک کوکی را با تنظیم تاریخ انقضای آن روی یک ماه عقبتر از تاریخ فعلی نشان می دهد.
JSON
با یک تعریف خلاصه می توان گفت JSON یا JavaScript Object Notation قالبی برای ساختاردهی داده است.
مانند XML ، یکی از روش های قالب بندی داده ها است.
چنین فرمتی از داده ها توسط وب اپلیکیشن ها برای برقراری ارتباط با یکدیگر استفاده می شود.
واقعیتی که باید بدانید این است که هرگاه متغیری را اعلام میکنیم و مقداری را به آن اختصاص میدهیم ، این متغیر نیست که مقدار را نگه میدارد ، بلکه متغیر فقط یک آدرس را در حافظه نگه میدارد که مقدار اولیه در آن ذخیره میشود.
به عنوان مثال :
let age=21;
وقتی از سن استفاده می کنیم ، با 21 جایگزین می شود ، اما این بدان معنا نیست که سن شامل 21 است،
بلکه به این معنی است که متغیر سن حاوی آدرس محل حافظه ای است که 21 در آن ذخیره شده است.
حال تصور کنید که باید داده ها را منتقل کنید و در جای دیگری استفاده کنید (شاید یک API)، پس چگونه این را به اشتراک می گذاریم؟
یکی از راهها میتواند ارسال کل حافظه رایانهتان به همراه آدرس مکانهای مورد نیاز باشد، همانطور که ممکن است اکنون متوجه شده باشید که این به هیچ وجه راه خوبی برای انجام آن نیست، همچنین ارسال کل حافظه رایانه خطرناک است.
در اینجا JSON به کمک می آید ، JSON داده ها را سریال می کند و آنها را به قالب قابل خواندن و قابل فهم برای انسان تبدیل می کند، که همچنین باعث انتقال و امکان برقراری ارتباط می شود.
ویژگی های JSON
برای انسان قابل خواندن و نوشتن است.
این فرمت light weight text based data interchange است که به این معنی است که خواندن و نوشتن آن در مقایسه با XML ساده تر است.
به طور گسترده ای به عنوان ذخیره سازی داده (data storage) و فرمت ارتباطی در وب استفاده می شود.
اگرچه از زیر مجموعه ای از جاوا اسکریپت مشتق شده است ، اما مستقل از زبان است ؛ بنابراین، کد تولید و تجزیه داده های JSON را می توان در هر زبان برنامه نویسی دیگری نوشت.
سینتکس JSON از سینتکس نشانه گذاری JavaScript object مشتق شده است.
داده ها به صورت name/value هستند.
{ “name”:”Thanos” }
و به صورت کاما از هم جدا می شوند :
{ “name”:”Thanos”, “Occupation”:”Destroying half of humanity” }
مثال :
{
"Avengers": [
{
"Name" : "Tony stark",
"also known as" : "Iron man",
"Abilities" : [ "Genius", "Billionaire",
"Playboy", "Philanthropist" ]
},
{
"Name" : "Peter parker",
"also known as" : "Spider man",
"Abilities" : [ "Spider web", "Spidy sense" ]
}
]
}
JavaScript Strict Mode
توسعه دهندگان جاوا اسکریپت یک ویژگی جدید در ES5 اضافه کردند که به عنوان حالت سخت (strict-mode) شناخته می شود ، که قرار است رفتارهای خاصی از زبان را برای کاهش رفتار تصادفی و افزایش قابلیت تشخیص کدهای ضعیف ایجاد کند.
این مجموعه محدودیتها کد را بسیار امنتر کرد و به طور کلی استاندارد بالایی از کدنویسی را حفظ کرد.
کدهای جاوا اسکریپت قبل از اجرا توسط موتور بهینه سازی می شوند ؛ با استفاده از strict-mode مشاهده شد که توسعه دهندگان اکنون می توانند برنامه های بسیار بهینه شده بنویسند.
این نه تنها توسط توسعه دهندگان توصیه می شود ، بلکه شامل یک امر اجباری برای استانداردهای کدگذاری نیز می شود.
سینتکس : برای استفاده از strict-mode در اسکریپت خود ، فقط باید خط زیر را وارد کنید ، strict-mode که به عنوان strict mode pragma نیز شناخته می شود، دامنه خاص خود را دارد و بسته به همان روش می تواند بر کل فایل یا متد های فردی (individual methods) تأثیر بگذارد.
"use strict";
توابع : اکنون می دانیم که strict mode اساساً حالتی از جاوا اسکریپت است که بسیار بیشتر به سینتکس صحیح کد های منطقی که قبلاً بدون کاوش زیاد بررسی میشد ، وسواس دارد.
اما این خطاهای سینتکسی و منطقی که دیگر در strict mode مجاز نیستند چیست؟
در زیر فهرست مختصری از چند مورد مهم آورده شده است.
Auto-Global Variable Declaration :
این یکی از بزرگترین مشکلات جاوا اسکریپت است، بدون استفاده از strict mode ، اگر اشتباهاً از متغیری بدون تعریف آن استفاده کنید، جاوا اسکریپت خطایی ایجاد نمی کند در عوض متغیر را در محدوده جهانی اعلام می کند که اغلب منجر به تصادفی بودن و خروجی های نامطلوب میشود.
با فعال بودن strict mode ، یک خطای مرجع معمولی ایجاد میکند و به شما اطلاع میدهد که متغیر مورد استفاده هرگز تعریف نشده است.
سورس :
"use strict"; // Turn on strict mode.
a = 1;
خروجی
Uncaught ReferenceError: a is not defined
توجه : در جاوا اسکریپت آبجکت ها متغیر هستند ، بنابراین برای تعریف یک کلمه کلیدی “var”، “let” یا “const” نیز نیاز دارد.
حذف هر عنصر جاوا اسکریپت : این یک تغییر بزرگ از حالت عادی است زیرا در strict mode ، حذف هر متغیر یا تابعی مجاز نیست .
این باعث میشود کد بسیار بهینهتر شود زیرا دامنهها ثابت هستند و در lifetime تغییر نمیکنند.
سورس :
"use strict"; // Turn on strict mode.
var a = 1;
delete a;
خروجی
Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.
توجه : ممکن است بپرسید که چرا خطا می گوید unqualified ؟
جاوا اسکریپت تابعی را ارائه می دهد که در آن می توانید ویژگی یک شی را به عنوان deletable تعریف کنید که واجد شرایط حذف پراپرتی در strict mode است.
استفاده از کلمات کلیدی reserved به عنوان نام متغیرها : بر خلاف بسیاری از زبان های دیگر ، جاوا اسکریپت اجازه می دهد تا از کلمات کلیدی reserved شده به عنوان نام متغیر استفاده شود که در حالت سختگیرانه مجاز نیست.
سورس :
"use strict"; // Turn on strict mode.
var eval = 5;
خروجی
Uncaught SyntaxError: Unexpected eval or arguments in strict mode.
تکرار نام پارامترها : بر خلاف بسیاری از زبان های برنامه نویسی دیگر ، جاوا اسکریپت اجازه استفاده از نام پارامترهای تکراری را می دهد که در strict mode ممنوع است.
سورس :
// Normal mode
function myFunc(a, a){
console.log(a);
}
myFunc(0, 10);
خروجی
10
// Strict mode
"use strict"; // Turn on strict mode.
function myFunc(a, a){
console.log(a);
}
myFunc(0, 10);
خروجی
Uncaught SyntaxError: Duplicate parameter name not allowed in this context
انیمیشن ها در زبان جاوا اسکریپت
شما می توانید از جاوا اسکریپت برای ایجاد یک انیمیشن پیچیده با المان های زیر استفاده کنید :
- Fireworks
- Fade Effect
- Roll-in or Roll-out
- Page-in or Page-out
- Object movements
(لازم به ذکر است از طریق لینک Script.Aculo.us می توانید به انواع کتابخانه های انیمیشن سازی جاوا اسکریپت نیز آشنا شوید.
این آموزش یک درک اساسی از نحوه استفاده از جاوا اسکریپت برای ایجاد یک انیمیشن ارائه می دهد.)
جاوا اسکریپت می تواند برای جابجایی تعدادی از عناصر DOM (<img />، <div> یا هر عنصر HTML دیگر) در سراسر صفحه بر اساس نوعی الگوی تعیین شده توسط یک معادله یا تابع منطقی استفاده شود.
جاوا اسکریپت دو تابع زیر را برای استفاده مکرر در انیمیشن ارائه می دهد.
setTimeout ( تابع ، مدت زمان) : این تابع تابع را پس از چند میلی ثانیه از زمان حال فراخوانی می کند.
setInterval (function, duration) : این تابع پس از هر میلی ثانیه تابع را فراخوانی می کند.
clearTimeout(setTimeout_variable) : این تابع هر تایمر تنظیم شده توسط توابع ()setTimeout را فراخوانی می کند.
جاوا اسکریپت همچنین می تواند تعدادی از ویژگی های یک شی DOM از جمله موقعیت آن روی صفحه را تنظیم کند.
می توانید ویژگی بالا و چپ یک شی را تنظیم کنید تا آن را در هر نقطه از صفحه نمایش قرار دهید.
سنتکس آن به شکل زیر است :
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;
Manual Animation
بیایید یک انیمیشن ساده را با استفاده از DOM object properties و توابع جاوا اسکریپت به صورت زیر پیاده سازی کنیم.
لیست زیر شامل روش های مختلف DOM است.
ما از تابع ()JavaScript getElementById برای دریافت یک شی DOM و سپس اختصاص آن به یک متغیر جهانی imgObj استفاده می کنیم.
یک تابع ()init برای مقداردهی اولیه imgObj تعریف کرده ایم که در آن موقعیت و ویژگی های سمت چپ آن را تنظیم کرده ایم.
ما تابع مقداردهی اولیه را در زمان بارگذاری پنجره فراخوانی می کنیم.
در نهایت، تابع ()moveRight را فراخوانی می کنیم تا فاصله سمت چپ را 10 پیکسل افزایش دهیم.
همچنین می توانید آن را روی یک مقدار منفی تنظیم کنید تا آن را به سمت چپ منتقل کنید.
مثال :
JavaScript Animation
Automated Animation
در مثال بالا، دیدیم که چگونه یک تصویر با هر کلیک به سمت راست حرکت می کند.
ما میتوانیم این فرآیند را با استفاده از تابع جاوا اسکریپت ()setTimeout به صورت زیر خودکار کنیم.
تابع ()moveRight و تابع ()setTimeout را برای تنظیم موقعیت imgObj فراخوانی می کند.
ما یک تابع ()stop جدید اضافه کرده ایم تا تایمر تنظیم شده توسط تابع ()setTimeout را پاک کرده و شی را در موقعیت اولیه خود قرار دهیم.
JavaScript Animation
Rollover با یک رویداد ماوس
در اینجا یک مثال ساده چرخش تصویر با یک رویداد ماوس را نشان می دهد.
بیایید ببینیم که در مثال زیر از چه چیزی استفاده می کنیم.
در زمان بارگیری این صفحه ، عبارت «if» وجود شی تصویر را بررسی می کند.
اگر شیء تصویر در دسترس نباشد، این بلوک اجرا نخواهد شد.
سازنده ()Image یک شی تصویر جدید به نام image1 را ایجاد و از قبل بارگذاری می کند.
به ویژگی src نام فایل تصویر خارجی به نام /images/html.gif اختصاص داده می شود.
به طور مشابه، ما شیء image2 را ایجاد کرده ایم و /images/http.gif را در این شیء اختصاص داده ایم.
علامت # پیوند را غیرفعال می کند تا مرورگر هنگام کلیک کردن سعی در رفتن به URL را نداشته باشد. این لینک یک تصویر است.
هنگامی که ماوس کاربر روی لینک حرکت می کند ، کنترل کننده رویداد onMouseOver فعال می شود، و هنگامی که ماوس کاربر از لینک (تصویر) دور می شود، کنترل کننده رویداد onMouseOut فعال می شود.
هنگامی که ماوس روی تصویر حرکت می کند، تصویر HTTP از تصویر اول به تصویر دوم تغییر می کند.
هنگامی که ماوس از تصویر دور می شود، تصویر اصلی نمایش داده می شود.
هنگامی که ماوس از لینک دور می شود، تصویر اولیه html.gif دوباره روی صفحه ظاهر می شود.
منابع
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
هیچ چیز توانایی ایستادگی در برابر رویاهای تو را ندارد ، پس بخواه که به واقعیت تبدیل شود.