صيانة الكمبيوتر

ورشة عمل لمعلمي الكمبيوتر بالحلقة الإعدادية

المحتوى العلمي ليوم تدريبي في لغة Java Script

زمن ورشة العمل: أربع ساعات تدريبية

الهدف العام لليوم التدريبي:

إنشاء صفحات ويب ديناميكية Dynamic web pages.

في نهاية اليوم التدريبي يستطيع المتدرب أن:

(1) يُفرق بين static web page و Dynamic web page.

(2) يُوضح مكان كتاب كود Java Script.

(3) يَستخدم كود Java Script في أكثر من صفحة ويب.

(4) يَشرح مفهوم المتغيرات في لغة Java Script.

(5) يَضرب أربع أمثلة صحيحة لأسماء متغيرات في لغة Java Script.

(6) يُوضح مفهوم التخصيص Assignment في لغة Java Script بمثالين.

(7) يَتَعّرف بعض خصائص <P> Tag.

(8) يَذكر أشهر أنواع البيانات الأكثر استخدامًا في لغة Java Script.

(9) يُوظيف زر الأمر Button في استدعاء كود Java Script.

(10) يُوضح مفهوم الدالة Function.

(11) يُنشئ دالة Function في لغة Java Script.

(12) يَكتب كود Java Script يستدعي دالة Function.

(13) يَشرح كود إنشاء صندوق نص TextBox.

(14) يَكتب كود يطبع محتوي صندوق نص TextBox على صفحة مستعرض الإنترنت.

(15) يَشرح الصيغة العامة Syntax لجملة اتخاذ القرار If Statement.

(16) يُوظيف جملة اتخاذ القرار If Statement في تطبيقات حياتية/تعليمية.

محتوى اليوم التدريبي

في لغة Java Script

المحتوى	الزمن المقدر
(1) صفحة الويب الساكنة Static Web Page.	10 دقائق
(2) صفحة الويب الديناميكية Dynamic Web Page.	10 دقائق
(3) مكان كتابة كود أو جمل Java Script. (3-1) داخل كلٍ من Head Tag و Body Tag. (3-2) داخل الــ Tag. (3-3) من ملف خارجي بامتداد .JS	19 دقيقة
(4) استخدام كود Java Script في أكثر من صفحة ويب.	19 دقيقة
(5) المتغيرات. (5-1) شروط تسمية المتغيرات. (5-2) الإعلان عن متغيرات رقمية صحيحة. (5-3) الإعلان عن متغيرات مختلفة الأنواع.	19 دقيقة
(6) التخصيص.	19 دقيقة
(7) تخصيص محتوى متغير للــ Tag <p>.	19 دقيقة
(8) أنواع البيانات.	19 دقيقة
(9) استدعاء كود Java Script باستخدام زر أمر Button.	19 دقيقة
(10) انشاء دالة Function.	19 دقيقة
(11) استدعاء دالة Function.	19 دقيقة
(12) التعامل مع محتوى صندوق نص Textbox. (12-1) إنشاء صندوق نص Textbox. (12-2) طباعة محتوى صندوق نص Textbox.	19 دقيقة
(13) التفريع (If Statement) Branching . (13-1) ابسط الصور العامة لجملة التفريع (If statement). (13-2) الصورة العامة لجملة التفريع (If Statement). (13-3) توظيف جملة التفريع (If Statement).	30 دقائق

(1) صفحة الويب الساكنة Static Web Page

لاحظ امتداد الصفحة HTML

صفحة معلومات تعرض من خلال أحد مستعرضات الإنترنت، يمكن حفظها بامتداد .htm،.html، تعرض مختلف أنواع البيانات من نصوص وأرقام وصور وفيديو وجداول وروابط ... إلخ، وقد يصاحب هذه البيانات بعض التأثيرات ولا يتاح من خلالها إجراء معالجة على محتوى الصفحة:

شكل (1) صفحة ويب ساكنة Static Web Page

(2) صفحة الويب الديناميكية Dynamic Web Page

صفحة معلومات متاحة على الإنترنت، تكتب بلغة PHP أو ASP.net، يمكنها عرض مختلف أنواع البيانات، ويتاح من خلالها إجراء معالجة لمحتوى الصفحة، كإرجاع قيمة أو عرض رسالة أو ناتج.

ويمكنك في بعض الأحيان معرفة نوع الصفحة (ساكنة أو ديناميكية) من الامتداد المتاح في عنوان الموقع URL

لاحظ امتداد الصفحة ASPX

شكل (2) صفحة ويب ديناميكية Dynamic web page

(3) مكان كتابة كود أو جمل Java Script

يمكن كتابة كود Java Script في أكثر من موضع كما يلي:

(3-1) داخل كلٍ من Head Tag و Body Tag، ويتضح ذلك من خلال التدريب التالي:

<html> // 01 TEST.HTML

<head>

<title> Java Script مكان كتابة كود أو جمل </title>

document.write ("Java Script Code in Head");

document.write ("<Br>");

</script>

</head>

<body>

document.write ("Java Script Code in Body");

document.write ("<Br>");

</script>

</body>

</html>

(3-2) داخل الــ Tag، ويتضح ذلك من خلال التدريب التالي:

<html> //02 TEST.HTML

<head>

<title> Java Script مكان كتابة كود أو جمل </title>

</head>

<body>

</body>

</html>

(3-3) كما يمكن إدراج كود Java Script من ملف خارجي بامتداد .JS يدرج في بداية Script Tag، كما يتضح من جزء التكود التالي:

<html>

<head>

</script>

</head>

