152- دروس جافا سكربت – تدريب على امثله – JS Examples For HTML Input

## أمثلة JavaScript لتعامل مع عناصر HTML Input

تُعتبر JavaScript واحدة من أكثر اللغات شيوعًا لتطوير الويب، حيث تُستخدم لإنشاء تفاعلات ديناميكية على صفحات الويب. واحدة من الاستخدامات الرئيسية لـ JavaScript هي التعامل مع عناصر الإدخال (Input) في HTML. في هذا المقال، سنقوم بشرح كيفية التعامل مع هذه العناصر باستخدام JavaScript مع تقديم أمثلة متعددة توضح [شركة برمجة مصرية] كيفية تحقيق ذلك.

### 1. الوصول إلى عناصر الإدخال

أول خطوة للتعامل مع عناصر الإدخال هي الوصول إليها. يمكننا الوصول إلى عناصر الإدخال باستخدام [شركة برمجة مصرية] عدة طرق مثل `getElementById`، `getElementsByClassName`، و `querySelector`.

#### مثال:

“`html

Show Input Value

function showInputValue() {
var inputElement = document.getElementById(‘myInput’);
alert(inputElement.value);
}

“`

في المثال أعلاه، نقوم بالوصول إلى عنصر الإدخال باستخدام `getElementById` ومن ثم عرض قيمته عند الضغط على الزر.

### 2. التحقق من صحة البيانات

يمكن استخدام JavaScript للتحقق من صحة البيانات المدخلة من قبل المستخدم قبل إرسالها إلى الخادم.

#### مثال:

“`html

function validateForm() {
var username = document.getElementById(‘username’).value;
if (username === “”) {
alert(“Username must be filled out”);
return false;
}
return true;
}

“`

في هذا المثال، نتحقق مما إذا كان حقل اسم المستخدم فارغًا قبل إرسال النموذج.

### 3. تغيير قيمة الإدخال برمجيًا

يمكنك تغيير قيمة عناصر الإدخال برمجيًا باستخدام JavaScript.

#### مثال:

“`html

Change Name

function changeInputValue() {
var inputElement = document.getElementById(‘nameInput’);
inputElement.value = “Jane Doe”;
}

“`

في هذا المثال، يتم تغيير قيمة الإدخال بشكل برمجي عند الضغط على الزر.

### 4. التعامل مع أحداث الإدخال

يمكنك استخدام JavaScript للاستماع إلى أحداث الإدخال مثل `onchange` و `oninput` للتفاعل مع المستخدمين أثناء إدخالهم للبيانات.

#### مثال:

“`html

function validateEmail() {
var email = document.getElementById(’emailInput’).value;
var message = document.getElementById(‘message’);
if (email.includes(‘@’)) {
message.textContent = “Valid email”;
message.style.color = “green”;
} else {
message.textContent = “Invalid email”;
message.style.color = “red”;
}
}

“`

في المثال أعلاه، نقوم بالتحقق من صحة البريد الإلكتروني أثناء كتابة المستخدم باستخدام الحدث `oninput`.

### الخاتمة

تعامل JavaScript مع عناصر الإدخال في HTML يُعد جانبًا أساسيًا من تطوير واجهات المستخدم التفاعلية. سواء كان ذلك للوصول إلى القيم، أو التحقق من صحة البيانات، أو تغيير القيم برمجيًا، أو التعامل مع الأحداث، فإن JavaScript توفر لك الأدوات اللازمة لتقديم تجربة مستخدم غنية ومتكاملة.