بعض الدوال الأساسية في جافاسكربت ومعانيها

-


  • alert() - تعرض رسالة تنبيه للمستخدم.
  • console.log() - تطبع رسالة إلى وحدة التحكم (Console) في المتصفح.
  • setTimeout() - تؤجل تنفيذ دالة لفترة زمنية معينة.
  • setInterval() - تنفذ دالة بشكل متكرر بفواصل زمنية محددة.
  • clearTimeout() - تلغي مؤقت تم إنشاؤه باستخدام setTimeout().
  • clearInterval() - تلغي مؤقت متكرر تم إنشاؤه باستخدام setInterval().
  • Math.random() - ترجع رقم عشوائي بين 0 و 1.
  • Math.floor() - تقرب الرقم للأسفل إلى أقرب عدد صحيح.
  • parseInt() - تحول سلسلة نصية إلى عدد صحيح.
  • parseFloat() - تحول سلسلة نصية إلى رقم عشري.


  • JSON.stringify() - يحول كائن جافاسكربت إلى سلسلة نصية بصيغة JSON.

  • JSON.parse() - يحول سلسلة نصية بصيغة JSON إلى كائن جافاسكربت.
  • toString() - يحول قيمة إلى سلسلة نصية.
  • join() - يدمج عناصر المصفوفة في سلسلة نصية واحدة.
  • split() - يقسم سلسلة نصية إلى مصفوفة بناءً على فاصل محدد.
  • slice() - يُرجع جزءً محدداً من المصفوفة أو السلسلة النصية.
  • splice() - يضيف أو يزيل عناصر من المصفوفة.
  • map() - يُنشئ مصفوفة جديدة بتطبيق دالة على كل عنصر في المصفوفة الأصلية.
  • filter() - ينشئ مصفوفة جديدة تتضمن العناصر التي تحقق شرطاً معيناً.
  • reduce() - يدمج كل عناصر المصفوفة إلى قيمة واحدة بناءً على دالة تراكمية.


  • every() - يتحقق من أن جميع عناصر المصفوفة تحقق شرطاً معيناً.
  • some() - يتحقق من أن عنصر واحد على الأقل في المصفوفة يحقق شرطاً معيناً.
  • find() - يجد أول عنصر في المصفوفة يحقق شرطاً معيناً.
  • findIndex() - يُرجع فهرس أول عنصر يحقق شرطاً معيناً في المصفوفة.
  • forEach() - ينفذ دالة معينة على كل عنصر في المصفوفة.
  • push() - يضيف عنصرًا أو أكثر إلى نهاية المصفوفة ويعيد الطول الجديد للمصفوفة.
  • pop() - يزيل آخر عنصر من المصفوفة ويعيد هذا العنصر.
  • shift() - يزيل أول عنصر من المصفوفة ويعيد هذا العنصر.
  • unshift() - يضيف عنصرًا أو أكثر إلى بداية المصفوفة ويعيد الطول الجديد للمصفوفة.


  • concat() - يدمج مصفوفتين أو أكثر في مصفوفة جديدة.
  • indexOf() - يعيد الفهرس الأول الذي يتطابق مع القيمة المحددة في المصفوفة، أو -1 إذا لم يتم العثور على العنصر.
  • includes() - يتحقق مما إذا كانت المصفوفة تحتوي على عنصر معين.
  • sort() - يُرتب عناصر المصفوفة بترتيب تصاعدي أو بناءً على دالة مقارنة مخصصة.
  • reverse() - يعكس ترتيب عناصر المصفوفة.
  • fill() - يملأ جميع عناصر المصفوفة بقيمة ثابتة من فهرس بداية محدد إلى فهرس نهاية محدد.
  • keys() - يعيد كائنًا من نوع Array Iterator يحتوي على مفاتيح المصفوفة.
  • values() - يعيد كائنًا من نوع Array Iterator يحتوي على قيم المصفوفة.
  • entries() - يعيد كائنًا من نوع Array Iterator يحتوي على أزواج المفاتيح والقيم للمصفوفة.
  • from() - ينشئ مصفوفة جديدة من كائن مشابه للمصفوفة.


  • of() - ينشئ مصفوفة جديدة تحتوي على مجموعة من العناصر المحددة.
  • flat() - يسطح مصفوفة متعددة الأبعاد إلى بُعد واحد.
  • flatMap() - يجمع بين دالة map و flat في خطوة واحدة.
  • copyWithin() - ينسخ جزءًا من المصفوفة إلى مكان آخر في نفس المصفوفة دون تغيير طولها.
  • findLast() - يجد آخر عنصر في المصفوفة يحقق شرطًا معينًا.
  • findLastIndex() - يعيد فهرس آخر عنصر يحقق شرطًا معينًا في المصفوفة.
  • isNaN() - يتحقق مما إذا كانت القيمة "ليست رقمًا" (NaN).
  • Number() - يحول القيمة إلى رقم.
  • String() - يحول القيمة إلى سلسلة نصية.
  • Date() - يُنشئ كائن تاريخ وزمن.



  • getDate() - يُعيد اليوم من الشهر لكائن التاريخ.
  • getDay() - يُعيد اليوم من الأسبوع لكائن التاريخ.
  • getFullYear() - يُعيد السنة الكاملة لكائن التاريخ.
  • getHours() - يُعيد الساعة من كائن التاريخ.
  • getMinutes() - يُعيد الدقائق من كائن التاريخ.
  • getSeconds() - يُعيد الثواني من كائن التاريخ.
  • setDate() - يُعين اليوم من الشهر لكائن التاريخ.
  • setFullYear() - يُعين السنة لكائن التاريخ.
  • setHours() - يُعين الساعة لكائن التاريخ.
  • setMinutes() - يُعين الدقائق لكائن التاريخ.



  • setSeconds() - يُعين الثواني لكائن التاريخ.
  • toISOString() - يُحول كائن التاريخ إلى سلسلة نصية بصيغة ISO.
  • toLocaleDateString() - يُحول كائن التاريخ إلى سلسلة نصية بتنسيق محلي للتاريخ.
  • toLocaleTimeString() - يُحول كائن التاريخ إلى سلسلة نصية بتنسيق محلي للوقت.
  • includes() - يتحقق مما إذا كانت السلسلة النصية تحتوي على سلسلة نصية معينة.
  • replace() - يُستبدل جزءً من السلسلة النصية بسلسلة نصية أخرى.
  • trim() - يُزيل الفراغات البيضاء من بداية ونهاية السلسلة النصية.
  • charAt() - يُعيد الحرف في موضع محدد من السلسلة النصية.
  • charCodeAt() - يُعيد رمز ASCII للحرف في موضع محدد من السلسلة النصية.
  • substring() - يُعيد جزءً من السلسلة النصية بين فهرسين محددين.



  • toUpperCase() - يُحول جميع حروف السلسلة النصية إلى حروف كبيرة.
  • toLowerCase() - يُحول جميع حروف السلسلة النصية إلى حروف صغيرة.
  • match() - يُعيد مصفوفة تحتوي على كل النتائج المطابقة لنمط معين في السلسلة النصية.
  • search() - يُعيد فهرس أول نتيجة مطابقة لنمط معين في السلسلة النصية.
  • startsWith() - يتحقق مما إذا كانت السلسلة النصية تبدأ بسلسلة نصية معينة.
  • endsWith() - يتحقق مما إذا كانت السلسلة النصية تنتهي بسلسلة نصية معينة.
  • Promise.all() - ينفذ مجموعة من الوعود ويُعيد نتيجة واحدة عند إتمام جميع الوعود.
  • Promise.race() - يعيد أول وعد يتم تنفيذه سواء كان ناجحًا أو فاشلاً.
  • then() - يُنفذ عند إتمام الوعد بنجاح.
  • catch() - يُنفذ عند فشل الوعد.



  • finally() - يُنفذ بعد انتهاء الوعد سواء كان ناجحًا أو فاشلاً.
  • fetch() - يُستخدم لجلب البيانات من خادم ويب.
  • cloneNode() - ينشئ نسخة طبق الأصل من العقدة.
  • appendChild() - يُضيف عقدة كطفل إلى عقدة أخرى.
  • removeChild() - يُزيل عقدة طفل من عقدة أصل.
  • replaceChild() - يستبدل عقدة طفل بعقدة أخرى.
  • querySelector() - يُعيد أول عنصر يطابق المحدد CSS.
  • querySelectorAll() - يُعيد جميع العناصر التي تطابق المحدد CSS.
  • addEventListener() - يُضيف مستمع للأحداث إلى عنصر.
  • removeEventListener() - يُزيل مستمع للأحداث من عنصر.



  • stopPropagation() - يوقف انتشار الحدث عبر DOM.
  • preventDefault() - يمنع السلوك الافتراضي للحدث.
  • dispatchEvent() - يُطلق حدثًا على عنصر.
  • getBoundingClientRect() - يُعيد حجم وموقع عنصر بالنسبة إلى نافذة العرض.
  • requestAnimationFrame() - يُخبر المتصفح بتنفيذ دالة قبل الإطار التالي للرسوم المتحركة.
  • cancelAnimationFrame() - يُلغي طلب الرسوم المتحركة.
  • localStorage.setItem() - يُخزن بيانات في التخزين المحلي للمتصفح.
  • localStorage.getItem() - يُعيد بيانات من التخزين المحلي.
  • localStorage.removeItem() - يُزيل بيانات من التخزين المحلي.
  • localStorage.clear() - يُفرغ كل البيانات المخزنة في التخزين المحلي.



  • sessionStorage.setItem() - يُخزن بيانات في جلسة التخزين المؤقت للمتصفح.
  • sessionStorage.getItem() - يُعيد بيانات من جلسة التخزين المؤقت.
  • sessionStorage.removeItem() - يُزيل بيانات من جلسة التخزين المؤقت.
  • sessionStorage.clear() - يُفرغ كل البيانات المخزنة في جلسة التخزين المؤقت.
  • addClass() - يُضيف فئة CSS إلى عنصر.
  • removeClass() - يُزيل فئة CSS من عنصر.
  • toggleClass() - يُبدل وجود فئة CSS على عنصر.
  • ajax() - يُرسل طلب HTTP بطريقة غير متزامنة.
  • append() - يُضيف محتوى إلى نهاية عنصر.
  • prepend() - يُضيف محتوى إلى بداية عنصر.



  • fadeIn() - يُظهر عنصر مع تأثير التلاشي.
  • fadeOut() - يُخفي عنصر مع تأثير التلاشي.
  • slideUp() - يُخفي عنصر مع تأثير الانزلاق إلى الأعلى.
  • slideDown() - يُظهر عنصر مع تأثير الانزلاق إلى الأسفل.
  • serialize() - يُحول بيانات نموذج إلى سلسلة نصية قابلة للإرسال.
  • parseJSON() - يُحول سلسلة نصية بصيغة JSON إلى كائن.

