Tag Archives: كورسات برمجة زيب

الدرس الثالث فى الاجاكس


استخدام المصفوفات مع الاجاكس

مثال:

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

اولا صفحة (index) الخاص باكواد الاجاكس:

<!DOCTYPE html>

<html>

<head>

<script>

function showHint(str)

{

var xmlhttp;

if (str.length==0)

{

document.getElementById(“txtHint”).innerHTML=””;

return;

}

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”page2.php?q=”+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

ثانيا صفحة (page2) الخاصة بالسرفر

<?php

// Fill up array with names

$a[]=”Abdalla”;

$a[]=”Basem”;

$a[]=”Cazem”;

$a[]=”Dalia”;

$a[]=”Ecco”;

$a[]=”Fozya”;

$a[]=”Gunda”;

$a[]=”Hege”;

$a[]=”Inga”;

$a[]=”Johanna”;

$a[]=”Kitty”;

$a[]=”Linda”;

$a[]=”Nina”;

$a[]=”Omr”;

$a[]=”Petunia”;

$a[]=”Amanda”;

$a[]=”Rady”;

$a[]=”Cindy”;

$a[]=”Doris”;

$a[]=”Eve”;

$a[]=”Evita”;

$a[]=”Sunniva”;

$a[]=”Tove”;

$a[]=”Unni”;

$a[]=”Violet”;

$a[]=”Liza”;

$a[]=”Elizabeth”;

$a[]=”Ellen”;

$a[]=”Wenche”;

$a[]=”Vicky”;

//get the q parameter from URL

$q=$_GET[“q”];

//lookup all hints from array if length of q>0

if (strlen($q) > 0)

{

$hint=””;

for($i=0; $i<count($a); $i++)

{

if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

{

if ($hint==””)

{

$hint=$a[$i];

}

else

{

$hint=$hint.” , “.$a[$i];

}

}

}

}

// Set output to “no suggestion” if no hint were found

// or to the correct values

if ($hint == “”)

{

$response=”no suggestion”;

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>

جرب المثال بنفسك.

css الدرس السادس فى


Border

-سنتعلم فى هذا الجزء ضبط ستايل الاطار من خلال الخصائص التالية:

استخدامها

property

تستخدم لاختيار نوع الاطار المستخدم

border-style

تستخدم لتحديد عرض الاطار المستخدم

border-width

تستخدم لتحديد لون الاطار المستخدم

border-color

(1)border-style:

وتستخدم فى اختيار نوع الاطار وانواع الاطر هى:

شكلة

نوع الاطار

وهو عبارة عن اطار سميك

solid

وهو عبارة عن اطار يكون شكلة على هيئة نقط

dotted

والمثال التالى يشرح استخدامهما:

<!DOCTYPE html>

<html>

<head>

<style>

p.one

{

border-style:solid;

}

p.two

{

border-style: dotted;

}

</style>

</head>

<body>

<p>A solid border</p>

<p>A solid border</p>

</body>

</html>

(2)border-width:

تستخدم لتحديد عرض الاطار المستخدم وتقاس بوحدة البكسل كالمثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

p

{

border-style:solid;

border-width:5px;

}

</style>

</head>

<body>

<p>Some text.</p>

</body>

</html>

ملاحظة:لا تستخدم خاصية (border-width) بمفردها لذلك استخدمنا معها

خاصية (border-style).

(3)border-color:

وتستخدم فى تحديد لون الاطار المستخدم وذلك باستخدام اسماء الالوان او بالاكواد كما قلنا سابقا والمثال التالى يشرح الخاصية:

<!DOCTYPE html>

<html>

<head>

<style>

p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

</style>

</head>

<body>

<p>A solid red border</p>

<p>A solid green border</p>

</body>

</html>

وهذة الخاصية ايضا لا تعمل بمفردها لذلك استخدمنا معها(border-style) .

-ملاحظة مهمة: يمكن استبدال الخواص الثلاثة السابقة بخاصية واحدة تجمعهم كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

p

{

border:5px solid red;

}

</style>

</head>

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

ويمكن ايضا تحديد نوع لكل جزء من الاطار عن طريق المثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

</style>

</head>

<body>

<p>2 different border styles.</p>

</body>

</html>

والامثلة السابقة فى الاطار تمت على تاج النصوص(p) ولكن يمكنك عمل اطار لاى تاج سواء الخاص بادراج الصور او تاج الجدول او غيرة.

%d bloggers like this: