JavaScript ( الدرس التاسع ) : JS RegExp & JS HTML DOM

[twinkle]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته


عودا حميدا لفريقنا الفتي

أسأل الله تعالى أن يزيدنا علما ويباركه لنا وأن ينفعنا بما تعلمناه ... إنه على ذلك قدير


اليوم بإذن الله سنستكمل الجزئية الأخيرة من سلسلة دروس JS Objects وهما:

JS RegExp و JS HTML DOM

ووثم سنبدأ في سلسلة الدروس المتقدمة للغة جافاسكريبت JS Advanced


إذا واجهتكم صعوبات أو مشاكل فيمكنكم طرحها وتوضيحها ،، وبإذن الله سيكون لها وقت كافي لمناقشتها قبل البدء بالدرس الذي يليه


نحن هدفنا التعلم وفهم اللغة ،، لا إنهاء الدروس


فإلى الدرس

[twinkle]

JavaScript RegExp Object

يستخدم الكائن RegExp لتحديد ما الكلمة التي تريد البحث عنها في النص



=*=*=*=*=



ما هو RegExp ؟

الـ RegExp هو اختصار لجملة Regular Expresion

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


=*=*=*=*=


هناك نوعين من الباترن:

1) الباترن البسيط ، وهو الذي يتكون من محرف "Character" واحد (المحرف هم اسم يطلق على الحرف ، الرقم ، الرمز .... إلخ ويسمى باللغة الإنجليزية Character)
2) الباترن المعقد، وهو الذي يتكون من أكثر من محرف

كلما ازداد عدد المحارف كلما ازداد تعقد الباترن

الباترن المعقد يستعمـل للتحليل , المقـارنة , والتأكد من صحة المدخلات " Format checking " و الاستبدال , و غيــــرهــا ..~

يمكنك أن تحدد مكان النص الذي تريد لابحث عنه ، ونوع الرموز التي تبحث عنها وغيرها


=*=*=*=*=


تعريف الكائن RegExp

هو كائن يستخدم لحفظ باترن البحث (باترن البحث هو نموذج أو نسخة من الكلمة المراد البحث عنها)

يستخدم تعريف الكائن RegExp مع تعريف الباترن



=*=*=*=*=



الكود التالي يعرف الكائن المسمى بـ patt1 مع الباترن e

كود PHP:


var patt1=new RegExp("e");

When you use this RegExp object to search in a string, you will find the letter "e". 


كما هو الموضح في الكود، أعطي باترن للكائن patt1 وهو e ،، أي أن الباترن e هو النص المراد البحث عنه



=*=*=*=*=



طرق الكائن RegExp (الطرق هي نوع من أنواع الدوال)

للكائن RegExp 3 طرق:
1) test()
2) exec()
3) compile()



=*=*=*=*=



كيفية تعريف الكائن:

var اسم الكائن = new RegExp ("الباترن");


كيفية استخدام الطريقة:

اسم الكائن.اسم الطريقة ("النص");




=*=*=*=*=



1) test()

الطريقة test() تبحث عن قيمة محددة ، هل هي موجودة في النص أم لا
وتعود بـ True إن كانت موجودة أو False إن كانت غير موجودة


مثال

كود PHP:


var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 


حينما يكون الباترن e موجود داخل النص، ناتج الطريقة سيكون:

كود PHP:

true 


جربها بنفسك



=*=*=*=*=



2) exec()

الطريقة exec تبحث عن قيمة محددة في النص، وتعود بأول نتيجة تطابق الباترن
وإن لم تجد شيئا تعود بالقيمة الفارغة NULL

المثال الأول:

كود PHP:


var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free")); 


حينما يكون الباترن e موجود داخل النص، ناتج الطريقة سيكون:

كود PHP:

e 


جربها بنفسك



المثال الثاني:

يمكنك وضع معامل للكائن (بجوار الباترن "الحرف المراد البحث عنه") لتخصص بحثك أكثر.
مثلا،، حتى تجد جميع النتائج المطابقة للباترن (وليست أول نتيجة كما هو معروف للطريقة exec())، يمكنك استخدام المعامل g وهو يرمز إلى كلمة global (أي عالمي)


للحصول على قائمة متكاملة عن كيفية التعديل في صيغة البحث للحصول على إمكانيات أكبر، راجع الرابط التالي:

complete RegExp object reference


