حازم خالد » JavaScript http://www.HazemKhaled.com أوراق خاصة Tue, 26 Jul 2011 07:48:27 +0000 ar hourly 1 http://wordpress.org/?v=3.3.1 دورة جافا سكريبت .. مفجأة http://www.HazemKhaled.com/blog/%d8%af%d9%88%d8%b1%d8%a7%d8%aa-%d8%aa%d8%af%d8%b1%d9%8a%d8%a8%d9%8a%d8%a9-%d9%83%d9%88%d8%b1%d8%b3%d8%a7%d8%aa/%d8%af%d9%88%d8%b1%d8%a9-%d8%ac%d8%a7%d9%81%d8%a7-%d8%b3%d9%83%d8%b1%d9%8a%d8%a8%d8%aa-%d9%85%d9%81%d8%ac%d8%a3%d8%a9 http://www.HazemKhaled.com/blog/%d8%af%d9%88%d8%b1%d8%a7%d8%aa-%d8%aa%d8%af%d8%b1%d9%8a%d8%a8%d9%8a%d8%a9-%d9%83%d9%88%d8%b1%d8%b3%d8%a7%d8%aa/%d8%af%d9%88%d8%b1%d8%a9-%d8%ac%d8%a7%d9%81%d8%a7-%d8%b3%d9%83%d8%b1%d9%8a%d8%a8%d8%aa-%d9%85%d9%81%d8%ac%d8%a3%d8%a9#comments Sat, 03 Oct 2009 02:50:14 +0000 حازم خالد http://www.HazemKhaled.com/?p=581 سبق وحاضرت في دورة جافا سكريبت وكانت تجربة جيدة بالنسبة لي رغم أن الدورة كانت بدائية إلى حدٍ ما بسبب قدراتي المتواضعة في هذه اللغة، ولكن هذه المرة الدورة مختلفة فهي اهداء اولاً لكل من يحصل على 80% من دورة الـ PHP الجديدة بالإضافة لأمتيازات اخرى لكل من حضر معي دورات من قبل.

بالتاكيد التسجيل سيكون متاح لكل من يحب ولكن هناك امتيازات لطلاب دورة الـ PHP التي ستقام قريباً بخصم 100% من تكلفة الدورة، وكذلك خصم 25% لكل من تدرب او حضر دوراتي من قبل.

الدورة هي دورة jQuery في الأصل ولكن على المتدرب التعرف على أساسيات الجافا سكريبت اولاً بالتاكيد لكي يدرك ماذا تفعل ال jQuery، واتوقع ان تكون في حدود 10 ساعات فقط ومقسمين على 3 او 4 محاضرات وهذا حسب المنهج، وستكون فور انتهاء دورة ال PHP القادمة بإذن الله.

أبدأ بوضع المنهج الذي درسته في دورة الجافا سكريبت الوحيدة التي أقمتها من اقل من عام ويمكنك الأطلاع عليها من هنا، واتمنى مشاركتك بأقتراحاتك لهذه الدورة او ملاحظاتك على المنهج المقترح.

]]> http://www.HazemKhaled.com/blog/%d8%af%d9%88%d8%b1%d8%a7%d8%aa-%d8%aa%d8%af%d8%b1%d9%8a%d8%a8%d9%8a%d8%a9-%d9%83%d9%88%d8%b1%d8%b3%d8%a7%d8%aa/%d8%af%d9%88%d8%b1%d8%a9-%d8%ac%d8%a7%d9%81%d8%a7-%d8%b3%d9%83%d8%b1%d9%8a%d8%a8%d8%aa-%d9%85%d9%81%d8%ac%d8%a3%d8%a9/feed 7 jQuery 1.3 http://www.HazemKhaled.com/blog/javascript/jquery-13 http://www.HazemKhaled.com/blog/javascript/jquery-13#comments Thu, 29 Jan 2009 01:16:45 +0000 حازم خالد http://www.HazemKhaled.com/?p=380 فرق سرعة كبير بينها وبين 1.2.6، ويمكنك ملاحظته في بمجرد أستخدام بعض الأكواد التي تثقل المتصفح وستلاحظ سرعتها بأستخدامك 1.3

