• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript
 

Javascript

on

  • 1,799 views

מצגת מלווה למדריך המקוון שישה ימים עם ג'אווהסקריפט. לפרטים:

מצגת מלווה למדריך המקוון שישה ימים עם ג'אווהסקריפט. לפרטים:
http://mobileweb.ynonperek.com

Statistics

Views

Total Views
1,799
Views on SlideShare
572
Embed Views
1,227

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 1,227

http://mobileweb.ynonperek.com 1221
http://localhost 5
http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript Javascript Presentation Transcript

    • ‫שישה ימים עם‬ ‫ ‬ ‫ג’אווהסקריפט‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JSTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS EventsTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events DataTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data FunctionsTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions OO JSTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions OO JS Pro JSTuesday, October 16, 12
    • ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.comTuesday, 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> Hello World   <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> Hello World   <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> Hello World   <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> Hello World   <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> Hello World   <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> 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
    • 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
    • DOM :‫שיטת עבודה‬ Div HTML HTMLDivElement JavaScriptTuesday, October 16, 12
    • DOM Code <p id="text">Hello JavaScript</p> ‫באמצעות משתנים‬ ,HTML ‫המחוברים ל‬ ‫אנו יכולים לשלוט‬ ‫במה שקורה על‬ var p = document.querySelector(p#text); ‫המסך‬Tuesday, October 16, 12
    • DOM Code <p id="text">Hello JavaScript</p> ‫באמצעות משתנים‬ ,HTML ‫המחוברים ל‬ ‫אנו יכולים לשלוט‬ ‫במה שקורה על‬ 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.htmlTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ ‬ ‫ג’אווהסקריפט‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JSTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS EventsTuesday, October 16, 12
    • ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.comTuesday, October 16, 12
    • ‫טיפול באירועים‬Tuesday, October 16, 12
    • ‫טיפול באירועים‬ Click Event QueueTuesday, October 16, 12
    • Main Loop ‫ממתין לאירוע‬ ‫מטפל באירוע‬Tuesday, October 16, 12
    • Main Loop ‫ממתין לאירוע‬ ‫מטפל באירוע‬Tuesday, October 16, 12
    • Main Loop ‫ממתין לאירוע‬ ‫מטפל באירוע‬Tuesday, October 16, 12
    • Event HandlersTuesday, October 16, 12
    • Event Handlers Html ElementTuesday, October 16, 12
    • Event Handlers Html Element EventTuesday, October 16, 12
    • Event Handlers Html Element Event CodeTuesday, October 16, 12
    • Event Handlers Html Element el.addEventListener Event CodeTuesday, October 16, 12
    • Event Handlers Html Element el.addEventListener Event Event Handler CodeTuesday, October 16, 12
    • ‫סוגי אירועים‬ click change dblclick blur submit keypress :‫רשימה מלאה‬ http://www.tutorialspoint.com/html5/ html5_events.htmTuesday, 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.htmlTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS EventsTuesday, October 16, 12
    • ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.comTuesday, October 16, 12
    • ‫בעבוע אירועים‬ document div imgTuesday, October 16, 12
    • ‫בעבוע אירועים‬ document div currentTarget img targetTuesday, October 16, 12
    • ‫בעבוע אירועים‬ document currentTarget div img targetTuesday, October 16, 12
    • ‫בעבוע אירועים‬ document currentTarget div img targetTuesday, October 16, 12
    • ‫המשתנה ‪this‬‬ ‫המשתנה ‪ this‬בתוך קוד טיפול באירוע‬ ‫מתייחס לאלמנט שעליו הופעל האירוע‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫תאימות בין דפדפנים‬ http://www.quirksmode.org/js/ events_advanced.htmlTuesday, 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.htmlTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events DataTuesday, October 16, 12
    • ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.comTuesday, October 16, 12
    • ‫ארגון מידע‬ ‫מערכים‬ ‫אובייקטים‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫מערכים‬ ‫מערך הינו רשימה סדורה של ערכים‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫מערכים‬ ‫מערך הינו רשימה סדורה של ערכים‬ ‫;]7 ,2 ,‪var arr = [1, a, b‬‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫מערכים‬ ‫מערך הינו רשימה סדורה של ערכים‬ ‫;]7 ,2 ,‪var arr = [1, a, b‬‬ ‫1‬ ‫’‪‘a‬‬ ‫’‪‘b‬‬ ‫2‬ ‫7‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫מערכים‬ ‫פנייה ישירה לאיבר במערך החל מ-0‬ ‫’‪arr[2] = ‘d‬‬ ‫1‬ ‫’‪‘a‬‬ ‫’‪‘b‬‬ ‫2‬ ‫7‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫מערכים‬ ‫פנייה ישירה לאיבר במערך החל מ-0‬ ‫’‪arr[2] = ‘d‬‬ ‫1‬ ‫’‪‘a‬‬ ‫’‪‘d‬‬ ‫’‪‘b‬‬ ‫2‬ ‫7‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫מתי נשתמש במערכים‬ ‫רשימת אנשי קשר‬ ‫רכיבים במתכון‬ ‫רשימת שירים‬ ‫באלבום‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫אובייקטים‬ ‫אובייקט מאפשר אחסון ערכים על פי מפתחות‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫אובייקטים‬ ‫אובייקט מאפשר אחסון ערכים על פי מפתחות‬ var me = {   name: Ynon Perek,   web: http://mobileweb.ynonperek.com };Tuesday, October 16, 12
    • ‫אובייקטים‬ ‫אובייקט מאפשר אחסון ערכים על פי מפתחות‬ var me = {   name: Ynon Perek,   web: http://mobileweb.ynonperek.com }; name Ynon Perek web http://mobileweb.ynonperek.comTuesday, October 16, 12
    • ‫פנייה ישירה‬ ‫ניתן לבצע פנייה ישירה למפתח באמצעות‬ ‫סוגריים מרובעים או נקודה‬ me[“web”]=http://publicspeakr.blogspot.co.il; me.web = http://publicspeakr.blogspot.co.il; name Ynon Perek web http://mobileweb.ynonperek.comTuesday, October 16, 12
    • ‫פנייה ישירה‬ ‫ניתן לבצע פנייה ישירה למפתח באמצעות‬ ‫סוגריים מרובעים או נקודה‬ 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.ilTuesday, October 16, 12
    • ‫פעולות נוספות‬ ‫אפשר לעדכן מפתח לא קיים - ואז הוא יתווסף‬ ‫לאובייקט כמפתח/ערך חדש‬ ‫הפקודה ‪ delete‬מוחקת מפתח/ערך מאובייקט‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫קריאה ותרגול‬ 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.htmlTuesday, October 16, 12
    • JavaScript Templates me@ynonperek.com http://mobileweb.ynonperek.comTuesday, October 16, 12
    • JavaScript TemplatesTuesday, 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>   name: "Jimmy Jones",   <span>{{details}}</span>   details: "A friend of Ghandi" </div> }Tuesday, October 16, 12
    • JavaScript Templates <div class="entry"> {   <h1>{{name}}</h1>   name: "Jimmy Jones",   <span>{{details}}</span> +   details: "A friend of Ghandi" </div> } <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-javascriptTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events DataTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data FunctionsTuesday, 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‬‬‫21 ,61 ‪Tuesday, October‬‬
    • var :‫משתנים‬ f3 z f2 y f1 xTuesday, October 16, 12
    • ‫דוגמא: פונקציה‬ ‫ ‬ ‫המייצרת אובייקט‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫פונקציות בג’אווהסקריפט‬ ‫לפונקציות יש מקום מאוד מרכזי בשפה‬ ‫הן מהוות את הבסיס ל ‪Namespaces & Scoping‬‬ ‫הן מהוות את הבסיס ל ‪Object Oriented‬‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫הפרמטר ‪this‬‬ ‫לכל פונקציה ניתן להעביר משתנה נוסף‬ ‫שנקרא ‪this‬‬ ‫משתנה זה כולל מידע נוסף שהפונקציה יכולה‬ ‫להתייחס אליו‬ ‫דוגמאות‬‫21 ,61 ‪Tuesday, October‬‬
    • ‫קריאת המשך‬ https://developer.mozilla.org/en-US/docs/ JavaScript/Guide/Functions http://ynonperek.com/course/mobile/ javascript-exer.htmlTuesday, October 16, 12
    • ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data FunctionsTuesday, October 16, 12