JavaScript

1,324 views

Published on

Εισαγωγή στην 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,324
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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
  • JavaScript

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

    ×