تعليقات

إرسال تعليق

المشاركات الشائعة

ما هو JSX في React؟

-
  ما هو JSX في React؟ JSX  (JavaScript XML) هو امتداد لصياغة JavaScript يسمح لك بكتابة عناصر شبيهة بـ HTML داخل JavaScript. يتم تحويل JSX إلى استدعاءات دوال JavaScript بواسطة أدوات مثل Babel، مما يجعل كتابة واجهات المستخدم أكثر سهولة ووضوحًا. كيفية استخدام JSX إليك مثال بسيط لاستخدام JSX: const element = <h1> مرحبًا، عالم! </h1> ; في هذا المثال،   element   هو عنصر React يتم إنشاؤه باستخدام صياغة JSX. يمكن تضمين تعابير JavaScript داخل JSX باستخدام الأقواس المعقوفة   {} : const name = 'علي' ; const element = <h1> مرحبًا، {name}! </h1> ; فوائد استخدام JSX وضوح الكود : يجعل الكود أكثر وضوحًا وسهولة في القراءة، حيث يمكنك رؤية هيكلية HTML مباشرة داخل JavaScript. قوة JavaScript : يمكنك استخدام تعابير JavaScript داخل JSX، مما يمنحك مرونة كبيرة في بناء واجهات المستخدم. أخطاء أقل : يساعدك JSX على اكتشاف الأخطاء في وقت مبكر بفضل الرسائل التحذيرية المفيدة التي يوفرها. امتداد الملفات: js أو jsx؟ .js : يمكن استخدام هذا الامتداد لملفات JavaScript ال...