عند استخدام المعامل g ، فإن الطريقة exec() ستعمل بالشكل التالي:

* تبحث عن أول نتيجة تطابق الباترن، وتحتفظ بموقعه
* عند تشغيل الطريقة exec() مرة أخرى ستبدأ عملية البحث من الموقع المحفوظ (أي أن البحث لا يبدأ من البداية) لتبحث عن ثاني نتيجة تطابق فيها الباترن، ومن ثم تحتفظ بموقعه ، وهكذا ...

كود PHP:


var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null) 


عند تطبيق الكود السابق ستكون النتيجة هي:

كود PHP:

eeeeeenull 


جربها بنفسك



=*=*=*=*=


3) compile()

تستخدم الطريقة compile() لتغيير الباترن (الكلمة المراد البحث عنها) للكائن RegExp


الطريقة compile() يمكنها عمل:
1) تغير الباترن
2) إضافة باترن أو حذف باترن

أي أننا يمكننا عمل كائن RegExp واحد يبحث عن أكثر من باترن بدلا من أن نستخدم عدة كائنات RegExp للبحث عن عدة باترنات



مثال:

كود PHP:


var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free")); 


حينما يطبق الكود السابق، سنجد أن الباترن e موجود بينما الباترن d غير موجود، لذلك ستكون النتيجة:

كود PHP:

truefalse 


جربها بنفسك




=*=*=*=*=




Complete RegExp Object Reference

للحصول على المرجع الكامل لجميع الخصائص والطرق المستخدمة مع الكائن RegExp، راجع الرابط التالي:

complete RegExp object reference

المرجع يحتوي على شرح بسيط وأمثلة لكل خاصية وطريقة.

أي أننا تعرفنا اليوم على 3 طرق فقط تقوم بالبحث عن كلمة وتحدد إن كانت موجودة أم لا، وتظهرها إن كانت موجودة أو تظهر NULL في حال عدم جودها، أو تغير من الباترن في كل مرة

لكن هناك خصائص أكثر فائدة ومرونة مما تجعل عملية البحث أفضل ونتائجها أكثر فائدة،، وهي موجودة في الرابط أعلاه

[twinkle]

JavaScript HTML DOM Objects

إضافة إلى الكائنات الداخلية في الجافا سكريبت، يمكنك الوصول ومعالجة كل كائنات الـ HTML DOM بالجافا سكريبت


=*=*=*=*=


More JavaScript Objects

في الروابط التالية معلومات وشروحات أكثر بخصوص الكائنات ومجموعاتها وخصائصها والطرق والأحداث
(انقر على مسمى الكائن لتعرض شرحا أكثر تفصيلا له)

الكائن --------------> شرح الكائن
Window --------> هو الكائن الأعلى مستوى من هرم الجافا سكريبت. ويمثل كائن الـ Window المتحكم في المتصفح. كائن الـ Window يتم إنشاؤه تلقائيا لكل حالة من حالات الوسم <body> و <frameset>
Navigator ------> يحتوي على معلومات عن متصفح الزائر
Screen ----------> يحتوي على معلومات عن شاشة المتصفح
History ---------> يحتوي على الورابط التي تم زيارتها في متصفح النافذة
Location --------> يحتوي على معلومات عن الرابط الحالي


=*=*=*=*=


HTML DOM:

HTML DOM هو معيار W3C وهو اختصار لـ the Document Object Model for HTML

يعرف HTML DOM مجموعة معيارية (قياسية) لكائنات HTML، وطرق قياسية للوصول ومعالجة مستندات الـ HTML

جميع عناصر HTML، وماتحتويه من نصوص وخصائص، يمكنها الوصول خلال المعيار DOM
يمكن للمحتويات أن تحذف أو تعدل، ويمكن إن تنشأ عناصر HTML جديدة

HTML DOM لها اللغة ومنصة العمل (نوع نظام التشغيل) مستقلة



يمكن من خلال الروابط التالية الحصول على معلومات أكثر عن كيفية الوصول ومعالجة كل كائن DOM عن طريق الجافا سكريبت:
(انقر على مسمى الكائن لتعرض شرحا أكثر تفصيلا له)

