نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

۶ مطلب با موضوع «Javascript» ثبت شده است

اطلاع از دکمه submit انتخاب شده در فرم توسط jQuery

امیرمسعود ایرانی | سه شنبه, ۶ آذر ۱۳۹۷، ۰۳:۰۴ ق.ظ | ۰ نظر

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

در مرورگر فایرفاکس ویژگی explicitOriginalTarget وجود دارد که با کمک آن می‌توان متوجه شد کدام دکمه توسط کاربر انتخاب شده است ولی این ویژگی در مرورگرهای دیگر وجود ندارد.

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

<form>
<input id="submit1" type="submit" value="دکمه اول">
<input id="submit2" type="submit" value="دکمه دوم">
</form>

قطعه کد بالا فرمی ایجاد می‌کند که دو دکمه submit دارد.

ابتدا یک قطعه کد جاوااسکریپت اضافه می‌کنیم که هنگام کلیک هر دکمه، یک ویژگی به فرم اضافه کند:

$( 'form input[type=submit]' ).on( 'click', function() {
$( this.form ).prop( 'submitId', this.id );
} );

سپس رویداد submit فرم را اضافه می‌کنیم:

$( 'form' ).on( 'submit', function() {
var submitId = $( this ).prop( 'submitId' );

if( submitId == 'submit1' ) {
// دکمه اول
} elseif( submitId == 'submit2' ) {
// دکمه دوم
} else {
// حالت پیش‌فرض - بدون دکمه
}

// پاک کردن مقدار ذخیره شده از فرم
$( this ).prop( 'submitId', '' );
} );
  • امیرمسعود ایرانی

دانلود فایل در سمت کلاینت

امیرمسعود ایرانی | يكشنبه, ۶ دی ۱۳۹۴، ۰۲:۴۸ ب.ظ | ۰ نظر

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

این کار کاربردهای متنوعی می‌تواند داشته باشد که مهم‌ترین استفاده‌ی آن دانلود فایل‌هایی کوچک با محتویاتی معمولا حاوی کدها یا رمزها یا موارد اینچنین است.

برای دانلود کردن فایل کافی است یک عنصر a با عبارت href خاص به شکل زیر ایجاد کنیم.

برای تعیین نام فایل هم از صفت download استفاده می‌کنیم.

<a download="amib.txt" href="data:application/octet-stream;charset=utf-8,YOUR CODE: 112233">
اینجا کلیک کنید
</a>
عبارتapplication/octet-stream تعیین می‌کند که مرورگر محتوای مقابل را باید دانلود کند. charset=utf-8 تعیین می‌کند که فایل خروجی از نوع utf-8 باشد و در نهایت بخش YOUR CODE: 112233 محتوای فایل خروجی است.
چنانچه محتوای قابل دانلود طولانی‌تر باشد می‌توان با استفاده از جاوااسکریپت صفت href را مشخص کرد.
فراموش نکنید که عبارت قرار گرفته در href نباید حاوی حروف غیرمجاز برای url باشد بنابراین حتما باید URL Encode شود.

فهرست مرورگرهایی که از این ویژگی HTML5 پشتیبانی می‌کنند در این صفحه قابل مشاهده است.
http://caniuse.com/#feat=download
  • امیرمسعود ایرانی

بررسی حجم فایل قبل از آپلود با استفاده از جی کوئری یا جاوااسکریپت

امیرمسعود ایرانی | جمعه, ۱۵ اسفند ۱۳۹۳، ۱۱:۴۹ ب.ظ | ۰ نظر

یکی از امکانات اضافه شده در HTML5 امکان دسترسی به برخی مشخصات فایل‌های در حال آپلود است.

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

برای این منظور با استفاده از jQuery یا Javascript می‌توانیم حجم فایل را بررسی کنیم و در صورت کم یا زیاد بودن، جلوی آپلود را بگیریم.

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


بررسی اندازه فایل با استفاده از جی‌کوئری

var file = $( '#file' )[0];

if( file.files.length && file.files[ 0 ].size > 500 * 1024 ) {
	alert( 'حجم فایل بیشتر از ۵۰۰ کیلوبایت است' );
}


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

var file = document.getElementById( 'file' );

if( file.files.length && file.files[ 0 ].size > 500 * 1024 ) {
	alert( 'حجم فایل بیشتر از ۵۰۰ کیلوبایت است' );
}
در قطعه کدهای بالا، در صورت زیاد بودن حجم فایل، تنها یک پیام هشدار به نمایش در می‌آید. چنانچه بخواهید، Submit شدن فرم متوقف شود، می‌بایست در رویداد submit مقدار false را برگردانید یا از دستور event.preventDefault کمک بگیرید.
  • امیرمسعود ایرانی

تبدیل تاریخ شمسی به میلادی

امیرمسعود ایرانی | دوشنبه, ۱۰ شهریور ۱۳۹۳، ۰۶:۱۶ ب.ظ | ۰ نظر

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

  • امیرمسعود ایرانی

تفاوت this و event.target در رویدادهای جاوااسکریپت و جی‌کوئری

امیرمسعود ایرانی | دوشنبه, ۱۵ ارديبهشت ۱۳۹۳، ۱۲:۰۵ ق.ظ | ۰ نظر
هر دو گزینه‌ی this و event.target در هنگامی که یک رویداد جاوااسکریپت مانند click فراخوانی می‌شوند به عنصر کلیک شده اشاره می‌کنند
یک تفاوت میان این دو عبارت این است که چنانچه کلیک روی عنصرهای فرزند انجام شده باشد، this در هر شرایطی به عنصر والد که رویداد برای آن تنظیم شده اشاره می‌کند
ولی event.target عنصر فرزند که واقعا کلیک را دریافت کرده، باز می‌گرداند

برای مثال:
چنانچه یک عنصر div به عنوان والد و یک عنصر span به عنوان فرزند داشته باشیم
و روی عنصر div رویداد click را تعریف کنیم، چنانچه کلیک روی عنصر span انجام شود، رویداد click در عنصر والد فراخوانی می‌شود
برای فهمیدن محل دقیق کلیک، با مقایسه‌ی event.target و this می‌توان به نتیجه‌ی دلخواه دست پیدا کرد
  • امیرمسعود ایرانی

آشنایی با نرم‌افزار Prepros App

امیرمسعود ایرانی | دوشنبه, ۲۵ فروردين ۱۳۹۳، ۱۰:۵۸ ق.ظ | ۰ نظر

Prepros App یک نرم‌افزار تحت ویندوز و مک است که مجموعه‌ای از پیش‌پردازنده‌های HTML, Javascript و CSS را یکجا جمع‌آوری کرده است
علاوه بر این پیش‌پردازنده‌ها، که کار کامپایل، تبدیل، فشرده‌سازی و بهینه‌سازی فایل‌ها را انجام می‌دهند، ابزارهای مفید دیگری نیز در این برنامه گنجانده شده‌اند
امکاناتی مانند بهینه‌سازی تصاویر، تشخیص به‌روزرسانی فایل‌ها و کامپایل خودکار، پیونددادن فایل‌های جاوااسکریپت، ارسال خودکار به FTP.

Prepros می‌تواند LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml و Markdown را کامپایل کند

برخی از ویژگی‌های این نرم‌افزار در نگارش رایگان آن قابل استفاده نیست. با این حال امکانات نگارش رایگان هم بسیار مفید هستند و می‌توانند در توسعه‌ی یک نرم‌افزار تحت وب ارزش زیادی ایجاد کنند.



برای دریافت این نرم‌افزار و مطالعه‌ی توضیحات بیشتر اینجا کلیک کنید

  • امیرمسعود ایرانی