Εργαστήριο Εκπαιδευτικού Υλικού και Εκπαιδευτικής Μεθοδολογίας (Ε.Ε.Υ.Ε.Μ.)

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Εργαστήριο Εκπαιδευτικού Υλικού και Εκπαιδευτικής Μεθοδολογίας (Ε.Ε.Υ.Ε.Μ.)"

Ίακχος Χατζηιωάννου
7 χρόνια πριν
Προβολές:

1 Εργαστήριο Εκπαιδευτικού Υλικού και Εκπαιδευτικής Μεθοδολογίας (Ε.Ε.Υ.Ε.Μ.)

2 Ενότητα 1 Διδακτική Προγραμματισμού χρησιμοποιώντας DevTools

3 Console (Chrome): Δεξί κλικ οπουδήποτε στην οθόνη Επιθεώρηση Στοιχείου (Inspect Element) Console. (Firefox): Δεξί κλικ οπουδήποτε στην οθόνη Έλεγχος Αντικειμένου Console. Shortcuts

4 Strings - Συμβολοσειρές Χρησιμοποιείται για να αναπαραστήσει κείμενο. Το κείμενο μπορεί να αποτελείται από οποιοδήποτε αριθμό χαρακτήρων: My name is Christopher. Για να δηλωθεί ένας αλφαριθμητικός τύπος χρησιμοποιούνται τα quotes (, ). π.χ. var x = Christopher ; Εάν προσπαθήσουμε να εκτυπώσουμε το περιεχόμενο της μεταβλητής x, με την εντολή console.log θα δούμε το αποτέλεσμα στην Console του φυλλομετρητή.

5 Μεταβλητές Για την αποθήκευση τιμών χρησιμοποιούνται μεταβλητές. Η λέξη μεταβλητή σημαίνει ότι η τιμή που φιλοξενεί μπορεί να μεταβάλλεται. Για να δηλώσουμε μεταβλητές χρησιμοποιούμε τη λέξη var ακολουθούμενη από το όνομα της μεταβλητής και την τιμή της. π.χ. var x = 1; Προσοχή: Η JavaScript υποστηρίζει δυναμικούς τύπους δεδομένων. Αυτό σημαίνει ότι η ίδια μεταβλητή μπορεί να φιλοξενεί μεταβλητές διαφορετικών τύπων. var x; Απλουστεύεται η έννοια της var x = 5; Γνωστική Δυσκολία μεταβλητής καθώς ο μαθητής δεν var x = Γιάννης ; προσπαθεί να τη συνδέσει και με τον τύπο δεδομένου

6 Συναρτήσεις Συνάρτηση είναι ένα block κώδικα, το οποίο έχει σχεδιαστεί ώστε να υλοποιεί μια συγκεκριμένη λειτουργία. Μια συνάρτηση JavaScript εκτελείται όταν κάτι την καλέσει. function myname(str){ return 'My name is: '+ str; } myname( George ); //My name is: George Μερικές έτοιμες συναρτήσεις: alert(str); console.log(str); Date( ); document.write( Hello world!!! ); str.touppercase( ); str.tolowercase( ); window.open( str.split( );

7 Επαναλήψεις Οι επαναλήψεις μπορούν να εκτελούν ένα block κώδικα έναν συγκεκριμένο αριθμό φορών. Υποστηρίζουν τόσο γνωστό όσο και άγνωστο αριθμό επαναλήψεων. Προσοχή στις while, do while, γιατί και οι δύο εκτελούνται όσο η συνθήκη είναι αληθής. for loop for (i = 0; i < 5; i++) { console.log(i); } do while loop var text = ""; var i = 0; do { console.log(i); i++; } while (i < 5); for/in loop var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"]; var i; for (i in food) { console.log(food[i]); } while loop var i=0; while (i < 10) { document.write(i+"<br/>"); i++; }

8 Πίνακες Οι πίνακες χρησιμοποιούνται για την αποθήκευση πολλαπλών τιμών σε μια μεταβλητή. var cars = ["Saab", "Volvo", BMW"]; ή var cars = new Array("Saab", "Volvo", BMW"); Ένας πίνακας μπορεί να φιλοξενεί διαφορετικού τύπου δεδομένα. var person = ["John", "Doe", 46]; προσπέλαση πίνακα: for(var i=0; i<person.length; i++){ console.log (person[i]); } Επίσης ένας πίνακας είναι δυναμική δομή: person.push("nick");

9 Αντικείμενα Δημιουργία αντικειμένου: var dog = { name: "Μανώλης", legs: 4, isawesome: true };

10 Αντικείμενα ή ό dog.name; // Μανώλης dog.age = 6; προσθήκη ιδιοτήτων dog; // Object {name : "Μανώλης", legs : 4, isawesome : true, age : 6 } dog.bark = function () { console.log("woof woof! My name is " + this.name + "!"); }; dog.bark(); //Woof woof! My name is Μανώλης!

11 Αντικείμενα - Παράδειγμα 1 2 Δημιουργήστε ένα νέο αρχείο με όνομα cars.html. <!DOCTYPE html> <html> <head> <title>cars</title> </head> <body> <script src=" ></script> <script> // Εδώ θα γράψετε τον κώδικα σας </script> </body> </html> var Car = function (x, y) { this.x = x; this.y = y; }; 3

12 Αντικείμενα - Παράδειγμα Δημιουργία της drawcar( ) <script> var Car = function (x, y) { this.x = x; this.y = y; }; var drawcar = function (car) { var carhtml = '<img src=" ; var carelement = $ (carhtml); carelement.css ({ position: "absolute", left: car.x, top: car.y }); $ ("body" ).append(carelement); // }; </script> 4 Δημιουργία δύο αντικειμένων var tesla = new Car(20, 20); var nissan = new Car(100, 200); drawcar(tesla); drawcar(nissan); 5

13 Ενότητα 2 Web Playgrounds

15 JSFiddle 1 html 2 css 3 javascript 4 output

16 Thimble Mozilla 1 html 2 css 4 output 3 javascript thimble projects: thimble projects:

17 Liveweave 1 html 3 javascript 2 css 4 output

18 javascript digital clock packman σε css game σε css learn html-css-javascript online

19 «Σας Ευχαριστώ.» Χριστόφορος Καραχρήστος

Σχετικά έγγραφα

Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client

ΕΣΔ 516 Τεχνολογίες Διαδικτύου Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client Περιεχόμενα Περιεχόμενα Javascript και HTML Βασική σύνταξη Μεταβλητές Τελεστές Συναρτήσεις