Date post: | 15-Dec-2014 |
Category: |
Technology |
Upload: | ynon-perek |
View: | 1,719 times |
Download: | 1 times |
שישה ימים עם ג’אווהסקריפט
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Functions
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Functions OO JS
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Functions OO JS Pro JS
Tuesday, October 16, 12
http://mobileweb.ynonperek.com
לכל שאלה...
Tuesday, October 16, 12
על השפה
Tuesday, October 16, 12
על השפה
“We envisioned a much livelier Web consisting of pages that acted more like applications”
Tuesday, October 16, 12
צד לקוח
Tuesday, October 16, 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
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
Rendering Engine
<html><body> <h1>Hello World</h1> <script src="code.js"></script> <p>All your bases are belongs to us</p></body></html>
Hello World
Tuesday, October 16, 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>
Hello World
Tuesday, October 16, 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>
Hello World
Tuesday, October 16, 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>
Hello World
Tuesday, October 16, 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>
Hello World
Tuesday, October 16, 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>
Hello WorldAll your bases arebelongs to us
Tuesday, October 16, 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>
Hello WorldAll your bases arebelongs to us
Tuesday, October 16, 12
DOM :עבודהשיטת
Div
HTMLDivElement
HTML
JavaScript
Tuesday, October 16, 12
DOM Code
באמצעות משתנים ,HTML המחוברים ל
אנו יכולים לשלוט במה שקורה על
המסך
<p id="text">Hello JavaScript</p>
var p = document.querySelector('p#text');
Tuesday, October 16, 12
DOM Code
באמצעות משתנים ,HTML המחוברים ל
אנו יכולים לשלוט במה שקורה על
המסך
<p id="text">Hello JavaScript</p>
var p = document.querySelector('p#text');
Tuesday, October 16, 12
JS קובץטעינת
<script src="file.js"></script>
Tuesday, October 16, 12
JS בצבע שינוי
var p = document.querySelector('p#text');p.style.color = 'white';
Tuesday, October 16, 12
שינוי צבע לפי שעה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
מה הלאה...
https://developer.mozilla.org/en-US/docs/JavaScript/A_re-introduction_to_JavaScript
http://ynonperek.com/javascript-exer.html
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events
Tuesday, October 16, 12
http://mobileweb.ynonperek.com
לכל שאלה...
Tuesday, October 16, 12
טיפול באירועים
Tuesday, October 16, 12
טיפול באירועים
Click
Event Queue
Tuesday, October 16, 12
Main Loop
ממתין לאירוע
מטפל באירוע
Tuesday, October 16, 12
Main Loop
ממתין לאירוע
מטפל באירוע
Tuesday, October 16, 12
Main Loop
ממתין לאירוע
מטפל באירוע
Tuesday, October 16, 12
Event Handlers
Tuesday, October 16, 12
Event Handlers
Html Element
Tuesday, October 16, 12
Event Handlers
Html Element
Event
Tuesday, October 16, 12
Event Handlers
Html Element
Event
Code
Tuesday, October 16, 12
Event Handlers
Html Element
Event
Code
el.addEventListener
Tuesday, October 16, 12
Event Handlers
Html Element
Event
Code
Event Handler
el.addEventListener
Tuesday, October 16, 12
סוגי אירועים
click change
dblclick blur
submit keypress
רשימה מלאה:http://www.tutorialspoint.com/html5/
html5_events.htm
Tuesday, October 16, 12
מה הלאה...
Events at MDN: https://developer.mozilla.org/en-US/docs/DOM/event
Example Code: https://github.com/ynonp/6-days-of-javascript
Events Exercises: http://ynonperek.com/course/fed/javascript-dom-ex.html
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events
Tuesday, October 16, 12
http://mobileweb.ynonperek.com
לכל שאלה...
Tuesday, October 16, 12
בעבוע אירועים
img
div
document
Tuesday, October 16, 12
בעבוע אירועים
img
div
document
targetcurrentTarget
Tuesday, October 16, 12
בעבוע אירועים
img
div
document
target
currentTarget
Tuesday, October 16, 12
בעבוע אירועים
img
div
document
target
currentTarget
Tuesday, October 16, 12
this המשתנה
המשתנה this בתוך קוד טיפול באירוע מתייחס לאלמנט שעליו הופעל האירוע
Tuesday, October 16, 12
תאימות בין דפדפנים
http://www.quirksmode.org/js/events_advanced.html
Tuesday, October 16, 12
מה הלאה...
Events at MDN: https://developer.mozilla.org/en-US/docs/DOM/event
Example Code: https://github.com/ynonp/6-days-of-javascript
Events Exercises: http://ynonperek.com/course/fed/javascript-dom-ex.html
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Tuesday, October 16, 12
http://mobileweb.ynonperek.com
לכל שאלה...
Tuesday, October 16, 12
ארגון מידעמערכים
אובייקטים
Tuesday, October 16, 12
מערכים
מערך הינו רשימה סדורה של ערכים
Tuesday, October 16, 12
מערכים
מערך הינו רשימה סדורה של ערכים
var arr = [1, 'a', 'b', 2, 7];
Tuesday, October 16, 12
מערכים
מערך הינו רשימה סדורה של ערכים
1 ‘a’ ‘b’ 2 7
var arr = [1, 'a', 'b', 2, 7];
Tuesday, October 16, 12
מערכים
פנייה ישירה לאיבר במערך החל מ-0
1 ‘a’ ‘b’ 2 7
arr[2] = ‘d’
Tuesday, October 16, 12
מערכים
פנייה ישירה לאיבר במערך החל מ-0
1 ‘a’ ‘b’ 2 7
arr[2] = ‘d’
‘d’
Tuesday, October 16, 12
מתי נשתמש במערכים
רשימת אנשי קשר
רכיבים במתכון
רשימת שירים באלבום
Tuesday, October 16, 12
אובייקטיםאובייקט מאפשר אחסון ערכים על פי מפתחות
Tuesday, October 16, 12
אובייקטיםאובייקט מאפשר אחסון ערכים על פי מפתחות
var me = { name: 'Ynon Perek', web: 'http://mobileweb.ynonperek.com'};
Tuesday, October 16, 12
אובייקטיםאובייקט מאפשר אחסון ערכים על פי מפתחות
name Ynon Perek
web http://mobileweb.ynonperek.com
var me = { name: 'Ynon Perek', web: 'http://mobileweb.ynonperek.com'};
Tuesday, October 16, 12
פנייה ישירה
ניתן לבצע פנייה ישירה למפתח באמצעותסוגריים מרובעים או נקודה
me.web = 'http://publicspeakr.blogspot.co.il';
name Ynon Perek
web http://mobileweb.ynonperek.com
me[“web”]='http://publicspeakr.blogspot.co.il';
Tuesday, October 16, 12
פנייה ישירה
ניתן לבצע פנייה ישירה למפתח באמצעותסוגריים מרובעים או נקודה
me.web = 'http://publicspeakr.blogspot.co.il';
name Ynon Perek
web http://mobileweb.ynonperek.comhttp://publicspeakr.blogspot.co.il
me[“web”]='http://publicspeakr.blogspot.co.il';
Tuesday, October 16, 12
פעולות נוספות
אפשר לעדכן מפתח לא קיים - ואז הוא יתווסף לאובייקט כמפתח/ערך חדש
הפקודה delete מוחקת מפתח/ערך מאובייקט
Tuesday, October 16, 12
קריאה ותרגול
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects
https://github.com/ynonp/6-days-of-javascript
http://ynonperek.com/javascript-exer.html
Tuesday, October 16, 12
http://mobileweb.ynonperek.com
JavaScript Templates
Tuesday, October 16, 12
JavaScript Templates
Tuesday, October 16, 12
JavaScript Templates
<div class="entry"> <h1>{{name}}</h1> <span>{{details}}</span></div>
Tuesday, October 16, 12
JavaScript Templates
<div class="entry"> <h1>{{name}}</h1> <span>{{details}}</span></div>
{ name: "Jimmy Jones", details: "A friend of Ghandi"}
Tuesday, October 16, 12
JavaScript Templates
<div class="entry"> <h1>{{name}}</h1> <span>{{details}}</span></div>
{ name: "Jimmy Jones", details: "A friend of Ghandi"}
<div class="entry"> <h1>Jimmy Jones</h1> <span> A friend of Ghandi </span></div>
+
Tuesday, October 16, 12
קריאת המשך
http://handlebarsjs.com/
https://github.com/ynonp/6-days-of-javascript
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Functions
Tuesday, October 16, 12
הגדרת פונקציות
var foo = function(x, y) { return x + y;};
function bar(x, y) { return x + y;}
Tuesday, October 16, 12
דוגמאות
Tuesday, October 16, 12
ארגומנטים 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
ארגומנטים
ארגומנט שהועבר בקריאה אבל לא צוין arguments בהגדרה נכנס למערך
ארגומנט שצוין בהגדרה אבל לא הועבר undefined בקריאה מקבל ערך
Tuesday, October 16, 12
var :משתנים
x
y
z
f1
f2
f3
Tuesday, October 16, 12
דוגמא: פונקציה המייצרת אובייקט
Tuesday, October 16, 12
פונקציות בג’אווהסקריפט
לפונקציות יש מקום מאוד מרכזי בשפה
Namespaces & Scoping הן מהוות את הבסיס ל
Object Oriented הן מהוות את הבסיס ל
Tuesday, October 16, 12
this הפרמטר
לכל פונקציה ניתן להעביר משתנה נוסף this שנקרא
משתנה זה כולל מידע נוסף שהפונקציה יכולה להתייחס אליו
דוגמאות
Tuesday, October 16, 12
קריאת המשך
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions
http://ynonperek.com/course/mobile/javascript-exer.html
Tuesday, October 16, 12
שישה ימים עם ג’אווהסקריפט
Intro To JS JS Events Data
Functions
Tuesday, October 16, 12