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>

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

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

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

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

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

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

Δομές Επανάληψης στην JavaScriptdo{//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];

Πίνακες στην JavaScriptvar 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 blockreturn <value>;}

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

EventsonAbortonBeforeUploadonBluronChangeonClickonDblClickonErroronFocusonKeyDownonKeyPressonKeyUponLoadonMouseDownonMouseMoveonMouseOutonMouseOveronMousUpOnSelectonSubmitonUnload

JavaScript

More Related Content

Similar to JavaScript (20)

Recently uploaded (6)

JavaScript

Editor's Notes