در این تمرین ما 3 فرمول محاسبه قیمت، محاسبه وتر مثلث قائم الزاویه با استفاده از دو ضلع و محاسبه تعداد روز باقی مانده از امروز را بدست می آوریم.
ابتدا نگاهی به فایل html بیاندازیم:
شامل 3 بخش ذکر شده است که هر کدام input های متناظر خود را دارند و در تگ formula ویژگی evaluator متناسب نیز نوشته شده است تا با استفاده از آن محاسبات را در فایل جاوا اسکریپت انجام دهیم.
بخش اول مثال ذکر شده در صورت تمرین است.
بخش دوم 2 مقدار ماه و روز را دریافت می کند و فاصله از امروز را حساب می کند. برای مثال اگر امروز 3/29 باشد و تاریخ 3/30 را وارد کنیم خروجی 1 روز می شود.(توجه شود تاریخ به میلادی است).
بخش سوم 2 ضلع مثلث قائم الزاویه را به عنوان ورودی می گیرد و طبق فرمول فیثاغورس وتر مثلث را حساب می کند.
حالا نگاهی کلی به استایل صفحه بیاندازیم:
در این تگ استایل های متناسب به المان های صفحه را داده ایم در بخش body فونت و رنگ زمینه و پدینگ و ...، از انجایی که عنوان هر فرمول در تگ h2 قرار دادیم برای این تگ استایل را متناسب با بالا تعریف کردیم. به همین ترتیب برای تگ های input و formula استایل های مناسب قرار داده ایم. input:focus برای زمانی است که به یک input خاص وارد شده ایم تا مقدار را ثبت کنیم.
حالا به بخش اصلی یعنی فایل js خود می پردازیم:
طبق خواسته سوال از درخت DOM استفاده می کنیم.ابتدا یک Eventlistener اضافه می کنیم که منتظر می ماند تا صفحه کامل بارگذاری شود و سپس توابعی داخل آن قرار داده ایم اجرا شود. برای هر ورودی یک Eventlistner تعریف می کنیم تا به محض وارد شدن مقادیر تابع اصلی ما یعنی upadteformulas اجرا شود:
قبل از اجرای updateformulas با استفاده از درخت همه المان های فرمول را بدست می اوریم تا در تابع از آن استفاده کنیم:
در این تابع یک حلقه روی فرمول ها میزنیم تا تابع مورد نظر اجرا شود. برای اینکار اجرای توابع را داخل یک try/catch قرار می دهیم تا در صورتی که مقادیر ایراد داشت ورودی نامعتبر را خروجی دهد(invalid formula).
سپس با استفاده از getattribute فرمول داخل صفحه html را بدست می آوریم تا محاسبات را انجام دهیم برای این کار با استفاده از یک رجکس ساده فرمول مورد نظر را بدست می آوریم تا به آیدی هایی که نیاز داریم آن را تقسیم کنیم سپس با استفاده از درخت DOM مقادیر مورد نظر را بدست اوریم. در نهایت ورودی تابع eval را به صورت درست طبق ورودی ها می سازیم تا محاسبات را طبق تابع ها انجام دهد. تابع اول محاسبات ریاضی ساده می باشد. برای فرمول های بعدی تابع را باید تعریف کنیم:
تابع اول فاصله روز وارد شده از تاریخ حال حساب می کند و خروجی می دهد.
در تابع دوم نیز با استفاده از Math.sqrt وتر را بدست می آورد و تا 2 رقم اعشار خروجی می دهد.
حالا کارکرد صفحه را تست می کنیم:
محمدجواد خوشدونی فراهانی 401105894