javascript

Javascript
natankrasney@gmail.com
1

? Javascript ‫זה‬ ‫מה‬
‫האנטרנט‬ ‫ושל‬ HTML ‫של‬ ‫התכנות‬ ‫שפת‬ ‫זו‬
Java ‫לבין‬ Javascript ‫בין‬ ‫קשר‬ ‫אין‬
1997 ‫בשנת‬ ‫סטנדרט‬ ‫והפכה‬ 1995 ‫בשנת‬ ‫הומצאה‬ Javascript
DOM - Document Object Model ‫כ‬ ‫הדף‬ ‫יצוג‬ ‫על‬ ‫קריטית‬ ‫בצורה‬ ‫מתבסס‬ Javascript
2

Javascript ‫עם‬ HTML ‫לדף‬ ‫דוגמא‬
<head>
</head>
<body>
<button onclick="clickHandler()">Click Me</button>
<p id="id1">This text is static</p>
<script>
function clickHandler() {
document.getElementById('id1').innerHTML = 'This text is dynamic'; }
</script>
</body>
3
‫דף‬ ‫שמיצג‬ ‫אוביקט‬
‫שנטען‬ ‫אחרי‬ HTML
‫לדפדפן‬
‫של‬ ‫פונקציה‬
‫של‬ id ‫שמקבלת‬document
‫שמיצג‬ ‫אוביקט‬ ‫ומחזירה‬ ‫אלמנט‬
‫האלמנט‬ ‫את‬
‫של‬ DOM ‫מאפיין‬ ‫שם‬
‫שם‬ ‫מייצג‬ ‫אשר‬ ‫אלמנט‬
event - ‫מאורע‬
‫בתוך‬ ‫נרשמת‬ ‫אשר‬ ‫פונקציה‬
‫כאשר‬ ‫לה‬ ‫ויקראו‬ script ‫תגית‬
‫זה‬ ‫במקרה‬ - ‫המאורע‬ ‫יתרחש‬
‫הזה‬ ‫הכפתור‬ ‫על‬ ‫ילחצו‬ ‫כאשר‬
‫אלמנט‬ ‫של‬ DOM ‫מאפיין‬
- ‫התוכן‬ ‫את‬ ‫מייצג‬ ‫אשר‬
‫שלו‬ content

DOM ‫ב‬ ‫אוביקטים‬ ‫כעץ‬ HTML ‫דף‬ ‫יצוג‬
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1>My header</h1>
<a href="#">My Link</a>
</body>
</html>
4

HTML DOM ‫בעזרת‬ ‫לעשות‬ ‫יכול‬ Javascript ‫מה‬
.1HTML ‫בדף‬ ‫האלמנטים‬ ‫כל‬ ‫את‬ ‫לשנות‬
.2HTML ‫בדף‬ ‫האלמנטים‬ ‫מאפייני‬ ‫כל‬ ‫את‬ ‫לשנות‬
.3(‫אלמנט‬ ‫של‬ ‫מאפיין‬ ‫הרי‬ ‫)זה‬ ‫בדף‬ css style ‫ה‬ ‫כל‬ ‫את‬ ‫לשנות‬
.4‫אלמנטים‬ ‫של‬ ‫ומאפיינים‬ ‫אלמנטים‬ ‫להסיר‬
.5‫אלמנטים‬ ‫של‬ ‫ומאפיינים‬ ‫אלמנטים‬ ‫להוסיף‬
.6(onclick ‫)לדוגמא‬ ‫האלמנטים‬ ‫כל‬ ‫של‬ events - ‫המאורעות‬ ‫לכל‬ ‫להאזין‬
.7‫בדף‬ ‫חדשים‬ ‫מאורעות‬ ‫להוסיף‬
.8‫שלהם‬ ‫והמאפיינים‬ ‫האלמנטים‬ ‫על‬ ‫מידע‬ ‫לקבל‬
‫והמאפינים‬ ‫האלמנטים‬ ‫על‬ CRUD - CreateReadUpdateDelete ‫פעולות‬ ‫לנו‬ ‫נותן‬ DOM
HTML ‫ה‬ ‫בדף‬ ‫שלהם‬
5

script ‫תגית‬
javascript ‫של‬ ‫קוד‬ ‫לכתוב‬ ‫לנו‬ ‫מאפשרת‬ script ‫תגית‬
‫הדף‬ ‫עלית‬ ‫את‬ ‫תעכב‬ ‫שלא‬ ‫מנת‬ ‫על‬ body ‫אלמנט‬ ‫בסוף‬ ‫למקמה‬ ‫נהוג‬
<html>
<head></head>
<body>
<script>
alert("hello world");
</script>
</body>
</html>
6
‫לכתוב‬ ‫שניתן‬ ‫נראה‬ ‫בהמשך‬
javascript ‫בקובץ‬ ‫גם‬ ‫קוד‬
HTML ‫ה‬ ‫דף‬ ‫איך‬ ‫ונראה‬
‫הזה‬ ‫החיצוני‬ ‫לקובץ‬ ‫מתייחס‬

