SlideShare ist ein Scribd-Unternehmen logo
1 von 87
Downloaden Sie, um offline zu lesen
‫שישה 	ימים 	עם‬
                          ‫ 	‬
                           ‫ג’אווהסקריפט‬




‫21 ,61 ‪Tuesday, October‬‬
‫שישה 	ימים 	עם‬
                          	 
                           ‫ג’אווהסקריפט‬

                   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
...‫לכל 	שאלה‬


                     me@ynonperek.com
                     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>
                                       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   JavaScript




Tuesday, 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.html




Tuesday, October 16, 12
‫שישה 	ימים 	עם‬
                          ‫ 	‬
                           ‫ג’אווהסקריפט‬




‫21 ,61 ‪Tuesday, October‬‬
‫שישה 	ימים 	עם‬
                          	 
                           ‫ג’אווהסקריפט‬

                   Intro To JS




Tuesday, October 16, 12
‫שישה 	ימים 	עם‬
                          	 
                           ‫ג’אווהסקריפט‬

                   Intro To JS   JS Events




Tuesday, October 16, 12
...‫לכל 	שאלה‬


                     me@ynonperek.com
                     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          el.addEventListener


                          Event



                          Code


Tuesday, October 16, 12
Event	 Handlers

                 Html Element          el.addEventListener


                          Event              Event Handler



                          Code


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
...‫לכל 	שאלה‬


                     me@ynonperek.com
                     http://mobileweb.ynonperek.com




Tuesday, October 16, 12
‫בעבוע 	אירועים‬
                              document




                                div

                                         img




Tuesday, October 16, 12
‫בעבוע 	אירועים‬
                                      document




                                          div
                          currentTarget
                                                 img
                          target




Tuesday, October 16, 12
‫בעבוע 	אירועים‬
                                   document



                     currentTarget div


                                              img
                          target




Tuesday, October 16, 12
‫בעבוע 	אירועים‬
                                   document

                     currentTarget

                                     div

                                              img
                          target




Tuesday, October 16, 12
‫המשתנה 	‪this‬‬



                           ‫המשתנה ‪ this‬בתוך קוד טיפול באירוע‬
                          ‫מתייחס לאלמנט שעליו הופעל האירוע‬




‫21 ,61 ‪Tuesday, October‬‬
‫תאימות 	בין 	דפדפנים‬




                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
...‫לכל 	שאלה‬


                     me@ynonperek.com
                     http://mobileweb.ynonperek.com




Tuesday, 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.com

Tuesday, 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

Tuesday, 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.il

Tuesday, 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.html


Tuesday, October 16, 12
JavaScript	 Templates


                     me@ynonperek.com
                     http://mobileweb.ynonperek.com




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>              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-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‬‬




‫21 ,61 ‪Tuesday, October‬‬
var	 :‫משתנים‬

                          f3        z


                          f2        y


                          f1        x




Tuesday, 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.html



Tuesday, October 16, 12
‫שישה 	ימים 	עם‬
                          	 
                           ‫ג’אווהסקריפט‬

                   Intro To JS   JS Events   Data




                     Functions

Tuesday, October 16, 12

Weitere ähnliche Inhalte

Mehr von Ynon Perek

09 performance
09 performance09 performance
09 performanceYnon Perek
 
Mobile Web Intro
Mobile Web IntroMobile Web Intro
Mobile Web IntroYnon Perek
 
Qt multi threads
Qt multi threadsQt multi threads
Qt multi threadsYnon Perek
 
Architecture app
Architecture appArchitecture app
Architecture appYnon Perek
 
Unit Testing JavaScript Applications
Unit Testing JavaScript ApplicationsUnit Testing JavaScript Applications
Unit Testing JavaScript ApplicationsYnon Perek
 
How to write easy-to-test JavaScript
How to write easy-to-test JavaScriptHow to write easy-to-test JavaScript
How to write easy-to-test JavaScriptYnon Perek
 
Introduction to Selenium and Ruby
Introduction to Selenium and RubyIntroduction to Selenium and Ruby
Introduction to Selenium and RubyYnon Perek
 
Introduction To Web Application Testing
Introduction To Web Application TestingIntroduction To Web Application Testing
Introduction To Web Application TestingYnon Perek
 
Qt Design Patterns
Qt Design PatternsQt Design Patterns
Qt Design PatternsYnon Perek
 
Web Application Security
Web Application SecurityWeb Application Security
Web Application SecurityYnon Perek
 