هناك حدثين رائعين جدد تم أضافتهم وهما live و die

live
عادتاً تقوم بوضع أكوادك حدث ready للـ document وبالتالي يتم تنفيز الأكواد للكائنات المتوادة بصفحتك الأن، وبالتالي إذا قمت بتكوين كائن جديد بالصفحة فهو لا يأخذ أي صفة من التي اعطتها له في السطر السابق، لأن لسطر السابق تم تنفيزه وبعدها تكون هذا العنصر، ولكن مع live فيمكنك أن عطي حدث لكل عنصر يتكون حتى بعد طلب اعطاء هذ الحدث.

يعني أيه !!
يعني أنت عادتاً بتكتب كودك هنا

1
2
3

$(document).ready(function($) {
	// هنا الكود
})

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

1
2
3
4
5
6
7

$(document).ready(function($) {
	$('label:last input').keypress(function(){
		if ($('label:last input').val().length > 0){// لو أخر عنصر في هذه الحقول متوب فيه
			$('label:last input').after('<label><input name="data[]" type="text" /></label>'); // يقوم بتكوين حقل جديد فاضي بعدهم
		}
	})
})

وهو لو في مجموعة حقول وتريد إذا قام الزائر بالكتابة بهم ووصل لأخرهم وكتب به أن يقوم المتصفح بتكوين حقل جديد ليكتب به وكذلك كلما قام بملئ أخر حقل فيقوم بتكوين حقل جديد

المشكلة الان أن الحقل الجديد لن يأخذ الصفات المسجلة لغيره بأنه عند الكتابة به يقوم بمراجعة أخر حقل ولو مش خالي يتم تكوين حقل جديد، لان هذا الكود تم تنفيذه في $(document).ready وهو تكون بعدها !!، وهذا هو الكود الجديد بواسطة live

1
2
3
4
5
6
7

$(document).ready(function($) {
	$('label:last input').live('keypress', function(){
		if ($('label:last input').val().length > 0){// لو أخر عنصر في هذه الحقول متوب فيه
			$('label:last input').after('<label><input name="data[]" type="text" /></label>'); // يقوم بتكوين حقل جديد فاضي بعدهم
		}
	})
})

وهذه خاصية رائعة، كذلك هناك die وهي تقوم بالغاء حدث من كائن "removes a bound live event"

راجع live وأيضاً die

]]> http://www.HazemKhaled.com/blog/javascript/jquery-13/feed 1 دورة جافا سكريبت http://www.HazemKhaled.com/blog/javascript/cours http://www.HazemKhaled.com/blog/javascript/cours#comments Sat, 29 Nov 2008 10:56:05 +0000 حازم خالد http://www.HazemKhaled.com/?p=284 بسم الله في أنشغالي وضغطتي قبل السفر أعطيت دورة جافا سكريبت أتكونت من حوالي 8 ساعات أو أكثر على يومين (يفضل أن لا تقل عن 15 ساعة).

الدورة لبعض موظفي مكتب شركة web.com.sa بالقاهرة،كانو 3 موظفين أحدهم مصمم (عند دراية كافية ببعض المفاهيم البرمجية وقدر ليس بالقليل من الكود) و 2 مبرمجين PHP.

وكان الهدف من الدورة هو الأطلاع على كيفية أستخدام jQuery للتعامل مع الـ Ajax والتأثيرات.

طبعاً كان من الطبيعي بعد المقدمة بالحديث عن ال Browser Engines الموجودة مثل Gecko, WebKit أن نتحدث عن عدم قياسية الجافا سكريبت و سعي مؤسسة ecma للأنتهاء من تطوير معايرها -التي من الواضح انها لن تنتهي منها- وكانت البداية من أول أساسيات الـ JavaScript ومن أول المتغيرات مروراً بالمصفوفات والدوال إلى أن أطلعنا على يعض ملامج الكائنات وبالأطلاع على بعض الكائنات مثل screen, document, window ….. etc وطبعاً بالتطبيق على بعض العمليات والأحداث Events .