style ‫שינוי‬ - ‫נוספת‬ ‫דוגמא‬
<body>
<button onclick="clickHandler()">Click Me</button>
<p id="id1">This text is static</p>
<script>
function clickHandler() {
document.getElementById('id1').style.color = 'red';
document.getElementById('id1').innerHTML = 'This text is dynamic and red';}
</script>
</body>
7
JS ‫באמצעות‬ ‫צבע‬ ‫שינוי‬
‫של‬ DOM ‫מאפיין‬ ‫דרך‬ ‫וזאת‬
DOM ‫מאפיין‬ ‫ודרכו‬ style
color ‫בשם‬
‫של‬ ‫קוד‬ ‫רושמים‬
. script ‫תגית‬ ‫בתוך‬javascript
‫בסוף‬ ‫הזה‬ ‫התג‬ ‫את‬ ‫למקם‬ ‫נהוג‬
‫את‬ ‫יעכב‬ ‫שלא‬ ‫מנת‬ ‫על‬ body‫ה‬
‫והתצוגה‬ ‫האלמנטים‬ ‫עלית‬

output - ‫כתיבה‬
‫דרכים‬ ‫בכמה‬ ‫למסך‬ ‫מידע‬ ‫לכתוב‬ ‫אפשר‬
8
‫כתיבה‬ ‫אמצעי‬ ‫מימוש‬ ‫דוגמה‬
content - ‫התוכן‬ ‫לתוך‬
‫האלמנט‬ ‫של‬
innerHTML document.getElementById("someId").inn
erHTML=”newText”;
‫הדף‬ ‫של‬ output‫ל‬ document.write() document.write(3+3);
‫הודעות‬ ‫לתיבת‬ window.alert() window.alert("pop up message");
.‫הדפדפן‬ ‫של‬ console‫ל‬
‫כדי‬ F12 ‫על‬ ‫לחיצה‬
‫המידע‬ ‫את‬ ‫לראות‬
console.log() console.log(“debug info”);

statements - ‫משפטים‬
.‫הדפדפן‬ ‫ידי‬ ‫על‬ ‫השנייה‬ ‫אחרי‬ ‫אחת‬ ‫מבוצעות‬ ‫אשר‬ ‫פקודות‬ ‫הן‬ Javascript ‫ב‬ ‫משפטים‬
‫לדוגמא‬
var a, b;
a = 1;
b = 2;
console.log(a + b);
‫פונקציות‬ ‫עבור‬ ‫הקודמים‬ ‫בשקפים‬ ‫שעשינו‬ ‫כמו‬ {.....} ‫לבלוק‬ ‫משפטים‬ ‫מספר‬ ‫להכניס‬ ‫אפשר‬
9
‫משפטים‬

comments - ‫הערות‬
‫דרכים‬ ‫בשתי‬ ‫להגדיר‬ ‫אפשר‬
// this is a comment for one line
/* this is
comment for
few lines
*/
10

variables - ‫משתנים‬
‫לדוגמא‬ var ‫בעזרת‬ ‫מוגדרים‬ ‫משתנים‬
var a,b=1,c;
a=2;
c=a+b;
: ‫משתנים‬ ‫שמות‬
●‫ערכית‬ ‫חד‬ ‫מוגדר‬ ‫משתנה‬ ‫שם‬
●case sensitive ‫נקרא‬ ‫זה‬ X ‫בשם‬ ‫למשתנה‬ x ‫בשם‬ ‫משתנה‬ ‫בין‬ ‫הבדל‬ ‫יש‬
●‫באות‬ ‫להתחיל‬ ‫חייבים‬ ‫משתנים‬ ‫שמות‬
11

operators - ‫חשובים‬ ‫אופרטורים‬
‫דוגמה‬
var a=1,b=”abc”,c;
c=1+b;// ‫מותר‬ ‫זה‬
12
‫משפחה‬ ‫פירוט‬
‫אריתמטיים‬ + - * / % ++ --
‫השמה‬ = += -= *= /= %=
‫השוואה‬ == === != !== < > <= >= ?
‫לוגיים‬ && || !
‫שווה‬ ‫ערך‬ ‫האם‬
‫סוג‬ ‫וגם‬
‫שווה‬ ‫לא‬ ‫ערך‬ ‫האם‬
‫שווה‬ ‫לא‬ ‫סוג‬ ‫או‬

