12. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
13. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
14. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
15. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
16. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
17. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
18. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs
to us</p>
</body>
</html>
Tuesday, October 16, 12
19. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs All your bases are
to us</p> belongs to us
</body>
</html>
Tuesday, October 16, 12
20. Rendering Engine
<html>
<body>
<h1>Hello World</h1>
Hello World
<script src="code.js"></script>
<p>All your bases are belongs All your bases are
to us</p> belongs to us
</body>
</html>
Tuesday, October 16, 12
21. DOM :שיטת עבודה
Div HTML
HTMLDivElement JavaScript
Tuesday, October 16, 12
22. DOM Code
<p id="text">Hello JavaScript</p> באמצעות משתנים
,HTML המחוברים ל
אנו יכולים לשלוט
במה שקורה על
var p = document.querySelector('p#text'); המסך
Tuesday, October 16, 12
23. DOM Code
<p id="text">Hello JavaScript</p> באמצעות משתנים
,HTML המחוברים ל
אנו יכולים לשלוט
במה שקורה על
var p = document.querySelector('p#text'); המסך
Tuesday, October 16, 12
24. JS טעינת קובץ
<script src="file.js"></script>
Tuesday, October 16, 12
25. JS שינוי צבע ב
var p = document.querySelector('p#text');
p.style.color = 'white';
Tuesday, October 16, 12
26. שינוי צבע לפי שעה
var p = document.querySelector('p#text');
p.style.color = 'white';
var now = new Date();
if ( now.getMinutes() > 10 ) {
p.style.background = 'green';
} else {
p.style.background = 'red';
}
Tuesday, October 16, 12
27. ...מה הלאה
https://developer.mozilla.org/en-US/docs/
JavaScript/A_re-introduction_to_JavaScript
http://ynonperek.com/javascript-exer.html
Tuesday, October 16, 12
63. אובייקטים
אובייקט מאפשר אחסון ערכים על פי מפתחות
21 ,61 Tuesday, October
64. אובייקטים
אובייקט מאפשר אחסון ערכים על פי מפתחות
var me = {
name: 'Ynon Perek',
web: 'http://mobileweb.ynonperek.com'
};
Tuesday, October 16, 12
65. אובייקטים
אובייקט מאפשר אחסון ערכים על פי מפתחות
var me = {
name: 'Ynon Perek',
web: 'http://mobileweb.ynonperek.com'
};
name Ynon Perek
web http://mobileweb.ynonperek.com
Tuesday, October 16, 12
66. פנייה ישירה
ניתן לבצע פנייה ישירה למפתח באמצעות
סוגריים מרובעים או נקודה
me[“web”]='http://publicspeakr.blogspot.co.il';
me.web = 'http://publicspeakr.blogspot.co.il';
name Ynon Perek
web http://mobileweb.ynonperek.com
Tuesday, October 16, 12
67. פנייה ישירה
ניתן לבצע פנייה ישירה למפתח באמצעות
סוגריים מרובעים או נקודה
me[“web”]='http://publicspeakr.blogspot.co.il';
me.web = 'http://publicspeakr.blogspot.co.il';
name Ynon Perek
web http://mobileweb.ynonperek.com
http://publicspeakr.blogspot.co.il
Tuesday, October 16, 12
68. פעולות נוספות
אפשר לעדכן מפתח לא קיים - ואז הוא יתווסף
לאובייקט כמפתח/ערך חדש
הפקודה deleteמוחקת מפתח/ערך מאובייקט
21 ,61 Tuesday, October
80. ארגומנטים
var sum = function() {
var sum = 0;
for ( var i=0; i < arguments.length; i++ ) {
sum += arguments[i];
}
return sum;
};
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
Tuesday, October 16, 12
81. ארגומנטים
ארגומנט שהועבר בקריאה אבל לא צוין
בהגדרה נכנס למערך arguments
ארגומנט שצוין בהגדרה אבל לא הועבר
בקריאה מקבל ערך undefined
21 ,61 Tuesday, October
82. var :משתנים
f3 z
f2 y
f1 x
Tuesday, October 16, 12
84. פונקציות בג’אווהסקריפט
לפונקציות יש מקום מאוד מרכזי בשפה
הן מהוות את הבסיס ל Namespaces & Scoping
הן מהוות את הבסיס ל Object Oriented
21 ,61 Tuesday, October
85. הפרמטר this
לכל פונקציה ניתן להעביר משתנה נוסף
שנקרא this
משתנה זה כולל מידע נוסף שהפונקציה יכולה
להתייחס אליו
דוגמאות
21 ,61 Tuesday, October