بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخوانى هذا هو الدرس الثانى من دروس جافا سكريبت اتمنى ان تكونوا فد استفدتم من الدروس الاول -اذا لم تكن قراته هو موجود فى المنتدى وتحت امرك -وارجو منكم ان كان هناك اى ملاحظات او اضافات اتمنى ان تكتبوها هنا فى المنتدى
وفقنا الله جمعيا لما يحبه ويرضاه
java refrences سنتحدث اليوم عن
اليوم سيكون التركيز على الامثلة اكثر لانها هنا اقرب الطرق الى الايضاح
1-Form refrence
النموذج هى اداة استقبال البيانات من مستخدمى الصفحات وتشمل
Radio box , Check box , Dropdown list , Button............
A)Radio box
هو اول اعضاء النموذج ويمكن احتيار مربع راديو واحد من المجموعة الموضوعة داخل نموذج ويمكن انشاؤه كالتالى
<form> <input type="radio" name="radio1" value="this is radio"> </form>
وهذا مثال
<html>
<head>
<script type="text/javascript">
function check(drink)
{
document.forms[0].answer.value="i like to drink " + drink
}
</script>
</head>
<body>
<form>
You prefer Tea or Coffe
<input type="radio" name="tea" value="tea" onclick="check(this.value)">I Drink Tea
<input type="radio"
name="coffe" onclick="check(this.value)"
value="coffe">I Drink Coffe
<input type="text" name="answer">
</form>
</body>
</html>
[code]
جرب هذا المثال وستجد به فائدة كبيرة ان شاء الله
B)Check Box
هو ايضا احد اعضاء النموذج وهو على عكس الراديو يمكنك من اختيار اكثر من صندوق اختيار وينشأ كالتالى
[code]
<form>
<input type="checkbox" name="checkbox1" value="this is checkbox">
</form>ولنا خذ مثال ما رايكم لو نعيد المثال السابق باستخدام صناديق الاحتيار وزر امر ليكون الكود كالتالى
<html>
<head>
<script type="text/javascript">
function check()
{
order=document.forms[0].order
answer=document.forms[0].answer
txt=""
for (i = 0; i<order.length; ++ i)
{
if (order.checked)
{
txt=txt + order.value + " "
}
}
answer.value="You ordered " + txt
}//end of check function
</script>
</head>
<body>
<form>
You prefer Tea or Coffe
<input type="checkbox" name="order" value="tea">I Drink Tea
<input type="checkbox" name="order" value="coffe">I Drink Coffe
<input type="text" name="answer">
<input type="button" name="ok" onclick="check()" value="OK">
</form>
</body>
</html>لاحظ الكود السابق جيدااااااااااااا
C)Dropdown list
هذه الاداه جملية جدا وهى تعطيك امكانية الاختيار من عدة بدائل فى شكل قائمة منسدلة ويمكنك اختيار اختيار واحد فقط هذا هو كود الانشاء
<form> <select name="dropdown" onchange="function()"> <option>item1 <option>item2 </select> </form>
ولان لناخذ مثالا عمليا
<html>
<head>
<script type="text/javascript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=option
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
<p>
Select your favorite browser:
<select name="dropdown" onchange="put()">
<option>Internet Explorer
<option>Netscape Navigator
</select>
</p>
<p>
Your favorite browser is:
<input type="text"
name="favorite" value="Internet Explorer">
</p>
</form>
</body>
</html>D)Text box
باستخدام هذه الاداه نسطتيع ان نستقبل نص من المستخدم وكود الانشاء كالتالى
<form> <input type="text" name="myInput"> </form>
لناخد هذا المثال البسيط الذى يستقبل عنوان بريد اليكترونى ويتا كد منه ايضا هذا هو الكود
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
if (at == -1)
{
alert("Not a valid e-mail")
return false
}
}
</script>
</head>
<body>
<form name="myForm"
action="tryjs_submitpage.htm"
onsubmit="return validate()">
Enter your E-mail address:
<input type="text" name="myEmail">
<input type="submit" value="Send input">
</form>
</body>
</html>وهذا مثال اخر
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5)
{
alert("Do not insert more than 5 characters")
return false
}
else
{
return true
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
غير مسموح هنا بادخال اكثر من 5 حروف
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>وهذ اخر
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
txt=x.myInput.value
if (txt>=3 && txt<=9)
{
return true
}
else
{
alert("Must be between 3 and 9")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()">
عدد الحروف المسموح بها ما بين 3 و 9
<input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>وهذا اخير ينفل التركيز الى مربع النص ويحدد النص بداخله
<html>
<head>
<script type="text/javascript">
function setfocus()
{
document.forms[0].field.focus()
}
function select()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Get Focus" onclick="setfocus()">
<input type="button" value="Selected" onclick="select()">
</form>
</body>
</html>بذلك نكون قد انتهينا من شرح النموذج لقد تعمدت الاعتماد غلى الامثلة حيث انها الافضل من وجهتى نظرى فى الحصول غلى نسبة عالية من الفهم بجانب الاستفادة من الاكواد الموجودة ايضا واكيد ان الدرس الاول الان اوضح من ذى قبل عند الكثير ممن درسوه.
من فضلكم اذا كان هناك اية ملاحظات فلا تبخولى عليا بها وكذلك اذا كان هناك اية اخطاء.
بذلك نكون قد انتهينا من هذا الدرس والبقية تاتى
اتمنى التوفيق للجميع
والسلام عليكم ورحمة الله وبركاته
ايمن مصطفى