تابع ورشة عمل لمعلمي الكمبيوتر بالحلقة الإعدادية
تابع شرح جافا اسكربت java script
(10) انشاء دالة Function
مفهوم الدالة في لغة Java Script عبارة عن مجموعة من الأكواد
التي تستخدم في تنفيذ مهمة / مهام محددة، ويتم تنفيذ الدالة عندما يتم استدعاءها، وهناك
بعض الدوال تحتاج إلى معطيات، والتدريب التالي يوضح مفهوم الدالة من حيث انشائها
واستدعاءها:
<html> //11 test.html
<head>
<title> Function إنشاء واستدعاء
دالة </title>
</head>
<body>
<h1>
Function إنشاء دالة </h1>
<p id="demo"></p>
<script>
function toDegree(f)
{
return
(5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toDegree(77);
</script>
</body>
</html>
(11) استدعاء دالة Function
<html> //12 test.html
<head>
<title> Function إنشاء واستدعاء
دالة </title>
</head>
<body>
<h1>
Function استدعاء دالة </h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The
temperature is " + todgree(77) + "
Degree";
function todgree(fahrenheit)
{
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
(12) التعامل مع محتوى صندوق نص
Textbox
(12-1) إنشاء صندوق نص Textbox
<html> //13 test.html
<head>
<title> TextBox التعامل مع
محتوى صندوق نص </title>
</head>
<body>
<h3>TextBox
إنشاء صندوق نص </h3>
<p>Click
the button "Click Here" to create a Text Field.</p>
<button onclick="Function1()">Click Here</button>
<script>
function Function1()
{
var x
= document.createElement("INPUT");
x.setAttribute("type",
"text");
x.setAttribute("value",
"The TextBox is created");
document.body.appendChild(x);
}
</script>
</body>
</html>
(12-2) طباعة محتوى صندوق نص Textbox
<html> //14 test.html
<head>
<title> TextBox التعامل مع
محتوى صندوق نص </title>
</head>
<body>
<h3>TextBox
التعامل مع محتوى صندوق نص</h3>
<input type="text" id="Text1" value="Type Any Text .........">
<p>Click the "Click here" button to get the content of text in
the text Object</p>
<button onclick="Function1()">Click here</button>
<p id="demo"></p>
<script>
function Function1()
{
var x =
document.getElementById("Text1").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
(13) التفريع
(If Statement) Branching
الكود If … Else من جمل اتخاذ القرار بناء على
التحقق من شرط معين، وذلك باختبار قيمة متغير فإذا تحقق الشرط أو كان ناتج اختبار
الشرط صحيح يتم تنفيذ كود معين وإذا لم يتحقق الشرط أو كان ناتج اختبار الشرط غير
صحيح يتم تنفيذ كود آخر، ويتضح ذلك من خلال التدريبات التالية:
(13-1) ابسط الصور العامة لجملة التفريع (If statement)
التدريب التالي لطباعة نص على صفحة المستعرض بعد اختبار الساعة في جهاز
الكمبيوتر.
<html> //15 test.html
<head>
<title> If Condition جملة الشرط </title>
</head>
<body>
<h3>TextBox
If Condition توظيف جملة الشرط </h3>
<p>Display
"صباح الخير" if
the hour is less than 12:00: Am</p>
<p id="demo"> مساء الخير </p>
<script>
if (new
Date().getHours() < 12)
{
document.getElementById("demo").innerHTML = "صباح
الخير";
}
</script>
</body>
</html>
(13-2)
الصورة العامة لجملة التفريع (If Statement)
التدريب التالي لطباعة نص على صفحة المستعرض بعد اختبار الساعة في جهاز
الكمبيوتر. (صورة أخرى للكود السابق)
<html> //16 test.html
<head>
<title> If Condition جملة الشرط </title>
</head>
<body>
<h3> If
... Else Condition توظيف جملة الشرط </h3>
<p>Display
"صباح الخير" if
the hour is less than 12:00: Am</p>
<button onclick="Function1()">Click Here</button>
<p id="demo"> مساء الخير </p>
<script>
function Function1()
{
var h = new Date().getHours();
var MsgText;
if (h < 12)
{
MsgText = "صباح الخير";
}
else
{
MsgText = "مساء الخير";
}
document.getElementById("demo").innerHTML = MsgText;
}
</script>
</body>
</html>
(13-3)
توظيف جملة التفريع (If Statement)
التدريب التالي للتحقق من قيمة معينة يتم إدخالها في صندوق نص textbox.
<html> //17 test.html
<head>
<title> TextBox التعامل مع
محتوى صندوق نص </title>
</head>
<body>
<h3>TextBox
التحقق من محتوى صندوق نص </h3>
<p>Change
the text of the text field, and then click the button below.</p>
Name: <input
type="text"
id="Text1"
value="siba">
<p>Note
that the default value is not affected when you change the value of the text
field.</p>
<button type="button" onclick="Function1()">Click Here</button>
<p id="demo"></p>
<script>
function Function1()
{
var x =
document.getElementById("Text1");
var
defaultVal = x.defaultValue;
var
currentVal = x.value;
if
(defaultVal == currentVal) {
document.getElementById("demo").innerHTML
= "Default value and current value is the same: "
+ x.defaultValue + "
and " + x.value
+ "<br>Change the value of the text field to see
the difference!";
}
else
{
document.getElementById("demo").innerHTML = "The default
value was: " + defaultVal
value was: " + defaultVal
+ "<br>The
new, current value is: " + currentVal;
}
}
</script>
</body>
</html>
مصدر المحتوى العلمي
ليست هناك تعليقات:
إرسال تعليق