• Save
JavaScript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,397
On Slideshare
1,397
From Embeds
0
Number of Embeds
0

Actions

Shares
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