Javascript greek, μαθήματα στα ελληνικά 12 (Browser Side)

Γνωρίστε τη γλώσσα προγραμματισμού javascript μέσα απο μία σειρά βίντεο στα ελληνικά.
Σ' αυτό το βίντεο βλεπουμε πως μπορούμε να δουλέψουμε την javascript στον browser, μαθαίνουμε για τα dom, το document, το querySelector το alert κα.
Για να παρακολουθήσετε αυτή τη σειρά ειναι απαραίτητη μια στοιχειώδης γνώση της html. Αν δε γνωρίζετε html μπορείται να εξοικειωθείτε μαζί της απο αυτή τη σειρά βίντεο:
• HTML στα ελληνικά 1/8 ...
Σε αυτό το βίντεο χρησιμοποιούμε css selectors. Αν δε γνωρίζεται css μπορείτε να εξοικειωθείτε παρακολουθόντας την παρακάτω σειρά:
• CSS στα ελληνικά 1 (Ει...

[@nasossoulis9495]

Ευχαριστούμε...

[@strathlaths]

Εύγε πολύ καλή παρουσίαση, μπορεί κάποιος να καταλάβει εύκολα κάποια πράγματα

[@dimitrisandroid6483]

Να προτείνω και μια άσκηση:
Στο παρακάτω jsfiddle συμπληρώστε το κώδικα javascript ετσι ώστε το κουμπί + να αυξάνει κατα 1 το αριθμό που είναι μέσα στο γαλάζιο κουτάκι και το reset να τον μηδενίζει:
jsfiddle.net/DimTech/c8f637mt/

[@LeonKoundouras]

codesandbox.io/s/javascript12-browser-side-3sche

[@factionleader]

Ενδιαφέρουσα άσκηση αλλά φαίνεται λιγάκι δύσκολη...

[@spyross2595]

Καλησπέρα, ευχαριστούμε πολύ για τη προσπάθεια που κάνεις με τα tutorials...Εγώ αυτό που θα ήθελα να πω είναι ότι βοηθαει πολύ κάθε φορά που αναφέρεις κάτι καινούργιο στο να πηγαίνουμε στην αντίστοιχη ενότητα στο w3schools...Οπως πχ για τη μέθοδος querySelector...προσπαθείς με πολύ χαλαρό τρόπο να μάθεις σημαντικά πράγματα στη πράξη και το κάνεις πολύ καλά..αν το συνδυάσουμε και με λιγο θεωρία ταυτόχρονα εμείς που παρακολουθούμε τα tutorials το αποτέλεσμα ειναι πολύ καλύτερο.
Πραγματικά θύμαμαι στη java όταν δημιουργούσα ένα αντικείμενο επι του οποίου καλούσα κάποιο ακροατή όπως για να πραγματοποιηθει κάποιο event ήταν πολύ διαφορετικό από εδώ

[@TechandCodeInGreek]

Καλησπέρα, συμφωνώ ότι ειναι ένας πολύ καλός τρόπος αυτός που προτείνεις. Γενικά το να συνδυάζεις περισσότερες απο μία πηγες για να αντλείς γνώση για ένα θέμα ειναι πάντα καλή ιδέα. Είτε ειναι το w3schools είτε κάποια άλλη πηγή. Ευχαριστούμε για την πρόταση.

[@antio1753]

Θελουμε και JQuery κ.Καθηγητα ! :)

[@fotisp91]

Ενώ το console.log(document) εμφανίζει κανονικά #document στην κονσόλα και βλέπω το HTML
όταν γράφω console.log(document.querySelector('h1')) εμφανίζει null στην κονσόλα.Πιθανή αιτία;
Ευχαριστώ εκ των προτέρων

[@TechandCodeInGreek]

Το πιθανότερο να μην υπάρχει h1 στοιχείο στην ιστοσελίδα σου για κάποιο λόγο. Ακόμα και εδώ σε αυτή τη σελίδα του youtube αν ανοίξεις κονσόλα και κάνεις επικόλησση αυτό που μου γράφεις παραπάνω console.log(document.querySelector('h1')) θα σου δειξει το h1 με τον τίτλο του βίντεο.
Για δες μήπως λείπει το h1 tag ή μήπως υπαρχει κάποιο συνακτικό λάθος πχ δεν το κλείνεις.

[@georgechatziiliadis5234]

@@TechandCodeInGreek Καλησπέρα και Συγχαρητήρια για την υπέροχη δουλειά σας!
Δυστυχώς το ίδιο πρόβλημα αντιμετωπίζω και εγώ, παρόλο που όλα είναι σωστά συντακτικά..
Καμιά ιδέα παρακαλώ ; (Νομίζω ότι συμβαίνει κάτι με την querySelector διότι με την querySelectorAll εμφανίζεται το NodeList). Όπως επίσης και με τη μέθοδο addEventListener απλά δεν εκτελείται τίποτα !

[@ParisKoutroumanos]

@@georgechatziiliadis5234 @Fotis Psyrras Το στο index.html το έχετε πριν το ;ή το έχετε στην αρχή απλά κάτω από το ; Για κάντε έναν έλεγχο και πες μας εάν αυτό είναι το πρόβλημα Pls.

[@MK_con]

Refused to apply style from '127.0.0.1:5500/style%20css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Γνωρίζετε μήπως τι μπορεί να κάνω λάθος και να μου εμφανίζει αυτό όταν γράφω για την αλλαγή του χρώματος?
Ευχαριστώ εκ των προτέρων.

