Scribd
Upload
18 views

IT_JavaScripts

Uploaded by

elabani1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

IT_JavaScripts

Uploaded by

elabani1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

‫‪Java script‬‬

‫‪Concepts of Java Script‬‬


‫الجزء االول (مفهوم جافا سكريبت )‬

‫كلية تقنيات الحاسوب ‪ -‬بنغازي‬


‫أ‪.‬خالد العباني‬
‫مقدمة ‪:‬‬
‫‪introduction‬‬
‫• جافا سكريبت هي لغة البرمجة األكثر شعبية على شبكة االنترنت‪،‬‬
‫وتعمل في جميع المتصفحات الرئيسية‪ ،‬مثل إنترنت إكسبلورر‪،‬‬
‫فايرفوكس‪ ،‬كروم‪ ،‬أوبرا‪ ،‬وسفاري‪.‬‬

‫• يجب أن يكون لديك فهم أساسي لما يلي‪:‬‬


‫‪HTML‬و ‪. CSS‬‬
‫مقدمة‬
‫االسم الحقيقي هو ‪ ECMAScript‬جافا سكريبت‬ ‫•‬
‫هو تنفيذ معيار اللغة ‪ECMAScript‬‬ ‫•‬
‫‪.‬تم تطوير ‪ ECMAScript‬والتي تحتفظ بها المنظمة ‪ECMA‬‬ ‫•‬
‫‪. ECMA -262‬هو المعيار جافا سكريبت الرسمي ‪.‬‬ ‫•‬
‫اخترع اللغة من خالل برندان إيتش (‪ )Brendan Eich‬في ‪ ( Netscape‬مع‬ ‫•‬
‫المستكشف ‪ ، )2.0‬و لقد ظهر في جميع المتصفحات نتسكيب ومايكروسوفت منذ‬
‫عام ‪. 1996‬‬
‫بدأت تطوير ‪ECMA -262‬في عام ‪ ، 1996‬واعتمد على الطبعة األولى من‬ ‫•‬
‫قبل الجمعية العامة ‪ECMA‬في يونيو عام ‪.1997‬‬
‫وتمت الموافقة على مستوى وايزو الدولي ( ) ‪ISO / IEC 16262‬القياسية في‬ ‫•‬
‫عام ‪. 1998‬‬
‫تطوير معيار ال تزال في التقدم‪.‬‬ ‫•‬
‫ما هي جافا سكريبت؟‬
‫? ‪what is the java scripts‬‬

‫قد تم تصميم جافا سكريبت إلضافة التفاعل إلى صفحات ‪HTML‬‬ ‫•‬
‫وعادة ما يتم تضمين جافا سكريبت مباشرة في صفحات ‪HTML‬‬ ‫•‬
‫جافا سكريبت هي لغة تفسير (يعني أن تنفيذ البرامج النصية دون‬ ‫•‬
‫تجميع أولي)‬
‫ويمكن للجميع استخدام جافا سكريبت دون شراء ترخيص‬ ‫•‬
‫جافا وجافا سكريبت ؟‬

‫• جافا وجافا سكريبت لغتين مختلفتين تماما في كل من مفهوم وتصميم!‬


‫• جافا (التي وضعتها شركة ‪ )SUN‬هي لغة برمجة قوية ومعقدة أكثر‬
‫من ذلك بكثير ‪ -‬في نفس فئة ‪C‬و ‪C++.‬‬
‫ماذا يمكن أن نفعل جافا سكريبت؟‬

‫• جافا سكريبت تعطي المصممين ‪HTML‬أداة برمجة ‪ -‬كتّاب ‪HTML‬عادة ليس‬


