Your SlideShare is downloading. ×
JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JavaScript

1,069
views

Published on

Εισαγωγή στην JavaScript

Εισαγωγή στην JavaScript

Published in: Education, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,069
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • HTML represents data, static. CSS makes it pretty. Modern websites are complex user interfaces.
  • Scripting, giving directions. From the script in movies.
  • A lambda is just an anonymous function - a function defined with no nameA closure is any function which closes over the environment in which it was defined.
  • jsIO.html
  • jsLoops.html
  • Parameters and return value can be anything.jsVars.html
  • Final demo
  • jsEvents.html
  • Transcript

    • 1. JavaScript
    • 2. Τι είναι η JavaScript?
      Light-weight scripting γλώσσα προγραμματισμού.
      Σχεδιάστηκε για να αποκτήσει διαδραστικότητα η HTML.
      Ερμηνεύεται (interpreted) από το browser μας. Δηλαδή, αντίθετα με γλώσσες όπως η C, οι εντολές εκτελούνται χωρίς κάποιο προηγούμενο compilation.
    • 3. Τι είναι η JavaScript?
      Με διαφορά η πιο δημοφιλής scripting γλώσσα στο Internet.
      Χρησιμοποιείται σε εκατομμύρια websites και δουλεύει σε όλους τους γνωστούς browsers.
      Είναι πολύ εύκολη! Ο καθένας μπορεί να προσθέσει μερικές πινελιές JavaScript μέσα στο website του.
    • 4. Γιατί χρειαζόμαστε την JavaScript
      Πολύ περισσότερο από μια απλή browser scripting language.
      Πρόκειται για ένα πολύ δυνατό εργαλείο στο χώρο του Web Development.
      Υποστηρίζει concepts όπως object oriented programming, recursion, lambdas και closures.
    • 5. Γιατί χρειαζόμαστε την JavaScript
      Μας επιτρέπει να μεταβάλουμε δυναμικά τον HTML κώδικα αφού έχει φτάσει στο browser του χρήστη.
      Αντιδρά σε events.
      Μπορεί να κάνει validate τα data που έχει συμπληρώσει ένας χρήστης σε μια φόρμα.
      Επιτρέπει την υλοποίηση τεχνικών AJAX.
      Και πολλά άλλα.
    • 6. Hello JavaScript
      Το Hello World της JavaScript
      <script type=“text/javascript”>
      document.write(“Hello World”);
      </script>
    • 7. Πρώτα Βήματα
      Μπαίνει μέσα στον HTML κώδικα.
      Ορίζουμε ένα κομμάτι κώδικα μέσα στην HTML χρησιμοποιούμε το tag <script>.
      Στο <head> της σελίδας.
      Εκτελείται πριν φορτώσει η σελίδα.
      Στο <body> της σελίδας.
      Εκτελείται όταν γίνει render εκείνο το σημείο της HTML.
      Σε εξωτερικό αρχείομε την κατάληξη .js.
    • 8. Πρώτα Βήματα
      <html>
      <head>
      <script type=“text/javascript” src=“sample.js”></script>
      <script type=“text/javascript”>
      function message() { alert(‘Hello World’); }
      </script>
      </head>
      <body>
      <script type=“text/javascript”>
      document.write(‘Hello World by JavaScript!’);
      <script>
      </body>
      </html>
    • 9. Σύνταξη και Δομές
    • 10. Εντολές της JavaScript
      C-like syntax.
      Case sensitive. Αντίθετα με την HTML που δεν είναι.
      Ένα κομμάτι JavaScript κώδικα είναι ένα σύνολο εντολών προς τον browser.
      Οι εντολές εκτελούνται σειριακά με την σειρά που γράφτηκαν.
      Κάθε εντολή τελειώνει με ένα semicolon.
      ;
    • 11. Σχόλια στην JavaScript
      Τα σχόλια στην JavaScript γράφονται με δύο τρόπους
      Σχόλια πολλών γραμμών
      /* This is a
      multi-line Comment */
      Σχόλια μιας γραμμής
      // This is a single-line Comment
    • 12. If-Else δομές στην JavaScript
      if (<boolean condition>) {
      //code block 1
      }
      else if (<condition 2>) {
      //code block 2
      }
      else {
      //code block 3
      }
    • 13. If-Else δομές στην JavaScript
      switch(x) {
      case 1:
      //code block 1
      break;
      case 2:
      //code block 2
      break;
      default:
      //code block 3
      break;
      }
    • 14. Δομές Επανάληψης στην JavaScript
      for (<init>;<bool condition>;<incr>)
      {
      //code block
      }
      while (<bool condition>)
      {
      //code block
      }
    • 15. Δομές Επανάληψης στην JavaScript
      do
      {
      //code block
      } while (<bool condition>);
      for (<variable> in <array>)
      {
      //code block
      }
    • 16. Δομές Επανάληψης στην JavaScript
      Το keyword breakσταματάει την επανάληψη.
      To keyword continueσυνεχίζει την επανάληψη πηγαίνοντας στο επόμενο iteration.
    • 17. Μεταβλητές στην JavaScript
      Οι μεταβλητές στην JavaScript είναι dynamically typed.
      Μεταβλητές ορίζονται με το keyword var.
      Το όνομα δεν μπορεί να ξεκινάει με αριθμό ή με σύμβολοεκτός από τα: $ και _.
      Για παράδειγμα:
      var<όνομα μεταβλητής>;
      var number = 5;
      var name = “Kostas”;
    • 18. Πίνακες στην JavaScript
      Η πρώτη έκδοση της JavaScript δεν είχε array.
      To index ορίζεται με brackets [] και μόνο με ακέραιο αριθμό.
      Το μέγεθος ενός array αυξάνεται αυτόματα.
      var array = new Array();
      var array = [];
      varmyArray = new Array(10);
      varmyArray = [10];
    • 19. Πίνακες στην JavaScript
      var array = new Array();
      array[0] = “A string”;
      array[1] = 5.213;
      array[2] = “Another string <br />”;
      varmyArray = [1, “two”, 3, “4”, 5];
      myArray[5] = “Added a new item”;
    • 20. Τελεστές στην JavaScript
      Όλοι οι γνωστοί μας αριθμητικοί τελεστές και τελεστές ανάθεσης υπάρχουν και στην JavaScript: +, -, =, *, /, %, ++, --, +=, -=, *=
      Ομοίως και οι λογικοί τελεστές: ==, !=, >, <, >=, <=, &&, ||, !
      Τελεστής === επιστρέφει true αν οι δύο μεταβλητές έχουν ίδια τιμή και ίδιο τύπο.
      Προσοχή στις πράξεις μεταξύ διαφορετικούς τύπους μεταβλητών.
    • 21. Συναρτήσεις στην JavaScript
      Μπορούμε να ‘πακετάρουμε’ κομμάτια του κώδικα μας σε συναρτήσεις.
      Ο κώδικας αυτός δεν εκτελείται μέχρι να καλέσουμε την συνάρτηση.
      function <όνομα>(var1, var2, ...)
      {
      //code block
      return <value>;
      }
    • 22. Events της HTML
    • 23. Events
      H JavaScript είναι event-driven γλώσσα.
      Κάθε αντικείμενο της HTML έχει κάποια events που ενεργοποιούνται από ενέργειες του χρήστη.
      Μπορούμε να ορίσουμε JavaScript κώδικα να εκτελεστεί μόλις ενεργοποιηθεί ένα συγκεκριμένο event.
      Σχεδόν πάντα τα events χρησιμοποιούνται μαζί με συναρτήσεις.
    • 24. Events
      Τα events εμφανίζονται σαν attributes στα HTML tags.
      Για παράδειγμα:
      <div id=“header” onclick=“MyFunction()”>
      <p onmouseover=“MyOtherFunction()”>
      </p>
      </div>
      <div onload=“MyThirdFunction(5)”>
      </div>
    • 25. Events
      onAbort
      onBeforeUpload
      onBlur
      onChange
      onClick
      onDblClick
      onError
      onFocus
      onKeyDown
      onKeyPress
      onKeyUp
      onLoad
      onMouseDown
      onMouseMove
      onMouseOut
      onMouseOver
      onMousUp
      OnSelect
      onSubmit
      onUnload