data types - ‫מידע‬ ‫סוגי‬
‫אבל‬ ,‫ועוד‬ ‫מספרים‬ , ‫,מחרוזות‬ ‫בוליאני,אובייקטים‬ : ‫שונים‬ ‫מסוגים‬ ‫מידע‬ ‫להכיל‬ ‫יכולים‬ javascript ‫ב‬ ‫משתנים‬
var ‫בעזרת‬ ‫מוגדרים‬ ‫כולם‬
var num = 1.5,name='123', person = {firstName:'John' ,lastName:'Deer' },d=true,e;
d = name + num;
var x = 10 + 4 + "V1";
var y = "V1" + 10 + 4;
var s1=’cat’ , s2=”tiger”;
alert(e);
13
‫לצורך‬ , JS ‫ב‬ ‫מותר‬
‫יחשב‬ num ‫הפעולה‬
‫יהיה‬ d ‫גם‬ ‫ולכן‬ ‫כמחרוזת‬
‫מחרוזת‬x ‫שווה‬ ‫לא‬ y
‫החישוב‬ ‫כי‬
‫מתבצע‬
‫לימין‬ ‫משמאל‬
‫מחרוזת‬ ‫להגדיר‬ ‫ניתן‬
‫גרש‬ ‫או‬ ‫אחד‬ ‫גרש‬ ‫באמצעות‬
‫כפול‬‫ערך‬ ‫שזה‬ undefined ‫יציג‬
‫ערך‬ ‫קבל‬ ‫שלא‬ ‫משתנה‬

functions - ‫פונקציות‬
.‫מסוימת‬ ‫משימה‬ ‫לעשות‬ ‫שנועדו‬ ‫משפטים‬ ‫של‬ ‫אוסף‬ ‫ידי‬ ‫על‬ ‫מוגדרת‬ ‫פונקציה‬
.‫לה‬ ‫יקראו‬ ‫כאשר‬ ‫תבוצע‬ ‫הפונקציה‬
function sum(a, b) {
return a + b;
}
alert(sum(2, 3));
14

objects - ‫אוביקטים‬
‫לדוגמא‬ ‫ומאפיינים‬ ‫פונקציות‬ ‫יש‬ ‫לאובייקט‬
var person = {
firstName: 'John', lastName: 'Deer', getFullName: function () {
return this.firstName + this.lastName;
}
};
alert(person.firstName);
alert(person.getFullName());
15
‫פונקציה‬ ‫או‬ ‫למאפיין‬ ‫גישה‬
‫בעזרת‬ ‫נעשית‬ ‫אובייקט‬ ‫של‬
‫ונקודה‬ ‫האובייקט‬ ‫שם‬
‫את‬ ‫בהמשך‬ ‫נבין‬
this ‫של‬ ‫המשמעות‬

variable scope - ‫משתנים‬ ‫של‬ ‫מחיה‬ ‫תחום‬
.‫גישה‬ ‫לך‬ ‫יש‬ ‫אליהם‬ ‫המשתנים‬ ‫אוסף‬ ‫הוא‬ Scope
16
‫משתנה‬ ‫סוג‬ ‫הסבר‬ ‫דוגמה‬
local - ‫מקומי‬ ‫ניתנים‬ ‫פונקציה‬ ‫בתוך‬ ‫שמוגדרים‬ ‫משתנים‬
‫בלבד‬ ‫הפונקציה‬ ‫מתוך‬ ‫לגישה‬
function F() {
var a = 1;
//......
}
global - ‫גלובלי‬ ‫נחשב‬ ‫לפונקציה‬ ‫מחוץ‬ ‫שמוגדר‬ ‫משתנה‬
‫וגם‬ ‫לפונקציה‬ ‫מחוץ‬ ‫גם‬ ‫לגישה‬ ‫וניתן‬ ‫גלובלי‬
‫בתוכה‬
var a = 1;
function F1() { a++;}
F1();
alert(a); // --- show 2
‫אוטומטי‬ ‫גלובלי‬ ‫בתוך‬ ‫מוגדר‬ ‫שלא‬ ‫משתנה‬ : ‫זהירות‬
‫אוטומטי‬ ‫באופן‬ ‫גלובלי‬ ‫להיות‬ ‫הופך‬ ‫הפונקציה‬
function F1() {a = 1;
a++;}
F1();
alert(a);// --- show 2

