Jump to content
SpirosK

Εισαγωγή στην Javascript(σύνταξη,τρόποι εισαγωγής Javascript σε Html,τελεστές)

Recommended Posts

SpirosK

Εισαγωγή

Τι είναι JavaScript?

  • Η javascript είναι μια scripting γλώσσα η οποία έχει σχεδιαστεί και χρησιμοποιείται για να εισάγουμε την έννοια της διαδραστικότητας στις html σελίδες.
  • Είναι μια ερμηνευτική γλώσσα,δηλαδή το script εκτελείτε χωρίς να έχει περάσει απο την διαδικασία της σύνταξης.
  • Η javascript και η java είναι δύο εντελώς διαφορετικές γλώσσες.

 

Τι μπορούμε να κάνουμε με την javascript?

  • Με την javascript μπορούμε να εκτελέσουμε κάποια πράγματα όταν συμβαίνει ενα γεγονός,για παράδειγμα όταν ο χρήστης κλικάρει σε ένα html στοιχείο,να εκτελείται κάποιο script και λαμβάνουμε τα αντίστοιχα αποτελέσματα.
  • Η javascript μπορεί να διαβάσει και να αλλάξει τα περιεχόμενα ενός html στοιχείου.
  • Μπορουμε να την χρησιμοποιήσουμε για να επικυρώσουμε δεδομένα μιας φόρμας(validate) πρωτού να υποβληθούν στον server (γλυτώνουμε και τον server απο επιπλέον έλεγχο).
  • Με την βοήθεια της javascript μπορούμε να εντοπίσουμε τον browser του επισκέπτη και ανάλογα με τον browser να φορτώουμε την αντίστοιχη σελίδα που είναι φτιαγμένη για αυτόν τον browser.
  • Μπορούμε να δημιουργήσουμε cookies (να αποθηκεύουμε και να λαμβάνουμε πληροφορίες στον υπολογιστή του επισκέπτη).

 

Πώς συντάσσετε?
Για να εισάγουμε javascript σε ενα html αρχείο χρησιμοποιούμε τη ετικέτα <script> και μέσα σε αυτή την ετικέτα χρησιμοποιούμε το όρισμα "type" για να ορίσουμε την scripting γλώσσα που θα χρησιμοποιήσουμε.

Οι ετικέτες <script>...</script> μας δηλώνουν που αρχίζει και που τελειώνει η javascript.

Ας δούμε ενα παράδειγμα για να καταλάβουμε καλύτερα :

Quote

 

<html>
< body>

< p>Μια παράγραφος</p>

<script type="text/javascript">
... κώδικας javascript ...
< /script>

</body>
< /html>

 


Ότι είναι μέσα στις ετικέτες <script> εκτελείται από τον browser.

  •  Αν δεν βάλουμε τον κώδικα javascript μέσα σε ετικέτες script ο browser τον αντιλαμβάνεται σαν απλό κείμενο και δεν τον εκτελεί.

 

Ποίοι είναι οι τρόποι εισαγωγής javascript κώδικα μέσα σε ενα html αρχείο?
Υπάρχουν 2 τρόποι να εισάγουμε javscript κώδικα μέσα σε ένα html αρχείο.

1.Internal
Ο ένας τρόπος είναι να εισάγουμε εσωτερικά μέσα στο html αρχείο τον javascript κώδικα.

Μπορούμε λοιπόν να γράψουμε javascript μέσα στην ετικέτα <body>

Quote

 

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Internal-body</title>
</hea

y>

<h1>Internal μέσα στην ετικέτα body</h1>

<p id="demo">Κείμενο</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>

</body>

</html>

d><bod

 

Ή μπορούμε να γράψουμε javascript μέσα στην ετικέτα <head>

Quote

 

<head>
<title>Internal-head</title>

<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>

<body>

<p id="demo"Hμερομηνία :</p>

<button type="button" onclick="displayDate()">Εμφάνισε την ημερομηνία</button>

</body>

 

Μπορούμε να έχουμε javascript κώδικα και στo <body> και στο <head>,άλλα καλή τακτική είναι γράφουμε ότι κώδικα javascript στο <head>.

 

2.External
Ο κώδικας javascript μπορεί να γραφτεί και ξεχωριστά απο html αρχείο.Συνήθως αυτά τα αρχεία javascript περιέχουν κώδικα ο οποίος μπορεί να χρησιμοποιηθεί σε διαφορετικές σελίδες.

