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

در اینجا دو مثال آورده شده است:

1. فروشگاه آنلاین: اطلاعات ممکن است شامل سبد خرید و کالاهایی باشد که به فروش می رسد.
2. برنامه چت: اطلاعات ممکن است شامل کاربران، پیام ها و موارد دیگر باشد.

برای ذخیره این اطلاعات از متغیر ها استفاده می شود.

متغیر (variable)

یک متغیر در جاوااسکریپت یک “فضای ذخیره سازی نامگذاری شده” برای داده ها است.

ما می توانیم از متغیرها برای ذخیره داده های مربوط به کالاها، بازدیدکنندگان و… استفاده کنیم.

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

عبارت زیر متغیری را با نام firstname تعریف می کند:

let firstname;

حال می توانیم به صورت زیر مقداری را توسط عملگر =در متغیر firstname ذخیره کنیم:

	
let firstname;
firstname = "Reza";  	//store the string

اکنون رشته “Reza” در ناحیه حافظه مرتبط با متغیر firstname ذخیره شده است. ما می توانیم به وسیله نام متغیر به آن دسترسی داشته باشیم.

	
let firstname;
firstname = "Reza";		
	
alert(firstname);		//return Reza

نتیجه کد بالا:کلیک کنید
برای اختصار می توانیم تعریف و مقداردهی متغیر را در یک خط ترکیب کنیم.

	
let firstname = "Reza";
	
alert(firstname);		//return Reza

نتیجه کد بالا:کلیک کنید
همچنین می توانیم چند متغیر در یک خط تعریف کنیم:

	
let firstname = "Reza", lastname = "Dehghani", age = 20;

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

نوع چند خطی آن طولانی تر است، اما خوانایی بهتری دارد.

	
let firstname = "Reza";
let lastname = "Dehghani";
let age = 20;

varبه جای let

در اسکریپت های قدیمی تر، ممکن است کلمه کلیدی var را به جای let مشاهده کنید:

	
var firstname = "Reza";

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

و اما واقعیت متغیر در جاوااسکریپت

برای درک بهتر مفهوم متغیر، می توان آن را به عنوان جعبه ای برای نگهداری داده ها در نظر گرفت که برچسبی منحصر به فرد بر روی این جعبه چسبانده ایم.
برای مثال، می توان متغیر message را به عنوان جعبه ای تصور کرد که داده”Hello” در آن قرار دارد.

ما می توانیم هر مقداری را در جعبه قرار دهیم. همچنین می توانیم این مقدار را هر چند بار که می خواهیم تغییر دهیم.

وقتی متغیری تغییر می کند، داده های قدیمی از آن حذف می شوند.

همچنین می توانیم دو متغیر تعریف کنیم و داده ها را از یکی به دیگری کپی کنیم.

	
let hello = "Hello World";
let message;	
message = hello;
	
alert(hello);
alert(message);

نتیجه کد بالا:کلیک کنید

ثابت ها (constants)

برای تعریف یک ثابت (تغییر ناپذیر) از کلمه کلیدی const به جای let استفاده می کنیم.

	
const PI = 3.14;

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

برگرفته از:

https://javascript.info

نوشته متغیر در جاوااسکریپت اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

در HTML با استفاده از تگ canvas می توانیم بخشی از صفحه را برای رسم اشکال دو بعدی تعیین کنیم. در واقع تگ Canvas به تنهایی هیچ خروجی در مرورگر نمایش نمی دهد و برای برای رسم شکل، رنگ آمیزی و متحرک سازی، می بایست از javascript استفاده کنیم.

تفاوت canvas و svg

۱- svg برای طراحی گرافیک دو بعدی از xml استفاده می کند اما کانواس با استفاده از اسکریپت نویسی (جاوااسکریپت) این کار را انجام می دهد.

۲- به دلیل این که svg بر پایه xml است، هر المان آن از طریق DOM قابل دسترسی می باشد.

۳- در svg هر شکل رسم شده، در حکم یک object است، اگر ویژگی های آن تغییر کند، مرورگر می تواند به طور خودکار، آن را دوباره رندر نماید.

