دوره مجازی جاوااسکریپت (جلسه 5): ورودی/خروجی و ساختارهای شرطی جاوااسکریپت



visibility  
mode_comment   ۵۴

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

مطالب مطرح شده در این جلسه عبارتند از :

  • اهمیت بحث ورودی/خروجی در زبان های برنامه نویسی
  • معرفی توابع دریافت ورودی از کاربر در زبان جاوااسکریپت
  • معرفی توابع confirm, prompt و ویژگی innerHtml و value
  • معرفی توابع نمایش خروجی در زبان جاوااسکریپت و نحوه استفاده از آنها
  • معرفی توابع alert , document.write , console.log و ویژگی innerHtml و value
  • معرفی ساختارهای شرطی در زبان جاوااسکریپت
  • دلایل و اهداف استفاده از ساختار های شرطی در زبان های برنامه نویسی
  • ساختار شرطی if و نحوه استفاده از آن
  • ساختار شرطی if..else و نحوه استفاده از آن
  • ساختار شرطی if..else if و نحوه استفاده از آن
  • ساختار شرطی : ? و نحوه استفاده از آن
  • ساختار شرطی switch و نحوه استفاده از آن
  • ذکر مثال هایی برای استفاده از ساختار های شرطی
  • مینی پروژه : اسکریپت نمایش پیام وقت بخیر بر اساس اوقات روز
info توجه

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

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

comment دیدگاه کاربران
wsjavan replyپاسخ

استاد عالی بود

امین خلیلی replyپاسخ

استاد اوند یه کد به شکل زیر نوشتم


بعد دو باره یک کد دیگه هم به شکل زیر نوشتم

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

لقمان آوند

اینطوری بنویس .

نیازی نیست برای اسپیس متغیر بزاری !

امین خلیلی

اگر بخاهیم مقدار فاصله را بیشتر کنیم باید چکار کنیم

لقمان آوند

توی آلرت اسپیس های بیشتری بزارید .

امین خلیلی replyپاسخ

در کد زیر


عمل ضرب تفریق تقسیم انجام میشود ولی چون هر دو به صورت رشته ای میباشند هنگامی که میخاهیم عمل جمع را انجام دهیم مثلا به اولی عدد 12 را میدهیم و به دومی عدد 14 را به جای اینکه با هم جمع شوند دوعدد در خروجی کنار هم قرار میگیرند به این شکل1214 چگونه عمل جمع را باید انجام دهیم

لقمان آوند

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

mehdi karimi

منم دقیقا همین مشکلو داشتم میخواستم مطرح کنم
مرسی استاد

bahman azari replyپاسخ

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

حالا، آیا میشه با جاوا اسکریپت ابتدا سن کاربر رو دریافت کنیم.اگر سن کاربر از 18 کمتر بود و اگر در عناوینمون کلماتی همچون ” بزرگسال ” یا “بزرگ” یا هر دو این کلمات وجود داشت به جای اون عناوین با همون innerHtml عنوانی که گفتم رو چاپ کنیم.میخوام بدونم آیا امکان نوشتن همچین شرطی که مطابقت بده کلمه ای که مشخص کردیم رو با عناوین مطلب و به نوعی فیلتر کنیم؟

البته این سوال در ابتدای ویدئو که در مورد innerhtml فرمودین به ذهنم رسید.

لقمان آوند

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

bahman azari

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

لقمان آوند

این کارو هم میشه انجام داد. ولی باز کاربر ممکنه کد ملی اشتباه (مثلا پدرش) رو بده و قصه میشه همون …

امین خلیلی replyپاسخ

استاد اوند در کد زیر که تو مثال ها اوردید

چرا این خط کدش باید بین پرانتز باشه


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

لقمان آوند

عبارت هایی که نتیجه مستقل دارند رو برای خوانایی کد و جلوگیری از تداخل های احتمالی بهتره تو پرانتز بزارید …

امین خلیلی replyپاسخ

با سلام وتبریک تولد امام حسین (ع) استاد اوند هنگام استفاده از prompt پنجرهای که میخاد باز بشه را میشه مکانش را تغییر داد مثل پایین سمت چپ باز بشه با یه استایل دیگه

لقمان آوند

خیر. پنجره مربوط به شی window و غیر قابل تغیره …

امین خلیلی replyپاسخ

در کد زیر