قراءة المزيد

مثال بسيط يوضح كيفية استخدام createContext و useContext لتمرير البيانات بين المكونات في React

-
  الخطوات الأساسية إنشاء السياق  باستخدام  createContext . توفير قيمة السياق  باستخدام  Provider . قراءة قيمة السياق  باستخدام  useContext . مثال عملي 1. إنشاء السياق أولاً، نقوم بإنشاء سياق جديد باستخدام  createContext . // ThemeContext.js import { createContext } from 'react' ; export const ThemeContext = createContext( 'light' ); 2. توفير قيمة السياق نقوم بلف المكونات في  Provider  لتوفير قيمة السياق. // App.js import React, { useState } from 'react' ; import { ThemeContext } from './ThemeContext' ; import Page from './Page' ; function App () {   const [theme, setTheme] = useState( 'dark' );   const toggleTheme = () => {     setTheme(( prevTheme ) => (prevTheme === 'dark' ? 'light' : 'dark' ));   };   return (     <ThemeContext.Provider value= {{ theme, toggleTheme }}>       <Page />     </ThemeContext.Provider>   ); } expor...
قراءة المزيد

مثال لتمرير مصفوفة عن طريق useState

-
مثال بسيط باستخدام React و useState لتمرير مصفوفة من الفواكه وعرضها في قائمة. كما سيمكن المستخدم من إضافة عناصر جديدة إلى القائمة. import React, { useState } from 'react' ; function FruitList () {   // تعريف حالة الفواكه   const [fruits, setFruits] = useState([ 'تفاح' , 'موز' , 'برتقال' ]);   const [newFruit, setNewFruit] = useState( '' );   // دالة لإضافة فاكهة جديدة إلى القائمة   const addFruit = () => {     if (newFruit.trim() !== '' ) {       setFruits([...fruits, newFruit]);       setNewFruit( '' ); // إعادة تعيين الحقل النصي     }   };   return (     <div>       <h1> قائمة الفواكه </h1>       <ul>         {fruits.map((fruit, index) => (           <li key= {index} > {fruit} </li>         ))}       </ul>       ...
قراءة المزيد

إضافة الأنماط في React

-
في React، تحدد فئة CSS باستخدام  className . تعمل هذه الطريقة بنفس طريقة خاصية  class  في HTML: <img className= "avatar" /> ثم تكتب قواعد CSS الخاصة بها في ملف CSS منفصل: /* في ملف CSS الخاص بك */ .avatar {   border-radius: 50 %; }   React لا يحدد كيفية إضافة ملفات CSS. في أبسط الحالات، يمكنك إضافة وسم   <link>   إلى HTML الخاص بك. إذا كنت تستخدم أداة بناء أو إطار عمل، فاستشر وثائقها لتتعلم كيفية إضافة ملف CSS إلى مشروعك.
قراءة المزيد

المكونات (Components) في React

-
  المكونات (Components) في React المكونات  هي اللبنات الأساسية لأي تطبيق React. يمكن اعتبارها كقطع صغيرة من واجهة المستخدم التي يمكن إعادة استخدامها وتجميعها لإنشاء واجهات مستخدم معقدة. كيفية استخدام المكونات إنشاء مكون : يمكنك إنشاء مكون كدالة أو كصف. إليك مثال لمكون كدالة: function Welcome ( props ) {   return <h1> مرحبًا، {props.name} </h1> ; } استخدام المكون : يمكنك استخدام المكون داخل مكونات أخرى: function App () {   return (     <div>       <Welcome name="علي" />       <Welcome name="فاطمة" />     </div>   ); } فوائد المكونات إعادة الاستخدام : يمكنك استخدام نفس المكون في أماكن متعددة في تطبيقك، مما يقلل من تكرار الكود. التنظيم : تقسيم واجهة المستخدم إلى مكونات صغيرة يجعل الكود أكثر تنظيماً وسهولة في الصيانة. الاختبار : يمكن اختبار كل مكون بشكل مستقل، مما يسهل اكتشاف الأخطاء وإصلاحها. الأداء : React يقوم بتحديث الأجزاء الضرورية فقط من واجهة المستخدم، مما يحسن الأداء. ا...
قراءة المزيد

ما هي Props في React؟

-
  ما هي Props؟ Props  هي اختصار لكلمة “Properties” وهي وسيلة لتمرير البيانات من مكون إلى آخر في React. تُستخدم props لتمكين المكونات من الوصول إلى بيانات مخصصة وقيم ومعلومات أخرى. كيفية استخدام Props لتمرير props إلى مكون، تقوم ببساطة بإضافتها كسمات عند استدعاء المكون. على سبيل المثال: function Greeting ( props ) {   return <h1> Hello, {props.name}! </h1> ; } function App () {   return <Greeting name= "Alice" /> ; } في هذا المثال، يتم تمرير قيمة  name  إلى مكون  Greeting ، والذي يستخدمها لعرض رسالة ترحيب مخصصة. المشكلة التي حلتها Props قبل ظهور props، كان من الصعب إعادة استخدام المكونات بنفس الطريقة. كان يجب عليك كتابة نفس الشيفرة مرارًا وتكرارًا مع تغييرات طفيفة. Props حلت هذه المشكلة عن طريق تمكين المكونات من أن تكون ديناميكية وقابلة لإعادة الاستخدام بسهولة. هل الأفضل استخدام Props أو البيانات من ملف بيانات مستقل؟ يعتمد ذلك على الحالة: استخدام Props : إذا كانت البيانات التي تحتاجها المكونات تأتي من مكون رئيسي أو تحتاج إلى أن تك...
قراءة المزيد

هيكلة المشروع في React

-
  عند إنشاء مشروع React باستخدام   create-react-app ، ستحصل على هيكلية ملفات مشابهة للتالي: my-app/ ├── node_modules/ ├── public/ │   ├── index.html │   └── ... ├── src/ │   ├── App.css │   ├── App.js │   ├── App.test.js │   ├── index.css │   ├── index.js │   ├── logo.svg │   └── ... ├── .gitignore ├── package.json ├── README.md └── ... شرح الملفات والمجلدات: node_modules/ : يحتوي على جميع الحزم والتبعيات التي تم تثبيتها بواسطة npm. public/ : يحتوي على الملفات الثابتة مثل  index.html  وأي ملفات أخرى تحتاج إلى الوصول إليها مباشرة. index.html : هذا هو الملف الرئيسي الذي يتم تحميله عند فتح التطبيق في المتصفح. لا يُنصح بتعديله إلا إذا كنت تعرف ما تفعله. src/ : يحتوي على جميع ملفات المصدر لتطبيقك. App.js : هذا هو المكون الرئيسي لتطبيقك. يمكنك تعديل هذا الملف لإضافة مكونات جديدة أو تعديل المكونات الحالية. index.js : هذا هو نقطة الدخول لتطبيقك. يقوم بربط المكونات بـ  index.html . لا يُنصح بحذف هذا الملف. App.css  و...
قراءة المزيد

الأمر npx create-react-app my-app

-
  الأمر   npx create-react-app my-app   يُستخدم لإنشاء تطبيق React جديد بسهولة وسرعة. دعني أشرح لك الخطوات والمفهوم: npx : هذه أداة تأتي مع npm (مدير حزم Node.js) بدءًا من الإصدار 5.2. تتيح لك تشغيل حزم npm دون الحاجة إلى تثبيتها عالميًا على جهازك. create-react-app : هذه حزمة تُستخدم لإنشاء تطبيقات React مع إعدادات جاهزة. توفر لك بيئة تطوير متكاملة دون الحاجة إلى إعدادات معقدة. my-app : هذا هو اسم المجلد الذي سيتم إنشاء التطبيق داخله. يمكنك اختيار أي اسم تريده. كيفية الاستخدام: افتح سطر الأوامر (Terminal). اكتب الأمر التالي واضغط Enter: npx create-react-app my-app انتظر حتى يتم إنشاء المشروع. ستلاحظ أنه تم إنشاء مجلد جديد باسم  my-app   يحتوي على جميع الملفات الضرورية لتشغيل تطبيق React. ماذا يحدث بعد ذلك؟ سيتم إنشاء هيكلية مشروع جاهزة تحتوي على ملفات مثل  index.html  و App.js  و package.json . سيتم تثبيت جميع التبعيات اللازمة مثل React وReact-DOM. يمكنك بدء تشغيل التطبيق باستخدام الأمر: cd my-app npm start لماذا يُستخدم؟ سهولة البدء : لا تحتاج إل...
قراءة المزيد

10 أمثلة على استخدام props في React

-
  1. تمرير نص كـ Prop function Greeting ( props ) {   return <h1> Hello, {props.name}! </h1> ; } // استخدام المكون <Greeting name= "Alice" /> شرح:  هنا نمرر النص “Alice” كـ  prop  إلى مكون  Greeting  ليظهر النص “Hello, Alice!”. 2. تمرير عدد كـ Prop function Age ( props ) {   return <p> You are {props.age} years old. </p> ; } // استخدام المكون <Age age={ 25 } /> شرح:  نمرر العدد 25 كـ  prop  إلى مكون  Age  ليظهر النص “You are 25 years old.”. 3. تمرير كائن كـ Prop function User ( props ) {   return <p> {props.user.name} is {props.user.age} years old. </p> ; } // استخدام المكون <User user={{ name: 'Bob' , age: 30 }} /> شرح:  نمرر كائن يحتوي على اسم وعمر المستخدم كـ  prop  إلى مكون  User . 4. تمرير مصفوفة كـ Prop function ItemList ( props ) {   return (     <ul>       {props.items.map((item, index) =>...
قراءة المزيد

تطبيق توليد لون عشوائي للصفحة في React

-
import React from 'react' ; // استيراد مكتبة React import Title from '../Title' ; // استيراد مكون Title من ملف آخر // مكون RandomColor لتغيير ألوان الخلفية عند النقر على الأزرار export default function RandomColor () {   // دالة handleClick لتغيير لون الخلفية ولون الزر الذي تم النقر عليه   function handleClick ( e ) {     console .log(getRandomColo()); // طباعة اللون العشوائي في الكونسول     let body = document .querySelector( "body" ); // الحصول على عنصر الجسم في الصفحة     body.style.background = getRandomColo(); // تعيين لون الخلفية للجسم بلون عشوائي     e.target.style.background = getRandomColo(); // تعيين لون خلفية الزر الذي تم النقر عليه بلون عشوائي   }   // دالة getRandomColo لتوليد لون عشوائي   function getRandomColo () {     let letters = '0123456789ABCDEF' ; // حروف وأرقام اللون الست عشري     let color = "#" ; // بداية الكود اللوني     for ( let i = 0 ; i < 6 ; i++) ...
قراءة المزيد