أما بالنسبة للـ jQuery فكان من الطبيعي الحديث عن فائدة أستخدام مكتبة مساعدة في الأصل أشارة إلى أهم المكتبات الموجودة بداية YUI و Prototype إلى MooTools ثم البدئ في jQuery حيث أنها الأذكى والأقل كود بين هؤلاء.

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

]]> http://www.HazemKhaled.com/blog/javascript/cours/feed 2 الأحداث في الجافا سكريبت events http://www.HazemKhaled.com/blog/javascript/events-in-java-script http://www.HazemKhaled.com/blog/javascript/events-in-java-script#comments Tue, 13 Mar 2007 01:42:24 +0000 حازم خالد http://hazemkhaled.com/%d8%b9%d8%a7%d9%85/events-in-java-script السلام عليكم

بعد ساعتين تقريباً من كتابة أكواد JavaScript والأندماج مع الأحداث event – إن صحة التسمية – فأحببت تسجيل بعض منهم.

المقصود بحدث : مثلاً onClick أو ondblclick أو ….

الفائدة من الأحداث : هي تعبر أساس أجراء عمليات الـJavaScript فمثلاً لو أحببنا نظهر رسالة "مرحباً بك أيها الزائر" فسنسنتخدم الدالة alert وهي دالة لها مدخل واحد وهو الرسالة؛.

أين أستخدام الأحداث إذاً؟
سوف أبلغك … لعرض هذه الرسالة عند بداية تحميل الصفحة فسنستخدم الحدث onLoad في تاج body بالشكل الأتي :-
<body onLoad="alert('مرحباً بك')">

اما لعرضه عند الضغط على زر أرسال مثلاً

&lt;input type=&quot;submit&quot; onClick=&quot;alert('مرحباً بك')&quot; /&gt;

بعض الأحداث وفائدتها
onLoad : في بداية ظهور الصفحة أو الكائن المستخدم معه هذا الحدث ويمكن أستخدامه مع (body و frame و frameset و iframe و img و link و script)
onUnload : مثل السابق ولكن في النهاية بدل البداية … مثال
<body onUnload="alert('شكراً لزيارتك موقعنا')">
onError : يمكن أستخدامه في الBody أيضاً لعمل حدث معين لو حدث خطأ أو مع الصور أيضاً … مثال :-
<img src="image.gif" onerror="alert('The image could not be loaded.')" />
onResize : تنفذ عند تغير حجم الصفحة أو الكائن … مثال
<body onresize="alert('أوعى تحرك المحطة :S')">
onClick : عند الضغط على الكائن
ondblclick : عن الضغط مرتين على الكائن
onFocus : عند الوصول للكائن بالماوس او بأستخدام زر Tab
onkeyPress :عند الكتابة داخل هذا الكائن
onkeydown , onkeyup : أعتقد هذا مثال أفضل من الشرح
onmousedown , onmouseup : نفس وضيفة الالحدثين السابقين ولكن بأستخدام الـMouse أما السابقين لأزرة الـKeyWord
onMousemove , onMouseover : عند المرور على الكائن
onMouseout : عند خروج الـMouse من حيز الكائن
onReset : عند الضغط على زر reset داخل النموذج Form … المثال بعد التالي
onSubmit : عند الضغط على زر Submit او القيام بتنفيز الأرسال بأي طريقة … مثال
<body onreset="return confirm('سيتم تصفير الفورم')">
<body onsubmit="return confirm('متأكد')">
onSelect : تستخدم مع التاجات(Input و TextArea) وهي تنفز عند التعليم على الكلام بداخل أحد التاجين
onchange : وتستخدم عادتاً مع القوائم المنسدلة (Select) ولكن يمكن أستخدامها أيضاً مع (input type=text و textarea)
مثال بسيط
<input type="text" onchange="this.value = this.value.toUpperCase()" />