JavaScript DOM Manipulations
JavaScript DOM ManipulationsJavaScript DOM Manipulations
JavaScript DOM ManipulationsYnon Perek
 

Mehr von Ynon Perek (20)

Html5 intro
Html5 introHtml5 intro
Html5 intro
 
09 performance
09 performance09 performance
09 performance
 
Mobile Web Intro
Mobile Web IntroMobile Web Intro
Mobile Web Intro
 
Qt multi threads
Qt multi threadsQt multi threads
Qt multi threads
 
Vimperl
VimperlVimperl
Vimperl
 
Syllabus
SyllabusSyllabus
Syllabus
 
Network
NetworkNetwork
Network
 
Architecture app
Architecture appArchitecture app
Architecture app
 
Cryptography
CryptographyCryptography
Cryptography
 
Unit Testing JavaScript Applications
Unit Testing JavaScript ApplicationsUnit Testing JavaScript Applications
Unit Testing JavaScript Applications
 
How to write easy-to-test JavaScript
How to write easy-to-test JavaScriptHow to write easy-to-test JavaScript
How to write easy-to-test JavaScript
 
Introduction to Selenium and Ruby
Introduction to Selenium and RubyIntroduction to Selenium and Ruby
Introduction to Selenium and Ruby
 
Introduction To Web Application Testing
Introduction To Web Application TestingIntroduction To Web Application Testing
Introduction To Web Application Testing
 
Accessibility
AccessibilityAccessibility
Accessibility
 
Angularjs
AngularjsAngularjs
Angularjs
 
Js memory
Js memoryJs memory
Js memory
 
Qt Design Patterns
Qt Design PatternsQt Design Patterns
Qt Design Patterns
 
Web Application Security
Web Application SecurityWeb Application Security
Web Application Security
 
JavaScript DOM Manipulations
JavaScript DOM ManipulationsJavaScript DOM Manipulations
JavaScript DOM Manipulations
 
Mongodb Intro
Mongodb IntroMongodb Intro
Mongodb Intro
 