۴- کانواس به صورت پیکسل به پیکسل رندر می شود؛ این بدین معنی است که بعد از رسم آن، اگر موقعیتش تغییر کند، تمامی شکل می بایست دوباره رسم شود. اما svg برای اپلیکیشن هایی که نیاز به رندر کردن در سطح زیادی دارند، مناسب است. (مثلاً مناسب برای Google Maps)

۵- کانواس بر مبنای پیکسل است؛ بدین معنی که اگر تصویر زوم شود، از کیفیت آن کاسته می شود. اما svg اشکال را به صورت برداری رسم می کند (vector-based)؛ یعنی با افزایش یا کاهش زوم، کیفیت تصویر، تغییری نمی کند.

۶- می توانید تصویر رسم شده توسط canvas را با فرمت jpg. یا png. ذخیره کنید.

۷- به دلیل این که svg از DOM استفاده می کند، سرعت رندر شدن آن پایین است. بنابراین برای ساخت بازی ها، اغلب از کانواس استفاده می شود.

پشتیبانی مرورگرها از canvas

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

مثال

Canvas یک فضای مستطیل شکل را در صفحه HTML مشخص می کند. به صورت پیش فرض کانواس، هیچ گونه محتوا و border ندارد. در زیر مثالی آورده شده است:

<canvas id="myCanvas" width="200" height="100"></canvas>

توجه داشته باشید، به Canvas ویژگی id بدهید، همچنین ویژگی های width  و height  را برای تعیین اندازه تصویر، تعیین کنید. برای دادن border به تصویر می توانید از ویژگی style استفاده کنید. به مثال زیر توجه کنید:

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

در مثال زیر به رسم خط می پردازیم:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
</pre>

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

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 
</body>
</html>

ارجاعات:
www.w3schools.com

نوشته canvas اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

در سال ۱۹۹۸، SVG پس از شش طرح پیشنهادی برای زبان های برداری گرافیکی، به W3C ارائه شد و از سال ۱۹۹۹ در کنسرسیوم جهانی وب  (W3C) توسعه یافت. مشخصات اس وی جی، در سال ۲۰۱۱  به نسخه ۱٫۱ به روزرسانی شد.

تصاویر SVG و رفتار آنها در فایل های متنی XML تعریف شده است. این بدین معنی است که آن ها می توانند جستجو، ایندکس، اسکریپت، فشرده و همچنین متحرک سازی شوند.

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

SVG سه نوع از المان های گرافیکی را در بر می گیرد:

• اشکال گرافیکی برداری (vector graphic)؛ مانند مسیرها و خطوط متشکل از خطوط مستقیم و منحنی
• تصاویر بیت مپ (bitmap images)
• متن (text)

و مجموعه ویژگی های آن شامل موارد زیر می شود:

• transformation
• clipping path
• alpha mask
• filter effect
• template objects

طراحی های SVG می توانند از المان های XML یا اسکریپت هایی که به DOM دسترسی دارند، استفاده کنند. SVG از CSS برای ظاهر طراحی و از جاوااسکریپت برای اسکریپت کردن، استفاده می کند.

مزایای SVG در مقایسه با فرمت های دیگر (jpeg و gif)

• قابلیت ایجاد و ویرایش با هر ویرایشگر متن
• قابلیت جستجو، نمایه سازی، اسکریپت و فشرده سازی
• مقیاس پذیری
• قابلیت چاپ با کیفیت بالا در هر رزولوشن
• عدم کاهش کیفیت با بزرگنمایی و تغییر اندازه
• open source بودن

SVG در HTML

با یک مثال، توضیحاتی در مورد اس وی جی در html ارائه می دهیم:

<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

