Print bookPrint book

Υποενότητα 7.1: Το μοντέλο προγραμματισμού που βασίζεται σε συμβάντα

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 7.1: Το μοντέλο προγραμματισμού που βασίζεται σε συμβάντα
Printed by: Guest user
Date: Sunday, 24 November 2024, 1:19 PM

Description

  • Συνάρτηση - Function
  • Συμβάν - Event
  • Εξωτερικό - αρχείο External Javascript file
  • JavaScript - HTML μέθοδοι για τα συμβάντα 

Table of contents

Η ιδέα!

Η ιδέα είναι να συνδυάσετε τρία διαφορετικά αρχεία, ένα HTML, ένα CSS και ένα αρχείο javascript για να δημιουργήσετε την αλληλεπίδραση χρήστη-προγράμματος περιήγησης που εμφανίζεται στο βίντεο.

Το αρχείο HTML

Όπως μπορείτε να δείτε παρακάτω, το αρχείο HTML έχει έναν σύνδεσμο προς το αρχείο CSS στο  <head> και ένα σύνδεσμο προς το αρχείο JavaScript στο τέλος του  <body>.

Αναφέροντας το αρχείο CSS και το αρχείο JavaScript στο αρχείο HTML μπορούμε να συνδυάσουμε αυτά τα αρχεία μαζί!

Επιπλέον, χρησιμοποιούμε τα χαρακτηριστικά  id  στις περιοχές που θα χρειαστούμε στη JavaScript. Με το id είμαστε σε θέση να πάρουμε κάθε ένα από αυτά τα στοιχεία στη JavaScript και να τους πούμε τι θέλουμε να κάνουν. 

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>My first HTML-CSS and JavsScript combination</title>
 
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
   </head>
   <body>
     <h3>My first HTML-CSS and JavsScript combination!</h3>
     <p><input size="20" id="yourName"> is my name. </p>
     <button id="helloButton" >Tell me Hello!</button>
     <p>Hello <span id="viewName"></span>!</p>
 
     <script type="text/javascript" src="js/myscript.js"></script>
   </body>
</html>

Το αρχείο JavaScript

Στον παρακάτω κώδικα μπορείτε να δείτε ότι έχουμε την έκφραση"onclick".

To .onclick iείναι ένα παράδειγμα ενός συμβάντος-event JavaScript το οποίο θα εκτελείται όταν ο χρήστης κάνει κλικ σε κάτι.

Υπάρχουν poll;a συμβάντα JavaScript. Μερικά παραδείγματα είναι

  • onmouseover ( όταν ο χρήστης μετακινεί το ποντίκι σε μια περιοχή )
  • onkeydown ( όταν ο χρήστης πιέσει ένα πλήκτρο στο πληκτρολόγιο )
  • onload ( όταν το πρόγραμμα περιήγησης έχει φορτώσει πλήρως τη σελίδα )

Επιπλέον, ο κώδικας μας περιλαμβάνει μια συνάρτηση  function. Οι συναρτήσεις είναι ομάδες εντολών. Η γενική σύνταξη μιας συνάρτησης είναι:

function name_of_function () {
    your code here
}
name_of_function ();

Η τελευταία πρόταση,  name_of_function (); είναι υποχρεωτική για να τρέξει ο κώδικας μας. Με αυτή την έκφραση, πραγματικά "καλούμε" τη συνάρτησή μας. 

/*This is the myscript.js file in the folder js*/
var theButton = document.getElementById("helloButton");
   theButton.onclick = function (){
   var theName = document.getElementById("yourName").value;
  document.getElementById("viewName").innerHTML = theName;
}

Περισσότερες πληροφορίες για τις συναρτήσεις:  https://www.w3schools.com/js/js_functions.asp

Περισσότερες πληροφορίες για τα συμβάντα: https://www.w3schools.com/js/js_events.asp

The αρχείο CSS

Το παρακάτω CSS αναφέρεται στο στοιχείο HTML με id "viewName".

/*This is the mystyle.css file in the folder css*/
#viewName{
  color: red;
}

Άσκηση

Άσκηση

  1. Δημιουργήστε δύο νέους φακέλους στο φάκελο "Exercises". Ο πρώτος είναι ο φάκελος "css" και ο δεύτερος είναι ο φάκελος "js".
  2. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice07.1.html στον φάκελο "Exercises". Αντιγράψτε τον HTML κώδικα και επικολλήστε τον στο αρχείο.
  3. Δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως mystyle.css στον φάκελο "css". Αντιγράψτε τον CSS κώδικα και επικολλήστε τον στο αρχείο.
  4. Δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως myscript.js στον φάκελο "js". Αντιγράψτε τον JavaScript κώδικα και επικολλήστε τον στο αρχείο.
  5. Αποθηκεύστε όλα αυτά τα αρχεία και δείτε το αρχείο HTML στον επεξεργαστή ή στο πρόγραμμα περιήγησης. Φαίνονται αα πάντα σωστά;
  6. Θα μπορούσατε να προσθέσετε κάποιους κανόνες CSS για πιο ελκυστική εμφάνιση.