الكائن ---------------> الشرح
Document -----> تشرح كل وثائق ومستندات الـHTML، ويمكن استخدامها للوصول إلى جميع عناصر الصفحة
Anchor ----------> تمثل عنصر الروابط <a>
Area --------------> تمثل عنصر المساحة <area> الموجودة في خريطة الصور
Base ----------> تمثل عنصر <base>
Body ----------> تمثل عنصر <body>
Button ----------> تمثل عنصر <button>
Event ----------> تمثل حالة العنصر
Form ----------> تمثل عنصر <form>
Frame ----------> تمثل عنصر <frame>
Frameset ----------> تمثل عنصر <frameset>
Iframe ----------> تمثل عنصر <iframe>
Image ----------> تمثل عنصر <img>
Input button ----------> تمثل الزر في نموذج HTML
Input checkbox ----------> تمثل مربع الخيار المتعدد في نموذج HTML
Input file ----------> تمثل إداة رفع الملفات في نموذج HTML
Input hidden ----------> تمثل الحقول المخفية في نموذج HTML
Input password ----------> تمثل حقل كلمة المرور في نموذج HTML
Input radio ----------> تمثل دائرة الخيار الوحيد في نموذج HTML
Input reset ----------> تمثل زر Reset في نموذج HTML
Input submit ----------> تمثل زر Submit في نموذج HTML
Input text ----------> تمثل حقل إدخال النص في نموذج HTML
Link ----------> تمثل عنصر <link>
Me ta ----------> تمثل عنصر <me ta>
Option ----------> تمثل عنصر <options>
Select ----------> تمثل قائمة الخيارات المنسدلة في نموذج HTML
Style ----------> تمثل جملة style مفردة
Table ----------> تمثل عنصر <table>
TableData ----------> تمثل عنصر <td>
TableRow ----------> تمثل عنصر <tr>
Textarea ----------> تمثل عنصر <textarea>





ملاحظة:
رابط الكائن me ta لا يعمل ،، لأنه يظهر هكذا:

كود PHP:

http://www.w3schools.com/htmldom/dom_obj_****.asp 


قوموا فقط بحذف النجوم واستبدالها بكلمة me ta (بدون مسافة)

[twinkle]

الواجب:

نريد استخراج جميع تكرارات حرف n فيما يلي:

mnmmnmmnmmmnmmmmmmnmmnmmmmnmmmnmmmnmmmmn mmmnmmmmn


فما هي أنسب طريقة من طرق الكائن RegExp لاستخراجها؟

اكتب الكود الذي يستخرج حروف الـ n من الجملة السابقة.

[أم يوسف]

وعليكم السلام ورحمة الله وبركاته..

جزاكم الله خيراً..

تمت القراءة وجاري الاستيعاب : )..

[twinkle]

بارك الله فيك وبإذن الله لن تطول مدة الاستيعاب =)

وإن كان هناك أي لبس أو صعوبة فأنتظرك

[S a R a]

جاري القراءة ..
جزيت الجنااان ..

[ريفــــــــــــــــان]

. .


ما شاء الله يبدو ممتعاً . .

بارك الله فيك . . تونكل

لي عودة بعد دراسته وحل الواجب . .

بإذن الله

. .

[أم يوسف]

الواجب..

كود PHP:

<html>
<body>
<script type="text/javascript"> 
var pat1=new RegExp("n","g");
do
{
result=pat1.exec("mnmmnmmnmmmnmmmmmmnmmnmmmmnmmmnmmmnmmmmn mmmnmmmmn");
document.write(result);
}
while(result!=null)
</script> 
</body>
</html> 


[twinkle]

جزاكم الله خيرا


ننتظر تطبيقكم





أ.أم يوسف،، وفقك الله ،،،

حل ممتاز

بوركتِ

[twinkle]

أين البقية ؟

إن كان هناك غموض أو إشكال فمستعدة لإعادة شرحه

[S a R a]

اسفة تونكل .. هاليومين انشغلت ان شاء الله بكرة اقرااه مرة ثانية بتمعن واحاول احل الواجب...

[twinkle]

بوركتِ أ.سارة

انتظر ردك وتطبيقك

[زهرة البيلسان]

المعذرة !

الايام الماضية كنت قمة في الانشغال !

لعلي أعود بعد ترتيب الوضع ..



شكراً توينكل ,

الله يجزاك الجنة ..

[twinkle]

وفقكِ الله

أنتظر عودتك وتطبيقك

[ريفــــــــــــــــان]

. .



بارك الله فيك . .

الواجب سهل جداً وممتع

كود PHP:

