StarK Logo

ياهلا بالمبرمج القادم لحظات ويدخلك واصمل مو مثل كل مرة

جاري التحميل...

أساسيات لوا (Lua)

آخر تحديث: 15 مارس 2025 الصعوبة: 6/10

ما هي لوا (Lua)؟

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

لوا هي اللغة الأساسية لبرمجة سيرفرات FiveM/RedM. تعلمها جيداً سيمكنك من إنشاء سكربتات متقدمة.

أنواع البيانات الأساسية

-- الأرقام
local number = 42          -- رقم
local float = 3.14         -- رقم عشري

-- النصوص
local text = "Hello"       -- نص
local multiLine = [[
هذا نص
متعدد الأسطر
]]

-- القيم المنطقية
local isTrue = true        -- صحيح
local isFalse = false      -- خطأ

-- الجداول (مثل المصفوفات والكائنات)
local table = {            
    key = "value",
    1, 2, 3
}

-- القيمة الفارغة
local isNil = nil          -- غير معرّف

المتغيرات والعوامل

في لوا، يمكن تعريف المتغيرات باستخدام الكلمة المفتاحية local:

-- تعريف المتغيرات
local name = "StarK"
local age = 18
local isDeveloper = true

-- العمليات الحسابية
local sum = 10 + 5       -- 15
local sub = 10 - 5       -- 5
local mul = 10 * 5       -- 50
local div = 10 / 5       -- 2
local mod = 10 % 3       -- 1 (باقي القسمة)

-- العمليات المنطقية
local andOp = true and false  -- false
local orOp = true or false    -- true
local notOp = not true        -- false

-- عمليات المقارنة
local equal = (10 == 10)      -- true
local notEqual = (10 ~= 5)    -- true
local greater = (10 > 5)      -- true
local less = (5 < 10)         -- true

الجمل الشرطية

local age = 18

-- if بسيط
if age >= 18 then
    print("أنت بالغ")
end

-- if مع else
if age < 16 then
    print("أنت صغير جداً")
else
    print("يمكنك الدخول")
end

-- if مع elseif
if age < 13 then
    print("طفل")
elseif age < 18 then
    print("مراهق")
else
    print("بالغ")
end

الحلقات التكرارية

-- for loop
for i = 1, 5 do
    print("رقم: "..i)
end

-- while loop
local counter = 0
while counter < 3 do
    print("العداد: "..counter)
    counter = counter + 1
end

-- repeat until (مثل do while)
local x = 1
repeat
    print(x)
    x = x + 1
until x > 5

الدوال (Functions)

-- تعريف دالة
function greet(name)
    return "مرحباً "..name.."!"
end

-- استدعاء الدالة
local message = greet("محمد")
print(message) -- "مرحباً محمد!"

-- الدوال المجهولة (Anonymous functions)
local add = function(a, b)
    return a + b
end

print(add(5, 3)) -- 8

الجداول (Tables)

الجداول في لوا هي بنية البيانات الأساسية وتستخدم كالمصفوفات والكائنات:

-- إنشاء جدول
local player = {
    name = "StarK",
    level = 50,
    inventory = {"مسدس", "راديو", "هاتف"}
}

-- الوصول للعناصر
print(player.name) -- "StarK"
print(player.inventory[1]) -- "مسدس"

-- إضافة عناصر جديدة
player.money = 1000
player.skills = {"برمجة", "تصميم"}

-- التكرار خلال الجدول
for key, value in pairs(player) do
    print(key..": "..tostring(value))
end

أمثلة FiveM API

-- إرسال حدث للعميل
TriggerClientEvent("chat:addMessage", -1, {args = {"[SYSTEM]", "مرحباً بالجميع!"}})

-- استقبال حدث من العميل
RegisterServerEvent("player:spawn")
AddEventHandler("player:spawn", function(playerId)
    print("لاعب جديد انضم! ID: "..playerId)
end)

-- إنشاء مركبة
local vehicle = CreateVehicle(GetHashKey("adder"), x, y, z, heading, true, false)

-- الحصول على اللاعبين
local players = GetPlayers()
for _, playerId in ipairs(players) do
    print("لاعب متصل: "..GetPlayerName(playerId))
end

أساسيات HTML

آخر تحديث: 15 مارس 2025 الصعوبة: 3/10

ما هي HTML؟

HTML (لغة ترميز النص الفائق) هي العمود الفقري لأي صفحة ويب. تستخدم لإنشاء هيكل الصفحة وتحديد عناصرها.

HTML ليست لغة برمجة، بل هي لغة ترميز (Markup) تستخدم لوصف محتوى الصفحة.

هيكل الصفحة الأساسي

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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>
    <!-- محتوى الصفحة -->
    <script src="script.js"></script>
</body>
</html>

العناصر الأساسية

<!-- العناوين -->
<h1>أهم عنوان</h1>
<h2>عنوان ثانوي</h2>
<h3>عنوان أصغر</h3>

