ورقة مساعدة 📌

<h1>My website</h1>

أكبر عنوان. مرة واحدة فقط في الصفحة — مثل عنوان الكتاب.

<h2>Chapter</h2>

عنوان أصغر. يوجد حتى <h6> (الأصغر).

<p>Hi, this is text.</p>

فقرة من النص العادي.

<strong>important</strong>

يجعل النص عريضًا.

<em>interesting</em>

نص مائل (مائل قليلًا).

<a href="https://example.com">Click</a>

رابط. href يحتوي على العنوان الذي يؤدي إليه.

<img src="dog.jpg" alt="My dog">

صورة. src = ملف الصورة، alt = وصف في حال لم تُحمَّل.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

قائمة بنقاط. كل عنصر هو <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

قائمة مرقمة — المتصفح يضيف الأرقام بنفسه.

<div class="card">...</div>

صندوق لتجميع الأشياء التي تنتمي معًا. أنت تختار اسم class بنفسك.

<!-- note to myself -->

تعليق. المتصفح يتجاهله — هو فقط لك.

h1 {
  color: red;
}

كل عنوان <h1> سيكون أحمر.

.card {
  background: yellow;
}

كل شيء له class="card" يحصل على خلفية صفراء. النقطة تعني «ابحث عن هذا class».

p {
  font-size: 20px;
}

حجم خط الفقرات. رقم أكبر = نص أكبر.

body {
  font-family: Arial;
}

الخط للصفحة كلها.

.card {
  padding: 16px;
}

المسافة الداخلية — بين المحتوى وحافة الصندوق.

.card {
  margin: 16px;
}

المسافة الخارجية — البعد عن الأشياء حوله.

.card {
  border: 2px solid black;
}

إطار: السُمك ونوع الخط واللون.

.card {
  border-radius: 12px;
}

زوايا مستديرة. رقم أكبر = أكثر استدارة.

.menu {
  display: flex;
  gap: 10px;
}

الأشياء داخلها تصطف جنبًا إلى جنب بمسافة 10px. حيلة القوائم السحرية!

img {
  width: 200px;
}

عرض الصورة. الارتفاع يتعدّل تلقائيًا حتى لا تتشوه.

const name = 'Kate';

متغيّر — صندوق عليه اسم تخزّن فيه شيئًا.

let points = 0;
points = points + 1;

let صندوق يمكنك تغييره. هنا نضيف نقطة.

alert('Hi!');

تظهر نافذة رسالة. جيدة لتجاربك الأولى.

console.log('it works');

يطبع رسالة في وحدة التحكم (F12) — نافذة سرية للمبرمجين.

document.querySelector('h1')

يجد أول <h1> في الصفحة لتعمل معه.

element.textContent = 'New text';

يستبدل النص داخل العنصر الذي وجدته.

element.addEventListener('click', () => {
  alert('Clicked!');
});

عندما ينقر أحد على العنصر، يعمل ما بداخل الأقواس.

if (points > 10) {
  alert('You won!');
}

شرط: الكود بداخل يعمل فقط إذا كان ما بين القوسين صحيحًا.

element.classList.toggle("dark");

يضيف class إن لم يكن موجودًا — ويزيله إن كان موجودًا. هكذا يعمل الوضع الداكن بالضبط.

const r = await fetch(address);

أرسل طلبًا إلى API وانتظر (await) الإجابة.

const data = await r.json();

حوّل الاستجابة إلى كائن يمكنك العمل معه.

data.current_weather.temperature

استخرج قيمة من الكائن بالنقاط — مثل أي كائن آخر.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = أرسل بيانات إلى الخادم. body يحتوي على الكائن محوّلًا إلى نص.

{ "city": "Prague", "temperature": 21 }

JSON — اللغة المشتركة لـ API. النص بين علامات اقتباس، الأرقام بدون.

JSON.stringify(obj)

حوّل كائنًا إلى نص JSON (قبل الإرسال).

JSON.parse(text)

حوّل نص JSON إلى كائن (بعد الاستلام).

process.env.AI_KEY

على الخادم: اقرأ مفتاحًا سريًا من ملف .env. المفاتيح لا تُوضَع في المتصفح أبدًا!

cd my-website

انتقل إلى مجلد my-website (cd = change directory).

ls

اعرض ما في المجلد الحالي (في Windows: dir).

node server.js

شغّل ملف server.js باستخدام Node.js.

npm install

حمّل كل الحزم التي يحتاجها المشروع.

git status

اعرض ما تغيّر في المشروع منذ آخر حفظ.

git add .

جهّز كل التغييرات للحفظ (النقطة تعني «كل شيء»).

git commit -m "Added a menu"

احفظ التغييرات في التاريخ مع ملاحظة عما فعلت.

git push

أرسل التغييرات المحفوظة إلى GitHub.