‫المبرمجين‪ ،‬ولكن جافا سكريبت هي لغة البرمجة مع بناء جملة بسيطة‬
‫جدا! تقريبا يمكن ألي شخص وضع "قصاصات" من الشفرة في صفحات‬
‫‪HTML‬الخاصة بهم‬
‫• جافا سكريبت يمكنها التفاعل مع األحداث ‪ -‬يمكن تعيين جافا سكريبت لتنفيذ أمر‬
‫عندما يحدث شيء ما‪ ،‬مثل عندما يكون تحميل الصفحة قد إنتهى أو عندما ينقر‬
‫المستخدم على عنصر ‪HTML‬‬
‫• جافا سكريبت يمكنها التعامل مع عناصر ‪HTML -‬جافا سكريبت يمكنها قراءة‬
‫وتغيير محتوى عنصر ‪HTML‬‬
‫•‬
‫ماذا يمكن أن نفعل جافا سكريبت؟‬
‫? ‪what can you do with java scripts‬‬
‫• يمكن استخدام جافا سكريبت لكشف متصفح الزائر ‪ -‬يمكن استخدام‬
‫جافا سكريبت لكشف متصفح الزائر‪ ،‬و‪ -‬اعتمادا على المتصفح ‪-‬‬
‫تحميل صفحة أخرى مصممة خصيصا لهذا المتصفح‬
‫• يمكن استخدام جافا سكريبت إلنشاء ملفات تعريف االرتباط ‪ -‬ويمكن‬
‫استخدام جافا سكريبت لتخزين واسترجاع المعلومات على جهاز‬
‫الكمبيوتر الزائر‪.‬‬
‫• يمكن استخدام جافا سكريبت للتحقق من صحة البيانات ‪ -‬يمكن‬
‫استخدام جافا سكريبت للتحقق من صحة المدخالت‬
‫أساسيات جافا سكريبت‬
‫‪Concepts‬‬
‫• الجافا سكريبت داخل الـ ‪HTML‬يجب أن تكون بين عالمات‬
‫>‪<script>. </script‬‬
‫• يمكن إستخدام الجافا سكريبت في صفحة الـ ‪HTML‬‬
‫• داخل قسم ‪ Body‬او قسم ‪Head‬‬
‫• >‪<script‬‬
‫• عندما يتم إدخال الجافا سكريبت في الـ ‪HTML‬يجب أن تبدأ بـ < >‪script‬‬
‫وتنتهي بـ <‪script>./‬‬
‫•‬
‫>‪<script‬‬
‫;)"‪alert("My First JavaScript‬‬
‫>‪</script‬‬
‫•‬
‫ بواسطة الجافا سكريبت‬HTML ‫نستطيع تغير محتوى ال‬
JavaScript Can Change HTML Content

• <!DOCTYPE html>
• <html>
• <body>

• <h1>What Can JavaScript Do?</h1>

• <p id="demo">JavaScript can change HTML content.</p>

• <button type="button"
• onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">
• Click Me!</button>

• </body>
• </html>
‫نستطيع التحكم والتغيير في الخصائص‬
JavaScript Can Change HTML Attributes
• <!DOCTYPE html>
• <html>
• <body>
• <h1>JavaScript Can Change Images</h1>
• <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100"
height="180">
• <p>Click the light bulb to turn on/off the light.</p>
• <script>
• function changeImage() {
• var image = document.getElementById('myImage');
• if (image.src.match("bulbon")) {
• image.src = "pic_bulboff.gif";
• } else {
• image.src = "pic_bulbon.gif";
• }
• }
• </script>
• </body>
• </html>
CSS ‫نستطيع التغيير في ملف ال‬
JavaScript Can Change HTML Styles (CSS)
• <!DOCTYPE html>
• <html>
• <body>
• <h1>What Can JavaScript Do?</h1>
• <p id="demo">JavaScript can change the style of an HTML element.</p>
• <button type="button" onclick="myFunction()">Click Me!</button>
• <script>
• function myFunction() {
• var x = document.getElementById("demo");
• x.style.fontSize = "25px";
• x.style.color = "red";
• }
• </script>
• </body>
• </html>
‫نستطيع التحقق من البيانات‬
JavaScript Can Validate Data
• <html>
• <body>
• <h1>JavaScript Can Validate Input</h1>
• <p>Please input a number between 1 and 10:</p>
• <input id="numb">
• <button type="button" onclick="myFunction()">Submit</button>
• <p id="demo"></p>
• <script>
• function myFunction() {
• var x, text;
• // Get the value of the input field with id="numb"
• x = document.getElementById("numb").value;
• // If x is Not a Number or less than one or greater than 10
• if (isNaN(x) || x < 1 || x > 10) {
• text = "Input not valid";
• } else { text = "Input OK"; }
• document.getElementById("demo").innerHTML = text; }
• </script>
• </body> </html>
body‫جافا سكريبت داخل‬
• <!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>/<‫عنوان‬h1>");
document.write("<p>/<‫فقرة‬p>");
</script>.
.
</body>
</html>
‫األحداث والدوال في الجافا سكريبت‬
‫‪Events and Functions‬‬
‫• في المثال السابق تم تنفيذ جملة الجافا سكريبت خالل تحميل الصفحة‪.‬‬
‫• لكن في أغلب األحيان‪ ،‬نود أن يتم التنفيذ عندما يحصل حدث معين ‪ ..‬كمثال‪ :‬عندما نقوم‬
‫بالضغط على زر‪ ،‬أو بعد فترة زمنية محددة‪.‬‬
‫• إذا قمنا بوضع كود الجافاسكريبت في دالة‪ ،‬فإننا نستطيع إستدعاء هذه الدالة عند حصول‬
‫الحدث‪.‬‬

