Κωδικοποίηση Για τα ανδρείκελα Cheat Sheet - ανδρείκελα

Με Nikhil Abraham

Η κωδικοποίηση είναι το λεξιλόγιο, η λογική και η σύνταξη ίσων μερών. Η κωδικοποίηση μπορεί αρχικά να φαίνεται εκφοβιστική, αλλά με την πρακτική, όμως, είναι εύκολο να εξοικειωθείτε με την ορολογία, τις έννοιες και τη δομή της. Η κατανόηση της κωδικοποίησης δεν ξεφεύγει από την εκμάθηση μιας νέας γλώσσας: Χρησιμοποιήστε την αρκετά συχνά και θα βρεθείτε σε θέση να μιλήσετε, να σκεφτείτε και να γράψετε στον κώδικα. Ωστόσο, είναι φυσικό για τους αρχαρίους να έχουν ερωτήσεις. Υπάρχουν πολλοί πόροι κωδικοποίησης διαθέσιμοι για εσάς, τόσο on-όσο και off-line. Ρωτήστε γύρω και θα διαπιστώσετε ότι δεν είστε μόνοι - πολλοί άλλοι άνθρωποι μαθαίνουν. Μετά από όλα, η κωδικοποίηση είναι μια ατέρμονη εκπαίδευση. Μάστερ μια όψη ή μια άλλη και μια νέα ανοίγει μπροστά σας.

Λεξιλόγιο κωδικοποίησης

Η κωδικοποίηση έχει ένα εκτεταμένο λεξιλόγιο που μπορεί να φανεί σαν απρόσβλητο techno-bell. Είτε διαβάζετε το άρθρο που σχετίζεται με την κωδικοποίηση στο διαδίκτυο είτε μιλάτε σε έναν προγραμματιστή στην εργασία, μπορεί να ακούσετε λέξεις που δεν έχετε ακούσει πριν ή που έχουν διαφορετική σημασία σε ένα πλαίσιο κωδικοποίησης. Εδώ είναι μερικές κοινές λέξεις λεξιλογίου για να ξέρετε:

• Γενικοί όροι ανάπτυξης ιστού:

  • Server: Ένας υπολογιστής που φιλοξενεί κώδικα ιστότοπου και ο οποίος "εξυπηρετεί" τον κώδικα ιστότοπου όταν ζητηθεί από έναν υπολογιστή-πελάτη. Οι διακομιστές συνήθως κάθονται σε μεγάλες αποθήκες με χιλιάδες άλλους διακομιστές και έχουν παρόμοιο μέγεθος και ισχύ με τον οικιακό σας υπολογιστή.

  • Πελάτης: Μια συσκευή που χρησιμοποιείται για πρόσβαση σε έναν ιστότοπο, συμπεριλαμβανομένων επιτραπέζιων ή φορητών υπολογιστών, tablet ή κινητών τηλεφώνων.

  • Σχεδιαστής: Ένας καλλιτεχνικός επαγγελματίας που αποφασίζει πώς ένας ιστότοπος θα δείχνει και θα αισθάνεται μαζί με τους τρόπους αλληλεπίδρασης των χρηστών με τον ιστότοπο - όπως για παράδειγμα, κλικ, μετακίνηση, κύλιση κλπ.

  • Συρματοπλέγματα: Μια απεικόνιση που δημιουργήθηκε από σχεδιαστές που παρουσιάζουν λεπτομερώς τις σχεδιαγράμματα, τις εικόνες και τα σχέδια χρωμάτων ενός ιστότοπου.

  • Προγραμματιστής: Ένας επαγγελματίας μηχανικός που γράφει κώδικα για να μετατρέψει τα wireframes σε χρήσιμους ιστότοπους. Με βάση τον τύπο του γραπτού κώδικα, οι προγραμματιστές αναφέρονται ως front-end, back-end ή full stack.

  • Front-end: Όλα όσα μπορείτε να δείτε και να κάνετε κλικ σε ένα πρόγραμμα περιήγησης. Οι προγραμματιστές του Front-end γράφουν κώδικα σε γλώσσες μπροστινού τέλους όπως HTML, CSS και JavaScript για να δημιουργήσουν την εμφάνιση του ιστότοπου.

  • Back-end: Όλα όσα συμβαίνουν πίσω από τα σκηνικά για να κάνουν το front-end να εκτελέσει την επιθυμία. Οι back-end προγραμματιστές γράφουν κώδικα σε γλώσσες όπως Ruby ή Python για να δημιουργήσουν λειτουργίες όπως η καταγραφή των χρηστών, η αποθήκευση των προτιμήσεων των χρηστών και η ανάκτηση δεδομένων όπως τα σχόλια σε μια φωτογραφία.

