Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: (Μέρος Β) Javascript Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών
Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ψηφιακά Μαθήματα στο Πανεπιστήμιο Δυτικής Μακεδονίας» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3
Βασικές έννοιες Η Javascript είναι μια γλώσσα σεναρίων (scripting language). Ο κώδικας της εισάγεται μέσα σε σελίδες HTML και εκτελείται στον browser του χρήστη (client-side scripts). Οι γνωστότεροι browsers (Firefox, IE, Chrome, Opera) ενσωματώνουν διερμηνευτή της Javascript. 4
Βασικές χρήσεις Αλληλεπίδραση με τον χρήστη με τη βοήθεια συμβάντων. Μεταβολή περιεχομένου HTML. Εναλλαγή εικόνων. Αλλαγή στυλ HTML. Έλεγχος εισαγωγής περιεχομένου σε φόρμες. 5
Ενσωμάτωση κώδικα Javascript Άμεσα ως περιεχόμενο της ετικέτας <script> Π.χ. <script> - Javascript script </script> Έμμεσα ως αρχείο που προσδιορίζεται στην ιδιότητα src της ετικέτας <script> Π.χ. <script src= Script.js ></script> 6
Βασικοί κανόνες Κάνει διάκριση κεφαλαίων-πεζών (case sensitive). Τα σχόλια εισάγονται με σύμβολα // για σχόλιο σε 1 γραμμή /* σχόλιο */ για σχόλιο πολλαπλών γραμμών Κάθε εντολή ακολουθείται από το σύμβολο ; document.getelementbyid("demo").innerhtml="hello"; 7
<!DOCTYPE html> Παράδειγμα 1 o <html> <body> <script> document.write("<h1>this is a heading</h1>"); document.write("<p>this is a paragraph</p>"); </script> </body> </html> 8
Συναρτήσεις <!DOCTYPE html> <html> <head> </head> <script> function myfunction(){ alert("my First JavaScript");} </script> <body> <button type="button" onclick="myfunction()">try it </button> </body> </html> 9
Μεταβλητές Χρησιμοποιούνται για την αποθήκευση δεδομένων. Πρέπει να ξεκινάνε με γράμμα ή τα σύμβολα $ και _ Δεν απαιτείται η δήλωση του τύπου της μεταβλητής, μπορεί να είναι αριθμός ή κείμενο. Μπορεί να έχουν τιμές Undefined και null. 10
var x=5; var y=6; var z=x+y; Παραδείγματα μεταβλητών var pi=3.14; var name= Papadopoulos Nikolaos ; var answer= Yes I am! ; var x=true; Δήλωση μεταβλητών: var carname; carname= Volvo ; var carname= Volvo ; 11
Συναρτήσεις <!DOCTYPE html> <html> <body> <p>η τελική τιμή του προϊόντος (συμπεριλαμβανομένου ΦΠΑ) είναι:</p> <p id="demo"></p>ευρώ <script> var timi=prompt("παρακαλώ εισάγετε αρχική τιμή",""); var fpa=1.23; function fpaform(a,b){ return a*b;} document.getelementbyid("demo").innerhtml=fpaform(timi,fpa ); </script> </body> </html> 12
var cars=new Array(); cars[0]= Fiat ; cars[1]= Volvo ; cars[2]= Renault ; Javascript Arrays var cars=new Array( Fiat, Volvo, Renault ); var cars=[ Fiat, Volvo, Renault ]; 13
Αντικείμενα Τα πάντα στην Javascript αντιμετωπίζονται ως αντικείμενα (Objects) τα οποία διαθέτουν: Ιδιότητες (Properties) και Μεθόδους (Methods) π.χ. var onoma= George - - Properties onoma.length=6 Methods onoma.indexof() onoma.replace() onoma.search() 14
Δημιουργία αντικειμένων foititis=new Object(); foititis.firstname= Nikos ; foititis.lastname= Dimitriou ; foititis.age=20; foititis.am= 512 ; 15
Τελεστές Αριθμητικοί τελεστές: +, -, *, /, %, ++, -- Τελεστές εκχώρησης: =, +=, -=,*=, /=, %=, Τελεστές σύγκρισης: ==, ===,!=,!==, >, <, >=, <= Λογικοί τελεστές: && (AND), (OR),!(NOT) Τριαδικός τελεστής: λογική παράσταση? παράσταση 1, παράσταση 2 Συνένωση αλφαριθμητικών: + 16
if if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true } 17
switch switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } 18
for, do, do while for (statement 1; statement 2; statement 3) { the code block to be executed } while (condition) { code block to be executed } do { code block to be executed } while (condition); 19
Validation function validateform() { var x=document.forms["myform"]["fname"].value ; if (x==null x=="") { alert("first name must be filled out"); return false; } } 20
Βιβλιογραφία www. w3schools. com Μάγια Σατρατζέμη Προγραμματισμός Διαδικτύου 21
CartoonStock 22
Τέλος Ενότητας 23
Σημείωμα Αναφοράς Copyright, Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών, Αγγελίδης Παντελής. «Εισαγωγή στην ΠΛηροφορική». Έκδοση: 1.0. Κοζάνη 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: https: //eclass.uowm.gr/courses/icte100/ 24
Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Όχι Παράγωγα Έργα Μη Εμπορική Χρήση 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] h t t p ://creativecommons.org/licenses/by-nc-nd/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό 25
Διατήρηση Σημειωμάτων Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς το Σημείωμα Αδειοδότησης τη δήλωση Διατήρησης Σημειωμάτων το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει) μαζί με τους συνοδευόμενους υπερσυνδέσμους. 26