نتیجه این کد، شکل زیر می باشد:
– SVG را با تگ <SVG> آغاز می کنیم.
– طول و عرض المان SVG را با مقدار دهی به width و height تعیین می کنیم.
– المان circle مشخص می کند که دایره رسم شود.
– ویژگی های cx و cy نقطه مرکز دایره را نشان می دهد که اگر مقدار دهی نشوند، مرکز دایره، نقطه (۰،۰) در نظر گرفته می شود.
– ویژگی r مشخص کننده شعاع دایره است.
– با ویژگی stroke رنگ حاشیه دایره و با stroke-width ضخامت آن را تعیین می کنیم.
– fill رنگ دایره را تعیین می کند.
– تگ <SVG/> تگ پایانی کد می باشد.

SVG در وب

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

گوگل در ۳۱ اوت ۲۰۱۰ اعلام کرد که از این تاریخ، محتویات حاوی اس وی جی را در وب ایندکس می کند، خواه در فایل های مستقل باشند یا در فایل های HTML  و کاربران قادر به مشاهده اس وس جی در میان نتایج جستجو می باشند.

همچنین گوگل در تاریخ ۸ دسامبر ۲۰۱۰ اعلام کرد که Google Image Search نیز نمایه سازی فایل های اس وی جی را آغاز خواهد کرد.

نوشته SVG اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

۱- HTML / CSS

اجازه دهید ابتدا نگاهی مختصر به HTML و CSS بیندازیم.

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

CSS ابزار مورد استفاده، برای ارائه سند ایجاد شده توسط HTML است. در ابتدا HTML زیربنای صفحه شما را ایجاد می کند و برای ایجاد طرح بندی صفحه، رنگ، فونت ها، ابعاد و … از CSS استفاده می شود.

۲- JavaScript / jQuery

یکی دیگر از ابزار اساسی در بخش برنامه نویسی Front End Developer ، جاوااسکریپت (JS) است. جایی که HTML و CSS ارائه یک صفحه را بر عهده دارند، JS عملکرد را تعیین می کند.

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

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

۳- Framework  های جاوا اسکریپت و CSS

چارچوب های CSS و جاوا اسکریپت مجموعه ای از فایل های CSS یا JS هستند که با ارائه قابلیت های مشترک، سهولت و سرعت کار شما را افزایش می دهند. به جای شروع با یک سند متنی خالی، شما با یک فایل کد که دارای جزییات عالی JS هست، شروع می کنید.

برای ایجاد خروجی جذاب تر، شما می توانید از چند چارچوب با هم استفاده کنید. به عنوان مثال می توانید Bootstrap را با چارچوب جاوا اسکریپت دیگری مانند AngularJS کار کنید. می توانید توسط Angular محتوا و با Bootstrap ظاهر و جلوه سایت را مدیریت کنید.

۴- پیش پردازشگر CSS

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

با استفاده از پیش پردازنده CSS مانند Sass یا LESS، شما قادر به نوشتن کد در زبان پیش پردازنده می شوید و در انتها پیش پردازنده این کد را به CSS تبدیل می کند تا در وب سایت شما کار کند.

سایر مهارت های لازم را در بخش دوم این مقاله بخوانید.

نوشته ۸ مهارت لازم برای برنامه نویسی Front End Developer (بخش اول) اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

نام تابع splice به خوبی بیانگر کاربرد آن نیست. splice در انگلیسی به معنی: به هم متصل کردن یا گره زدن می باشد. فرض کنید میخواهید انتهای یک بند را ببرید و با یک بند دیگر گره بزنید.

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

var myArray = ['this', 'is', 'an', 'array'];
myArray.splice(0, 2); // ['this', 'is']
console.log(myArray); // ['an', 'array']

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

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

• موضوع بسیار مهمی که باید به آن توجه کنید این است که آرایه myArray بعد از استفاده از splice تغییر می کند. بنابراین اگر به آرایه اصلی نیاز دارید باید از آن پشتیبان تهیه کنید.
• موضوع دیگر این است که splice عناصری که از آرایه اصلی حذف می شوند را به عنوان خروجی بر می گرداند.
• پارامتر اول اجباری است و موقعیت حذف یا اضافه کردن عناصر جدید در آرایه را مشخص می کند. برای مشخص کردن موقعیت از آخر آرایه، می توانیم از مقادیر منفی استفاده کنیم.
• پارامتر دوم تعداد عناصری که می خواهیم حذف شوند را مشخص می کند. 

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

