JavaScript هي لغة نصية حرفية ، وهي لغة ديناميكية وضعيفة قائمة على النموذج الأولي مع أنواع دعم مدمجة. يسمى مترجمها محرك JavaScript. إنه جزء من المتصفح ويستخدم على نطاق واسع في لغة البرمجة النصية العميل. تم استخدامه لأول مرة على HTML (تطبيق تحت لغة الترميز العالمي القياسية) صفحات الويب لإضافة وظائف ديناميكية إلى صفحات الويب HTML.
جمعت هذه المقالة 5 رمز JavaScript العملي للجميع لتسهيل التطوير.
1. تحديد ما إذا كان التاريخ صالحًا
لا تزال وظيفة التاريخ المدرجة في JavaScript بسيطة للغاية ، ومن الصعب تلبية احتياجات تحليل تنسيقات تاريخ مختلفة والحكم عليها في مشاريع حقيقية. لدى JQuery أيضًا مكتبات طرف ثالث لجعل المعالجة المتعلقة بالتاريخ بسيطة ، ولكن في بعض الأحيان قد تحتاج فقط إلى وظيفة بسيطة للغاية دون تقديم مكتبة ضخمة من طرف ثالث. في هذا الوقت ، يمكنك استخدام رمز التحقق من التاريخ التالي ، والذي يسمح لك بتخصيص تنسيق التاريخ والتحقق من صحة التاريخ.
وظيفة isValidDate (القيمة ، userformat) {// تعيين التنسيق الافتراضي إذا لم يتم توفير تنسيق userFormat = userFormat || 'mm/dd/yyyy' ؛ // العثور على محدد مخصص عن طريق استبعاد // أحرف الشهر واليوم والسنة var delimiter =/budap^mdy/.exec(userformat budap0] ؛ // قم بإنشاء صفيف مع الشهر واليوم والسنة // حتى نعرف ترتيب التنسيق بواسطة index var theformat = userFormat.split (delimiter) ؛ // إنشاء صفيف من تاريخ المستخدم var thedate = value.split (delimiter) ؛ وظيفة isDate (التاريخ ، التنسيق) {var m ، d ، y ، i = 0 ، len = format.length ، f ؛ لـ (i ؛ i <len ؛ i ++) {f = format [i] ؛ if (/m/.test(f)) m = date [i] ؛ if (/d/.test(f)) d = date [i] ؛ if (/y/.test(f)) y = date [i] ؛ } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // تحقق مما إذا كان يومًا صالحًا من الشهر d <= date (y ، m ، 0)). getDate ()) ؛ } إرجاع isdate (thedate ، theformat) ؛}كيفية استخدام:
تعيد المكالمة التالية كاذبة لأنه لا يوجد 31 يومًا في نوفمبر
isvaliddate ('DD-MM-Yyyy' ، '31/11/2012 ')
2. احصل على أقصى عرض أو ارتفاع مجموعة من العناصر
الوظيفة التالية مفيدة للغاية للمطورين الذين يحتاجون إلى إجراء تخطيط ديناميكي.
var getMaxHeight = function ($ elms) {var maxheight = 0 ؛ $ elms.each (function () {// في بعض الحالات قد ترغب في استخدام Outerheight () بدلاً من ذلك var height = $ (this) .hight () ؛ if (height> maxheight) {maxheight = height ؛}}) ؛ إرجاع maxheight ؛} ؛كيفية استخدام:
$ (عناصر) .hight (getMaxHeight ($ (عناصر))) ؛
3. تسليط الضوء على النص
هناك العديد من مكتبات JQuery من طرف ثالث يمكنها تنفيذ وظيفة تسليط الضوء على النص ، لكنني أفضل استخدام جزء صغير من رمز JavaScript لتنفيذ هذه الوظيفة. إنه قصير جدًا ويمكن تعديله بمرونة وفقًا لاحتياجاتي ، ويمكنك تحديد أسلوب تسليط الضوء بنفسك. يمكن أن تساعدك وظيفتان التاليتان على إنشاء مكون إضافي لتسليط الضوء على النص الخاص بك.
تمييز الوظيفة (النص ، الكلمات ، العلامة) {// العلامة الافتراضية إذا لم يتم توفير علامة tag = tag || 'فترة'؛ var i ، len = words.length ، re ؛ لـ (i = 0 ؛ i <len ؛ i ++) {// global regex لتسليط الضوء على جميع المطابقات re = new regexp (الكلمات [i] ، 'g') ؛ if (re.test (text)) {text = text.replace (re ، '<' + tag + '> $ & </' + tag + '>') ؛ }} نص الإرجاع ؛}ستحتاج أيضًا إلى عدم وجود وظائف عالية الضوء:
دالة uniGlight (نص ، علامة) {// العلامة الافتراضية إذا لم يتم توفير علامة tag = علامة || 'فترة'؛ var re = new regexp ('(<'+tag+'.+؟> | <//' tag+'>)' ، 'g') ؛ إرجاع text.replace (Re ، '') ؛}كيفية استخدام:
$ ('p'). html (تسليط الضوء ($ ('p'). html () ، // the text ['foo' ، 'bar' ، 'baz' ، 'hello world'] ، // list للكلمات أو العبارات لتسليط الضوء على 'strong' // custom tag)) ؛4. تأثير حركة النص
في بعض الأحيان تريد إضافة حركة إلى فقرة من النص الخاص بك بحيث يمكن أن تتحرك كل كلمة. يمكنك استخدام رمز المكونات الإضافية التالية لتحقيق هذا التأثير. بالطبع تحتاج إلى الجمع بين نمط انتقال CSS3 لتحقيق نتائج أفضل.
دولار. var letters = text.split ('') ؛ return this.each (function () {var $ this = $ (this) ؛ $ this.html (text.replace (/./ g ، '<span> $ & </span>')) ؛ $ this.find ('span.tleter'). كل (i ، el) {setTimeout (function () {el) }) ؛كيفية استخدام:
$ ('p'). AnimateText (15 ، 'foo') ؛
5. إخفاء العناصر واحدة تلو الأخرى
يمكن لمكون jQuery التالي إخفاء مجموعة من العناصر واحدة تلو الأخرى وفقًا لطول الخطوة (وقت الفاصل) الذي قمت بتعيينه. المستخدمة في إعادة تحميل عناصر قائمة يمكن أن تحقق نتائج جيدة.
$ .fn.fadeall = function (ops) {var o = $ .extend ({delay: 500 ، // delay بين العناصر السرعة: 500 ، // الرسوم المتحركة سهولة: 'swing' var $ el = this ؛ لـ (var i = 0 ، d = 0 ، l = $ el.length ؛ i <l ؛ i ++ ، d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed ، o.ease) ؛ } إرجاع $ el ؛}كيفية استخدام:
$ (عناصر) .fadeall ({تأخير: 300 ، السرعة: 300}) ؛
ما سبق هو مجرد جزء صغير من مقتطفات رمز JavaScript العملية ، وآمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.