بعض المواقع التي يمكنك استخدامها لصنع تطبيقات باستخدام أكواد HTML، CSS، وJavaScript مجانًا:

1. PhoneGap
   (https://phonegap.com/):
   - يسمح لك بإنشاء تطبيقات موبايل هجينة باستخدام HTML وCSS وJavaScript.
   - يدعم العديد من المميزات مثل الوصول إلى أجهزة الهاتف (الكاميرا، الموقع، إلخ).

2. AppGyver:
   - منصة مجانية تسمح لك ببناء تطبيقات موبايل باستخدام أدوات مرئية مع القدرة على إضافة كود HTML وJavaScript.
   - لا يتطلب خبرة برمجية عالية ويتيح لك إنشاء تطبيقات متقدمة.

3. [Appery.io](http://Appery.io/):
   - يوفر بيئة تطوير تطبيقات تعتمد على HTML5 وCSS3 وJavaScript.
   - يمكنك من استخدام واجهة سحب وإفلات وتصميم تطبيقات مخصصة.

4. Ionic Framework:
   - يمكنك استخدام HTML وCSS وJavaScript لإنشاء تطبيقات هجينة قابلة للتشغيل على Android وiOS.
   - يوفر مكتبة غنية من المكونات الجاهزة لتسريع عملية التطوير.

5. Thunkable:
   - منصة تتيح لك إنشاء تطبيقات بدون أكواد، ولكن يمكن تخصيص بعض الأكواد مثل HTML وJavaScript للحصول على مميزات متقدمة.

هذه المنصات تقدم خدمات مجانية مع إمكانية استخدام أكواد HTML، ويمكنك البدء بتجربتها لتطوير تطبيقك.

خارطة جميلة لإختيار مسار محدد في البرمجة .

عناصر إضافية في HTML:
1. <meta>:
- يُستخدم لتحديد بيانات الميتا (Meta Data) عن الصفحة، مثل الوصف، الكلمات المفتاحية، نوع الترميز. مثال:

1. :
   - عنصر حاوية (Container) يُستخدم لتجميع العناصر معًا. لا يؤثر على التنسيق الافتراضي ولكن يُستخدم مع CSS لتنسيق المحتوى.
   html
   
   

   عنوان فرعي

   فقرة داخل div.

2. :
   - عنصر مضمن (Inline) يُستخدم لتجميع جزء من النص معًا. لا يؤثر على التنسيق الافتراضي ولكن يُستخدم مع CSS لتنسيق النص.

```

هذا نص عادي و هذا النص باللون الأحمر.

```

### CSS (Cascading Style Sheets)

خصائص إضافية في CSS:
1. التخطيط المرن (Flexbox):
- يُستخدم لتصميم تخطيطات مرنة وسهلة التحكم.

```
.container {
display: flex;
flex-direction: row; / يمكن أن تكون column أيضًا /
justify-content: center; / يمكن أن تكون flex-start أو flex-end أو space-between أو space-around /
align-items: center; / يمكن أن تكون flex-start أو flex-end أو stretch /
}

```

1. التحولات (Transitions):
   - تُستخدم لإضافة تأثيرات تغيير سلسة عند تغيير الأنماط.

```
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s; / التغير في لون الخلفية سيستغرق 0.5 ثانية /
}

.box:hover {
background-color: red;
}

```

1. الرسوم المتحركة (Animations):
   - تُستخدم لإنشاء تأثيرات متحركة.

```
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

.animated-box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

```

### JavaScript (JS)

مفاهيم إضافية في JavaScript:
1. استعلام عناصر DOM:
- يمكن الوصول إلى العناصر بطرق متعددة.

```
// الوصول إلى العناصر بواسطة id
var element = document.getElementById("myElement");

// الوصول إلى العناصر بواسطة class
var elements = document.getElementsByClassName("myClass");

// الوصول إلى العناصر بواسطة tag
var elements = document.getElementsByTagName("p");

// الوصول إلى العناصر بواسطة CSS selectors
var element = document.querySelector(".myClass");
var elements = document.querySelectorAll(".myClass");

```

1. التعامل مع الأحداث (Events):
   - يمكن الاستماع للأحداث المختلفة على العناصر.

```
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("تم النقر على الزر!");
});

```

1. التعامل مع النماذج (Forms):
   - يمكن التحقق من صحة النماذج ومعالجة البيانات.

```

```

#لا_تنسى_دعائكم_بالخير_لنا_ولكم

أساليب كتابة الكود في جافاسكربت
بدايةً عليك معرفة أن كود الجافاسكربت عبارة عن مجموعة أوامر ( Statements ) يتم تنفيذها بالترتيب الموضوعة فيه.
طالما أن الأوامر مكتوبة بشكل صحيح فإنه سيتم تنفيذها بشكل كامل، أما إذا كان يوجد أمر ما مكتوب بشكل خاطئ فإنه لن يتم تنفيذه و لن يتم تنفيذ أي أمر موضوع بعده.

حساسية الأحرف
جافاسكربت تطبق مفهوم حساسية الأحرف ( Case Sensitivity ) و هذا يعني أنها تميز بين الأحرف الكبيرة و الأحرف الصغيرة.

مثال: note و Note ليسا شيئاً واحداً.

أسماء المعرّفات
جافاسكربت تعتمد أسلوب Camel Case في كتابة أسماء الأشياء التي يتم تعريفها. لذا إستخدم الأحرف الصغيرة عند اختيار أسماء للمتغيرات أو للدوال و في حال كان الإسم يتألف من أكثر من كلمة فإبدأ أول كلمة بحرف صغير و كل كلمة بعدها إبدأها بحرف كبير.

أمثلة
في حال كان الإسم يتألف من كلمة واحدة.

var age;
في حال كان الإسم يتألف من أكثر من كلمة.

var firstName;

الفاصلة المنقوطة
في جافاسكربت يعتبر وضع فاصلة منقوطة ; في نهاية كل أمر هو شيء اختياري يمكنك فعله و يمكنك تجاهله. بالرغم من أن وضع فاصلة منقوطة هو أمر اختياري إلا أننا ننصحك دائماً بأن تضعها فهذا الأمر يساعدك على ترتيب الكود و معرفة أين ينتهي كل أمر و قد يجنبك الوقوع في مشكلة تداخل الأوامر التي أنت بغنى عنها.

أمثلة
var name = 'Mhamad';
var country = 'Lebanon';

المسافات الفارغة
في جافاسكربت المسافات الفارغة و الأسطر الفارغة لا تسبب مشكلة في الكود و لكن عليك استخدامها بشكل مناسب يساعدك في قراءة الكود.

أمثلة
لاحظ كم هو مريح للنظر أن تبعد رمز المساواة عن الإسم و القيمة.

var language = 'Arabic';
و لاحظ كم هو سيء للنظر أن تلصق رمز المساواة بالإسم و القيمة.

var language='Arabic';

التعليقات
نستخدم التعليقات لنضع ملاحظات حول الكود الذي كتبناه فقط، لكي لا ننسى كيف برمجنا الكود في حال أردنا مراجعته أو التعديل عليه بعد وقت طويل. و بالطبع التعليقات لا تؤثر إطلاقاً على الكود المكتوب.

في جافاسكربت يوجد أسلوبين لوضع التعليقات:

تعليق على سطر واحد.
تعليق على عدة أسطر.
أمثلة
في حال كان التعليق يتألف من سطر واحد, نضع الرمز // قبل كتابة التعليق.

// this is a one line comment تعليق يتألف من سطر واحد
في حال كان التعليق يتألف من عدة أسطر، نبدأ التعليق بالرمز / و ننهيه بالرمز /.

/
This is multlines comment
هذا التعليق يتألف من عدة أسطر
/
الأحرف المستخدمة في وضع الأسماء في جافاسكربت
أي إسم نضعه لمتغير، دالة، كلاس، كائن إلخ.. يسمى identifier في البرمجة.
في جافاسكربت كل عنصر نريد تعريفه علينا إعطاءه إسم خاص لم نقم باستخدامه من قبل.

اريد شخص ثقة وينشرلكم عن التصميم الويب وبفهمكم مفاهيم وشروحات @MS_97221

كـل عـام و انتم بـ الف خـير وصحـه وسلامه كل عام ونتم من المتفوقين والمطمئنين انشاله انشوفكم ب اعلا المراتب حبيت اعايدكم .

?  مالفرق بين Com. وNet. وOrg. ؟ ?

? النطاق com.
النطاق الأشهر والأفضل على الإطلاق بين مختلف النطاقات.
نشأ هذا النطاق سنة 1985، وكان الهذف الأساسي منه, هو استعماله في أغراض تجارية ولتعريف الشركات بشكل عام. لا يزال نطاق com. يحتفظ بصيغته التجارية الأساسية، وهي اختصار لكلمة "Commerial" والتي تعني "تجاري".

? النطاق net.
نطاقٌ آخر يحظى بشعبية كبيرة في عناوين الدومين على الانترنت، وهو النطاق العام بالإنترنت، إذ تم اقتبتسه أساساً من كلمة "Network". وعادةً ما يُستعمل من طرف الشركات ذات الخدماتوالمتنوعة، ويمكن أن يُستعمل من قِبل أي جهة كونه عام، إذ يمكن أن تستعمله مؤسسات تعليمية - تجارية ...

? النطاق org.
نشأ هذا النطاق في نفس العام الذي نشأ فيه نطاق com. (1985)، لكنه يُستعمل من قِبل جهات محددة عادةً لا تهدف إلى تحقيق الربح أو أي عائدٍ مادي (مؤسسات غير ربحية)، وهو مشتق من كلمة "Organization" والتي تعني "مؤسسة".

? النطاق info.
يُشتق هذا النطاق من كلمة "Information"، ومز اسمه يتضّح أن هذا النطاق يختص بالمواقع التي تُقدم المعلومات في مختلف المجالات، وكذلك المؤسسات المعلوماتية.

? النطاق edu.
هذا النطاق هو اختصار لكلمة "Education"، ويُستعمل من قِبل الجهات التعليمية، كالمدارس - الجامعات - الكليات - والمعاهد التعليمية على اختلافها.

⭕️  لا يقتصر استعمال النطاقات في الانترنت على النطاقات المذكورة أعلاه فقط، إنما هناك العديد منوالنطاقات الأخرى, لكنها أقل استخداماً وأمثر تخصصاً.
على سبيل المثال :
- النطاق mil. يُستعمل للهيئات والمؤسسات العسكرية.
- النطاق int. يُستعمل للمؤسسات الدولية مثل "الناتو".
هذه النطاقات المخصصة تندرج ضمن لِواء (النكاق العام عالي المستوى).

0️⃣1️⃣ أسئلة برمجية مبسطة بلغة بايثون: ?

1️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 10.
2️⃣ اكتب برنامجًا لحساب مجموع الأرقام من 1 إلى 10.
3️⃣ اكتب برنامجًا لطباعة الأرقام الزوجية من 1 إلى 100.
4️⃣ اكتب برنامجًا لحساب عدد الأعداد الفردية من 1 إلى 100.
5️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 100، مع تجاهل الأرقام الفردية.
6️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 100، مع تجاهل الأرقام الزوجية.
7️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 100، مع طباعة كل رقم مرتين.
8️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 100، مع طباعة كل رقم في سطر جديد.
9️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 100، مع طباعة كل رقم في عمود جديد.
0️⃣1️⃣ اكتب برنامجًا لطباعة الأرقام من 1 إلى 100، مع طباعة كل رقم في مربع جديد.

إليك بعض الإجابات لهذه الأسئلة:

السؤال 1:
for i in range(1, 11):
    print(i)
السؤال 2:
total = 0
for i in range(1, 11):
    total += i
print(total)
السؤال 3:
for i in range(2, 101, 2):
    print(i)
السؤال 4:
count = 0
for i in range(1, 101):
    if i % 2 == 1:
        count += 1
print(count)
السؤال 5:
for i in range(1, 101):
    if i % 2 == 0:
        continue
    print(i)
السؤال 6:
for i in range(1, 101):
    if i % 2 == 1:
        print(i)
السؤال 7:
for i in range(1, 101):
    print(i, i)
السؤال 8:
for i in range(1, 101):
    print(i)
السؤال 9:
for i in range(1, 101):
    print(i, end=" ")
السؤال 10:
for i in range(1, 101):
    print(i, end="\n")