<html>
<body>
<script type="text/javascript"> 
var reevan=new RegExp("n","g");
do
{
result=reevan.exec("mnmmnmmnmmmnmmmmmmnmmnmmmmnmmmnmmmnmmmmn mmmnmmmmn");
document.write(result);
}
while(result!=null)
</script> 
</body>
</html> 


. .

[ريفــــــــــــــــان]

المشاركة الأصلية كتبت بواسطة twinkle يمكن من خلال الروابط التالية الحصول على معلومات أكثر عن كيفية الوصول ومعالجة كل كائن DOM عن طريق الجافا سكريبت: (انقر على مسمى الكائن لتعرض شرحا أكثر تفصيلا له) الكائن ---------------> الشرح Document -----> تشرح كل وثائق ومستندات الـHTML، ويمكن استخدامها للوصول إلى جميع عناصر الصفحة Anchor ----------> تمثل عنصر الروابط <a> Area --------------> تمثل عنصر المساحة <area> الموجودة في خريطة الصور Base ----------> تمثل عنصر <base> Body ----------> تمثل عنصر <body> Button ----------> تمثل عنصر <button> Event ----------> تمثل حالة العنصر Form ----------> تمثل عنصر <form> Frame ----------> تمثل عنصر <frame> Frameset ----------> تمثل عنصر <frameset> Iframe ----------> تمثل عنصر <iframe> Image ----------> تمثل عنصر <img> Input button ----------> تمثل الزر في نموذج HTML Input checkbox ----------> تمثل مربع الخيار المتعدد في نموذج HTML Input file ----------> تمثل إداة رفع الملفات في نموذج HTML Input hidden ----------> تمثل الحقول المخفية في نموذج HTML Input password ----------> تمثل حقل كلمة المرور في نموذج HTML Input radio ----------> تمثل دائرة الخيار الوحيد في نموذج HTML Input reset ----------> تمثل زر Reset في نموذج HTML Input submit ----------> تمثل زر Submit في نموذج HTML Input text ----------> تمثل حقل إدخال النص في نموذج HTML Link ----------> تمثل عنصر <link> Me ta ----------> تمثل عنصر <me ta> Option ----------> تمثل عنصر <options> Select ----------> تمثل قائمة الخيارات المنسدلة في نموذج HTML Style ----------> تمثل جملة style مفردة Table ----------> تمثل عنصر <table> TableData ----------> تمثل عنصر <td> TableRow ----------> تمثل عنصر <tr> Textarea ----------> تمثل عنصر <textarea>

هذا الجزء مهم جداً جداً . .

يعطي المبرمج حرية أكبر في التعديل على الموقع . .

يحتاج دراسة بتركيز . .

. .

[twinkle]

بارك الله فيكم أ.ريفان

حل متميز



أعلم بأن الجزئية الثانية مهمة جدا

بل وتحتاج إلى عدة دروس لشرح كل أمر فيه وتفصيله

حيث أن كل أمر تندرج تحته عدة أوامر،، وهذه الأوامر تزيد من تحكم المبرمج بالصفحة بشكل قوي


وأرى فيها قوة الجافاسكريبت


لعل بالعمر بقية بإذن الله لنفصل فيها ولو لأهم الأوامر

[ريفــــــــــــــــان]

،
--------

بارك الله فيك .. ما قصرتِ

قصدت لو تكون دراسة ذاتيّة كل طالب مع نفسه . .

يحاول فهمها والتجربة بالأمثلة . .

ثم إذا حان وقت المشروع نعود لمراجعتها معاً . .

--------

[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[الهدهده]

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

حل الواجب :

كود PHP:

<html>
<body>

<script type="text/javascript">
var str = "mnmmnmmnmmmnmmmmmmnmmnmmmmnmmmnmmmnmmmmnmmmnmmmmn";
var patt = new RegExp("n","g");
do
{
var result = patt.exec(str);
document.write(result);
}while(result!=null)

</script>

</body>
</html> 


واستخدمت الطريقة الأخرى في تعريق كائن RegExp كما في الموقع (زيادة شطارة )

كود PHP:

<html>
<body>

<script type="text/javascript">
var str = "mnmmnmmnmmmnmmmmmmnmmnmmmmnmmmnmmmnmmmmnmmmnmmmmn";
var pat=/n/g;
do
{
var result = pat.exec(str);
document.write(result);
}while(result!= null)

</script>

</body>
</html> 


ولي عودة إذا اشكل علينا شي أ.تونكل