آویزه : %d8%af%d8%a7%d9%86%d8%b4%d8%ac%d9%88

سری آموزش های طراحی وب با فریم ورک tedjs (ساخت todo list)

یکی از مثال هایی که اغلب اوقات زده می شود ، طراحی todo list می باشد.

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

فایلی ایجاد نمایید. در اینجا فایل lib.js را ایجاد می نماییم.

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

نام تگ عنصر را todo می گذاریم

همانطور که مشاهده می کنید از تابع define ، زیر مجموعه شی ted استفاده کرده ایم. با این کار یک عنصر با نام todo ساخته ایم که هیچ گونه مشخصه (Attribute) مخصوصی ندارد.

با این کار عنصر به صورت پیش فرض با display:none در نظر گرفته می شود.

در قدم بعد باید تابع سازنده عنصر را طراحی کنیم.

برای ایجاد تابع سازنده ، از تابع ted.create استفاده می کنیم. ورودی اول این تابع تابع تعریف شده می باشد و ورودی دوم آن تابع سازنده می باشد.

حال شروع به نوشتن محتویات تابع می نمایید.

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

عنصر todo دارای عناصر فرزند می باشد. عنصر list ، insert و remove ..

عنصر list برای وارد کردن مقدار های ابتدایی به کار گرفته می شود.

عنصر insert درصورت استفاده می توانید نامی برای دکمه وارد سازی اطلاعات به لیست تعیین نمایید.

و عنصر remove نیز برای تعیین نام دکمه حذف از لیست به کار می رود.

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

در قدم بعدی می بایست درون html را خالی کرد تا محتوای جدید وارد شود.

در این مرحله لیست های ابتدایی درصورت وجود را وارد HTML می کنیم. لیست های ابدایی درون متغیر list ذخیره شده اند.

در اینجا اپلیکیشن ایجاد شده و اطلاعات نمایش داده شده اند. اما در صورتی که بخواهیم اطلاعاتی را اضافه یا حذف کنیم ، نمی توانیم. پس می بایست برای دکمه های insert و remove ، رویدادی ایجاد کنیم تا به عمل کاربر واکنش دهند.

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

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

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



دسته بندی: آموزش, فریم ورک تد جی اس, مقاله

سری آموزش های طراحی وب با فریم ورک tedjs (شروع کار)

سری آموزش های طراحی وب با فریم ورک tedjs (شروع کار)

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

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

برای این کار ، می توانید فریم ورک را دانلود نمایید یا به صورت برخط استفاده کنید.

برای دریافت یا استفاده از آخرین نسخه ، ابتدا به وبسایت tedjs مراجعه نمایید. به صفحه اصلی بروید . از منوی کشویی minified را انتخاب نمایید و بر روی دانلود کلیک نمایید و برای نمایش لینک برخط فریم ورک ، گزینه Online link  را انتخاب کنید و بر روی دانلود کلیک نمایید.

فرض می کنیم از نسخه آنلاین استفاده می کنیم. اولین نکته ای که قابل ذکر می باشد ، این است که فریم ورک دارای تنظیماتی است که می توان قبل از اجرا ، آن ها را تغییر داد.

تنظیمات مورد نیاز در متغییر Ted_setting می بایست ذخیره شود.

در حال حاضر تنها دو مقدار را می توان تغییر داد. آدرس سرور کتابخانه ها و نحوه نمایش خطا ها در حین اجرا.

آدرس سرور در توابع include و ainclude برای دریافت کتابخانه ها استفاده می شود. در صورتی که کتابخانه شخصی دارید می توانید آدرس آن را در URL وارد نمایید. توجه نمایید که در انتهای Query علامت مساوی قرار دهید، زیرا نام کتابخانه به انتهای آدرس اضافه می شود.

مقدار libError  نیز برای شخصی سازی نمایش خطا به صورت alert می باشد. درصورتی که مقدار دهی نشود ، خطایی نمایش داده نخواهد شد.

دو مقدار {{name}}  و {{error}} نیز یک template  برای نمایش نام کتابخانه و مشخصات خطا می باشد.

اعمال تنظیمات اختیاری می باشد.

نکته مهمی که در این کتابخانه وجود دارد این است که ، این کتابخانه دارای دو گروه توابع می باشد.

توابع شی tedApi و توابع شی ted.

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

شی ted که دارای توابع طراحی DOM ها می باشد ، تنها در کتابخانه هایی که از طریق توابع include و ainclude اجرا می شوند قابل دسترس می باشند. اما شی tedApi که دارای توابع عمومی و اساسی فریم ورک می باشد چه در داخل و چه در خارج از کتابخانه ها قابل دسترس می باشد.

وارد کردن کتابخانه های به دو صورت می باشد.

اولین حالت استفاده مستقیم از کتابخانه ها از طریق Tedjs CDN ، که به صورت آنلاین کتابخانه از مخزن گرفته می شود.

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

Username.LibraryName.NameSpace

مانند system.aml.std

برای فراخوانی می توان از دو تابع include و  ainclude به صورت زیر استفاده کرد.

در حالت دوم که حالت پیش نهاد شده می باشد ، فایل کتابخانه از مخزن دانلود شده و بر روی هاست بارگزاری می شود. حال می توانید آدرس فایل را مشخص نمایید. در این حالت برای مشخص کردن اینکه قصد بارگزاری یک فایل داخلی را دارید می بایست از کلمه کلیدی file: استفاده نمایید.

حال می توانید کتابخانه خود را ایجاد و بارگزاری نمایید.

 

دسته بندی: فریم ورک تد جی اس, مقاله

همایش ارتباط دانشجو با صنعت و بازار کار

پس از تلاش های بی وقته بنده و همگروهی عزیزم (آقای اسدی) که از دوستان صمیمی هستند، همایش "ارتباط دانشگاه با صنعت و بازار کار" در حوضه IT و کامپیوتر با همکاری دانشگاه مهندسی فناوری های نوین قوچان برگزار شد. این همایش تحت برند UNLIMITED ( بنیاد دانشجویی برنامه نویسان نامحدود) و با سخنرانی ۴ تن از اساتید این حوزه اجرا گشت. a4-3

دکتر نجفی : رئیس سازمان نظام صنفی رایانه خراسان رضوی و عضو هیئت علمی دانشگاه قوچان

مهندس سلطانی : مدیر گروه کامپیوتر دانشگاه قوچان و عضو هیات علمی دانشگاه قوچان

مهندس کلانتری : رئیس هیات مدیره شرکت سازه اطلاعات سامان و مشاور مدیریت پایگاه داده Oracle در برق منطقه ای خراسان

مهندس عامل : عضو هیات مدیره سازمان نظام صنفی رایانه ای خراسان و مدرس کارآفرینی

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

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

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

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

حدود ۱۵۰ دانشجو در این همایش گرد هم آمدند که ۴۰ درصد آنان از دانشجویان جدیدالورود رشته کامپیوتر بوده اند.

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

در انتها نیز می بایست از تمام اساتید و سخنرانان گرانقدر و دوستانی که در این راه با ما همیاری نمودند به خصوص :

مسئولین برگزاری:

آقای بیدختی

آقای گری

آقای نادرزاده

آقای رضایی

خانم مرادی

خانم جعفری

مجری :

خانم قاسمی

تصویر برداری:

آقای شیخ حسینی

آقای دهقان پور

فیلم بردار:

آقای قدرتی

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

3     2

3       4

7      9



دسته بندی: فعالیت ها