Introduction to JavaScript

Browser	JavaScript Engine
Google Chrome	V8
Mozilla Firefox	SpiderMonkey
Opera	Caracan
Microsoft Internet Explorer	Chakra

Operators (Telestes)

Τελεστές	Λειτουργία
+, -, *, /, %	Αριθμητικές πράξεις
\|\|, &&, !	Λογικές πράξεις. ή, και, όχι
==, !=, <, >, <=, >=, ===, !==	Σύγκριση
++, --	Αύξηση, μείωση
+	Ένωση αλφαριθμητικών (concatenation)
=, +=, -=, *=, /=, %=	Ανάθεση τιμής

Domh epiloghs: if

if( συνθήκη ) {
    σώμα 1
}
else if( συνθήκη ) {
    σώμα 2
}
...
else {
    σώμα 3
}

Domh epiloghs: switch

switch( παράσταση ) {
    case τιμή1:
        σώμα 1
        break;
    case τιμή2:
        σώμα 2
        break;
    ...
    default:
        εναλλακτικό σώμα
}

Domh epanalhpsis: for

for( αρχικοποίηση; συνθήκη; βήμα ) {
    σώμα
}

Domh epanalhpsis: while

while( συνθήκη ) {
    σώμα
}

Domh epanalhpsis: do...while

do {
    σώμα
} while( συνθήκη )

break

Ίδιο σε C, C++, Java, PHP, ...
Εμφανίζεται μέσα σε μια ροή ελέγχου
- for, while, do... while, switch
Διακόπτει τη ροή και συνεχίζει αμέσως μετά
Δε γίνονται άλλες επαναλήψεις μετά το break

continue

Ίδιο σε C, C++, Java, PHP, ...
Εμφανίζεται μέσα σε μια ροή επανάληψης
- for, while, do... while
Διακόπτει τη ροή και συνεχίζει ελέγχοντας τη συνθήκη
Μπορεί να γίνουν κι άλλες επαναλήψεις μετά το continue

comments (sxolia)

// η υπόλοιπη γραμμή είναι σχόλιο
- Το πολύ μια γραμμή
/*Όλα τα περιεχόμενα είναι σχόλιο*/
- 1 ή περισσότερες γραμμές

Metavlhtes sth JavaScript.

Αποθηκεύουν μια τιμή
- Νούμερα, κείμενα, πίνακες, αντικείμενα...
Δηλώνονται με τη λέξη κλειδί var
var a;
Αναθέτουμε τιμή με τον τελεστή =
a = 5;

<script type="text/javascript">
    var a = "Hello world!";
    alert( a );
</script>

Asthenes systhma typwn

Τύποι στη JavaScript:
- Number
- Boolean
- String
- Function
- Object
Μία μεταβλητή μπορεί να αλλάζει τύπο

<script type="text/javascript">
    var a = "Hello";
    alert( typeof( a ) );
    a = 5;
    alert( typeof( a ) );
</script>

Functions

function f_name( ορίσματα ) {
    σώμα;
}

Functions

Παρόμοιες με συναρτήσεις σε C, C++, Java, PHP, ...
Ορίζουν υπο-ρουτίνες που κάνουν συγκεκριμένη δουλειά
Σύνταξη:
- Ορίζονται με τη λέξη κλειδί function
- Ακολουθεί το όνομα της συνάρτησης
- Ακολουθούν τα ονόματα των ορισμάτων σε () χωρισμένα με κόμα

Return

Οι συναρτήσεις επιστρέφουν τιμή με return
Η τιμή επιστροφής χρησιμοποιείται όπου έγινε η κλήση
Επιστροφή σημαίνει τερματισμός της συνάρτησης
Δεν ορίζουμε τύπο επιστροφής
Δεν είναι υποχρεωτικό

Functions

function add( a, b ) {
    return a + b;
}

alert( add( 4, 7 ) );

Functions

Οι συναρτήσεις είναι μεταβλητές!!

function foo(){
    alert( 'hello' );
}

var foo = 5;
alert( typeof( foo ) );
foo(); //Σφάλμα. Το 5 δεν είναι συνάρτηση!

Objects

Στη JavaScript όλα είναι αντικείμενα!
Τι είναι ένα αντικείμενο;
- Ένα λεξικό: Αντιστοίχιση τιμών σε κλειδιά
Οι τιμές του λεξικού μπορεί να είναι
- Άλλο αντικέιμενο
- Αριθμός
- Αλφαριθμητικό
- Συνάρτηση