چگونه میتونیم متغییرcolor را در خاصیت background-color قرار دهیم تا کاربر رنگ را به دلخواه خودش برایdiv قرار دهد

لقمان آوند

خیلی راحت از + استفاده کنید برای چسبوندن رشته ها و متغیر ها به هم !

hassani replyپاسخ

سلام
اولا تشکر بابت معرفی نرم افزار فوق العاده عالی php storm که خیلی سریعه و با امکانات فراوان.
آقای آوند اگه میشه هنگام خستگی آموزش رو ضبط نکنین آخه کدوم استاد معلم دبیر و… میاد ساعت یک بامداد آموزش میده اونم توی اوج خستگی.قطعا وقتی شما سرحال تر باشین میتونین نکات بیشتر و ظریف تری رو حین آموزش یاد آوری کنین.و کیفیت آموزش هاتون از نظر محتوایی بهتر از اینم میتونه بشه.
آقای آوند ما باید اشیا پیش ساخته جاوا اسکریپت رو از کجا بلد باشیم.اونا رو معرفی میکنین؟مثلا:Date()
اگه میشه درمورد اون تابع رندوم و نحوه کارکردش توضیحات بیشتری بدین.واینکه شما هنگام استفاده از این تابع متغیر h رو دوبار در کدها معرفی کردین که phpstorm این مورد رو اشکال تلقی میکرد.
نکته بعدی اینکه برای معرفی case همیشه باید از کوتیشن استفاده کرد یا اینکه برای مقدار عددی کوتیشن لازم نداره؟
من اون تمرین آخر آموزش رو انجام دادم ببینین درسته.


و در پایان تشکر میکنم از آموزش خوبتون.

hassani

سلام آقای آوند
اگه میشه توضیح بدین.
با تشکر

لقمان آوند

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

bahman azari

استاد خودتون تو ویدئو گفتین که به خاطر خستگی بعضا فراموش میکنم چی بگم؟!!

لقمان آوند

توی همون جلسه منظورم بود و خسته بودم اون روز چون روزش خیلی کار کرده بودم .
مطمئن باشید مطالب از قبل جمع آوری میشه . من دو تا مانیتور برای ضبط دارم و در مانیتور ثانوی سرفصل های تدریس خودم هست که شما نمیبینید . ولی اگر دقت کرده باشید موس رو بعضا از سمت راست ویدیو می برم بیرون میره تو مانیتور دوم که سرفصل ها رو اسکرول کنم معمولا ;D

safarzad replyپاسخ

تمرین اول رو به این صورت کد نویسی کردم

safarzad replyپاسخ

تمرین دوم رو هم به این صورت:

لقمان آوند

ممنون

محمد هادی جوشقانی replyپاسخ

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

لقمان آوند

ممنون
ایشالله که همینطوره

امین خلیلی replyپاسخ

استاد اوند مثلا یه DIV داریم بیرون تگ اسکریپ داخل صفحه/به وسیله جاوا اسکریپ میتونیم خصوصیات رنگ و اندازه و مثل اینها را عوض کنیم البته بیرون تگ اسکریپ باشه

لقمان آوند

بله اصل کار جاوااسکریپت همینه
در ادامه بهش میرسیم…

Saman SoroushNia replyپاسخ

سلام استاد امیدوارم حالتون خوب باشه طاعاتتون قبول

من تمارین آخر این دوره به یه صورت دیگر در آوردم ،
اما بعد که تو جلسه 6 شما حل کردین کلی خورد تو ذوقم !!

لقمان آوند

مشکلی نیست . اگر درست جواب میده راه حل ما هم درسته!
ضمن اینکه یکم تمرین و کدنویسی لازمه که به مهارت کافی برسید .

Omid Alaie replyپاسخ

سلام استاد وقتتون بخیر
من این تمرین + ، – و * ، xوy رو انجام دادم فقط واسه + دو تا عدد رو کنار هم قرار میده و دو تا عدد رو جمع نمیکنه . مشکل چیه؟

لقمان آوند

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

افشین زندی replyپاسخ

سلام استاد. خسته نباشید، جلسه عالی بود
استاد جواب تمرین 2، اینکه برای روزهای 5شنبه و جمعه بگه تعطیله! رو اگه با if بنویسیم اینجوری میشه؟

امین خلیلی replyپاسخ

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

لقمان آوند

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