تحديث 21-3-2007 : تم تثبيت الموضوع بسوالف سوفت .

]]> http://www.HazemKhaled.com/blog/javascript/events-in-java-script/feed 8 ما هي WYSIWYG http://www.HazemKhaled.com/blog/javascript/%d9%85%d8%a7-%d9%87%d9%8a-wysiwyg http://www.HazemKhaled.com/blog/javascript/%d9%85%d8%a7-%d9%87%d9%8a-wysiwyg#comments Mon, 13 Nov 2006 09:12:08 +0000 حازم خالد http://hazemkhaled.com/%d8%b9%d8%a7%d9%85/what-is-wysiwyg/ 1- ما هي هذه الأداة

هي أداة عادة ما تكون مبرمجة بالـJava Script أو بالـActivex و أحياناً تستخدم DHTML معهم ولكل منهم مميزات وعيوب سنتطرق لها في باقي المحاضرة بإذن الله, ووظيفتها أن تسهل على المستخدم عملية التنسيق على المقال أو النص المدخل.

2- ما فائدتها

ببساطة جداً عندما تقوم بكتابة البريد الإلكتروني من موقع Yahoo مثلاً أو Hotmail ستجد أنه من السهل جداً عملية التنسيق للرسالة التي تقوم بكتابتها فمثلاً إذا قمت بعمل توسيط للكلمة فتجد أن التوسيط قد تم تنفيزه أمامك بالفعل وهذا على العكس من برامج البريد المرفقة مع الـCpanel أو مثلاً الكتابة بالمنتديات فهي تستخدم ما يسمى بـBBCODE .

وللتقريب أكثر فعند استخدامك لبرنامج MS FrontPage فستجد أنك عند تنسيقك للصفحة بأي حال يقوم هو بتحويلها إلى كود HTML وهذه هي وظيفة هذه التقنية وهو تحويل ما تراه إلى كود HTML وهذا يسهل ويجمل طريقة الإضافة والعرض ولهذا كانت هي اختصار لـ What You See Is What You Get .

3- مميزاتها

- سهولة عرض البيانات المدخلة : البيانات أو المقالات المدخلة ستكون سهلة المعالجة عند عرضها حيث أنها تكون HTML وبالتالي لا تحتاج لأي معالجة من دالة nl2br أو غيرها.

- عدم معالجة البيانات عند إدخالها : البيانات المدخلة تكون HTML فبالتالي لن تستخدم دالة تمنع أكواد الـHTML وهذه الأشياء وهذا يعتبر عيب أكثر من انها ميزة.

4- عيوبها

- Activex : تحتاج للموافقة على تركيب أداة معينة لدعم المتصفح لهذه الخاصية وبالتالي يخاف الكثير من هذه الأداة بالأضافة أنها لا تعمل على الكثير من المتصفحات ولعلها لا تعمل إلا على IE و أعوانه :D .

- Java Script : كلنا نعلم أن من ضمن أهم عيوب الـJava Script هي أنه عند كثرة استخدامها يصبح المتصفح داهية على الجهاز و يحمل كثير جداً مما يصل إلى توقف الجهاز في بعض الأحيان ولهذا ينصح عدم استخدام كل امكانيات هذه الأداة مما تم برمجته من خلال الـJava Script .

- مقدمة المقال : من الصعب عرض جزئية من المقال كمقدمة وهذا لأنك إذا قمت بتحديد 255 حرف لعرضهم كمقدمة للمقال وهذا عن طريق دالة substr مثلاً فبالتالي سيقوم باحتساب تاجات الـHTML معها على أنها من ضمن الـ255 حرف التى طلبتهم ولهذا يجب اولاً تفريغ التاجات ثم التقطيع ثم أرجاع التاجات مرة أخرى أو هناك حل أخر تقسيم المقال في مصفوفة explode بدلالة التاجات وعرض عدد معين من عناصر هذه المصفوفة.

]]> http://www.HazemKhaled.com/blog/javascript/%d9%85%d8%a7-%d9%87%d9%8a-wysiwyg/feed 5