| دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design] |
|
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
| |||||
| |||||
|
![]() ([الدرس العاشر]تعريف بمكتبة jquery قبل البدء فى التعامل معهــــا) [الدرس العاشر]تعريف بمكتبة jquery قبل البدء فى التعامل معهــــا ![]() استكمالا لدروس دورتنا نتابع معكم درس جديد وهذه المرة الدرس ممتع وراح تجد فيه أشياء جديده راح تعرف تطبقها بأذن الله اولا: تعريف بمكتبة الjquery: الjquery : هى أحدث المكتبات البرمجية التى تستخدمها اشهر المواقع على الويب كجوجل والوردبريس ودل...الخ, وهى عبارة عن لغة الاجاكس ajax ولكن على هيئة مكتبة جاهزة يمكنك استخدامها مباشرة دون الحاجة لكتابة كود الاجاكس من الصفر, ولكن كلامى هذا لا يعنى ان هذا الأمر بهذه السهولة فالمكتبة التعامل معها صعب لاى مبتدأ لم يسبق التعامل معها, او لايعرف كيف يستخدم الajax والصعوبة تكمن فى كيفية معرفتك لان تستغل هذه المكتبة لتخرج منها التأثيرات الخيالية التى تفعلها هذه المكتبة الرائعة: سؤال: ماذا تفعل الquery ,ورينا أمثلة حية؟ الQuery أعتقد لاتخلو من اى موقع فيه برمجية داخليه : خلونا نأخذ مواقع ونشوف أين استخدمت الquery: 1- موقع مطور: عندما تقوم باضافة رد على الموضوع, فانه يضاف اوتوماتيكا دون تحميل الصفحة >>>> انها الاجاكس ajax او نقول jquery 2-موقع جوجل: عندما تذهب لادوات اللغة , عندما تكتب كلمة ليترجمها المترجم , ستلاحظ انك بمجرد كتابتك حرف واحد راح يتم اعطائك ناتج الترجمة بدون حتى ما تضغط على زر الترجمة >>> انها الاجاكس ajax او jquery 3-موقع الفيس بوك: تلاحظ انك عندما تحب تكتب موضوع فانه ينزل على صفحتك دون تحميل الصفحة, وايضا خاصية الlivefeedback, فانها تستدعى كل جديد بين اصحابك وتدرجه فى صفحاتك بدون تحميل الصفحة>> انها الاجاكس ياvista-design ياسلاااااام على قوتها هالمكتبة ![]() واعتقد لو جلست للصباح ومسكت موقع راح تجد ان كل موقع مستغل المكتبة بشكل مختلف, والخبرة ترجع لمن يعرف كيف يستغلها وعنده كل أساسيات استخدامها البرمجية........... سؤال: من أين اتعلم الjquery: أعتقد ان موقعهاالالكترونى هو أفضل شىء راح تتعلم منه ,فالموقع رائع بمعنى الكلمة فهو يشرح لك كل دالة او كود ويعطيك مثال عملى فى نفس الصفحة لتعرف تأثير هذا الأمر سؤال: هل أنا قارىء الدورة راح أواجه صعوبة فى التعامل معها كونى مبتدأ, لا يعرف حتى كيف يكتب كود html كامل على بعضه؟ طبعا هذا السؤال اكيد يريد يعرف اجابته, ولكن دعنى اقولك انك لاتقلقك لانى سأعطيك الخلاصة وكيف تستخدم تأثيرات المكتبة jquery دون الحاجة لان تكون محترف فى التعامل مع المكتبة . ولكن يجب ان تعلم ان هذا لن يعطيك قوة الابداع والابتكار فى التعامل مع المكتبة لانك راح تعرف وظائف محددة فقط ولن تستطيع ان تعطى لعنانك الانطلاق فى التعام مع هذه المكتبة لذلك انصح لمن يريد التعامل معها ان يبدأ من موقعها الالكترونى ..... سؤال: ماذا يلزمنى كعضو منتسب للدورة ان اعرف فى jquery انا راح أشرح أساسيات خفيفة الحين لابد ان تعرفها على الاقل: 1- لادراج ملف المكتبة , راح يكون بالظبط مثل ما بندرج ملف css: مثال: كود: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> وتنزيله على جهازه والاشاره اليه مثال: كود: <script src="jquery.min.js" type="text/javascript"></script> ملاحظه: المكتبة عبارة عن ملف بسيط بامتداد js فقط, يعنى لا تتخيل المكتبة كتب وهيك ![]() 2- لابد ان يتم كتابة أوامر الاجاكس والتعامل مع المكتبة بين وسمى script بين وسم الhead مثال: كود: <head>
<title></title>
<**** ************"Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript">
$(function() {
$('#submit').click(function() {
$('#container').append('<img src="img/loading.gif" alt="Currently Loading" id="loading" />');
var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();
$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
});
});
</script>
</head> 3- طبعا بالنسبة للغة نفسها الاجاكس, فيكتفى على مستوى الاعضاء هنا ان اشرحلكم التأثيرات جاهزة وكيف تستخدمها مباشرة وان شاء الله فى الدورات القادمة , فقد يكون هناك دورة برمجية للاجاكس ترقبوا الدرس القادم وكيفية التعامل مع المكتبة واستخدام التأثيرات الجاهزة أخوكم vista-design توقيعي عالم مطورى الويب لتعليم برمجة وتصميم المواقع www.advphp.com آخر تعديل بواسطة vista-design ، 09-02-2010 الساعة 01:49 AM |
|
#2
| |||||
| |||||
| |
![]() |
| العلامات المرجعية |
مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| شرح استخدام عارض المقالات بالصور بمكتبة jquery الرائعboxslider | vista-design | تصميم المواقع بتقنية الـ جي كويري jQuery | 34 | 04-02-2012 09:23 PM |
| [مناقشة ] الدرس الثانى أساسيات التعامل مع jquery | vista-design | تصميم المواقع بتقنية الـ جي كويري jQuery | 36 | 12-05-2011 07:56 PM |
| شرح jquery ، شرح عمل لوحة مفاتيح كتابية ب jquery مثل جوجل [الدرس السادس] | vista-design | تصميم المواقع بتقنية الـ جي كويري jQuery | 1 | 22-08-2010 12:32 AM |
| درس jquery ، أساسيات التعامل مع الjquery لغير المبرمجين، [الدرس الثانى] | vista-design | تصميم المواقع بتقنية الـ جي كويري jQuery | 0 | 13-08-2010 02:50 PM |
| [الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 1 | 09-02-2010 01:48 AM |