تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب آموزش کم کم جاوا اسکریپت

آموزش ایجاد تکست باکس عددی با جاوااسکریپت

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

برای حصول این هدف 2 روش وجود دارد:
  1. جلوگیری از ورود اطلاعات غیر مجاز در زمان تایپ
  2. اعتبار سنجی اطلاعات فرم در زمان کلیک بر روی دکمه 'ثبت'
روش اول: جلوگیری از ورود اطلاعات غیر مجاز در زمان تایپ
در این روش تکست باکس هایی می سازیم که کاربر نتواند داده غیر مجازی را در آن بنویسد.

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

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


حال کافی است تابع بالا رو در رویداد onKeyPress تکست باکس هاتون قرار بدین در کد hrml مان:


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

نوشته شده در تاریخ یکشنبه 24 فروردین 1393    | توسط: ح.م    | طبقه بندی: آموزش کم کم جاوا اسکریپت،     | نظرات()


کد جاوا اسکریپت رویداد کلیک تو فایرفاکس کار نمی کنه؟

سلام

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

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

چون سیستم فایرفاکس کلهم فرق فوکوله

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

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

خوب اول تگای html مورد نظرمو می سازم ،

بعد توی رویداد کلیک تگ هام ، تابعم رو فراخونی می کنم و event رو بعنوان ورودی بهش پاس میدم


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

در پایان مرورگر شما هرچی که باشه ، بعد از شرط if ، متغیر obj حاوی تگی است که باعث اجرا شدن تابع ما شده.
پس به راحتی به همه خصوصیاتش دسترسی داریم و مثلا می تونیم آی دی و رنگ بک گراندشو بخونیم و توی یک تگ نشونش بدیم ....


امیدوارم از این آموزش لذت کافی رو برده باشید.

نظرات شما مایه دلگرمی ماست

تا آموزشی دگر ، بدرود

نوشته شده در تاریخ پنجشنبه 23 شهریور 1391    | توسط: ح.م    | طبقه بندی: جواب سوالات شما، آموزش کم کم جاوا اسکریپت،     | نظرات()


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

با سلام
آموزش ساخت منوی کرکره ای با جاوا اسکریپت - netnic.ir

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

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

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

  1. با CSS خالی
  2. با جاوا اسکریپت
  3. با جی کوئری
در آموزش قبل ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) رو آموزش دادم.

امروز می خوایم با هم یک منوی کرکره ای افقی ساده با CSS بسازیم

(در مقالات بعدی ساخت منوی افقی با جی کوئری رو آموزش میدم)


نوشته شده در تاریخ سه شنبه 7 شهریور 1391    | توسط: ح.م    | طبقه بندی: آموزش کم کم جاوا اسکریپت، پروژه های کلاینت ساید،     | نظرات()


آموزش کم کم جاوا اسکریپت_درس 17 تایمرها و اسلاید شوی اتوماتیک

امورش کم کم جاوا اسکریپت

آموزش کم کم جاوا اسکریپت_17

درس آخر

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

امروز به جلسه آخر آموزش جاوا اسکریپت رسیدیم.

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

از نظر من بیشترین لذت زندگی توی خلق کردنه ، خیلی حال میده که یه چیزی رو خلق کنی و ازش استفاده کنی.

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

در روز های آتی پروژه های عملی با جی کوئری رو شروع خواهم کرد.
پیش نیاز این آموزش ها ، دانستن جاوا اسکریپت بود و به همین دلیل بود که ابتدا آموزش های جاوا اسکریپت رو آموزش دادم.



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


نوشته شده در تاریخ یکشنبه 21 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش کم کم جاوا اسکریپت،     | نظرات()


آموزش کم کم جاوا اسکریپت_درس 16_خوندن دکمه های صفحه کلید

امورش کم کم جاوا اسکریپت

آموزش کم کم جاوا اسکریپت_درس 16



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

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


نوشته شده در تاریخ جمعه 19 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش کم کم جاوا اسکریپت،     | نظرات()


آموزش چک کردن فرم ها یا form validation با جاوا اسکریپت

آموزش چک کردن فرم ها با form validation با جاوا اسکریپت
سلام

در آموزش کاربردی قبلی ،
آموزش ساخت منوی کشویی با جی کوئری  رو آموختیم.

در ادامه چک کردن فرم ها با form validation با جاوا اسکریپت را خواهید آموخت.


نوشته شده در تاریخ پنجشنبه 18 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش کم کم جاوا اسکریپت، پروژه ها و ساخته های خودم،     | نظرات()


بزرگترین اشتباهات برنامه نویسان جی کوئری و جاوا اسکریپت

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

قاعده شماره ۱: کارکرد جداگانه جاوا اسکریپت

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

کدنویسی نادرست :
هرگز event های (رویدادهای) جاوا اسکریپت را به عنوان ویژگی‌های درون خطی (inline) بکار نگیرید. این عمل را باید به طور کامل از ذهن خود پاک کنید.


کدنویسی درست :
همه رفتارهای جاوا اسکریپت باید در فایل اسکریپت خارجی گنجانده شده و با تگ <script> در قسمت head‌ صفحه به سند لینک شوند. بنابراین تگ بالا به شکل زیر در می‌آید:


و کد جاوا اسکریپت در داخل فایل myscript.js (یک اسم فرضی) می‌تواند چیزی شبیه این باشد:


متد()
click در جی کوئری به ما اجازه می‌دهد تا براحتی یک event کلیک را به نتیجه(های) انتخابگرمان نسبت دهیم. بنابراین کد بالا همه تگ‌های <a> از کلاس doSomething را انتخاب می‌کند و یک رویداد کلیک را که یک تابع را فراخوانی می‌کند به آنها نسبت می‌دهد.

نوشته شده در تاریخ چهارشنبه 17 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش jQuery، آموزش کم کم جاوا اسکریپت،     | نظرات()


چرا جی کوئری ؟

شاید این سوال همیشه در ذهن شما ایجاد شده باشد که چرا جی کوئری ؟ مگر با جاوا اسکریپت نمی توان اشیاء را جابجا کرد یا آنها را نامرئی و مرئی نمود ،با تصاویر اسلاید شو ساخت ، منوی کشویی ایجاد کرد و .... ؟

یکی از مهمترین دغدغه های هر طراح وبی ، نمایش درست صفحات سایت در مروگرهای مختلف بوده و هست .
تا قبل از تولید کتابخانه جی کوئری ، بزرگترین مشکل جاوا اسکریپت ، عدم پشتیبانی برخی از دستورات توسط مرورگر های مختلف بود ، بدین صورت بعنوان مثال اسلاید شوی یک سایت روی مروگر فایرفاکس درست کار می کرد ولی روی مرورگر کروم نه !
تا اینکه کتابخانه جی کوئری توسط گروهی از برنامه نویسان ایجاد شد و مشکلات مروگرهای مختلف با جاوا اسکریپت به طور کامل حل شد .(خدا عمرشون بده)
سایت نت نیک|چرا جی کوئری ؟

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

خوب حتما الان میگین : خوب اگه جی کوئری این همه خوبه ، پس دیگه چرا تو سایتت این همه آموزش جاوا اسکریپت
قرار میدی ؟

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

نوشته شده در تاریخ چهارشنبه 17 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش jQuery، آموزش کم کم جاوا اسکریپت،     | نظرات()