event - ‫מאורע‬
‫לעלות‬ ‫סיים‬ html‫ה‬ ‫דף‬ ‫לדוגמא‬ HTML ‫ה‬ ‫דף‬ ‫עם‬ ‫המשתמש‬ ‫של‬ ‫אינטראקציה‬ ‫עקב‬ ‫כלל‬ ‫בדרך‬ ‫מתרחש‬ ‫מאורע‬
.‫הלאה‬ ‫וכך‬ ‫כפתור‬ ‫על‬ ‫לחץ‬ ‫משתמש‬ ,
‫יתרחש‬ ‫כשהמאורע‬ ‫יופעל‬ ‫אשר‬ ‫קוד‬ JS ‫לרשום‬ ‫מאפשר‬ Javascript
<element event=’javascript code’>
‫ללא‬ ‫והשנייה‬ ( script ‫בתגית‬ ‫להגדירה‬ ‫)יש‬ ‫הפונקציה‬ ‫שם‬ ‫רישום‬ ‫עם‬ ‫אחת‬ : ‫במאורע‬ ‫לטפל‬ ‫צורות‬ ‫שתי‬ ‫להלן‬
<body>
<button onclick="alert('i was clicked')">Click Me</button>
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" onclick="boatClickHandler()" alt="boat"/>
</body>
17

‫נפוצים‬ ‫מאורעות‬ ‫רשימת‬
18
‫מאורע‬ ‫שם‬ ‫הסבר‬
onchange input ‫לאלמנט‬ ‫טקסט‬ ‫הכניס‬ ‫לדוגמא‬ ‫באלמנט‬ ‫שינוי‬ ‫כשהיה‬ ‫מתרחש‬
onclick ‫כפתור‬ ‫לדוגמא‬ ‫אלמנט‬ ‫על‬ ‫משתמש‬ ‫לחיצת‬ ‫בעקבות‬ ‫מתרחש‬
onmouseover ‫לינק‬ ‫מעל‬ ‫לדוגמא‬ ‫לאלמנט‬ ‫מעל‬ ‫העכבר‬ ‫עם‬ ‫עובר‬ ‫כשהמשתמש‬ ‫מתרחש‬
onload ‫הדף‬ ‫את‬ ‫להעלות‬ ‫סיים‬ ‫הדפדפן‬ ‫כאשר‬ ‫מתרחש‬
onkeydown input ‫אלמנט‬ ‫בתוך‬ ‫לדוגמא‬ ‫מקש‬ ‫על‬ ‫לוחץ‬ ‫כשהמשתמש‬ ‫מתרחש‬

‫תנאים‬
‫ובלוק‬ ‫במשפט‬ ‫שימוש‬ ‫כולל‬ C# ‫ב‬ ‫כמו‬ ‫בדיוק‬ ‫הוא‬ if , if else ,switch ‫ב‬ ‫השימוש‬
<body>
<p id="id1"></p>
<script>
var a = 10;
if (a > 1) {document.getElementById("id1").innerHTML="hello";}
else {document.getElementById("id1").innerHTML = "world";}
</script>
</body>
19
‫מתבצע‬ ‫האלמנט‬ ‫תוכן‬ ‫שינוי‬
.javascript ‫בקוד‬

‫לולאות‬
C# ‫ב‬ ‫כמו‬ ‫בדיוק‬ ‫הוא‬ break‫ב‬ ‫שימוש‬ ‫וכן‬ for , while ‫בלולאות‬ ‫שימוש‬
<body>
<p id="id1"></p><p id="id2"></p>
<script>
var i;
for (i = 0; i < 5; i++) {document.getElementById('id1').innerHTML += i;}
while (i > 0) {document.getElementById('id2').innerHTML += i + '<br>';
i--;}
</script>
</body>
20
‫האלמנט‬ ‫תוכן‬ ‫את‬ ‫שינינו‬
javascript ‫בעזרת‬
‫חדשים‬ ‫תגים‬ ‫לו‬ ‫והוספנו‬
br ‫של‬

array - ‫מערך‬
‫משתנה‬ ‫שם‬ ‫אותו‬ ‫תחת‬ ‫ערכים‬ ‫מספר‬ ‫החזקת‬ ‫מאפשר‬ ‫מערך‬
(‫הראשון‬ ‫במקום‬ 0) ‫האיבר‬ ‫של‬ ‫והאינדקס‬ [] ‫המערך‬ ‫שם‬ ‫באמצעות‬ ‫נעשה‬ ‫במערך‬ ‫לאיבר‬ ‫גישה‬
<body>
<h3>List of fruits using array and for loop : </h3> <div id="id1"></div>
<script>
var arFruits = ['orange', 'banana', 'lemon'], strText = '<ul>';
for (var i = 0; i < arFruits.length; i++) {strText += '<li>' + arFruits[i] + '</li>';}
strText += '</ul>';document.getElementById('id1').innerHTML = strText;
</script>
</body>
21
‫דינמית‬ ‫בצורה‬ ‫יצרנו‬
‫רשימה‬ ‫של‬ ‫אלמנט‬
‫לולאה‬ ‫בעזרת‬ ‫וזאת‬
‫מערך‬ ‫על‬