</html>

(4) استخدام كود Java Script في أكثر من صفحة ويب

يمكن وضع كود Java Script في ملف مستقل بامتداد .js واستدعاء الملف وتنفيذ الكود الموجود به من خلال خاصية SRC في Script Tag ويليه اسم ملف ذو الامتداد .js حيث يتم تنفيذه من خلال ملف HTML الحالي وعرض الناتج على صفحة المستعرض.

(4-1) إنشاء ملف 03 test.js والذي يحتوي على الكود التالي:

var a = 20;

var b = 20;

var c = a + b;

document.write (c);

(4-2) إنشاء الملف 03 test.html والذي يحتوي على الكود التالي:

<head>

<title> Java Script المتغيرات في لغة </title>

</head>

<body>

<h1>Variables in JavaScript</h1>

<p>In this Tranning, a, b, and c are variables</p>

</script>

</body>

</html>

(5) المتغيرات

مخازن مؤقته في الذاكرة يتم الإعلان عنها باسم معين تتغير قيمتها أثناء سير البرنامج، ويتضح ذلك من خلال التدريبات التالية:

(5-1) شروط تسمية المتغيرات

تدريب:

بالتعاون مع زملاءك، ودراستك للغات برمجة سابقة وبحثك في الإنترنت حدد شروط تسمية المتغيرات في لغة Java Script، مع التوضيح بمثال صحيح وآخر خطأ لكل شرط.

(1) .................................................................................. .

(2) .................................................................................. .

(3) .................................................................................. .

(4) .................................................................................. .

الإجابة:

• الحرف الأول من اسم المتغير يبدأ بحرف.
• اسم المتغير لا يحتوي على مسافات.
• اسم المتغير لا يحتوي على علامات خاصة (مثل فاصلة، نقطة، الخ).
• يمكن أن يحتوي اسم المتغير على أي حرف من الحروف الأبجدية، والأرقام 0-9، والشرطة السفلية.

لاحظ: أن لغة Java Script حساسة لحالة الأحرف كبيرة Capital أو صغيرة Small.

(5-2) الإعلان عن متغيرات رقمية صحيحة

<html> //04 test.html

<head>

<title> Java Script المتغيرات في لغة </title>

</head>

<body>

<h1>Variables in JavaScript</h1>

<p>In this Tranning, a, b, and c are variables</p>

var a = 10;

var b = 20;

var c = a + b;

document.write (c);

</script>

</body>

</html>

(5-3) الإعلان عن متغيرات مختلفة الأنواع

<html> // 05 test.html

<head>

<title> Java Script المتغيرات في لغة </title>

</head>

<body>

<p>Strings are written with quotes.</p>

<p>Numbers are written without quotes.</p>

<p>Try to experiment with the // comments.</p>

var pi = 3.14;

var person = "John Doe";

var answer = 'Yes I am!';

// document.write (pi);

document.write (person);

// document.write (answer);

</script>

</body>

</html>

(6) التخصيص

يقصد بها تعيين قيمة محددة لمتغير، وقد تكون قيمة ابتدائية ثم يتم تغييرها بعد ذلك أثناء سير البرنامج، لابد من معرفة المعاملات التالية في لغة Java Script:

ومن خلال التدريب التالي يمكن اكتشاف الغرض من التخصيص:

<html> // 06 test.html

<head>

<title> Java Script التخصيص في لغة </title>

</head>

<body>

<h1> Assignment التخصيص </h1>

var x = 2;

x += 3; // OR: x = x + y

document.write (x);

</script>

</body>

</html>

تدريب:

اكتب كود Java Script اللازم الذي يطبع على صفحة المستعرض باقي قسمة العدد 11 على العدد 2. 07 test.html

(7) تخصيص محتوى متغير للــ Tag <p>

يمكن تخصيص محتوى متغير في الـ Tag <p>، كما يتضح من التدريب التالي:

<html> // 08 test.html

<head>

<title> "<P> Tag" تخصيص محتوى متغير للــ </title>

</head>

<body>

<h1> For P Tag تخصيص محتوى متغير </h1>

var a = 5;

a += 3;

document.getElementById("demo").innerHTML = a;

</script>

</body>

</html>

(8) أنواع البيانات

تتنوع البيانات في لغة Java Script، وهناك أنواع بيانات كثيرة يمكن أن تتعامل معها لغة Java Script منها على سبيل المثال:

Number, String, Boolean, Array, Object

ويمكن من خلال جزء الكود التالي توضيح الإعلان عن متغيرات بأنواع مختلفة من البيانات:

var width = 10; // Number

var FName = "Ahmed"; // String

var Frinds = ["Ahmed", "Sama", "Saba", "Alya"]; // Array

var Frinds = {FName: "Sama", LName: "Ahmed"}; // Opject

تدريب:

ناقش مع زملائك ومدربك التدريب التالي:

<html> //09 test.html

<head>

<title> Data Type أنواع البيانات </title>

</head>

<body>

<h1> Data Type أنواع البيانات </h1>

var fname = "Sama";

var lname = 'Ahmed';

var a1 = "It's alright";

var a2 = "She is called 'Sama'";

var a3 = 'She is called "Sama"';

document.getElementById("demo").innerHTML =

fname + "<br>" +

lname + "<br>" +

a1 + "<br>" +

a2 + "<br>" +

a3;

</script>

</body>

</html>

صيانة الكمبيوتر

الأربعاء، 24 أغسطس 2016

المحتوى العلمي ليوم تدريبي في لغة Java Script

ليست هناك تعليقات:

إرسال تعليق