JavaScript

Τι είναι η JavaScript? Light-weight scripting γλώσσα προγραμματισμού. Σχεδιάστηκε για να αποκτήσει διαδραστικότητα η HTML. Ερμηνεύεται (interpreted) από το browser μας. Δηλαδή, αντίθετα με γλώσσες όπως η C, οι εντολές εκτελούνται χωρίς κάποιο προηγούμενο compilation.

Τι είναι η JavaScript? Με διαφορά η πιο δημοφιλής scripting γλώσσα στο Internet. Χρησιμοποιείται σε εκατομμύρια websites και δουλεύει σε όλους τους γνωστούς browsers. Είναι πολύ εύκολη! Ο καθένας μπορεί να προσθέσει μερικές πινελιές JavaScript μέσα στο website του.

Γιατί χρειαζόμαστε την JavaScript Πολύ περισσότερο από μια απλή browser scripting language. Πρόκειται για ένα πολύ δυνατό εργαλείο στο χώρο του Web Development. Υποστηρίζει concepts όπως object oriented programming, recursion, lambdas και closures.

Γιατί χρειαζόμαστε την JavaScript Μας επιτρέπει να μεταβάλουμε δυναμικά τον HTML κώδικα αφού έχει φτάσει στο browser του χρήστη. Αντιδρά σε events. Μπορεί να κάνει validate τα data που έχει συμπληρώσει ένας χρήστης σε μια φόρμα. Επιτρέπει την υλοποίηση τεχνικών AJAX. Και πολλά άλλα.

Hello JavaScript Το Hello World της JavaScript <script type=“text/javascript”> document.write(“Hello World”); </script>

Πρώτα Βήματα Μπαίνει μέσα στον HTML κώδικα. Ορίζουμε ένα κομμάτι κώδικα μέσα στην HTML χρησιμοποιούμε το tag <script>. Στο <head> της σελίδας. Εκτελείται πριν φορτώσει η σελίδα. Στο <body> της σελίδας. Εκτελείται όταν γίνει render εκείνο το σημείο της HTML. Σε εξωτερικό αρχείομε την κατάληξη .js.

Πρώτα Βήματα <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>

Σύνταξη και Δομές

Εντολές της JavaScript C-like syntax. Case sensitive. Αντίθετα με την HTML που δεν είναι. Ένα κομμάτι JavaScript κώδικα είναι ένα σύνολο εντολών προς τον browser. Οι εντολές εκτελούνται σειριακά με την σειρά που γράφτηκαν. Κάθε εντολή τελειώνει με ένα semicolon. ;

Σχόλια στην JavaScript Τα σχόλια στην JavaScript γράφονται με δύο τρόπους Σχόλια πολλών γραμμών /* This is a multi-line Comment */ Σχόλια μιας γραμμής // This is a single-line Comment

If-Else δομές στην JavaScript if (<boolean condition>) { //code block 1 } else if (<condition 2>) { //code block 2 } else { //code block 3 }

If-Else δομές στην JavaScript switch(x) { case 1: //code block 1 break; case 2: //code block 2 break; default: //code block 3 break; }

Δομές Επανάληψης στην JavaScript for (<init>;<bool condition>;<incr>) { //code block } while (<bool condition>) { //code block }

Δομές Επανάληψης στην JavaScript do { //code block } while (<bool condition>); for (<variable> in <array>) { //code block }

Δομές Επανάληψης στην JavaScript Το keyword breakσταματάει την επανάληψη. To keyword continueσυνεχίζει την επανάληψη πηγαίνοντας στο επόμενο iteration.

Μεταβλητές στην JavaScript Οι μεταβλητές στην JavaScript είναι dynamically typed. Μεταβλητές ορίζονται με το keyword var. Το όνομα δεν μπορεί να ξεκινάει με αριθμό ή με σύμβολοεκτός από τα: $ και _. Για παράδειγμα: var<όνομα μεταβλητής>; var number = 5; var name = “Kostas”;

Πίνακες στην JavaScript Η πρώτη έκδοση της JavaScript δεν είχε array. To index ορίζεται με brackets [] και μόνο με ακέραιο αριθμό. Το μέγεθος ενός array αυξάνεται αυτόματα. var array = new Array(); var array = []; varmyArray = new Array(10); varmyArray = [10];

Πίνακες στην 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”;

Τελεστές στην JavaScript Όλοι οι γνωστοί μας αριθμητικοί τελεστές και τελεστές ανάθεσης υπάρχουν και στην JavaScript: +, -, =, *, /, %, ++, --, +=, -=, *= Ομοίως και οι λογικοί τελεστές: ==, !=, >, <, >=, <=, &&, ||, ! Τελεστής === επιστρέφει true αν οι δύο μεταβλητές έχουν ίδια τιμή και ίδιο τύπο. Προσοχή στις πράξεις μεταξύ διαφορετικούς τύπους μεταβλητών.

Συναρτήσεις στην JavaScript Μπορούμε να ‘πακετάρουμε’ κομμάτια του κώδικα μας σε συναρτήσεις. Ο κώδικας αυτός δεν εκτελείται μέχρι να καλέσουμε την συνάρτηση. function <όνομα>(var1, var2, ...) { //code block return <value>; }

Events H JavaScript είναι event-driven γλώσσα. Κάθε αντικείμενο της HTML έχει κάποια events που ενεργοποιούνται από ενέργειες του χρήστη. Μπορούμε να ορίσουμε JavaScript κώδικα να εκτελεστεί μόλις ενεργοποιηθεί ένα συγκεκριμένο event. Σχεδόν πάντα τα events χρησιμοποιούνται μαζί με συναρτήσεις.

Events Τα events εμφανίζονται σαν attributes στα HTML tags. Για παράδειγμα: <div id=“header” onclick=“MyFunction()”> <p onmouseover=“MyOtherFunction()”> </p> </div> <div onload=“MyThirdFunction(5)”> </div>

Events onAbort onBeforeUpload onBlur onChange onClick onDblClick onError onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMousUp OnSelect onSubmit onUnload

JavaScript

Recommandé

Recommandé

Contenu connexe

Similaire à JavaScript

Similaire à JavaScript (20)

Dernier

Dernier (14)

JavaScript

Notes de l'éditeur