<!-- الفقرات -->
<p>هذه فقرة نصية عادية.</p>

<!-- الروابط -->
<a href="https://example.com" target="_blank">زيارة الموقع</a>

<!-- الصور -->
<img src="image.jpg" alt="وصف الصورة">

<!-- القوائم -->
<ul>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
</ul>

<ol>
    <li>عنصر مرقم 1</li>
    <li>عنصر مرقم 2</li>
</ol>

<!-- النماذج -->
<form>
    <input type="text" placeholder="ادخل اسمك">
    <button type="submit">إرسال</button>
</form>

العناصر الهيكلية

<header>رأس الصفحة</header>
<nav>شريط التنقل</nav>
<main>المحتوى الرئيسي</main>
<section>قسم منفصل</section>
<article>مقال أو محتوى مستقل</article>
<aside>محتوى جانبي</aside>
<footer>تذييل الصفحة</footer>

<div>حاوية عامة</div>
<span>عنصر نصي صغير</span>

الجداول

<table>
    <thead>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>25</td>
        </tr>
        <tr>
            <td>محمد</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

أمثلة لواجهات FiveM

<!-- نموذج تسجيل الدخول -->
<div class="login-container">
    <h2>تسجيل الدخول</h2>
    <form id="loginForm">
        <input type="text" placeholder="اسم المستخدم" required>
        <input type="password" placeholder="كلمة المرور" required>
        <button type="submit">دخول</button>
    </form>
</div>

<!-- لوحة HUD -->
<div class="hud">
    <div class="health-bar">
        <div class="health-fill" style="width: 80%;"></div>
    </div>
    <div class="armor-bar">
        <div class="armor-fill" style="width: 50%;"></div>
    </div>
    <div class="money">$10,000</div>
</div>

أساسيات CSS

آخر تحديث: 15 مارس 2025 الصعوبة: 4/10

ما هي CSS؟

CSS (أوراق الأنماط المتتالية) هي لغة تستخدم لوصف مظهر وتهيئة وثائق HTML. تتحكم في الألوان، الخطوط، التباعد، والتخطيط.

CSS هي ما يجعل المواقع جميلة وجذابة. تعلمها جيداً سيمكنك من إنشاء واجهات مستخدم احترافية لسكربتات FiveM.

الصيغة الأساسية

selector {
    property: value;
    another-property: value;
}

تحديد العناصر (Selectors)

/* تحديد بالاسم */
h1 {
    color: blue;
}

/* تحديد بالكلاس */
.button {
    background: #08c2ff;
}

/* تحديد بالآيدي */
#header {
    padding: 20px;
}

/* تحديد متداخل */
.container .item {
    margin: 10px;
}

/* تحديد بالحالة */
button:hover {
    opacity: 0.8;
}

الخصائص الأساسية

/* النصوص */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #ffffff;
    text-align: right;
    line-height: 1.6;
}

/* الخلفيات */
.header {
    background-color: #121b20;
    background-image: url('bg.jpg');
    background-size: cover;
}