Debugging
.‫תחביר‬ ‫שגיאות‬ ‫עם‬ HTML ‫דף‬ ‫להעלות‬ ‫אפשר‬ ‫ולכן‬ ‫קומפילר‬ javascript‫ב‬ ‫אין‬
debugging ‫ל‬ ‫אופציות‬ ‫להלן‬ .‫למצוא‬ ‫נדרש‬ ‫אותה‬ ‫לוגית‬ ‫שגיאה‬ ‫יש‬ ‫אבל‬ ‫תחביר‬ ‫שגיאות‬ ‫אין‬ ‫לעתים‬
22
debugging ‫אופצית‬ ‫הסבר‬
output ‫להשתמש‬ ‫אפשר‬ ‫הזה‬ ‫בהקשר‬ .‫למסך‬ ‫לכתוב‬ ‫שאפשר‬ ‫הקודמים‬ ‫בשקפים‬ ‫ראינו‬
alert ‫או‬ (F12 ‫על‬ ‫)ללחוץ‬ console.log‫ב‬
‫דפדפנים‬ ‫של‬ ‫כלים‬ ‫יש‬ .‫משתנים‬ ‫ולראות‬ breakpoint ‫לשים‬ ‫שמאפשר‬ ‫כלי‬ ‫יש‬ chrome ‫ל‬ ‫לדוגמא‬
‫,לוחצים‬ sources ‫כך‬ ‫אחר‬ F12 ‫כך‬ ‫אחר‬ chrome ‫דרך‬ HTML‫ה‬ ‫דף‬ ‫את‬ ‫לפתוח‬
‫לדף‬ ‫רענון‬ ‫מבצעים‬ , breakpoint ‫להכנסת‬ ‫שמאל‬ ‫מצד‬ ‫בקוד‬ ‫מסוימת‬ ‫השורה‬ ‫על‬
‫מימין‬ ‫התפריט‬ ‫באמצעות‬ step by step , watch ‫לעשות‬ ‫וניתן‬

HTML DOM
: ‫לדוגמא‬ ‫בהן‬ ‫משתמש‬ javascript ‫ש‬ ‫ופונקציות‬ ‫מאפינים‬ ‫מכיל‬ HTML DOM
HTML DOM ‫של‬ ‫פונקציה‬ ‫היא‬ getElementById
HTML DOM ‫של‬ ‫מאפיין‬ ‫הוא‬ innerHTML
23

HTML DOM Document
‫שונות‬ ‫בקטגוריות‬ ‫פונקציות‬ ‫מכיל‬ ‫והוא‬ ‫הדף‬ ‫את‬ ‫שמיצג‬ ‫האובייקט‬ ‫זה‬
24
‫קטגוריה‬ ‫לפונקציה‬ ‫דוגמה‬
‫אלמנט‬ ‫מציאת‬ document.getElementById(id)
‫אלמנטים‬ ‫שינוי‬ element.setAttribute(attribute, value)
‫אלמנטים‬ ‫ומחיקת‬ ‫הוספה‬ document.createElement(element)
document.removeChild(element)
‫למאורע‬ handler ‫הוספת‬ document.getElementById(id).onclick = function(){code}
(‫מאפיין‬ ‫)בשימוש‬ ‫אובייקטים‬ ‫מציאת‬ document.body

‫חיצוני‬ ‫מקובץ‬ Javascript ‫ב‬ ‫שימוש‬
‫הבאה‬ ‫בצורה‬ script ‫אלמנט‬ ‫דרך‬ html ‫מקבץ‬ ‫אליו‬ ‫להפנות‬ ‫ואז‬ ‫חיצוני‬ ‫בקובץ‬ javascript ‫קוד‬ ‫לשים‬ ‫אפשר‬
<body>
<script src="someJavascriptFile.js"></script>
</body>
‫לדוגמא‬ ‫הקוד‬ ‫את‬ ‫רושמים‬ ‫החיצוני‬ ‫בקובץ‬
alert(‘hello world’);
25

javascript

Recommended

Recommended

More Related Content

Similar to javascript

Similar to javascript (11)

More from Nathan Krasney

More from Nathan Krasney (8)

javascript