Javascript

  • 1. ‫שישה ימים עם‬ ‫ ‬ ‫ג’אווהסקריפט‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 2. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS Tuesday, October 16, 12
  • 3. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Tuesday, October 16, 12
  • 4. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Tuesday, October 16, 12
  • 5. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions Tuesday, October 16, 12
  • 6. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions OO JS Tuesday, October 16, 12
  • 7. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions OO JS Pro JS Tuesday, October 16, 12
  • 8. ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.com Tuesday, October 16, 12
  • 10. ‫על השפה‬ “We envisioned a much livelier Web consisting of pages that acted more like applications” Tuesday, October 16, 12
  • 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
  • 28. ‫שישה ימים עם‬ ‫ ‬ ‫ג’אווהסקריפט‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 29. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS Tuesday, October 16, 12
  • 30. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Tuesday, October 16, 12
  • 31. ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.com Tuesday, October 16, 12
  • 33. ‫טיפול באירועים‬ Click Event Queue Tuesday, October 16, 12
  • 34. Main Loop ‫ממתין לאירוע‬ ‫מטפל באירוע‬ Tuesday, October 16, 12
  • 35. Main Loop ‫ממתין לאירוע‬ ‫מטפל באירוע‬ Tuesday, October 16, 12
  • 36. Main Loop ‫ממתין לאירוע‬ ‫מטפל באירוע‬ Tuesday, October 16, 12
  • 38. Event Handlers Html Element Tuesday, October 16, 12
  • 39. Event Handlers Html Element Event Tuesday, October 16, 12
  • 40. Event Handlers Html Element Event Code Tuesday, October 16, 12
  • 41. Event Handlers Html Element el.addEventListener Event Code Tuesday, October 16, 12
  • 42. Event Handlers Html Element el.addEventListener Event Event Handler Code Tuesday, October 16, 12
  • 43. ‫סוגי אירועים‬ click change dblclick blur submit keypress :‫רשימה מלאה‬ http://www.tutorialspoint.com/html5/ html5_events.htm Tuesday, October 16, 12
  • 44. ...‫מה הלאה‬ 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
  • 45. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Tuesday, October 16, 12
  • 46. ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.com Tuesday, October 16, 12
  • 47. ‫בעבוע אירועים‬ document div img Tuesday, October 16, 12
  • 48. ‫בעבוע אירועים‬ document div currentTarget img target Tuesday, October 16, 12
  • 49. ‫בעבוע אירועים‬ document currentTarget div img target Tuesday, October 16, 12
  • 50. ‫בעבוע אירועים‬ document currentTarget div img target Tuesday, October 16, 12
  • 51. ‫המשתנה ‪this‬‬ ‫המשתנה ‪ this‬בתוך קוד טיפול באירוע‬ ‫מתייחס לאלמנט שעליו הופעל האירוע‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 52. ‫תאימות בין דפדפנים‬ http://www.quirksmode.org/js/ events_advanced.html Tuesday, October 16, 12
  • 53. ...‫מה הלאה‬ 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
  • 54. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Tuesday, October 16, 12
  • 55. ...‫לכל שאלה‬ me@ynonperek.com http://mobileweb.ynonperek.com Tuesday, October 16, 12
  • 56. ‫ארגון מידע‬ ‫מערכים‬ ‫אובייקטים‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 57. ‫מערכים‬ ‫מערך הינו רשימה סדורה של ערכים‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 58. ‫מערכים‬ ‫מערך הינו רשימה סדורה של ערכים‬ ‫;]7 ,2 ,'‪var arr = [1, 'a', 'b‬‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 59. ‫מערכים‬ ‫מערך הינו רשימה סדורה של ערכים‬ ‫;]7 ,2 ,'‪var arr = [1, 'a', 'b‬‬ ‫1‬ ‫’‪‘a‬‬ ‫’‪‘b‬‬ ‫2‬ ‫7‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 60. ‫מערכים‬ ‫פנייה ישירה לאיבר במערך החל מ-0‬ ‫’‪arr[2] = ‘d‬‬ ‫1‬ ‫’‪‘a‬‬ ‫’‪‘b‬‬ ‫2‬ ‫7‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 61. ‫מערכים‬ ‫פנייה ישירה לאיבר במערך החל מ-0‬ ‫’‪arr[2] = ‘d‬‬ ‫1‬ ‫’‪‘a‬‬ ‫’‪‘d‬‬ ‫’‪‘b‬‬ ‫2‬ ‫7‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 62. ‫מתי נשתמש במערכים‬ ‫רשימת אנשי קשר‬ ‫רכיבים במתכון‬ ‫רשימת שירים‬ ‫באלבום‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 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‬‬
  • 69. ‫קריאה ותרגול‬ 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
  • 70. JavaScript Templates me@ynonperek.com http://mobileweb.ynonperek.com Tuesday, October 16, 12
  • 72. JavaScript Templates <div class="entry">   <h1>{{name}}</h1>   <span>{{details}}</span> </div> Tuesday, October 16, 12
  • 73. JavaScript Templates <div class="entry"> {   <h1>{{name}}</h1>   name: "Jimmy Jones",   <span>{{details}}</span>   details: "A friend of Ghandi" </div> } Tuesday, October 16, 12
  • 74. 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
  • 75. ‫קריאת המשך‬ http://handlebarsjs.com/ https://github.com/ynonp/6-days-of-javascript Tuesday, October 16, 12
  • 76. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Tuesday, October 16, 12
  • 77. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions Tuesday, October 16, 12
  • 78. ‫הגדרת פונקציות‬ var foo = function(x, y) {   return x + y; }; function bar(x, y) {   return x + y; } Tuesday, October 16, 12
  • 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
  • 83. ‫דוגמא: פונקציה‬ ‫ ‬ ‫המייצרת אובייקט‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 84. ‫פונקציות בג’אווהסקריפט‬ ‫לפונקציות יש מקום מאוד מרכזי בשפה‬ ‫הן מהוות את הבסיס ל ‪Namespaces & Scoping‬‬ ‫הן מהוות את הבסיס ל ‪Object Oriented‬‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 85. ‫הפרמטר ‪this‬‬ ‫לכל פונקציה ניתן להעביר משתנה נוסף‬ ‫שנקרא ‪this‬‬ ‫משתנה זה כולל מידע נוסף שהפונקציה יכולה‬ ‫להתייחס אליו‬ ‫דוגמאות‬ ‫21 ,61 ‪Tuesday, October‬‬
  • 86. ‫קריאת המשך‬ https://developer.mozilla.org/en-US/docs/ JavaScript/Guide/Functions http://ynonperek.com/course/mobile/ javascript-exer.html Tuesday, October 16, 12
  • 87. ‫שישה ימים עם‬ ‫ג’אווהסקריפט‬ Intro To JS JS Events Data Functions Tuesday, October 16, 12