[@TechandCodeInGreek]

Καλησπέρα. Τι ειναι αυτό το url? (style%20css)? Μήπως ειναι γραμμένο το url στο link tag λαθος;

[@MK_con]

@@TechandCodeInGreek Καλησπέρα και ευχαριστώ για την απάντηση!
Μόλις τα ξανακοίταξα και παρατήρησα ότι δεν είχα γράψει "style.css" αλλα "style css".
Επίσης είχα βάλει αντί για " " αυτά ' '. Δεν έχω καταλάβει ακόμη ακριβώς εάν είναι διαφορετικά αυτά τα 2 αλλά έχω παρατήρησει ότι μερικές φορές και να βάλω το ένα αντί του άλλου τα διαβάζει κανονικά.
Είναι η πρώτη γλώσσα και η πρώτη επαφή γενικότερα με το αντικείμενο και ίσως φαίνεται χαζό αυτό που λέω αλλά το είχα και μέρες απορία όσο έβλεπα τα βιντεάκια.

[@TechandCodeInGreek]

@@MK_con Ουσιαστικά δεν εχεις διαφορά ανάμεσα στο διπλό και το μονό εισαγωγικό. Σε βοηθάει όταν θελεις να περιλαβεις το ένα μεσα στο άλλο. Δηλαδή αν πχ θελωνα γράψω "Αυτή η λέξη ειναι σε 'μονά' εισαγωγικά", περικλείοντάς την σε διπλά εισαγωγικά αρκεί. Ενώ αν την είχα περικλείσει σε μονά εισαγωγικά θα επρεπει να γράψω 'Αυτή η λέξει ειναι σε \'μονα\' εισαγωγικά' που δεν ειναι τοσο ευανάγνωστο.
Επίσης δώσε σημασία ότι εκτός απο τα μονά και τα διπλά εισαγωγικά στη javascript μπορείς να χρησιμοποιήσεις και το μονο ανάστροφο εισαγωγικό (`) που συνίθως το βρίσκεις κάτω απο το πλήκρο ESC. Αυτό το χρησιμοποιείς για strings με πολλές γραμμές και μπορείς να συμπεριλάβεις και μεταβλητές με τη μορφή ${value} όπου value η μεταβλητή σου. Σε κάποιο βίντεο το δείχνω αυτό που σου λέω, αλλα μερικοί μπερδεύουν το ανάστροφο εισαωγικό (`) με το μονό (') γι αυτό το διευκρινήζω.
Καλή αρχή λοιπον αφού ειναι η πρώτη σου επαφή με το αντικείμενο, εύχομαι να το αγαπήσεις!

[@factionleader]

Όλη αυτή η αλληλεπιδραση, με την αλερτ γιατί λειτουργεί μόνο με το 1ο h1 tag; Θέλω να πω, πως αν πάω στο hello world 2 και κάνω κλικ, δεν "πετάει" κάποιο pop-up...

[@TechandCodeInGreek]

Άλλη μία εύστοχη παρατήρηση. H querySelector επιλέγει πάντα το πρώτο στοιχείο απο αυτά που βρίσκει και σου επιστρέφει αυτό. Αν ήθελες όλα τα στοιχεία θα έπρεπε να χρησιμοποιήσεις την querySelectorAll που σου επιστρέφει λίστα με όλα τα στοιχεία. Στη συνέχεια όμως δε θα μπορούσες να εφαρμόσεις το addEventListener απευθείας στη λίστα αυτή, αλλα θα έπρεπε να κάνεις ένα loop και να το εφαρμόσεις για το κάθε στοιχείο.

[@factionleader]

@@TechandCodeInGreek Ευχαριστώ πολύ. Ήταν κατανοητό. Όταν πάω σπίτι θα προσπαθήσω να το δω και στην πράξη. :)

[@factionleader]

@@TechandCodeInGreek Χρειάστηκε και μια συνθήκη
if (i==0 || i==1) γιατί είχε κι άλλα στοιχεία η λίστα
[0, 1, item, keys, values, entries, forEach, length]. Δεν ξέρω άν υπήρχε άλλος τρόπος.....
for (let i in dom) {
if (i==0 || i==1){
dom[i].addEventListener('click', function(){
alert('You clicked me!')
})
} else {
continue;
}
}

[@TechandCodeInGreek]

@@factionleader Υπαρχει ναι και άλλος πιο ξεκάθαρος τρόπος με την forEach: (jsfiddle.net/L90qm4bs/1/)
let doms = document.querySelectorAll("h1");
doms.forEach(function(dom){
dom.addEventListener("click", function() {
alert("You clicked me!");
});
})

[@factionleader]

@@TechandCodeInGreek Διάβασα για την forEach() στο w3schools και έβγαλα μια άκρη πως λειτουργεί. Έχω μια τελευταία απορία όμως. Τα υπόλοιπα στοιχεία στην λίστα [0, 1, item, keys, values, entries, forEach, length] φαίνεται πως είναι functions. Η απορία έγκειται στο πως η forEach δηλαδή τα παραβλεπει και δεν βγάζει σφάλμα ενώ με μια απλή for δηλαδή βγάζει αν χρησιμοποιήσουμε για κάθε στοιχείο την addEventListener;

[@ΔημήτρηςΤσαλα]

πως μπορω σε μια ul list με addEventListener() method να κανω multiple click ;;

[@TechandCodeInGreek]

Καλησπέρα Δημήτρη, δεν κατάλαβα τι ακριβώς εννοείς.