Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript

1,407 views

Published on

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

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

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

×