CodeWeek@eeyem Εργαστήριο Εκπαιδευτικού Υλικού και Εκπαιδευτικής Μεθοδολογίας (Ε.Ε.Υ.Ε.Μ.)
Ενότητα 1 Διδακτική Προγραμματισμού χρησιμοποιώντας DevTools
Console (Chrome): Δεξί κλικ οπουδήποτε στην οθόνη Επιθεώρηση Στοιχείου (Inspect Element) Console. (Firefox): Δεξί κλικ οπουδήποτε στην οθόνη Έλεγχος Αντικειμένου Console. Shortcuts
Strings - Συμβολοσειρές Χρησιμοποιείται για να αναπαραστήσει κείμενο. Το κείμενο μπορεί να αποτελείται από οποιοδήποτε αριθμό χαρακτήρων: My name is Christopher. Για να δηλωθεί ένας αλφαριθμητικός τύπος χρησιμοποιούνται τα quotes (, ). π.χ. var x = Christopher ; Εάν προσπαθήσουμε να εκτυπώσουμε το περιεχόμενο της μεταβλητής x, με την εντολή console.log θα δούμε το αποτέλεσμα στην Console του φυλλομετρητή.
Μεταβλητές Για την αποθήκευση τιμών χρησιμοποιούνται μεταβλητές. Η λέξη μεταβλητή σημαίνει ότι η τιμή που φιλοξενεί μπορεί να μεταβάλλεται. Για να δηλώσουμε μεταβλητές χρησιμοποιούμε τη λέξη var ακολουθούμενη από το όνομα της μεταβλητής και την τιμή της. π.χ. var x = 1; Προσοχή: Η JavaScript υποστηρίζει δυναμικούς τύπους δεδομένων. Αυτό σημαίνει ότι η ίδια μεταβλητή μπορεί να φιλοξενεί μεταβλητές διαφορετικών τύπων. var x; Απλουστεύεται η έννοια της var x = 5; Γνωστική Δυσκολία μεταβλητής καθώς ο μαθητής δεν var x = Γιάννης ; προσπαθεί να τη συνδέσει και με τον τύπο δεδομένου
Συναρτήσεις Συνάρτηση είναι ένα 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( http://www.google.com); str.split( );
Επαναλήψεις Οι επαναλήψεις μπορούν να εκτελούν ένα 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++; }
Πίνακες Οι πίνακες χρησιμοποιούνται για την αποθήκευση πολλαπλών τιμών σε μια μεταβλητή. 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");
Αντικείμενα Δημιουργία αντικειμένου: var dog = { name: "Μανώλης", legs: 4, isawesome: true };
Αντικείμενα ή ό 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 Μανώλης!
Αντικείμενα - Παράδειγμα 1 2 Δημιουργήστε ένα νέο αρχείο με όνομα cars.html. <!DOCTYPE html> <html> <head> <title>cars</title> </head> <body> <script src="https://code.jquery.com/jquery-2.1.0.js" ></script> <script> // Εδώ θα γράψετε τον κώδικα σας </script> </body> </html> var Car = function (x, y) { this.x = x; this.y = y; }; 3
Αντικείμενα - Παράδειγμα Δημιουργία της drawcar( ) <script> var Car = function (x, y) { this.x = x; this.y = y; }; var drawcar = function (car) { var carhtml = '<img src="http://nostarch.com/images/car.png">' ; 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
Ενότητα 2 Web Playgrounds
JSFiddle 1 html 2 css 3 javascript 4 output
Thimble Mozilla 1 html 2 css 4 output 3 javascript thimble projects: https://thimble.mozilla.org/ thimble projects: https://thimble.webmaker.org/en-us/projects
Liveweave 1 html 3 javascript 2 css 4 output
http://liveweave.com/qopewh javascript digital clock http://liveweave.com/kbggla packman σε css http://liveweave.com/wc3db2 game σε css https://www.codecademy.com/courses/htmljavascript-css/0/1 learn html-css-javascript online
«Σας Ευχαριστώ.» Χριστόφορος Καραχρήστος