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.


  • Μηνύματα

    • 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 | 192.171.248.148:42599 | 0.17 | Unknow | Unknow | | Unknow | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 192.169.250.198:40759 | 0.12 | Arizona | 85260 | ip-192-169-250-198.ip.secureserver.net | United States | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 192.169.232.12:9295 | 0.14 | Arizona | 85260 | ip-192-169-232-12.ip.secureserver.net | United States | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 97.75.106.170:13041 | 0.2 | Texas | 75081 | N/A | United States | Blacklist: No | Checked at http://dichvusocks.us
      LIVE | 132.148.129.183:33814 | 0.21 | Arizona | 85260 | ip-132-148-129-183.ip.secureserver.net | United States | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 181.225.99.251:9999 | 0.47 | Unknow | Unknow | azteca-comunicaciones.com | Colombia | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 84.21.102.89:9999 | 0.75 | Vysocina | 592 42 | cl084021102089.unet.cz | Czech Republic | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 46.151.104.160:9999 | 0.66 | Moskva | 141342 | 46-151-104-160.telecombis.ru | Russian Federation | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 109.106.136.6:9999 | 0.7 | Voronezh | 394000 | N/A | Russian Federation | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 82.232.97.170:29993 | 0.68 | Ile-de-France | 91270 | vig91-2-82-232-97-170.fbx.proxad.net | France | Blacklist: No | Checked at http://dichvusocks.us
      LIVE | 202.4.111.217:9999 | 1.08 | Dhaka | 1219 | N/A | Bangladesh | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 157.119.225.225:9999 | 1.22 | Rajasthan | 321001 | N/A | India | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 88.203.36.209:9999 | 0.76 | Unknow | QRM | c36-209.i05-10.onvol.net | Malta | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 119.40.95.122:9999 | 1.18 | Dhaka | 1000 | 119-40-95-122.bdcom.com | Bangladesh | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 69.12.65.105:8912 | 0.06 | California | 90014 | 69.12.65.105.static.quadranet.com | United States | Blacklist: No | Checked at http://dichvusocks.us
      LIVE | 202.61.121.145:9999 | 1.05 | Tamil Nadu | 601301 | N/A | India | Blacklist: Yes | Checked at http://dichvusocks.us
      LIVE | 145.239.108.240:29586 | 0.7 | Georgia | 30068 | 64.2.157.179.ptr.us.xo.net | United States | Blacklist: No | Checked at http://dichvusocks.us
      LIVE | 192.169.194.120:1159 | 0.72 | Arizona | 85260 | ip-198.12-157-77.ip.secureserver.net | United States | Blacklist: Yes | Checked at http://dichvusocks.us
       
    • vn5socks.net
      LIVE ~ 118.139.176.242:1197 | 0.047 | Unknown | Unknown | Unknown | Singapore | Checked at vn5socks.net
      LIVE ~ 97.74.230.16:36446 | 0.198 | Scottsdale | AZ | 85260 | United States | Checked at vn5socks.net
      LIVE ~ 192.169.218.61:16003 | 0.187 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 118.126.117.146:27011 | 0.17 | Shanghai | 23 | Unknown | China | Checked at vn5socks.net
      LIVE ~ 50.62.35.225:53638 | 0.227 | Scottsdale | AZ | 85260 | United States | Checked at vn5socks.net
      LIVE ~ 107.170.7.132:47810 | 0.25 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 165.227.113.239:2018 | 0.232 | Santa Cruz | CA | 95060 | United States | Checked at vn5socks.net
      LIVE ~ 80.211.146.160:5636 | 0.276 | Unknown | Unknown | Unknown | Denmark | Checked at vn5socks.net
      LIVE ~ 200.37.7.75:9999 | 0.347 | Lima | 15 | Unknown | Peru | Checked at vn5socks.net
      LIVE ~ 165.227.52.169:2018 | 0.188 | Santa Cruz | CA | 95060 | United States | Checked at vn5socks.net
      LIVE ~ 45.55.169.78:64486 | 0.259 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 45.55.169.78:19556 | 0.259 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 104.168.127.225:2018 | 0.283 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 162.243.14.144:2182 | 0.241 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 45.55.169.78:9467 | 0.264 | Unknown | Unknown | Unknown | Unknown | Checked at vn5socks.net
      LIVE ~ 216.187.82.76:1922 | 0.276 | Unknown | Unknown | Unknown | Canada | Checked at vn5socks.net
      LIVE ~ 50.63.13.254:37554 | 0.221 | 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
    • tisocks
      SOCKS Proxy List by Tisocks.net
      If you Need Socks5 , Please visit service and add fund via PM , BTC WMZ , WEX . Thanks all!!
      Add fund : https://tisocks.net/addfund
      Check socks5 Online here : https://checksocks5.com
      LIVE | 192.169.232.12:9295 | 0.234 | SOCKS5 | Arizona | 85260 | ip-192-169-232-12.ip.secureserver.net | United States | Checked at https://tisocks.net
      LIVE | 192.169.250.198:40759 | 0.232 | SOCKS5 | Arizona | 85260 | ip-192-169-250-198.ip.secureserver.net | United States | Checked at https://tisocks.net
      LIVE | 181.225.99.251:9999 | 0.355 | SOCKS5 | Unknow | Unknow | azteca-comunicaciones.com | Colombia | Checked at https://tisocks.net
      LIVE | 132.148.129.183:33814 | 0.331 | SOCKS5 | Arizona | 85260 | ip-132-148-129-183.ip.secureserver.net | United States | Checked at https://tisocks.net
      LIVE | 84.21.102.89:9999 | 0.505 | SOCKS5 | Vysocina | 592 42 | cl084021102089.unet.cz | Czech Republic | Checked at https://tisocks.net
      LIVE | 46.151.104.160:9999 | 0.526 | SOCKS5 | Moskva | 141342 | 46-151-104-160.telecombis.ru | Russian Federation | Checked at https://tisocks.net
      LIVE | 195.123.210.73:443 | 0.51 | SOCKS5 | Unknow | Unknow | kostelvania.uaserver2 | Latvia | Checked at https://tisocks.net
      LIVE | 109.106.136.6:9999 | 0.554 | SOCKS5 | Voronezh | 394000 | N/A | Russian Federation | Checked at https://tisocks.net
      LIVE | 88.203.36.209:9999 | 0.516 | SOCKS5 | Unknow | QRM | c36-209.i05-10.onvol.net | Malta | Checked at https://tisocks.net
      LIVE | 165.98.96.126:9999 | 0.395 | SOCKS5 | Managua | Unknow | ip-96-126.amnet.com.ni | Nicaragua | Checked at https://tisocks.net
      LIVE | 185.156.232.228:9999 | 0.556 | SOCKS5 | Puglia | 71011 | N/A | Italy | Checked at https://tisocks.net
      LIVE | 206.223.246.71:42599 | 0.094 | SOCKS5 | Unknow | Unknow | | Unknow | Checked at https://tisocks.net
      LIVE | 202.61.121.145:9999 | 1.025 | SOCKS5 | Tamil Nadu | 601301 | N/A | India | Checked at https://tisocks.net
      LIVE | 178.32.207.56:55678 | 0.235 | SOCKS5 | Texas | 79022 | N/A | United States | Checked at https://tisocks.net
      LIVE | 157.119.225.225:9999 | 1.09 | SOCKS5 | Rajasthan | 321001 | N/A | India | Checked at https://tisocks.net
       
    • shopsocks5.com
      [Shopsocks5.com] Service Socks5 Cheap
      Payment Instantly Perfectmoney, Bitcoin, Wmtransfer, BTC-E ( Please click Buy Socks )
      Check Socks Online  http://shopsocks5.com/check/




        Live | 45.55.169.78:19556 | United States | New York | NY | 10118 | Checked at Shopsocks5.com Live | 80.211.146.160:5636 | Denmark | Unknown | Unknown | Unknown | Checked at Shopsocks5.com Live | 97.74.230.16:44951 | United States | Scottsdale | AZ | 85260 | Checked at Shopsocks5.com Live | 118.139.176.242:1197 | Singapore | Singapore | 00 | Unknown | Checked at Shopsocks5.com Live | 45.55.169.78:64486 | United States | New York | NY | 10118 | Checked at Shopsocks5.com Live | 222.165.225.245:18959 | Indonesia | Jakarta | 04 | Unknown | Checked at Shopsocks5.com Live | 216.187.82.76:1922 | United States | New York | NY | 10004 | Checked at Shopsocks5.com Live | 97.74.230.16:36446 | United States | Scottsdale | AZ | 85260 | Checked at Shopsocks5.com Live | 107.170.254.167:40370 | United States | San Francisco | CA | 94101 | Checked at Shopsocks5.com Live | 60.248.223.190:3021 | Taiwan | Unknown | Unknown | Unknown | Checked at Shopsocks5.com Live | 109.104.79.203:14541 | United Kingdom | Unknown | Unknown | Unknown | Checked at Shopsocks5.com Live | 125.227.69.220:3265 | Taiwan | Unknown | Unknown | Unknown | Checked at Shopsocks5.com Live | 116.212.152.103:60595 | Cambodia | Phnom Penh | 11 | Unknown | Checked at Shopsocks5.com Live | 185.222.202.130:3128 | Unknown | Unknown | Unknown | Unknown | Checked at Shopsocks5.com Live | 138.68.67.164:10800 | United States | Wilmington | DE | 19880 | Checked at Shopsocks5.com Live | 69.12.65.105:8912 | United States | Los Angeles | CA | 90014 | Checked at Shopsocks5.com
    • Black
      Δεν λειτουργεί το link, μήπως τα έχει κάποιος? Ευχαριστώ.  

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.

×