Τα εξωτερικά αρχεία javascript έχουν κατάληξη .js .

  Τα εξωτερικά αρχεία .js δεν πρέπει να περιέχουν τις ετικέτες <script>...</script>.

Ας δούμε πώς εισάγουμε ένα external javascript μέσα στην html :

Quote

 

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="kati.js"></script>
</head>

<body>

</body>

</html>

 

Πώς λειτουργούν τα statements(δηλώσεις) στον browser?
Η Javascript είναι μία σειρά απο δηλώσεις(statements) που θα εκτελεστούν στον browser.Δηλαδή ένα javascript statement είναι μια εντολή προς τον browser, η οποία εντολή θα λέει στον browser τι να κάνει.

  •  Προσοχή,η javascript είναι case sensitive ,δηλαδή να προσέχουμε τον τρόπο που γράφουμε statements,δημιουργούμε ή καλούμε μεταβλητές,αντικείμενα ή συναρτήσεις!Για παράδειγμα η συνάρτηση function() και η συνάρτηση Function() είναι 2 εντελώς διαφορετικές συναρτήσεις!

 

Ας δούμε ενα απλό παράδειγμα:

Quote

document.write("Hello World");

Η δήλωση αυτή(ή αλλιώς statement) λέει στον browser να γράψει Hello World στην ιστοσελίδα.

Αλλά ας δούμε έναν πλήρη κώδικα javascript :

Quote

 

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<script type="text/javascript">
{
document.write("<h1>Ότι εμφανίζεται προέρχεται απο ενα javascript statement</h1>");
document.write("<p>Παράγραφος 1</p>");
document.write("<p>Παράγραφος 2</p>");
}
</script>
</head>
<body>

</body>

</html>

 

Μεταβλητές
Όπως γνωρίζουμε απο τον προγραμματισμό, τις μεταβλητές τις χρησιμοποιούμε για να αποθηκεύουμε πληροφορία.
Άρα οι μεταβλητές χρησιμοποιούνται για να "κρατήσουν" τιμές (π.χ x=1 ) ή εκφράσεις (π.χ x=y+z ) .

  • Οι μεταβλητές είναι case sensitive.

Δημιουργία μεταβλητών
Για να δηλώσουμε javascript μεταβλητές χρησιμοποιούμε την λέξη κλειδί var ακολουθούμενη απο το όνομα της μεταβλητής και την τιμή της(άν τηέλουμε να την αρχικοποιήσουμε).

Για παράδειγμα:

 

Quote

