محاضرة البرمجة وهندسة البرمجيات | Programming & Software Engineering Lecture

مقدمة عن البرمجة

ما هي البرمجة؟

البرمجة هي عملية إنشاء تعليمات للحاسوب لحل المشاكل وأتمتة المهام

لماذا تتعلم البرمجة؟

البرمجة تفتح أبواب الإبداع والابتكار وتوفر فرص عمل متميزة في المستقبل

أساسيات البرمجة

المتغيرات (Variables)

                        let name = "أحمد"; // Arabic name
const age = 25; // Age constant
                    

الدوال (Functions)

                        function greet(name) {
  return `مرحبا ${name}`;
}
                    

الحلقات (Loops)

                        for(let i = 0; i < 10; i++) {
  console.log(i);
}
                    

هندسة البرمجيات

دورة حياة التطوير

التخطيط، التحليل، التصميم، التطوير، الاختبار، النشر، الصيانة

العمل الجماعي

Git، GitHub، Code Review، Agile Methodology

جودة الكود

Clean Code، Testing، Documentation، Best Practices

جافا سكريبت الأساسي

Document Selectors

getElementById

const element = document.getElementById('myId');

querySelector

const element = document.querySelector('.myClass');

querySelectorAll

const elements = document.querySelectorAll('div');

الدوال المهمة

addEventListener

                            element.addEventListener('click', function() {
  console.log('تم النقر!');
});
                        

Array Methods

                            const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const filtered = numbers.filter(n => n > 3);
                        

Async/Await

                            async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}
                        

الإطارات والمكتبات

Vue.js

إطار عمل تدريجي لبناء واجهات المستخدم

                        <template>
  <div>{{ message }}</div>
</template>
                    

Next.js

إطار عمل React للإنتاج مع SSR و SSG

                        export default function Home() {
  return <h1>مرحبا بالعالم</h1>;
}
                    

Tailwind CSS

إطار عمل CSS للتصميم السريع

                        <div class="bg-blue-500 text-white p-4 rounded">
  محتوى جميل
</div>
                    

CSS المتقدم

Flexbox

1

2

3

                        .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
                    

CSS Grid

A

B

C

D

                        .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
                    

Sass/SCSS

                    $primary-color: #3498db;
$margin: 20px;

.button {
  background: $primary-color;
  margin: $margin;
  &:hover {
    background: darken($primary-color, 10%);
  }
}
                

تجربة تفاعلية

عنصر تفاعلي

محرر الأكواد التفاعلي

<!-- النسخة العربية -->
<div class="container-arabic">
  <h1>مرحبا بك</h1>
  <button id="clickText-ar" class="magic-button">
    <span>انقر هنا</span>
  </button>
</div>

<!-- English version -->
<div class="container-english">
  <h1>Hello World</h1>
  <button id="clickText-en" class="magic-button">
    <span>Click Me</span>
  </button>
</div>

/* تنسيق النسخة العربية */
.container-arabic {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  color: white;
  margin-bottom: 20px;
}

.container-arabic h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-family: 'Cairo', sans-serif;
}

/* English version styling */
.container-english {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 100%);
  border-radius: 20px;
  color: white;
  margin-bottom: 20px;
}

.container-english h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}

/* Magic Button Styling - أنيق وأسود */
.magic-button {
  position: relative;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 2px solid #333;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.magic-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.magic-button:hover {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-color: #555;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

.magic-button:hover::before {
  width: 300px;
  height: 300px;
}

.magic-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* أنيميشن عند النقر - Animation on click */
.magic-button.clicked {
  animation: pulse 0.5s ease;
  background: linear-gradient(135deg, #8400ff 0%, #6200cc 100%);
  border-color: #8400ff;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

// يمكنك كتابة أكوادك هنا
console.log('محرر الأكواد التفاعلي جاهز!');

// تفاعل الزر العربي - Arabic button interaction
const arabicBtn = document.getElementById('clickText-ar');
if (arabicBtn) {
  arabicBtn.addEventListener('click', function() {
    console.log('تم النقر على الزر العربي');
    
    // إضافة أنيميشن
    this.classList.add('clicked');
    
    // تغيير النص
    const span = this.querySelector('span');
    const originalText = span.textContent;
    span.textContent = 'تم النقر! ✨';
    
    // إعادة النص بعد ثانية
    setTimeout(() => {
      this.classList.remove('clicked');
      span.textContent = originalText;
    }, 1000);
  });
}

// English button interaction
const englishBtn = document.getElementById('clickText-en');
if (englishBtn) {
  englishBtn.addEventListener('click', function() {
    console.log('English button clicked!');
    
    // Add animation
    this.classList.add('clicked');
    
    // Change text
    const span = this.querySelector('span');
    const originalText = span.textContent;
    span.textContent = 'Clicked! ✨';
    
    // Reset after 1 second
    setTimeout(() => {
      this.classList.remove('clicked');
      span.textContent = originalText;
    }, 1000);
  });
}

محاضرة قبول وظيفة العمل

المحاضر: مهندس محمد سعود الرميحي

الخبرات التقنية والتخصصات

تطوير تطبيقات الويب

تطوير التطبيقات المحمولة

الذكاء الاصطناعي وعلم البيانات

هندسة التلقين والذكاء الاصطناعي

الأمن السيبراني وأنظمة التشغيل

الشهادات المهنية

تعلم البرمجة وهندسة البرمجيات