فلش‌کارت‌های آموزشی HTML و DOM Manipulation: دستکاری ساختار صفحه با جاوااسکریپت

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره HTML و DOM Manipulation: دستکاری ساختار صفحه با جاوااسکریپت

موضوع کلی: برنامه نویسی

موضوع میانی: HTML

📋 سرفصل‌های دوره

• 1. مقدمه ای بر HTML و وب
• 2. آشنایی با ساختار کلی یک صفحه HTML
• 3. تگ های اصلی HTML: head, body, html
• 4. تگ های عنوان: h1 تا h6
• 5. تگ پاراگراف: p
• 6. تگ های قالب بندی متن: bold, italic, underline, strong, em, mark, small, del, ins, sub, sup
• 7. تگ های لیست: ul, ol, li
• 8. تگ های لینک: a
• 9. تگ های تصویر: img
• 10. تگ های جدول: table, tr, th, td
• 11. تگ های فرم: form, input, label, textarea, select, option, button
• 12. انواع مختلف input: text, password, email, number, radio, checkbox, file, submit, reset
• 13. تگ div و span
• 14. تگ های معنایی HTML5: header, nav, article, aside, footer, section
• 15. آشنایی با Attribute ها در HTML
• 16. Attribute های عمومی: class, id, style, title
• 17. Attribute های زبان: lang, dir
• 18. Attribute های رویداد: onclick, onmouseover, onmouseout
• 19. ایجاد ساختار پایه یک صفحه وب ساده
• 20. CSS: مقدمه و مفاهیم پایه
• 21. Inline CSS: استایل دهی مستقیم در HTML
• 22. Internal CSS: استایل دهی در تگ style
• 23. External CSS: استایل دهی با فایل CSS جداگانه
• 24. سلکتورهای CSS: element, id, class, attribute
• 25. آشنایی با box model: content, padding, border, margin
• 26. موقعیت دهی عناصر: static, relative, absolute, fixed, sticky
• 27. آشنایی با flexbox
• 28. آشنایی با grid layout
• 29. رسپانسیو کردن صفحات وب با media queries
• 30. مقدمه ای بر جاوااسکریپت
• 31. متغیرها و انواع داده در جاوااسکریپت
• 32. عملگرهای ریاضی، منطقی و مقایسه ای در جاوااسکریپت
• 33. ساختارهای شرطی: if, else if, else
• 34. حلقه ها: for, while, do while
• 35. توابع در جاوااسکریپت
• 36. آرایه ها در جاوااسکریپت
• 37. اشیاء در جاوااسکریپت
• 38. آشنایی با DOM (Document Object Model)
• 39. درخت DOM و ساختار آن
• 40. انتخاب عناصر DOM: getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll
• 41. تغییر محتوای عناصر DOM: innerHTML, textContent
• 42. تغییر Attribute های عناصر DOM: setAttribute, getAttribute
• 43. تغییر استایل عناصر DOM: style property
• 44. ایجاد عناصر جدید در DOM: createElement
• 45. اضافه کردن عناصر به DOM: appendChild, insertBefore
• 46. حذف عناصر از DOM: removeChild
• 47. جایگزینی عناصر در DOM: replaceChild
• 48. دستکاری کلاس های CSS عناصر: classList.add, classList.remove, classList.toggle
• 49. گوش دادن به رویدادها: addEventListener
• 50. انواع رویدادها: click, mouseover, mouseout, keydown, keyup, submit, load, unload
• 51. ایجاد رویدادهای سفارشی: CustomEvent
• 52. پراکنش رویدادها (Event Bubbling و Event Capturing)
• 53. جلوگیری از پیش فرض رویدادها: preventDefault
• 54. توقف پراکنش رویدادها: stopPropagation
• 55. استفاده از گیشن رویداد (Event Delegation)
• 56. کار با فرم ها در جاوااسکریپت
• 57. دریافت داده های فرم: value property
• 58. اعتبارسنجی فرم (Form Validation)
• 59. ارسال فرم با AJAX
• 60. مقدمه ای بر AJAX (Asynchronous JavaScript and XML)
• 61. درخواست های HTTP: GET, POST, PUT, DELETE
• 62. استفاده از XMLHttpRequest object
• 63. استفاده از fetch API
• 64. مدیریت پاسخ های AJAX
• 65. کار با JSON (JavaScript Object Notation)
• 66. ارسال و دریافت داده های JSON
• 67. ذخیره داده ها در مرورگر: localStorage, sessionStorage
• 68. کوکی ها (Cookies)
• 69. کار با Timer ها: setTimeout, setInterval
• 70. انیمیشن سازی با جاوااسکریپت
• 71. کار با Canvas API
• 72. کار با SVG (Scalable Vector Graphics)
• 73. کار با Web Storage API
• 74. کار با geolocation API
• 75. کار با drag and drop API
• 76. کار با Web Workers
• 77. کار با Service Workers
• 78. آشنایی با کتابخانه های جاوااسکریپت (jQuery)
• 79. آشنایی با فریمورک های جاوااسکریپت (React, Angular, Vue.js)
• 80. دیباگ کردن کد جاوااسکریپت
• 81. بهینه سازی کد جاوااسکریپت
• 82. الگوهای طراحی در جاوااسکریپت
• 83. آزمون نویسی واحد (Unit Testing) در جاوااسکریپت
• 84. استفاده از ابزارهای توسعه مرورگر (Developer Tools)
• 85. آشنایی با مفاهیم SEO (Search Engine Optimization) در HTML
• 86. امنیت در برنامه نویسی وب (Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF))
• 87. بهترین روش های کدنویسی HTML و جاوااسکریپت
• 88. پروژه عملی: ساخت یک گالری تصویر تعاملی
• 89. پروژه عملی: ساخت یک لیست انجام کار (Todo List)
• 90. پروژه عملی: ساخت یک ماشین حساب ساده
• 91. پروژه عملی: ساخت یک صفحه لاگین و ثبت نام
• 92. پروژه عملی: ساخت یک وبلاگ ساده
• 93. مرور و جمع بندی مباحث
• 94. منابع و مراجع برای یادگیری بیشتر
• 95. نکات پیشرفته در مورد DOM Manipulation
• 96. استفاده از MutationObserver برای رصد تغییرات DOM
• 97. کار با Shadow DOM
• 98. آشنایی با Web Components
• 99. بهینه سازی عملکرد DOM Manipulation
• 100. فهرست کردن و کار با عناصر HTML: div, span, section, article, aside, nav, header, footer