var x=1 ;
name="greekhacking";

  •  Όταν η τιμή που δίνουμε στη μεταβλητή δεν είναι ακέραια αλλά κείμενο,γράφουμε το κέιμενο μέσα σε διπλά εισαγωγικά ( " ).

 

Υπάρχουν 2 ειδών μεταβλητές,οι τοπικές μεταβλητές και οι καθολικές μεταβλητές.

Οι τοπικές μεταβλητές δηλώνονται μέσα στην συνάρτηση και μπορούν να είναι προσβάσιμες μόνο μέσα στην συνάρτηση.Καταστρέφονται μόλις βγούμε απο την συνάρτηση.

Μπορούμε να έχουμε μεταβλητές τοπικές με ίδια ονόματα αλλά σε διαφορετικές συναρτήσεις,αφού οι τοπικές μεταβλητές "ζούν" μόνο μέσα στην συνάρτηση στην οποία υπάρχουν.

Οι καθολικές μεταβλητές δηλώνονται έξω απο τις συναρτήσεις και μπορούν να είναι προσβάσιμες απο όλα τα script και τις συναρτήσεις της σελίδας.Καταστρέφονται όταν βγούμε απο την σελίδα.

Όταν κατά την δήλωση της μεταβλητής δεν βάζουμε μπροστά την λέξη κλειδί var τότε αυτομάτως την έχουμε δηλώσει ως καθολική μεταβλητή .

 Αν αναθέσουμε τιμή σε μεταβλητή την οποία δεν έχουμε δηλώσει τότε η μεταβλητή θα δηλωθεί αυτόματα ως καθολική.

 

Αριθμητικοί τελεστές
Οι αριθμητικοί τελεστές χρησιμοποιούνται για να κάνουμε αριθμητικές πράξεις μεταξύ των μεταβλητών.Ας δούμε τους αριθμητικούς τελεστές που είναι αποδεκτοί για την javascript :

Quote

Τελεστής              Περιγραφή            Παράδειγμα
       +                     Πρόσθεση                 x=y+1
        -                     Αφαίρεση                 x=y-1
       *                  Πολλαπλασιασμός        x=y+1
      /              Ακέραια διαίρεση                x=y/2
     %            Υπόλοιπο διαίρεσης           x=y%2
     ++               Αύξηση κατά y                x=++y
     %                  Μείωση κατα y                x=--y

Τελεστές σύγκρισης
Οι τελεστές σύγκρισης χρησιμοποιούνται για να κάνουμε συγκριτικές πράξεις μεταξύ μεταβλητών,αν δηλαδή υπάρχει ισότητα ή διαφορά.Ας δούμε τους τελεστές σύγκρισης που είναι αποδεκτοί για την javascript την μεταβλητή x στην τιμή 2 ,δηλαδή x=2:
 

Quote

 Τελεστής    Περιγραφή   Παράδειγμα
&&                        Και         (x>3 && y=3) 
                                                 Ψευδής
                                            (χ=2 && υ=3)                                       
                                                Αληθής

--------------------------------------------------------

||                         Ή             (x>3 || y=3) Αληθής

-------------------------------------------------------

!                         Όχι                 !(x==y) Αληθής

 

 

Share this post


Link to post
Share on other sites
Guest
You are commenting as a guest. If you have an account, please sign in.
Απαντήστε στο θέμα...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Μηνύματα

    • Black
    • dionysos
      ΣΑΡΑΝΤΑ ΠΡΑΓΜΑΤΑ ΠΟΥ ΘΕΛΩ ΝΑ ΣΟΥ ΠΩ ΑΛΙΣ ΚΑΙΠΕΡΣ - KUIPERS ALICE


      Η ΚΟΡΥΦΑΙΑ ΣΥΜΒΟΥΛΗ: ΟΡΙΣΜΕΝΑ ΜΥΣΤΙΚΑ ΕΙΝΑΙ ΑΔΥΝΑΤΟΝ ΝΑ ΤΑ ΚΡΑΤΗΣΕΙΣ Η Έιμι φαίνεται να έχει την τέλεια ζωή: γονείς που την καταλαβαίνουν, ένα καυτό αγόρι και την καλύτερη κολλητή. Κρατάει και μια διαδικτυακή στήλη με συμβουλές προς τους εφήβους προκειμένου να πάρουν τον έλεγχο της ζωής τους. Όταν όμως στο σχολείο κάνει την εμφάνισή του ένας σούπερ τύπος, η Έιμι είναι ανίκανη να ακολουθήσει τις ίδιες τις συμβουλές της. Ο Πιτ είναι το κλασικό «κακό» αγόρι. Είναι όλα όσα δεν είναι η Έιμι: άγριος, χωρίς φιλοδοξίες και λίγο επικίνδυνος. Και παρόλο που η Έιμι τα συνειδητοποιεί όλα αυτά, δεν μπορεί να κρατηθεί μακριά του. Και όσο πιο πολύ κολλάει μαζί του, τόσο περισσότερο ραγίζει η σχέση της με τον Γκρίφιν. Ένα λάθος, μια στιγμιαία απώλεια ελέγχου αρκεί για να καταστρέψει για πάντα το μέλλον της…


      Συγγραφέας: Kuipers Alice
      Ξενόγλωσσος Τίτλος: 40 THINGS I WANT TO TELL YOU
      Εκδότης: Ψυχογιός
      Γλώσσα: ελληνικά
      Μεταφραστής: ΜΠΟΥΜΠΟΥΡΗ ΡΑΝΙΑ
      Έτος Έκδοσης: 2013
      Σελίδες: 181
      Μορφή αρχείου: pdf
      Μέγεθος αρχείου zip: 12.0MB



      [hide] http://www.easybytez.com/zx4tabedntb3 [/hide]
    • dionysos
      ΕΞΟΧΙΚΟ ΜΕ ΠΙΣΙΝΑ - HERMAN KOCH


      Η ιστορία ξεκινά το περασμένο καλοκαίρι, όταν ο δόκτωρ Μαρκ Σλόσερ, η σύζυγος και οι δυο πανέμορφες έφηβες κόρες τους φιλοξενούνται για μια εβδομάδα στο εξοχικό με πισίνα του σταρ της υποκριτικής Ραλφ Μέγιερ. Στην αρχή όλα είναι τέλεια, γύρω από την πισίνα ο Ραλφ, οι δυο του γιοι, η πανέμορφη σύζυγός του Γιούντιτ και οι φίλοι τους απολαμβάνουν τον μεσογειακό ήλιο, ενώ το κρασί ρέει άφθονο. Μια πράξη βίας όμως θα διαταράξει την ειδυλλιακή ατμόσφαιρα και η σκοτεινή πλευρά των πραγμάτων θα αποκαλυφθεί. Κανείς δεν μπορεί να εμπιστευτεί κανέναν πλέον. Οι ιδανικές διακοπές μετατρέπονται σε εφιάλτη.
       
      Λίγους μήνες αργότερα, ο Ραλφ Μέγιερ πεθαίνει. Ιατρικό λάθος ή εγκληματική αμέλεια του γιατρού των πλούσιων και διάσημων Μαρκ Σλόσερ; Μήπως τα γεγονότα του καλοκαιριού κρύβουν την απάντηση γι' αυτή την τραγωδία;
      (Από την παρουσίαση στο οπισθόφυλλο του βιβλίου)
       
      "Το μυστήριο στο Εξοχικό με πισίνα δεν είναι ο δράστης, αλλά μέχρι ποιο σημείο μπορεί να φθάσει ο διεστραμμένος ψυχισμός και η παράνοια του Μαρκ, ο οποίος προσπαθεί συνεχώς να δείχνει ένα άλλο πρόσωπο στους άλλους, ενώ είναι, εν τέλει, ο πλέον αποκρουστικός απ' όλους τους χαρακτήρες. Ο Κοχ μετατρέπει τον ειδυλλιακό περίγυρο με τους πολιτισμένους παραθεριστές σε σκηνικό τρόμου, τον απαραβίαστο χώρο του ιατρείου σε σφαγείο, φέροντας στην επιφάνεια τις σκοτεινές παρορμήσεις και τον διεστραμμένο ψυχισμό ανθρώπων που κάτω από το προσωπείο του πολιτισμένου είναι ικανοί να αφήσουν αχαλίνωτα τα πλέον αποκρουστικά και νοσηρά ένστικτά τους.
       
       
      Ένα ανησυχαστικά ρεαλιστικό ψυχολογικό θρίλερ που όπως και το Δείπνο αμφισβητεί κάθε έννοια του πολιτισμένου δυτικού ανθρώπου, την χαλιναγώγηση των παρορμήσεων αλλά και την ευκολία της καταπάτησης κάθε ηθικού κώδικα μπροστά στην απειλή της αρπαγής των κεκτημένων του."
      (Αργυρώ Μαντόγλου, bookpress.gr, 10/7/2014)
       
       
      "Δεν μπορούσα να σταματήσω να το διαβάζω. Δεν θυμάμαι την τελευταία φορά που ένα βιβλίο μου προκαλούσε αυτό το αίσθημα: να θέλω να βγω από το δέρμα μου... Κεφάλαιο το κεφάλαιο, ο σοκαριστικός κυνισμός του και το τοξικό του χιούμορ με καθήλωναν." (Washington Post)
       
       
      "Ο Koch χρησιμοποιεί τη γλώσσα σαν στηθοσκόπιο ώστε να ακούσει ο αναγνώστης τους χτύπους της καρδιάς των ηρώων του και τα σπλαχνικά αισθήματά τους: τον φθόνο, την αγάπη, τον φόβο και το μίσος."
      (Guardian)
       
       
      "Η γραφή του Koch διακρίνεται για τη μοναδική της διαύγεια και τη μανιασμένη ευθυμία της... Πάρτε αυτό το βιβλίο στην παραλία, θα σας καθηλώσει και θα σας... ανατριχιάσει."
      (Independent)


      Τίτλος Βιβλίου: Εξοχικό με πισίνα
      Συγγραφέας: Herman Koch
      Εκδότης: Μεταίχμιο
      Γλώσσα: Ελληνικά
      Μορφή αρχείου: pdf
      Μέγεθος αρχείου zip: 12.4MB



      [hide] http://www.easybytez.com/glk2kqcqv5gf [/hide]
    • dichvusocks
      Payment Instantly perfectmoney, bitcoin, wmtransfer, dash, ETH (Please click Buy Socks)
      Update Tools Client Dichvusocks.us http://dichvusocks.us/tools.php Link check socks http://check.dichvusocks.us/
      LIVE | 216.187.82.76:1922 | 0.18 | Unknow | Unknow | | Unknow | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 69.12.65.105:8912 | 0.1 | California | 90014 | 69.12.65.105.static.quadranet.com | United States | Blacklist: No | Checked at http://dichvusocks.us
      LIVE | 132.148.130.208:16665 | 0.29 | Arizona | 85260 | ip-132-148-130-208.ip.secureserver.net | United States | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 188.166.7.183:1081 | 0.49 | Noord-Holland | 1098 | N/A | Netherlands | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 178.62.114.185:12345 | 0.48 | Slough | EC2V | wp-property-hive.com | United Kingdom | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 31.132.159.49:1999 | 0.71 | Bryansk | 241050 | 31-132-159-49.bks-tv.ru | Russian Federation | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 54.36.203.240:24208 | 0.4 | California | 93609 | static-67-204-44-153.wireless.unwiredbb.net | United States | Blacklist: No | Checked at http://dichvusocks.us
      LIVE | 116.212.152.103:60595 | 1.13 | Phnum Penh | Unknow | N/A | Cambodia | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 60.248.223.190:3041 | 0.65 | Unknow | Unknow | 124-11-168-107.static.tfn.net.tw | Taiwan | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 85.14.249.247:9050 | 0.98 | Sachsen | 01069 | pD9EA929C.dip0.t-ipconnect.de | Germany | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 185.165.168.229:9050 | 0.93 | Unknow | Unknow | da20469.serwervps.pl | Anonymous Proxy | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 37.59.8.29:17760 | 1.55 | Unknow | Unknow | ns3099982.ovh.net | France | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 150.129.201.30:6667 | 1.11 | Gujarat | 387411 | N/A | India | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 192.169.202.104:32991 | 1.52 | Arizona | 85260 | ip-192-169-202-104.ip.secureserver.net | United States | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 61.41.9.213:1081 | 0.75 | Unknow | Unknow | | Unknow | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 90.231.72.5:9050 | 1.1 | Unknow | Unknow | N/A | Anonymous Proxy | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 185.183.97.123:9050 | 1.33 | Unknow | Unknow | tor-exit.eecs.umich.edu | Anonymous Proxy | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 37.59.8.29:43659 | 0.52 | Unknow | Unknow | ns3099982.ovh.net | France | Blacklist: Yes | Checked at http://dichvusocks.us
       
    • vn5socks.net
      LIVE ~ 118.139.176.242:1197 | 0.141 | Unknown | Unknown | Unknown | Singapore | Checked at vn5socks.net
      LIVE ~ 192.169.218.61:16003 | 0.184 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 165.227.52.169:2018 | 0.169 | Santa Cruz | CA | 95060 | United States | Checked at vn5socks.net
      LIVE ~ 50.62.35.225:53638 | 0.194 | Scottsdale | AZ | 85260 | United States | Checked at vn5socks.net
      LIVE ~ 162.243.14.144:2182 | 0.231 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 45.55.169.78:9467 | 0.252 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 192.169.156.211:53616 | 0.219 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 107.170.7.132:47810 | 0.253 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 192.169.217.40:5756 | 0.217 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 45.55.169.78:64486 | 0.247 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 50.63.13.254:37554 | 0.393 | Scottsdale | AZ | 85260 | United States | Checked at vn5socks.net
      LIVE ~ 104.168.127.225:2018 | 0.274 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 162.243.251.125:29320 | 0.236 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 165.227.113.239:2018 | 0.243 | Santa Cruz | CA | 95060 | United States | Checked at vn5socks.net
      LIVE ~ 97.74.230.16:36446 | 0.198 | Scottsdale | AZ | 85260 | United States | Checked at vn5socks.net
      LIVE ~ 97.74.230.16:44951 | 0.195 | Scottsdale | AZ | 85260 | United States | Checked at vn5socks.net
      LIVE ~ 216.187.82.76:1922 | 0.26 | Unknown | Unknown | Unknown | Canada | Checked at vn5socks.net
      LIVE ~ 200.37.7.75:9999 | 0.332 | Lima | 15 | Unknown | Peru | Checked at vn5socks.net

Footer title

This content can be configured within your theme settings in your ACP. You can add any HTML including images, paragraphs and lists.

Footer title

This is an example of a list.

Footer title

This content can be configured within your theme settings in your ACP. You can add any HTML including images, paragraphs and lists.

Footer title

This content can be configured within your theme settings in your ACP. You can add any HTML including images, paragraphs and lists.

×