Εισαγωγή στη JavaScript PDF

Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Εισαγωγή στη JavaScript Δρ. Δημήτριος Κουτσομητρόπουλος Περιεχόμενα Σήμερα ◦ Εισαγωγή στην JavaScript (‘vanilla’ JS) ◦ Βασικά χαρακτηριστικά της γλώσσας ◦ Χειρισμός συμβάντων (event handling) ◦ DOM Την ε...

Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Εισαγωγή στη JavaScript Δρ. Δημήτριος Κουτσομητρόπουλος Περιεχόμενα Σήμερα ◦ Εισαγωγή στην JavaScript (‘vanilla’ JS) ◦ Βασικά χαρακτηριστικά της γλώσσας ◦ Χειρισμός συμβάντων (event handling) ◦ DOM Την επόμενη φορά ◦ Εκφράσεις συναρτήσεων ◦ Promises ◦ Συναρτησιακός προγραμματισμός στη JavaScript ◦ Currying, Closures, Lambda functions ◦ Frameworks 2  + παράγει Περιγράφει το Περιγράφει περιεχόμενο την εμφάνιση και τη δομή και τα στυλ Μια ιστοσελίδα… της σελίδας της σελίδας που δεν κάνει τίποτα 3 Τι μπορεί να «κάνει» μια σελίδα; - Να δέχεται είσοδο από το χρήστη - Να αποθηκεύει την είσοδο από το χρήστη - Να εμφανίζει και να εξαφανίζει στοιχεία όταν ο χρήστης αλληλεπιδρά με τη σελίδα - …. Η JavaScript είναι η μόνη γλώσσα προγραμματισμού που μπορεί να εκτελέσει εγγενώς ο φυλλομετρητής 4  JavaScript Δημιουργήθηκε το 1995 από τον Brendan Eich ◦ Συνιδρυτή του Mozilla ◦ Αρχικά μόνο για τον Netscape (μετέπειτα Firefox) Τυποποιήθηκε το 1996 ως ECMAScript (ES) ◦ Από το European Computer Manufacturers Association (ECMA) Η Javascript δεν έχει σχέση με τη Java ◦ Ονομάστηκε έτσι για εμπορικούς λόγους Η πρώτη έκδοση γράφτηκε μόλις σε 10 μέρες "I was under marketing orders to make it look like Java but not make it too big for its britches... [it] needed to be a silly little brother language." (πηγή) 5 Εξέλιξη Σήμερα: Έκδοση ECMAScript 2024 (Ιούνιος, Object.groupBy()…) Σημαντική Έκδοση: ECMAScript 2015 (ES6) Πηγή: Β. Williamson, ‘Intro JS’. http://goodbedford.github.io/introJs/ 6  ECMAScript 2015 (ES6) Νέα χαρακτηριστικά ◦ Υποστήριξη για κλάσεις ◦ Iterators και for/of loops ◦ Promises ◦ Fetch API ◦ Αντικαθιστά το XMLHttpRequest (AJAX style) ◦ Let, const αντί για var (εμβέλεια βρόχου) ◦ Arrow functions (lambdas) => ◦ currying 7 Η JavaScript σήμερα “First, software ate the world, the web ate software, and JavaScript ate the Web”. Eric Elliott @ Medium - 95% των ιστοσελίδων χρησιμοποιούν JS 8  Το οικοσύστημα της JavaScript (και του web development) 9 StackOverflow Developer Survey (2024) Github (2024) Δημοφιλία γλωσσών 10  Frameworks/Libraries JavaScript frameworks και βιβλιοθήκες StackOverflow, 2024 12 Βασικά χαρακτηριστικά της JavaScript 13 JavaScript Χαρακτηριστικά γλώσσας προγραμματισμού: ◦ Υψηλού Επιπέδου ◦ Διερμηνευόμενη (interpreted) ◦ Δυναμική ◦ Mεταβλητές και συναρτήσεις μπορούν να αλλάξουν ή να δημιουργηθούν νέες οποιαδήποτε στιγμή (κατά το runtime, πχ φόρτωση νέων scripts) ◦ Ασθενών τύπων (weakly typed) 14  Σύστημα τύπων (1/3) Στατικές γλώσσες προγραμματισμού ΝΑΜΕ ◦ Οι μεταβλητές συνδέονται με ένα συγκεκριμένο τύπο (typed based) ◦ Οι έλεγχοι για την ύπαρξη, την ιεραρχία και OBJECT τον σωστό ορισμό μεθόδων γίνεται κατά την διάρκεια του compile IS OF TYPE B ◦ Προκαλούν TypeException στην περίπτωση που συνδεθούν με διαφορετικό τύπο από TYPE A αυτόν που αρχικοποιήθηκαν Must match Τέτοιες γλώσσες: Java, C++,… 15 Σύστημα τύπων (2/3) Δυναμικές γλώσσες προγραμματισμού ΝΑΜΕ ◦ Οι μεταβλητές δεν συνδέονται με ένα συγκεκριμένο τύπο (untyped based) ◦ Οι έλεγχοι για την ύπαρξη, την ιεραρχία και OBJECT τον σωστό ορισμό μεθόδων γίνεται κατά την διάρκεια του runtime (εκτέλεσης) IS OF ◦ Μπορούν να συνδεθούν με διαφορετικό τύπο από αυτόν που αρχικοποιήθηκαν TYPE Τέτοιες γλώσσες: JavaScript, python, php,… 16  Σύστημα τύπων (3/3) Η JavaScript μετατρέπει τον τύπο σε αυτόν που πρέπει για να πραγματοποιηθεί η οποιαδήποτε εντολή: //JAVASCRIPT //JAVA var mStr = “John String mStr = “John Doe”; Doe”; mStr = 24; TypeException mStr = 24; //JAVASCRIPT //JAVA var a = “9”; String a = “9”; var b = 5; int b = 5; console.log(a+b); System.out.println(a+(String)b); console.log(a‐b); System.out.println(Integer.parseInt(a)‐b); 17 JavaScript χρήση (1/3) Πως χρησιμοποιείται η JavaScript: 1. Ενσωματώνοντας την σε html στοιχείο Click me! 2. Χρησιμοποιώντας το στοιχείο στην html var a = 5; 3. Χρησιμοποιώντας εξωτερικό αρχείο.js 18  JavaScript χρήση (2/3) Πως το χρησιμοποιώ στην σελίδα/εφαρμογή μου: Page/App title 19 JavaScript χρήση (3/3) To μπορεί να τοποθετηθεί και στο τέλος του : ◦ Βελτιώνει το χρόνο εμφάνισης της σελίδας ◦ …αλλά μπορεί να αλλάξει η εμφάνισή της, αφού φορτωθεί Η χρήση εξωτερικού αρχείου ◦ Διαχωρίζει τον κώδικα από την HTML ◦ Διευκολύνει την συντήρηση του κώδικα ◦ Πραγματοποιείται caching των αρχείων -> γρηγορότερο φόρτωμα σελίδας 20  Μεταβλητές και Τύποι Δεδομένων Δύο βασικοί τύποι: ◦ Τύποι αναφοράς (type Object) ◦ Περιλαμβάνει τα arrays ◦ Πρωτογενείς τύποι (primitive) ◦ Boolean, Number, String, Null, Undefined, BigInt, Symbol Οι μεταβλητές δηλώνονται με: ◦ var (εμβέλεια συνάρτησης) ◦ let (εμβέλεια βρόχου) ◦ const (σταθερά με εμβέλεια βρόχου) 21 first-js.html Ένα πρώτο script First JS Example script.js console.log('Hello, world!'); 22 Εκτέλεση JavaScript Δεν υπάρχει μέθοδος main ◦ Το script εκτελείται από πάνω προς τα κάτω Δεν γίνεται κάτι compile από τον προγραμματιστή ◦ H JavaScript μεταγλωττίζεται και εκτελείται δυναμικά από τον browser (Just In Time (JIT) Compilation) 23 Έξοδος στην κονσόλα 24  Κονσόλα JavaScript Δεξί κλικ -> «έλεγχος στοιχείου» 25 Έξοδος alert() ◦ εμφανίζει ένα pop-up μήνυμα console.log() ◦ Εμφανίζει περιεχόμενο στην κονσόλα του browser document.write() ◦ Εξάγει περιεχόμενο απευθείας μέσα στο HTML έγγραφο 26  Προγραμματιστικές δομές for-loops: for (let i = 0; i < 5; i++) { … } while-loops: while (notFinished) { … } comments: // comment or conditionals (if statements): if (...) {... Σύνταξη παρόμοια με γλώσσες } else { όπως Java/C++/C…... } 27 script.js function hello() { Δήλωση console.log('Hello!'); συνάρτησης console.log('Welcome to JavaScript'); (function declaration) } hello(); hello(); Συναρτήσεις Console output 28 script.js Hoisting hello(); hello(); function hello() { console.log('Hello!'); console.log('Welcome to JavaScript'); } Λειτουργεί το παραπάνω; Ναι, λόγω ανέλκυσης (hoisting) (Σαν να) μετακινείται ο ορισμός της συνάρτησης στην αρχή της εμβέλειας στην οποία δηλώνεται ◦ Μπορεί να αποφευχθεί ◦ Δεν είναι καλή πρακτική Console output 29 Εμβέλεια μεταβλητών 30  Εμβέλεια συνάρτησης με το var var x = 10; if (x > 0) { var y = 10; } console.log('Value of y is ' + y); - Μεταβλητές που έχουν δηλωθεί με "var" έχουν function-level scope και δεν βγαίνουν εκτός εμβέλειας μετά το τέλος του βρόχου. Μόνο στο τέλος της συνάρτησης. - Επομένως μπορούμε να αναφερθούμε στην ίδια μεταβλητή μετά το τέλος ενός βρόχου 31 Εμβέλεια συνάρτησης με το var Όμως δεν μπορούμε να αναφερθούμε σε μια μεταβλητή εκτός της συνάρτησης στην οποία έχει δηλωθεί 32 Εμβέλεια let function printMessage(message, times) { for (let i = 0; i < times; i++) { console.log(message); } console.log('Value of i is ' + i); } printMessage('hello', 3); let has block- scope so this results in an error 33 Εμβέλεια const let x = 10; if (x > 0) { const y = 10; } console.log(y); // error! Όπως το let, το const έχει επίσης block-scope, επομένως η πρόσβαση της μεταβλητής εκτός του βρόχου καταλήγει σε σφάλμα 34 Ανάθεση const const y = 10; y = 0; // error! y++; // error! const list = [1, 2, 3]; list.push(4); // OK const μεταβλητές δεν μπορούν να ανατεθούν εκ νέου (reassigned). Όμως, το περιεχόμενό τους μπορεί να μεταβληθεί - (In other words, it behaves like Java's final keyword and not C++'s const keyword) 35 Τύποι και συγκρίσεις 36 Null και Undefined Ποια η διαφορά τους; - Το null είναι μια τιμή που συμβολίζει την απουσία τιμής («κενή μεταβλητή», όπως στη Java) - Δείκτης που δεν δείχνει πουθενά - To undefined δίνεται σε μια μεταβλητή που δεν τις έχει ακόμα δοθεί κάποια τιμή (αγνώστου τύπου). 37 Αποτίμηση αληθείας - Οι μη-boolean τιμές μπορούν να χρησιμοποιηθούν σε δομές ελέγχου και αποτιμώνται λογικά: - null, undefined, 0, NaN, '', "" αποτιμώνται σε false - Οτιδήποτε άλλο αποτιμάται σε true if (username) { // username is defined } 38  Τελεστές σύγκρισης JavaScript's == and != δεν λειτουργούν όπως αναμένεται: γίνεται πρώτα αποτίμηση τιμών, πριν τη σύγκριση, καθώς και μετατροπή των τύπων: '' == '0' // false '' == 0 // true 0 == '0' // true NaN == NaN // false [''] == '' // true false == undefined // false false == null // false null == undefined // true 39 Τελεστές σύγκρισης Αντί να διορθωθούν τα == και != , η ECMAScript κράτησε την υπάρχουσα συμπεριφορά και πρόσθεσε τα === και !== '' === '0' // false '' === 0 // false 0 === '0' // false NaN === NaN // still weirdly false [''] === '' // false false === undefined // false false === null // false null === undefined // false Συνίσταται η χρήση των === και !== αντί των == και != 40 Arrays και Objects 41 Arrays Τα Arrays είναι τύπου Object και χρησιμοποιούνται για να δηλώσουμε λίστες δεδομένων // Creates an empty list let list = []; let groceries = ['milk', 'cocoa puffs']; groceries = 'kix'; - Ξεκινούν από το 0 (0-based indexing) - Mutable - Μέγεθος μέσω ιδιότητας length (όχι συνάρτηση) -.push() -.pop() - concat(), slice(), join(), reverse(), shift() και sort() 42 Επανάληψη σε πίνακα Μπορεί να χρησιμοποιηθεί το γνωστό for-loop για επανάληψη σε μια λίστα: let groceries = ['milk', 'cocoa puffs', 'tea']; for (let i = 0; i < groceries.length; i++) { console.log(groceries[i]); } Ή ένα for-each loop μέσω for...of: (intuition: for each item of the groceries list) for (let item of groceries) { console.log(item); } 43 Object Type To object είναι μια συλλογή από ζευγάρια key-value στοιχείων που ονομάζονται ιδιότητες (properties) Τα objects σε αντίθεση με τις μεταβλητές μπορούν να διατηρούν περισσότερες από μια τιμές και μεθόδους var obj = {}; obj = {name:”John”, lastname:”Doe”, age:24} Γνωστό και ως: var obj = {}; JavaScript Object obj.name = ”John”; Notation (JSON) obj.lastname = ”Doe”; obj.age = 24; obj[‘age’] =24; Global object σε όλους τους browsers είναι το window. 44 Επανάληψη σε ένα object Επανάληψη σε ένα object με χρήση for...in loop: (for each key in the object) for (key in object) { // … do something with object[key] } for (let name in scores) { console.log(name + ' got ' + scores[name]); } - Δεν μπορεί να χρησιμοποιηθεί for...in σε λίστες. Μόνο σε objects. - Δεν μπορεί να χρησιμοποιηθεί for...of σε objects. Μόνο σε λίστες. 45 Events 46  Γεγονοστραφής προγραμματισμός Η JavaScript στον φυλλομετρητή είναι κυρίως event-driven: Ο κώδικας δεν τρέχει απευθείας, αλλά εκτελείται όταν συμβαίνει κάποιο γεγονός Το κουμπί εκπέμπει ένα "event ", δηλαδή μια ανακοίνωση ότι κάτι συγκεκριμένο έχει συμβεί (πατήθηκε). EVENT! function onClick() {... Click Me! } …Μια συνάρτηση που ‘ακούει’ για αυτό το event, εκτελείται. Η συνάρτηση αυτή ονομάζεται "event handler." Πώς λοιπόν επικοινωνεί η JavaScript με τα στοιχεία της HTML; 47 To DOM Κάθε στοιχείο της σελίδας είναι προσβάσιμο στην JavaScript μέσω του DOM: Document Object Model - Το DOM είναι ένα δένδρο κόμβων που αντιστοιχούν στα HTML στοιχεία της σελίδας - Μπορούμε να τροποποιήσουμε, προσθέσουμε και να αφαιρέσουμε κόμβους του DOM, κάτι που θα επηρεάσει αντιστοίχως τη σελίδα. 48 DOM Παράδειγμα 49 DOM Παράδειγμα 50  Προσπέλαση DOM αντικειμένων Μπορούμε να προσπελάσουμε ένα DOM αντικείμενο που αντιστοιχεί σε ένα στοιχείο HTML μέσω της συνάρτησης querySelector: document.querySelector('css selector'); - Επιστρέφει το πρώτο στοιχείο που ταιριάζει στον επιλογέα CSS // Επιστρέφει το στοιχείο με id="button" let element = document.querySelector('#button'); Άλλες συναρτήσεις επιλογής: querySelectorAll() getElementById() getElementsByTagName() Παλιότεροι τρόποι getElementsByClassName() 51 QuerySelector codepen 52 Inline events 53 Προσάρτηση ακροατών (event listeners) Κάθε DOM αντικείμενο έχει την συνάρτηση: addEventListener(event name, function name); - event name είναι το όνομα (string) του συμβάντος που θέλουμε να ακούσουμε - Συνήθως: click, focus, blur, mouseover,… - function name είναι το όνομα της συνάρτησης που θέλουμε να εκτελεστεί όταν πυροδοτηθεί το event 54  55 Δημιουργείται σφάλμα γιατί τo script φορτώνεται και εκτελείται πριν φορτωθεί η σελίδα 56  Χρήση defer Μπορούμε να προσθέσουμε το χαρ/κό defer στην ετικέτα script, ώστε η JavaScript να μην εκτελείται μέχρι να φορτωθεί το DOM: 57 Αλλαγή στυλ σε element 58 Αλλαγή του περιεχομένου σε ένα element document.getElementById("here").innerHTML = "foobar"; Τροποποίηση attributes ◦ Κάθε DOM object έχει τα attributes του HTML στοιχείου ως properties: HTML JavaScript const element = document.querySelector('img'); element.src = 'tiger.png'; 59 Δημιουργία DOM elements 60  Δημιουργία DOM elements codepen Πηγές: Connolly, Hoar, “Fundamentals of Web Development, 2nd ed”, V. Kirst, Stanford CS-193X course. 61