DeveloperBreeze

Javascript Programming Tutorials, Guides & Best Practices

Explore 93+ expertly crafted javascript tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Tutorial
javascript css +1

دليل شامل لتطوير الويب: بناء موقع بسيط باستخدام HTML, CSS وJavaScript 

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 15px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

section {
    padding: 20px;
    background-color: white;
    margin: 10px 0;
}

h2 {
    color: #333;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}
  • تنسيق الصفحة بالكامل باستخدام body الذي يحدد الخطوط وألوان الخلفية.
  • استخدمنا header لتنسيق الشريط العلوي الذي يحتوي على العنوان.
  • تنسيقات القائمة في nav ul li تظهر الروابط بشكل أفقي.
  • يتم تطبيق التنسيق على الأقسام باستخدام section وh2 لجعل الصفحة تبدو أفضل.
  • footer ثابت في الأسفل بغض النظر عن مكان التمرير في الصفحة.

Sep 27, 2024
Read More
Tutorial
javascript

مكتبة jQuery: استخدام JavaScript بسهولة وفعالية

أحد أبرز ميزات jQuery هو قدرتها على تبسيط عملية تحديد العناصر والتفاعل معها. لتحديد عنصر في jQuery، نستخدم $()، وهو الرمز الأساسي المستخدم في المكتبة.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على jQuery</title>
</head>
<body>

    <h1>مرحبًا بك!</h1>
    <button id="myButton">انقر هنا</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // تحديد الزر والتفاعل معه
        $('#myButton').click(function() {
            alert('تم النقر على الزر!');
        });
    </script>
</body>
</html>

Sep 26, 2024
Read More
Tutorial
javascript

كيفية بناء تطبيقات تفاعلية باستخدام JavaScript و HTML و CSS 

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق ويب تفاعلي</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <h1>مرحبًا بك في تطبيقي التفاعلي!</h1>
        <input type="text" id="username" placeholder="أدخل اسمك">
        <button id="submitBtn">إرسال</button>
        <p id="greeting"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

شرح:

Sep 26, 2024
Read More
Tutorial
javascript

التعامل مع JSON في JavaScript: قراءة البيانات وكتابتها 

const invalidJson = '{"name": "أحمد", "age": 30,';  // JSON غير مكتمل

try {
    const person = JSON.parse(invalidJson);
    console.log(person);
} catch (error) {
    console.error("خطأ في تحويل JSON:", error.message);
}

عادة ما تستخدم JSON لجلب البيانات من APIs مثل بيانات الطقس، المستخدمين، أو المنتجات.

Sep 26, 2024
Read More
Tutorial
javascript

البرمجة الكائنية (OOP) في JavaScript: المفاهيم الأساسية والتطبيقات

البرمجة الكائنية (Object-Oriented Programming - OOP) هي نمط برمجي قوي يستخدم لهيكلة الكود بطريقة تعتمد على الكائنات. في JavaScript، على الرغم من أنها كانت تعتبر لغة تعتمد على النماذج (prototype-based) في الأصل، إلا أنها تدعم الآن البرمجة الكائنية بشكل كامل باستخدام الفئات (Classes) منذ إصدار ES6.

في هذا الدليل، سنتعرف على الأساسيات والمفاهيم الأساسية للبرمجة الكائنية في JavaScript، وسنرى كيف يمكن استخدامها لبناء تطبيقات متقدمة وقابلة للتطوير.

Sep 26, 2024
Read More