• Όροι που σχετίζονται με τις γλώσσες μπροστινής γραμμής:

  • * HTML ( Hypertext Markup Language ): μια ιστοσελίδα.

  • HTML tag: HTML οδηγίες, που συνήθως εμφανίζονται σε ζεύγη. Τα προγράμματα περιήγησης εφαρμόζουν ειδικά εφέ στο κείμενο μεταξύ μιας ετικέτας HTML που ανοίγει και κλείνει. Για παράδειγμα, η ετικέτα

    εμφανίζεται σε ένα φυλλομετρητή ως μεγάλη έντονη επικεφαλίδα και μπορεί να χρησιμοποιηθεί ως εξής:

    Dewey χτυπάει Truman

    .

  • Χαρακτηριστικό HTML: Χαρακτηριστικά ή παράμετροι για ετικέτες HTML που τροποποιούν τη συμπεριφορά της ετικέτας. Τα χαρακτηριστικά τοποθετούνται πάντοτε στην ετικέτα HTML που ανοίγει. Για παράδειγμα, το href είναι το χαρακτηριστικό στην ακόλουθη ετικέτα αγκύρωσης (που χρησιμοποιείται για τη δημιουργία υπερσυνδέσμων):

    Μηχανή αναζήτησης
    

  • CSS ( Cascading Style Sheets): Κωδικός που τροποποιεί HTML σε ιστοσελίδες εμφάνιση περιεχομένου αλλάζοντας το μέγεθος του κειμένου, το μέγεθος της εικόνας και άλλα χαρακτηριστικά.

  • JavaScript: Κωδικός που προσθέτει διαδραστικότητα και κινούμενη εικόνα σε ιστοσελίδες. Το JavaScript εντοπίζει επίσης τα περιστατικά του προγράμματος περιήγησης, όπως τα κλικ του ποντικιού, επικυρώνει την είσοδο χρήστη, όπως καταχωρήσεις κειμένου, και ανακτά δεδομένα από εξωτερικούς ιστότοπους.

  • Μεταβλητή: Μια θέση αποθήκευσης με όνομα και που περιέχει αριθμητικά δεδομένα ή κείμενο (που αναφέρονται ως χορδές ) για μεταγενέστερη χρήση.

  • Αν δήλωση (υπό όρους): Μια εντολή κώδικα που εξετάζει μια συνθήκη που συνήθως περιλαμβάνει μεταβλητές, όπως x <18, και εκτελεί κώδικα που γράφετε όταν η προϋπόθεση είναι αληθής.

  • Λειτουργία: Ένα όνομα που δίνεται σε μια ομάδα δηλώσεων προγραμματισμού για εύκολη αναφορά και χρήση.

• Όροι που σχετίζονται με τις γλώσσες back-end:

  • Ruby: Μια γλώσσα προγραμματισμού ανοιχτού κώδικα, γνωστή για χρήση στον προγραμματισμό ιστού.

  • Rails: Ένα πλαίσιο σχεδιασμένο για εύκολη δημιουργία ιστοσελίδων με Ruby.

  • Python: Μια γλώσσα προγραμματισμού ανοιχτού κώδικα που χρησιμοποιείται στον ιστό, σε επιστημονικές εφαρμογές και για ανάλυση δεδομένων.

Αναφορές Κωδικοποίησης και Πόροι

Οι HTML, CSS και JavaScript είναι οι πιο συνηθισμένες γλώσσες κωδικοποίησης στο μπροστινό μέρος. Ο παρακάτω πίνακας παραθέτει κάποιους σε απευθείας σύνδεση πόρους, αναφορές και σεμινάρια για να σας βοηθήσει να συνεχίσετε να ασκείτε και τις τρεις γλώσσες.

• W3Schools: Οδηγίες αναφοράς για HTML, CSS και JavaScript

• Φύλλα εξαπάτησης HTML: Οι πιο συχνά χρησιμοποιούμενες εντολές HTML

• CSS φύλλα εξαπατήσεως: Οι πιο συχνά χρησιμοποιούμενες εντολές CSS

• HTML tutorials: Tutorials and articles for the web που υποστηρίζονται από το Google

• CSS tutorials: Tutorials και άρθρα για τον προγραμματισμό ιστοσελίδων, με επίκεντρο το CSS

• Tutorials JavaScript: Tutorials και οδηγοί αναφοράς για JavaScript

Common Coding Mistakes

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

• Δεν έχετε κλείδωμα ετικέτας HTML μετά από κάθε ετικέτα HTML που ανοίγει.

• Λείπει αγκύλες <ή> σε HTML.

• Λείπει τα σγουράκια, τα ορθογώνια ή τα ερωτηματικά στο CSS, όπως παρακάτω:

  h1 {χρώμα: μπλε;}
  

• Λείπει τα σγουράκια στο JavaScript, ειδικά για τις δηλώσεις if.

• Ξεχνώντας να έχουμε ένα ζευγάρι ζεύγος ζεύξεων κλεισίματος για κάθε άνοιγμα ζεύγους εισαγωγικών.

• Διαθέτει περισσότερες από μία ετικέτα, ετικέτα ή ετικέτα ανοίγματος και κλεισίματος.

• Βάζοντας τον κώδικα HTML στο αρχείο ή την ενότητα CSS και τοποθετώντας τον κώδικα CSS στην ενότητα HTML. Εάν ο κώδικας ασχολείται με το στυλ και την εμφάνιση, είναι πιθανό το CSS.

• Δεν συνδέεται με το αρχείο CSS χρησιμοποιώντας την ετικέτα και έτσι τα εφέ CSS δεν εμφανίζονται στο πρόγραμμα περιήγησης.

• Διαγραφή ορθογραφίας ενός τμήματος μιας εντολής, όπως στο

  , το οποίο είναι λανθασμένο επειδή το χαρακτηριστικό είναι γραμμένο σε src όχι scr.

• Συμπεριλαμβανομένων χαρακτηριστικών εκτός της αρχικής ετικέτας HTML. Για παράδειγμα,

  src = "logo. jpg "είναι εσφαλμένη επειδή το χαρακτηριστικό είναι εκτός της ετικέτας της αρχικής εικόνας.