الدروس في هذا المسار
DOM المتقدم
التلاعب بعناصر HTML ديناميكيًا وإنشاء عناصر جديدة برمجيًا
Event Handling
التعامل مع الأحداث المختلفة مثل النقر، الكتابة، والتمرير
Functions وScope
فهم نطاق المتغيرات وأنواع الوظائف في JavaScript
Animation وTransitions
إضافة حركة وسلاسة للعناصر باستخدام CSS وJavaScript
Form Validation
التحقق من صحة المدخلات وتحسين تجربة المستخدم
AJAX وAPIs
جلب البيانات من الإنترنت وتحديث الصفحة دون إعادة تحميل
function initializeIntersectionObserver(elements,options={threshold:0.1,rootMargin:'0px 0px -50px 0px'}){const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.style.opacity='1';entry.target.style.transform='translateY(0)'}})},options);elements.forEach(el=>{el.style.opacity='0';el.style.transform='translateY(30px)';el.style.transition='opacity 0.6s ease, transform 0.6s ease';observer.observe(el)})}
function initializeSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){e.preventDefault();const target=document.querySelector(this.getAttribute('href'));if(target){target.scrollIntoView({behavior:'smooth',block:'start'})}})})}
function initializeLazyLoading(images){const imageObserver=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){const img=entry.target;img.src=img.dataset.src||img.src;img.classList.remove('lazy');imageObserver.unobserve(img)}})});images.forEach(img=>{img.dataset.src=img.src;img.classList.add('lazy');imageObserver.observe(img)})}
function debounce(func,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);func(...args)};clearTimeout(timeout);timeout=setTimeout(later,wait)}}
document.addEventListener('DOMContentLoaded',()=>{initializeSmoothScrolling();initializeLazyLoading(document.querySelectorAll('img'));initializeHeroSection();initializeFeaturedLessons();initializeBeginnersGuide();initializeRecentProjects();initializeNewsletter();initializeFAQ();initializeLatestArticles()})