‫• الجافا سكريبت في قسم ‪ HEAD‬و ‪BODY‬‬


‫• يمكنك وضع عدد المحدود من األكواد داخل صفحة الـ ‪HTML.‬‬
‫• يمكن وضع هذه األكواد داخل قسم < >‪head‬أو داخل قسم < >‪body‬أو في اإلثنين معا‪.‬‬
‫• عادة ما يتم وضع أكواد وجمل الجافا سكريبت داخل قسم < >‪head‬أو في آخر الصفحة‬
‫حتى ال يحصل تداخل مع محتويات الصفحة‪.‬‬
‫•‬

‫•‬
head ‫دالة جافا سكريبت في قسم‬
• <!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript
Function";
}
</script>
</head>
• <body>
• <h1>My Web Page</h1>
• <p id="demo">A Paragraph</p>
• <button type="button" onclick="myFunction()">Try it</button>
• </body>
</html>
•
‫ ليتم‬،‫ يتم ذكر عنوان الدالة في الحدث فقط‬:‫ الحظ‬.‫يتم التنفيذ عند الضغط على الزر‬
.‫إستدعاءها‬
body> ‫دالة جافا سكريبت في قسم‬
• <!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
• <p id="demo">A Paragraph</p>
• <button type="button" onclick="myFunction()">Try it</button>
• <script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First
JavaScript Function";
}
</script>
• </body>
</html>
.‫• يتم التنفيذ عند الضغط على الزر‬
.‫ ليتم إستدعاءها‬،‫ يتم ذكر عنوان الدالة في الحدث فقط‬:‫• الحظ‬
‫إستدعاء ملف جافا سكريبت خارجي‬

‫• يمكن وضع أكواد الجافا سكريبت في ملفات مستقلة‪ ،‬ويتم فعل ذلك عادة إلستدعاء‬
‫الملف في أكثر من صفحة‪.‬‬

‫• ملفات الجافاسكريب يكون لها إمتداد ‪js ..‬‬


‫• إلستدعاء ملف جافا سكريبت خارجي‪ ،‬أشر إلى الملف في وسم " "‪src‬داخل عالمة‬
‫<‪script>:‬‬
‫>‪• !DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<script src="myScript.js"></script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫استدعاء ملف خارجي لجافا سكريبت‬

• External scripts cannot contain <script> tags.


<Script> ‫• الملف الخارجي ال يحتوي على وسم‬

• External JavaScript Advantages ‫مميزات الملف الخارجي لجافا سكريبت‬


• Placing JavaScripts in external files has some advantages:
• It separates HTML and code
HTML ‫• يفصل الكود و‬
• It makes HTML and JavaScript easier to read and maintain
)‫وجافا سكريبت أسهل في القراءة و الصيانة (التطوير‬HTML ‫• جعل‬
• Cached JavaScript files can speed up page loads
‫• يمكن ملفات جافا سكريبت مؤقتا تسريع تحميل الصفحة‬

You might also like