Objects

Δήλωση αντικειμένου

// Κενό αντικείμενο
var a = {};

// αντικείμενο με δύο ιδιότητες
var b = {
    foo: 5,
    bar: 'hello'
};

Objects

Διαβάζουμε τις τιμές ενός αντικειμένου με object[ 'key' ]
Ή καλύτερα object.key

var a = {
    foo: 'bar'
};
var b = a.foo; // Το b έχει την τιμή 'bar'

Objects

Μπορούμε να προσθέσουμε ιδιότητες μετά τη δημιουργία

var a = {
    foo: 0
}
a.bar = 1; //Προσθήκη ιδιότητας bar με τιμή 1

Objects

Μέθοδοι αντικειμένων
Είναι κλειδιά που η τιμή τους είναι συνάρτηση

var a = {
    foo: function(){
        return "I am a method";
    },
    bar: "I am a property"
};

alert( a.foo );
alert( a.foo() );
alert( a.bar );

Strings

Μια τιμή που είναι μια σειρά από αριθμούς, χαρακτήρες, γράμματα, ...
Το μήκος μπορεί να αλλάζει
Δεν υπάρχει περιορισμός μήκους
Δεν πρόκειται για πίνακες από χαρακτήρες
Μπαίνουν σε μονά ή διπλά εισαγωγικά

Strings as Objects

Κάθε αλφαριθμητικό έχει μεθόδους:
- search - Αναζήτηση μέσα στο String. Επιστρέφει τη θέση
- split - Χωρίζει το string σε κομμάτια. Επιστρέφει πίνακα
- substr - Παίρνει κομμάτι από το string

var a = 'a-b-c-d-e';
var b = a.split( '-' );

alert( b );
alert( b[ 3 ] );

Numbers

Όλοι οι αριθμοί είναι τύπου Number
64bit κινητής υποδιαστολής

Arrays

Δηλώνονται με []
Οι τιμές του χωρίζονται με κόμματα
Η αρίθμηση ξεκινάει από το 0

var a = [ 1, 'two', 3, [ 'a', 'b' ] ];
alert( a[ 0 ] );
alert( a[ 1 ] );
alert( a[ 3 ][ 1 ] );

Arrays

Έχουν χρήσιμες ιδιότητες και μεθόδους
Ιδιότητα length: Περιέχει το μήκος του πίνακα:
```
var a = [ 1, 2, 3, 'a' ];
alert( a.length );
```
Μέθοδοι
- pop();
- push();
- shift();
- slice();
- reverse();
- join();
- sort();

var a = [ 1, 2, 3, 4 ];
var b = a.pop();
// a: [1,2,3]; 
// b: 4; 
a.unshift( b );
// a: [4,1,2,3]; 
a.push( 40 );
// a: [4,1,2,3,40]; 
a.sort();
// a: [1,2,3,4,40];

To script mou den trexei!

Βλέπουμε συντακτικά σφάλματα και σφάλματα χρόνου εκτέλεσης στην κονσόλα σφαλμάτων του browser
Ανοίγει με Ctrl + Shift + J ή με Δεξί κλικ -> inspect element
Χρησιμοποιούμε το alert ή την κονσόλα για να δούμε την τιμή μιας μεταβλητής.

Mathame

Εισαγωγή της γλώσσας JavaScript

Βασική σύνταξη
Συνδιασμός JavaScript με HTML
Μεταβλητές
Τελεστές
δομές επιλογής / επανάληψης
Συναρτήσεις
Αντικείμενα
Αλφαριθμητικά
Πίνακες

Next Time

jQuery - One to save us all!

OR

How ho make cool stuff,
the easy way

What's for today?

JavaSript

Alternatives

What can be done with JS?

HTML & JavaScript

Basic Syntax

alert()

Execution

Operators (Telestes)

Domh epiloghs: if

Domh epiloghs: switch

Domh epanalhpsis: for

Domh epanalhpsis: while

Domh epanalhpsis: do...while

break

continue

comments (sxolia)

Metavlhtes sth JavaScript.

Asthenes systhma typwn

Functions

Functions

Return

Functions

Functions

Objects

Objects

Objects

Objects

Objects

Strings

Strings as Objects

Numbers

Arrays

Arrays

To script mou den trexei!

Mathame

Next Time

OR