Καπετανάκη Λένα site: youtube ......χωρισμένες με κομα join()...
TRANSCRIPT
![Page 1: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/1.jpg)
Καπετανάκη Λένα site: https://lenakapetanaki.gr
YouTube: youtube.com/c/lenakapetanaki
1
![Page 2: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/2.jpg)
Γνώση HTML 5
Βασικές γνώσεις CSS 3
Kapetanaki Lena MSc -Javascript Tutorial 2
![Page 3: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/3.jpg)
Μπορείς να γράψεις javascript σε έναν απλό text editor (όπως το Notepad++ )
Τα αρχεία πρέπει να αποθηκεύονται με κατάληξη .js
Development Tools για javascript ◦ Brackets
◦ Visual Studio Code
◦ Sublime
◦ Dreamweaver (με συνδρομή)
Kapetanaki Lena MSc -Javascript Tutorial 3
![Page 4: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/4.jpg)
Δημιουργήθηκε από τον Brendan Eich
Πρώτα ονόματα Mocha, LiveScript
Kapetanaki Lena MSc -Javascript Tutorial 4
![Page 5: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/5.jpg)
Γλώσσα προγραμματισμού ◦ Ελέγχει φόρμες με εισαγωγή στοιχείων
χρηστών ◦ Κάνει αλλαγές σε σελίδες HTML ◦ Επεξεργάζεται και αποθηκεύει
δεδομένα ◦ Μπορεί να ελέγχει εφαρμογές.
Χρησιμοποιείται σε συνδιασμό με την html
Προσδίδει διαδραστικότητα και δυναμικότητα σε μια html σελίδα
Kapetanaki Lena MSc -Javascript Tutorial 5
![Page 6: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/6.jpg)
Εσωτερικά σε html αρχεία ◦Μέσα στο tag <script>…… javascript…… </script>
◦ To tag <script> μπορεί να μπει οπουδήποτε στην σελίδα της html είτε μέσα στο <head> είτε στο <body>
Σε εξωτερικό αρχείο
Kapetanaki Lena MSc -Javascript Tutorial 6
![Page 7: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/7.jpg)
Kapetanaki Lena MSc -Javascript Tutorial 7
![Page 8: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/8.jpg)
Δημιουργία νέου αρχείου με όνομα script.js
◦ Στο νέο αρχείο γράφουμε κατευθείαν javascript
Ένωση του .js αρχείου με το .html αρχείο με ένα script
Kapetanaki Lena MSc -Javascript Tutorial 8
![Page 9: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/9.jpg)
Σε ένα pop-up box , χρησιμοποιώντας το window.alert ()
Σε ένα στοιχείο της HTML, χρησιμοποιώντας το innerHTML
Στην HTML χρησιμοποιώντας document.write ()
Στην κονσόλα του προγράμματος περιήγησης, χρησιμοποιώντας το console.log ()
Kapetanaki Lena MSc -Javascript Tutorial 9
![Page 10: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/10.jpg)
Alert Box ◦ Εμφανίζει κάποιο μήνυμα στην οθόνη. Ο
χρήστης πρέπει να πατήσει ΟΚ για να συνεχίσει.
Kapetanaki Lena MSc -Javascript Tutorial 10
![Page 11: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/11.jpg)
Confirm Box ◦ Χρησιμοποιείται για την επιβεβαίωση μιας
επιλογής του χρήστη με ok ή cancel
Kapetanaki Lena MSc -Javascript Tutorial 11
![Page 12: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/12.jpg)
Prompt Box ◦ Χρησιμοποιείται προκειμένου να μπορέσει ο
χρήστης να εισάγει μια τιμή ένα ένα κείμενο. Ο χρήστης έχει επιλογή ΟΚ ή Ακύρωση
Kapetanaki Lena MSc -Javascript Tutorial 12
![Page 13: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/13.jpg)
Για να αποκτηθεί η πρόσβαση σε ένα στοιχείο HTML μέσα από την JavaScript μπορεί να χρησιμοποιηθεί η μέθοδος
◦ document.getElementById (“ονομα_id”)
◦ document.getElementsByClassName()
◦ document.getElementsByName()
◦ document.getElementsByTagName()
Kapetanaki Lena MSc -Javascript Tutorial 13
![Page 14: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/14.jpg)
Γράφεις μέσα στο αρχείο της html
Χρησιμοποιείται για testing κυρίως σκοπούς
Χρησιμοποιώντας το document.write () μετά την πλήρη φόρτωση ενός εγγράφου HTML, θα διαγραφούν όλα τα στοιχεία της HTML και θα εμφανιστούν μόνο τα δεδομένα του document.write()
Kapetanaki Lena MSc -Javascript Tutorial 14
![Page 15: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/15.jpg)
Γράφει ένα μήνημα στην html
Χρησιμοποιείται επί το πλείστον για testing λόγους
Kapetanaki Lena MSc -Javascript Tutorial 15
![Page 16: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/16.jpg)
Για να αποκτηθεί η πρόσβαση σε ένα στοιχείο HTML μέσα από την JavaScript μπορεί να χρησιμοποιηθεί η μέθοδος
document.getElementById (“ονομα_id”).
Kapetanaki Lena MSc -Javascript Tutorial 16
![Page 17: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/17.jpg)
Ένας κοινός τρόπος προβολής δεδομένων σε HTML στοιχεία μέσα από την JS.
Kapetanaki Lena MSc -Javascript Tutorial 17
![Page 18: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/18.jpg)
Χρησιμοποιείται για debugging σκοπούς
Εμφανίζει το αποτέλεσμα στο Console του Inspector
Kapetanaki Lena MSc -Javascript Tutorial 18
![Page 19: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/19.jpg)
Ο κωδικας μετά από διπλές γραμμές // ή μεταξύ / * και * / αντιμετωπίζεται ως σχόλιο.
Τα σχόλια αγνοούνται και δεν θα εκτελεστούν
Kapetanaki Lena MSc -Javascript Tutorial 19
![Page 20: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/20.jpg)
Oι προτάσεις στην JS αποτελούνται από Μεταβλητές , Operators, Εκφράσεις, Λέξεις-κλειδιά και Σχόλια.
Οι προτάσεις χωρίζονται πάντα με ελληνικό ερωτηματικό (;)
Kapetanaki Lena MSc -Javascript Tutorial 20
![Page 21: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/21.jpg)
Σε μια γλώσσα προγραμματισμού, οι μεταβλητές χρησιμοποιούνται για την αποθήκευση δεδομένων.
H JavaScript χρησιμοποιεί τη λέξη-κλειδί var για να δηλώσει τις μεταβλητές.
Χρησιμοποιείται το “=“ για την εκχώρηση τιμών σε μεταβλητές
Σε αυτό το παράδειγμα, το x ορίζεται ως μεταβλητή. Στη συνέχεια στο x εκχωρείται(δίνεται) η τιμή 13
Kapetanaki Lena MSc -Javascript Tutorial 21
![Page 22: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/22.jpg)
Τα ονόματα μπορούν να περιέχουν γράμματα, ψηφία, υπογράμμιση και δολάριο.
Τα ονόματα πρέπει να αρχίζουν με ένα γράμμα
Τα ονόματα είναι ευαίσθητα σε πεζά (y και Y είναι διαφορετικές μεταβλητές)
Οι δεσμευμένες λέξεις (όπως λέξεις-κλειδιά JavaScript) δεν μπορούν να χρησιμοποιηθούν ως ονόματα
Kapetanaki Lena MSc -Javascript Tutorial 22
![Page 23: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/23.jpg)
Οι μεταβλητές που δηλώνονται Globally (εξω από κάθε function) έχουν Global Scope. Οι Global Variables είναι προσβάσιμες από οπουδήποτε σε ένα πρόγραμμα JavaScript.
Kapetanaki Lena MSc -Javascript Tutorial 23
![Page 24: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/24.jpg)
Οι μεταβλητές που δηλώνονται τοπικά (εντός μιας συνάρτησης) έχουν Function Scope.
Οι τοπικές μεταβλητές είναι προσπελάσιμες μόνο μέσα από τη Function όπου δηλώνονται.
Kapetanaki Lena MSc -Javascript Tutorial 24
![Page 25: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/25.jpg)
Η εντολή let δηλώνει μια τοπική μεταβλητή block scope
Σε αντίθεση η εντολή var δεν έχει block scope
Kapetanaki Lena MSc -Javascript Tutorial 25
![Page 26: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/26.jpg)
Οι μεταβλητές που ορίζονται με const χρησιμοποιούνται όπως αυτές με let με την διαφορά ότι δεν μπορούν να εκχωρηθούν εκ νέου
ΔΕΝ ορίζει μια σταθερή τιμή. Ορίζει μια σταθερή αναφορά σε μια τιμή.
Kapetanaki Lena MSc -Javascript Tutorial 26
![Page 27: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/27.jpg)
Kapetanaki Lena MSc -Javascript Tutorial 27
![Page 28: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/28.jpg)
Kapetanaki Lena MSc -Javascript Tutorial 28
![Page 29: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/29.jpg)
Μπορείς να προσθέσεις και κείμενο με το + operator.
Kapetanaki Lena MSc -Javascript Tutorial 29
![Page 30: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/30.jpg)
Περιέχουν τιμές
Δεν περιέχουν τιμές
Kapetanaki Lena MSc -Javascript Tutorial 30
![Page 31: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/31.jpg)
Μια συνάρτηση JavaScript είναι ένα τμήμα κώδικα JavaScript, που δεν εκτελείται από την αρχή αλλά μόνο όταν "καλείται".
Για παράδειγμα, μια συνάρτηση μπορεί να καλείται όταν συμβαίνει ένα event , όπως όταν ο χρήστης κάνει κλικ σε ένα κουμπί.
Kapetanaki Lena MSc -Javascript Tutorial 31
![Page 32: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/32.jpg)
Όταν η JavaScript φτάσει σε εντολή return, η function θα σταματήσει να εκτελείται.
Kapetanaki Lena MSc -Javascript Tutorial 32
![Page 33: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/33.jpg)
Ένα συμβάν HTML μπορεί να είναι κάτι που κάνει ο browser ή κάτι που κάνει ένας χρήστης.
Ακολουθούν ορισμένα παραδείγματα συμβάντων HTML:
◦ Έχει ολοκληρωθεί η φόρτωση μιας ιστοσελίδας HTML
◦ Ένα πεδίο input HTML έχει αλλάξει
◦ Έγινε κλικ σε ένα κουμπί HTML
Η JavaScript επιτρέπει να εκτελέσετε κώδικα όταν ανιχνεύονται συμβάντα.
Η HTML επιτρέπει την προσθήκη events της JS σαν attributes της HTML.
Kapetanaki Lena MSc -Javascript Tutorial 33
![Page 34: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/34.jpg)
Onload: η js τρέχει αφού μια εικόνα ή σελίδα φορτώσει.
Onclick: η js τρέχει όταν ο χρήστης κάνει κλικ με το ποντίκι
Onmouseover: η js τρέχει όταν ο χρήστης περάσει το ποντίκι πάνω από ένα στοιχείο
Onchange: η js τρέχει όταν ένα στοιχείο html αλλάζει
Onmouseout: η js τρέχει όταν το ποντίκι απομακρίνεται από ένα στοιχέιο
Onmouseup: A mouse button is released
Onkeydown Onsubmit: η js τρέχει όταν ο χρήστης
υποβάλλει μια φόρμα
Kapetanaki Lena MSc -Javascript Tutorial 34
https://www.w3schools.com/jsref/dom_obj_event.asp
![Page 35: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/35.jpg)
Θα αλλάξει το περιεχόμενα της παραγράφου demo στην τρέχουσα ημερομηνία
Kapetanaki Lena MSc -Javascript Tutorial 35
![Page 36: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/36.jpg)
Με την IF statement μπορούμε να πάρουμε μια απόφαση ανάλογα με την τελική τιμή που θα πάρει η δήλωση μας:
![Page 37: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/37.jpg)
![Page 38: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/38.jpg)
![Page 39: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/39.jpg)
![Page 40: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/40.jpg)
![Page 41: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/41.jpg)
![Page 42: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/42.jpg)
![Page 43: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/43.jpg)
![Page 44: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/44.jpg)
![Page 45: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/45.jpg)
![Page 46: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/46.jpg)
Δημιουργία calculator που ο χρήστης θα πληκτρολογεί σε 3 inputs, 2 αριθμούς και την πράξη (+,-,*,/) και θα εμφανίζεται το αποτέλεσμα.
![Page 47: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/47.jpg)
Kapetanaki Lena MSc -Javascript Tutorial 47
![Page 48: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/48.jpg)
.length για να βρεις το μήκος μιας συμβολοσειράς χρησιμοποιείς την ιδιότητα
Kapetanaki Lena MSc -Javascript Tutorial 48
![Page 49: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/49.jpg)
IndexOf() επιστρέφει την θέση της πρώτης εμφάνισης ενός string
lastIndexOf() επιστρέφει την θέση της τελευταίας εμφάνισης ενός string
Kapetanaki Lena MSc -Javascript Tutorial 49
![Page 50: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/50.jpg)
Slice() εξάγει ένα τμήμα μιας συμβολοσειράς και επιστρέφει το εξαγόμενο τμήμα σε μια νέα συμβολοσειρά. (δεχεται και αρνητικές τιμές)
Substring() ακριβώς το ίδιο αλλά δεν δέχεται αρνητικές τιμές
Η μέθοδος λαμβάνει 2 παραμέτρους: τη θέση εκκίνησης και την τελική θέση
Substr() Μοιάζει με το slice() αλλά η δεύτερη παράμετρος δείχνει το μήκος του εξαγόμενο κειμένου
Kapetanaki Lena MSc -Javascript Tutorial 50
![Page 51: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/51.jpg)
Replace() αντικαθιστά ένα string με ένα άλλο
Kapetanaki Lena MSc -Javascript Tutorial 51
![Page 52: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/52.jpg)
toUpperCase()
toLowerC ase()
Kapetanaki Lena MSc -Javascript Tutorial 52
![Page 53: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/53.jpg)
Kapetanaki Lena MSc -Javascript Tutorial 53
![Page 54: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/54.jpg)
Επιστρέφει μια συμβολοσειρά, με τον αριθμό γραμμένο με έναν καθορισμένο αριθμό δεκαδικών
Kapetanaki Lena MSc -Javascript Tutorial 54
![Page 55: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/55.jpg)
Μετατρέπει μια συμβολοσειρά σε ακέραιο
Αντοίστοιχα parseFLoat()
Kapetanaki Lena MSc -Javascript Tutorial 55
![Page 56: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/56.jpg)
new Date() : εμαφνίζει τρέχουσα ημερομηνία
Kapetanaki Lena MSc -Javascript Tutorial 56
![Page 57: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/57.jpg)
Math.round()
Eπιστρέφει την τιμή του x στρογγυλοποιημένη στον κοντινότερο αριθμό
Math.sqrt()
Επιστρέφει την τετραγωνική ρίζα του x
Kapetanaki Lena MSc -Javascript Tutorial 57
![Page 58: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/58.jpg)
Math.random()Επιστρέφει έναν τυχαίο πραγματικό αριθμό από το 0 εως το 1
Math.floor() Επιστρέφει το ακέραιο κομμάτι ενός δεκαδικού
Kapetanaki Lena MSc -Javascript Tutorial 58
![Page 59: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/59.jpg)
Είναι μια ακολουθία χαρακτήρων που σχηματίζει ένα πρότυπο αναζήτησης
Όταν αναζητάς δεδομένα σε ένα κείμενο, μπορείς να χρησιμοποιήσεις αυτό το πρότυπο αναζήτησης για να περιγράψεις αυτό που αναζητάς.
Μπορεί να είναι ένας μόνος χαρακτήρας ή ένα πιο πολύπλοκο μοτίβο.
Kapetanaki Lena MSc -Javascript Tutorial 59
![Page 60: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/60.jpg)
/w3school/ Είναι μια regular expression
i κάνει την αναζήτηση case-insensitive
Kapetanaki Lena MSc -Javascript Tutorial 60
![Page 61: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/61.jpg)
Kapetanaki Lena MSc -Javascript Tutorial 61
![Page 62: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/62.jpg)
Οι πίνακες χρησιμοποιούνται για την αποθήκευση πολλαπλών τιμών σε μία μόνο μεταβλητή
Ένας πίνακας είναι μια ειδική μεταβλητή, η οποία μπορεί να κατέχει περισσότερες από μία τιμές τη φορά.
Kapetanaki Lena MSc -Javascript Tutorial 62
![Page 63: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/63.jpg)
Ο ευκολότερος τρόπος για την δημιουργία ενός πίνακα
Kapetanaki Lena MSc -Javascript Tutorial 63
![Page 64: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/64.jpg)
Μετατροπή Arrays σε Strings
◦ toString() μετατρέπει έναν πίνακα σε ένα string με τις τιμές του πίνακα χωρισμένες με κομα
◦ join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα από το toString() μπορείς να επιλέξεις ποιος θα είναι ο seperator
Kapetanaki Lena MSc -Javascript Tutorial 64
![Page 65: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/65.jpg)
pop() διαγράφει το τελευταίο στοιχείο από έναν πίνακα
push() προσθέτει ένα καινούριο στοιχείο στον πίνακα (στο τέλος του)
Kapetanaki Lena MSc -Javascript Tutorial 65
![Page 66: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/66.jpg)
shift() λειτουργεί σαν το pop() αλλά διαγράφει το πρώτο στοιχείο του πίνακα και μετακινεί όλα τα άλλα μια θέση μπροστά
concat() δημιουργεί έναν καινούριο πίνακα συγχωνεύοντας υπάρχοντες πίνακες
Kapetanaki Lena MSc -Javascript Tutorial 66
![Page 67: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/67.jpg)
splice() μπορεί να χρησιμοποιηθεί για να προστεθούν καινούρια στοιχεία σε έναν πίνακα
Η πρώτη παράμετρος (2) δείχνει την θέση όπου τα νέα στοιχεία θα προστεθούν
Η δεύτερη παράμετρος (0) ορίζει πόσα στοιχεία θα πρέπει να μετακινηθούν
Οι υπόλοιπες παράμετροι ("Lemon" , "Kiwi") ορίζουν τα στοιχεία που θα προστεθούν
Kapetanaki Lena MSc -Javascript Tutorial 67
![Page 68: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/68.jpg)
sort() ταξινομεί αλφαβητικά έναν πίνακα
reverse() ταξινομεί με φθίνουσα σειρά έναν πίνακα
Kapetanaki Lena MSc -Javascript Tutorial 68
![Page 69: Καπετανάκη Λένα site: YouTube ......χωρισμένες με κομα join() μετατρέπει έναν πίνακα σε ένα string αλλά αντίθετα](https://reader036.vdocuments.site/reader036/viewer/2022071611/614a7b3f12c9616cbc697190/html5/thumbnails/69.jpg)
forEach() καλεί μια συνάρτηση για κάθε στοιχείο του πίνακα
filter() δημιουργεί έναν νέο πίνακα με τα στοιχεία του πίνακα που ικανοποιούν μια συνθήκη
Kapetanaki Lena MSc -Javascript Tutorial 69