var countingArray = [5, 6, 7, 8];
countingArray.splice(1, 1); // [6]
console.log(countingArray); // [5, 7, 8]

در مثال بالا به تابع splice گفته ایم که ۱ آیتم را از موقعیت ۱ آرایه اصلی حذف کند و به عنوان خروجی باز گرداند.

نکته:

در جاوااسکریپت تابعی به شکل delete(index) وجود ندارد و delete array[index] نیز آیتم موجود در اندیس index را با undefined جایگزین می کند. مثال بالا نحوه حذف یک آیتم از آرایه را توسط تابع splice در جاوااسکریپت ، نمایش می دهد.

در مثال زیر splice را با پارامتر سوم استفاده کرده ایم.

var myArray = ['this', 'is', 'an', 'array'];
myArray.splice(3, 0, 'awesome'); // []
console.log(myArray); // ['this', 'is', 'an', 'awesome', 'array']

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

مثال:

var myArray = ['this', 'is', 'an', 'array'];
myArray.splice(3, 0, 'amazingly', 'awesome'); 
console.log(myArray); // ['this', 'is', 'an', 'amazingly', 'awesome', 'array']

در این مثال به تابع splice گفته ایم: «از موقعیت ۳ صفر عنصر را حذف کن و سپس بعد از موقعیت ۳ عناصر 'amazing' و  'awesome' را به آرایه اضافه کن ». از پارامتر سوم به بعد به هر تعداد که بخواهیم عنصر به آرایه اضافه کنیم می توانیم، ادامه دهیم. 

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

var myArray = ['this', 'is', 'an', 'array'];
myArray.splice(2, 1, 'the'); // ['an']
console.log(myArray); // ['this', 'is', 'the', 'array']

 در این مثال گفته ایم: «از موقعیت ۲ یک عنصر را حذف کن و رشته 'the' را به جای آن بعد از موقعیت ۲ جایگزین کن».

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

• حذف عناصر با استفاده از موقعیتشان در آرایه
• اضافه کردن عناصر بعد از یک موقعیت در آرایه
• حذف و اضافه در یک مرحله

منابع:

• Mozilla (splice)
• split vs. splice

نوشته تابع splice در جاوااسکریپت اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

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

var myString = 'My test string';
console.log(myString.split()); // ['My test string']
console.log(myString); // 'My test string'

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

خوب اجازه بدهید split را با تغییری کوچک استفاده کنیم. ما می خواهیم که تمام کلمات تشکیل دهنده رشته را به صورت مجزا در یک آرایه، استخراج کنیم. بنابراین تابع split را به صورت زیر به کار می بریم.

var myString = 'My test string';
console.log(myString.split(' ')); // ['My', 'test', ’string']
console.log(myString); // 'My test string'

وقتی که split را با یک پارامتر (در مثال بالا رشته خالی ' ') استفاده میکنیم ، هر وقت که رشته به پارامتر مورد نظر می رسد، تقسیم می شود. توجه کنید که پارامتر خودش از آرایه حذف می شود (همانطور که می بینید در آرایه بالا، فاصله ها حذف شده اند).

استفاده از پارامتر دوم:

در شرایطی که طول رشته زیاد باشد، باید چکار کنیم؟ ممکن است شما نخواهید که یک آرایه با صدها عنصر داشته باشید. در مثال زیر با به کار بردن عدد ۲ به عنوان پارامتر دوم، دو کلمه اول رشته myString را به دست می آوریم.

var myString = 'My test string';
console.log(myString.split(' ', 2)); // ['My', 'test']
console.log(myString); // 'My test string'

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

موارد کاربرد تابع split در جاوااسکریپت :

• قراردادن رشته در یک آرایه بدون تغییر string.split()
• شکستن رشته هرجا که به رشته ای مشخص (breakString) برسد string.split(breakString)
• به دست آوردن تعدادی مشخص از زیر رشته ها string.split(breakString, 3)

منابع:

• Mozilla (split)
• split vs. splice

نوشته تابع split در جاوااسکریپت اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.