/* الأبعاد */
.container {
    width: 100%;
    max-width: 1200px;
    height: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* الحدود */
.button {
    border: 1px solid #08c2ff;
    border-radius: 5px;
}

/* التموضع */
.position-example {
    position: relative;
    top: 10px;
    left: 20px;
}

/* Flexbox */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

التحويلات والانتقالات

/* الانتقالات */
.button {
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* التحويلات */
.element {
    transform: rotate(15deg) scale(1.1);
}

/* الحركات */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.animated {
    animation: pulse 2s infinite;
}

أمثلة لواجهات FiveM

/* تصميم HUD */
.hud {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
    font-family: 'Arial', sans-serif;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.health-bar, .armor-bar {
    width: 200px;
    height: 20px;
    background: rgba(0,0,0,0.5);
    margin-bottom: 5px;
    border-radius: 10px;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    background: linear-gradient(to right, #e74c3c, #f39c12);
    transition: width 0.3s;
}

.armor-fill {
    height: 100%;
    background: linear-gradient(to right, #3498db, #08c2ff);
    transition: width 0.3s;
}

/* تصميم قائمة الجرد */
.inventory {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    border: 2px solid #08c2ff;
    border-radius: 10px;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.inventory-item {
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s;
}

.inventory-item:hover {
    background: rgba(8, 194, 255, 0.2);
    transform: scale(1.05);
}

أساسيات JavaScript

آخر تحديث: 15 مارس 2025 الصعوبة: 7/10

ما هي JavaScript؟

JavaScript هي لغة برمجة نصية تستخدم لإنشاء محتوى ديناميكي وتفاعلي في صفحات الويب. تستخدم في FiveM لإنشاء واجهات المستخدم التفاعلية.

JavaScript تختلف عن Lua! رغم تشابههما في بعض المفاهيم، إلا أن JavaScript لها بناء جملة وقواعد مختلفة.

المتغيرات وأنواع البيانات

// المتغيرات (ES6+)
let name = "StarK";    // يمكن تغيير القيمة
const age = 18;        // ثابت لا يتغير

// أنواع البيانات
const number = 42;         // رقم
const float = 3.14;        // رقم عشري
const text = "Hello";      // نص
const isTrue = true;       // قيمة منطقية
const person = {           // كائن
    name: "Ahmed",
    age: 25
};
const colors = ["red", "green", "blue"]; // مصفوفة
const empty = null;        // فارغ
const notDefined = undefined; // غير معرّف

العوامل والجمل الشرطية

// العمليات الحسابية
let sum = 10 + 5;    // 15
let sub = 10 - 5;    // 5
let mul = 10 * 5;    // 50
let div = 10 / 5;    // 2
let mod = 10 % 3;    // 1 (باقي القسمة)

// العمليات المنطقية
let and = true && false; // false
let or = true || false;  // true
let not = !true;         // false

// if statement
if (age >= 18) {
    console.log("أنت بالغ");
} else {
    console.log("أنت صغير");
}

// switch statement
switch (new Date().getDay()) {
    case 0:
        console.log("الأحد");
        break;
    case 1:
        console.log("الإثنين");
        break;
    // ... باقي الأيام
    default:
        console.log("يوم غير معروف");
}

الحلقات التكرارية

// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while loop
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

// for...of (للمصفوفات)
const colors = ["red", "green", "blue"];
for (const color of colors) {
    console.log(color);
}

// for...in (للكائنات)
const person = {name: "Ahmed", age: 25};
for (const key in person) {
    console.log(key + ": " + person[key]);
}

الدوال

// تعريف الدوال
function greet(name) {
    return "Hello " + name;
}

// الدوال السهمية (Arrow Functions)
const add = (a, b) => a + b;

// استدعاء الدوال
console.log(greet("StarK")); // "Hello StarK"
console.log(add(5, 3));      // 8

// الدوال المجهولة (Anonymous Functions)
document.addEventListener("click", function() {
    console.log("تم النقر!");
});

التعامل مع DOM

DOM (نموذج كائن المستند) هو تمثيل لصفحة HTML يمكن لـ JavaScript التفاعل معه:

// اختيار العناصر
const header = document.getElementById("header");
const buttons = document.querySelectorAll(".btn");
const firstParagraph = document.querySelector("p");

// تعديل المحتوى
header.textContent = "مرحباً بك!";
firstParagraph.innerHTML = "هذا نص جديد";

// تعديل الأنماط
header.style.color = "red";
header.style.fontSize = "24px";

// إضافة/إزالة الكلاسات
header.classList.add("active");
header.classList.remove("inactive");
header.classList.toggle("hidden");

// إنشاء عناصر جديدة
const newDiv = document.createElement("div");
newDiv.textContent = "عنصر جديد";
document.body.appendChild(newDiv);

// معالجة الأحداث
document.getElementById("myButton").addEventListener("click", function() {
    alert("تم النقر على الزر!");
});

أمثلة FiveM NUI

// إرسال بيانات إلى Lua
function sendDataToLua(data) {
    fetch(`https://${GetParentResourceName()}/eventName`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=UTF-8',
        },
        body: JSON.stringify(data)
    });
}

// استقبال بيانات من Lua
window.addEventListener('message', (event) => {
    const data = event.data;
    
    if (data.type === 'SHOW_HUD') {
        document.getElementById('hud').style.display = 'block';
        updateHealth(data.health);
        updateArmor(data.armor);
    }
});

// تحديث شريط الصحة
function updateHealth(percent) {
    const healthBar = document.getElementById('health-bar');
    healthBar.style.width = `${percent}%`;
    
    if (percent < 30) {
        healthBar.style.backgroundColor = '#e74c3c';
    } else {
        healthBar.style.backgroundColor = '#2ecc71';
    }
}

// إغلاق الواجهة
function closeUI() {
    document.getElementById('ui-container').style.display = 'none';
    sendDataToLua({action: 'close_ui'});
}

إعداد سيرفر FiveM/RedM

مسار التعلم

مقارنة بين لغات البرمجة

اللغة الصعوبة الاستخدام في FiveM الوقت المقدر للتعلم
Lua 6/10 برمجة السيرفر والعميل 2-3 أسابيع
HTML 3/10 هيكل الواجهات 1 أسبوع
CSS 4/10 تنسيق الواجهات 1-2 أسبوع
JavaScript 7/10 تفاعل الواجهات 3-4 أسابيع

نصائح للتعلم

  1. ابدأ بأساسيات لوا وHTML قبل الانتقال إلى JavaScript
  2. تدرب على بناء مشاريع صغيرة مثل:
    • نظام دردشة بسيط
    • لوحة HUD أساسية
    • نظام جرد مبسط
  3. استخدم أدوات التطوير في المتصفح (F12) لتصحيح الأخطاء
  4. شارك في مجتمعات FiveM/RedM لتلقي المساعدة
  5. اطلع على سكربتات مفتوحة المصدر لفهم كيفية عملها