ابراهیم عابدی replyپاسخ

استاد برای تمرین بنده از ساختار if و else if استفاده کردم مشکلی نداره ؟ جوابی هم که بدست اووردم هم تفاوتی نداشت با چیزی که تو جلسه بعد نشون دادید و اینکه اولویت استفاده از شرط ها با کدوم باشه وقتی امکان نوشتن با چند نوع ساختار شرطی متفاوت هست

لقمان آوند

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

ابراهیم عابدی

استاد قسمت دوم سوالم حالا چه در بحث ساختارهای شرطی چه حلقه ها اولویتی وجود نداره ؟ سلیقه ای هست ؟

تا قسمت 7 رو که دیدم عالی بوده استاد به خصوص اینکه تمرین می دادید به نظرم جا داشت تمرینای بیشتری هم می گفتید . سایتی موجود هست که تمرین های خوبی برای جاوا اسکریپت داشته باشه به همراه جواب ؟

لقمان آوند

بله تقریبا سلیقه ای هست و می تونید از هر کدوم که راحتتر جوابتون رو باهاش میگیرید استفاده کنید.
الان جایی برای تمرین نمی شناسم. عبارت javascript exercises رو گوگل کنید و بگردید.

مجتبی replyپاسخ

سلام این کد همش قسمت پیشفرض اجرا میشه!! مشکلش چیه

لقمان آوند

متغیر age مقدارش رو از prompt میگیره که رشته برمیگردونه. در صورتی که شما در case ها به صورت عددی استفاده می کنید .
خط اول رو این شکلی کنید :
var age = Number(prompt(“your age?”));
ضمن اینکه معمولا جلوی case ها از مقدار استفاده میشه نه شرط ! برای این کد بهتره از if ها استفاده کنید .

Sahar Dida replyپاسخ

با سلام خدمت شما
استاد اون تمرینی که واسه قسمت i/o دادین وقتی عملگر + را اعمال می کنم دو تا عدد رو رشته در نظر میگیره و کنار هم میچسبونه ولی عملیات دیگه رو حسابی محاسبه میکنه ،دلیلش چی هست؟
و در مورد miniproject اگه ساعت سیستم کاربر 24 ساعته نباشه پیام ها اشتباه میشن !!!!
و یه مشکلی که من برخوردم تابع rand من جواب نمیده !!شکل صحیح تابع را میشه بی زحمت بنویسین کدشو؟

لقمان آوند

سلام
– جواب سوال اولتون رو در جلسات آینده خواهید یافت . پاسخ دادیم .
– برای مینی پروژه مشکلی نداره. تابع getHours یه عدد بین 0 تا 23 بر می گردونه.
– تابع رندم هم درسته و مشکلی نداره. چه خطایی میده یا مشکلش چیه ؟

Aria Banazadeh replyپاسخ

سلام استاد اینم تمرین
var p1 = window.prompt(“لطفا عدد اول را وارد نمایید”);
var p2 = window.prompt(“لطفا عدد دوم را وارد نمایید”);
window.alert(p1+p2)
window.alert(p1-p2)
window.alert(p1*p2)
window.alert(p1%p2)

لقمان آوند

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

Aria Banazadeh replyپاسخ

سلام اقای اوند این تمرین

لقمان آوند

خوبه

هادی مصلی نژاد replyپاسخ

سلام استاد آوند ، میخواستم بدونم پنجره confirm رو چطور میشه استایل دهی کرد و اینکه چطور میشه مقادیر پیش فرض رو تغییر داد ( مثلا به جای ok و cancel مقادیر بله و خیر قرار دهیم).ممنون

لقمان آوند

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

amirfff replyپاسخ

سلام
استاد آوند توی تمرین اولی که دادید که گفتید 2عدد از کاربر دریافت و حاصل ضرب و جمع و تفرق آن 2 عدد را نمایش دهید ,,توی ضرب و تفریق کردن مشکلی نیست ولی توی جمع کردن مشکلی که وجود داره اینه که بااعداد به صورت رشته عمل می کند وآن هارا به هم می چسباند ,راه حل این مشکل چی هست؟؟؟؟

لقمان آوند

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

نازمحمد گری

با سلام
این مشکل من هم بودولی خدا را شکر این مسئله اینجا مطرح شده بود . ممنون ا زدوستان

ارسال نظرات

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