Java script jquery2

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

Σχόλια πολλων γραμμων
/* …………………………..*/.

JavaScript Statements
Σε μια γλωσσα προγραμματισμου αυτές οι
οδηγιες καλουνται , statements.

JavaScript Statements
Values,
Operators,
Expressions,
Keywords,
Comments.

Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls
(if available) the debugging function
do ... while Executes a block of statements, and
repeats the block, while a condition is true
for Marks a block of statements to be
executed, as long as a condition is true
function Declares a function
JavaScript keywords are reserved words. Reserved words cannot be used as
names for variables.

if ... else Marks a block of statements to be
executed, depending on a condition
return Exits a function
switch Marks a block of statements to be
executed, depending on different cases
try ... catch Implements error handling to a block of
statements
var Declares a variable

JavaScript Keywords
το keyword var δημιουργει νεα μεταβλητη
var x = 5 + 6;
var y = x * 10;

JavaScript Variables
Στην JavaScript χρησιμοποιειται το
keyword var ωστε να δηλωθούν
Το = χρησιμοποιειται ώστε να αποδωθουν
τιμες στις μεταβλητες
Example:
x οριζεται ως μεταβλητη .
Τοτε στο x αποδιδεται η τιμη6:
var x;
x = 6;

JavaScript Variables
• Οι μεταβλητες μπορούν να χρησιμοποιηθούν για
να κρατήσουν τιμές (x=5) ή να αποδώσουν
(z=x+y).
• Η μεταβλητη μπορει να εχει μικρα ονόματα όπως
x και y) ή πιο συγκεκριμένα όπως (age, sum, total
volume).
• Τα ονόματά τους μπορούν να ξεκινάνε με ένα
γραμμα
• Με το $ και το _
• Προσοχή y και Y είναι διαφορετικές μεταβλητές

Δηλώνοντας-δημιουργώντας
μεταβλητές στην JavaScript
δηλώνουμε μεταβλητές στην JavaScript με
το keyword var:
Εστω ότι η μεταβλητη είναι η χ ,
οπότε var x;
Αν μετα το χ η μεταβλητη δεν εχει τιμη [δεν εχει =]
λεμε ότι η μεταβλητη είναι άδεια –δεν εχει τιμή
Οι μεταβλητες που δεν έχουν τιμή legontai
«undefined»

Για να αποδωσουμε τιμή σε μια μεταβλητη
χρησιμοποιούμε το σύμβολο του ίσον[+την τιμη]
Δηλαδη
Var x
x=“fiat";
Ωστόσο μπορουμε ταυτοχρονα να δηλώσουμε τη
μεταβλητη και να αποδώσουμε τιμή :
var x=“fiat";

JavaScript Strings
• A string is a variable which stores a series of characters like "John
Doe".
• A string can be any text inside quotes. You can use single or double
quotes:
• Example
• var x=“fiat";
var x=‘fiat';
• You can use quotes inside a string, as long as they don't match the
quotes surrounding the string:
• Example
• var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript Numbers
• JavaScript has only one type of numbers. Numbers can
be written with, or without decimals:
• Example
• var x1=34.00; // Written with decimals
var x2=34; // Written without decimals
• Extra large or extra small numbers can be written with
scientific (exponential) notation:
• Example
• var y=123e5; // 12300000
var z=123e-5; // 0.00123

Example
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Arithmetic Operators
Arithmetic operators are used to perform
arithmetic on numbers (literals or variables).
The addition operator (+) adds numbers:
Adding
var x = 5;
var y = 2;
var z = x + y;

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

&& logical and
|| logical or
! logical not
JavaScript Logical Operators

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
JavaScript Comparison Operators

JavaScript Programs
Η JavaScript είναι γλώσσα προγραμματισμού
Ένα πρόγραμμα είναι μια λίστα οδηγιών
"instructions" που πρέπει να εκτελεστούν

JavaScript Expressions
μια expression είναι ενας συνδυασμος από τιμες
,μεταβλητες και τελεστες [values,variables, operators]
Ο υόλογισμος ονομαζεται evaluation.
Π.χ 7 * 11 evaluates σε 77:
7 * 11
Οι Expressions μπορουν επισης να περιεχουν μεταβλητες
:
x * 11

Μεθοδος:document.write
• η write() method γραφει εκφρασεις HTML ή κώδικα
JavaScript.
• Syntax
• document.write(exp1,exp2,exp3,...)
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>

Na γραφει προγραμμα που να υπολογιζει το υπολοιπο
της διαιρεσης του 5 με το 2
<html>
<body>
<script>
var x = 5;
var y = 2;
var z = x % y;
document.write(z);
</script>
</body>
</html>

document.getElementById("demo").i
nnerHTML
• Η getElementById() method επιστρέφει το
στοιχειο που εχει το ID με μια ειδική τιμή
• [απαλειφει την ετικετα με το id της]

Το κειμενο μεσα στην παραγραφο θα
εξαφανιστει αφου θα παρθει από το c
που exei to id της
<!DOCTYPE html>
<html>
<body>
<p>JavaScript statements are separated by semicolon.</p>
<p id="demo1">ξξξ</p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var a = 100;
var b = 50;
var x = a + b;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Να γραφει προγραμμα που να υπολογιζει το αθροισμα του α και β αν α=100 και
β=50

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

Arithmetic operators
Και Τυποι δεδομενων

Data Types
 JavaScript variables can hold numbers like 100, and text values like "John
Doe".
 In programming, text values are called text strings.
 JavaScript can handle many types of data, but for now, just think of
numbers and strings.
 Strings are written inside double or single quotes. Numbers are written
without quotes.
 If you put quotes around a number, it will be treated as a text string.

JavaScript in <body>
<html>
<body>
<script>
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>

JavaScript Functions and Events

JavaScript Function Syntax
• Οριζεται με το function keyword, ακολουθουμενο από
το name, ακολουθουμενο από παρενθεσεις ().
• Τα Function names μπορουν να εχουν letters, digits,
underscores, και dollar signs (same rules as variables).
• Οι παρενθεσεις μπορουν να περικλειουν παραμετρους
χωρισμενες με κομματα : (parameter1, parameter2,
...)
• Ο κωδικας περκλειεται από αγκιστρα: {}

function name(parameter1, parameter2, parameter3) {
code to be executed
}

Arguments
• Όταν καλείτε μια συνάρτηση, μπορείτε να περάσετε
μερικές τιμές σε αυτήν, αυτές οι τιμές ονομάζονται
arguments ή parameters.
• Αυτά μπορουν να χρησιμοποιηθουν μεσα στην
συναρτηση
• Μπορουμε να βαλουμε πολλα χωρισμενα με κομμα
myFunction(argument1,argument2)
.

• Δηλωνουμε τα argument, σαν
μεταβλητες, όταν δηλωνεται η
συναρτηση
function myFunction(var1,var2)
{
some code
}

Functions With a Return Value
Μερικες φορές θέλουμε μια συνάρτηση να επιστρέφει μια
τιμή .
Αυτό γινεται χρησιμοποιοντας την return statement.
Όταν χρησιμοποιουμε την return statement, η συναρτηση
σταματα να εκτελειται , και επιστρεφει την τιμη.
συνταξη
function myFunction()
{
var x=5;
return x;
}
Η συναρτηση θα επιστρεψει την τιμη 5.

Π.χ
function myFunction(p1, p2) {
return p1 * p2;
}

Example
Calculate the product of two numbers, and
return the result:
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHT
ML= myFunction(4,3);

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML =
myFunction(4, 3);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

JavaScript Functions and Events
Π.χ, Μια συνάρτηση εκτελειται όταν ένα
συμβαν- event δραστηριοποιειται , όπως
όταν γινεται κλικ σε ένα κουμπι ή όταν
γινεται κλικ καπου

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML
element
onmouseout The user moves the mouse away from an
HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the
page

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
onload Event
❮ DOM Events ❮ Event Object
Example
Execute a JavaScript immediately after a page has been loaded:
<body onload="myFunction()"

https://www.w3schools.com/jsref/event_onlo
ad.asp

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #myDIV {
• margin: 25px;
• width: 550px;
• height: 100px;
• background: orange;
• position: relative;
• font-size: 20px;
• }
• /* Chrome, Safari, Opera */
• @-webkit-keyframes mymove {
• from {top: 0px;}
• to {top: 200px;}
• }
• @keyframes mymove {
• to {top: 200px;}
• }
• </style>
• </head>
• <body>
• <p>This example uses the addEventListener() method to attach an "animationstart",
"animationiteration" and "animationend" event to a DIV element.</p>
• <div id="myDIV" onclick="myFunction()">Click me to start the animation.</div>
• <script>
• var x = document.getElementById("myDIV");
• // Start the animation with JavaScript
• function myFunction() {
• x.style.WebkitAnimation = "mymove 4s 2"; // Code for Chrome, Safari and Opera
• x.style.animation = "mymove 4s 2"; // Standard syntax
• }
myEndFunction);
// Standard syntax
x.addEventListener("animationstart",
myStartFunction);
x.addEventListener("animationiteration",
myRepeatFunction);
x.addEventListener("animationend",
myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart event
occured - The animation has started";
this.style.backgroundColor = "pink";
}
function myRepeatFunction() {
this.innerHTML = "animationiteration
event occured - The animation was played
again";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend event

• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #myDIV {
• margin: 25px;
• width: 550px;
• height: 100px;
• background: orange;
• }
• @keyframes mymove {
• to {top: 200px;}
• }
• </style>
• </head>
• <body>
• <div id="myDIV" onclick="myFunction()">Click me to start the animation.</div>
• <script>
• var x = document.getElementById("myDIV");
• x.style.animation = "mymove 4s 2"; // Standard syntax
• }
• x.addEventListener("animationstart", myStartFunction);
• x.addEventListener("animationiteration", myRepeatFunction);
• x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart event occured
- The animation has started";
this.style.backgroundColor = "pink";
}
function myRepeatFunction() {
this.innerHTML = "animationiteration event
occured - The animation was played again";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend event occured
The animation has completed";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>

https://www.w3schools.com/jsref/tryit.asp?fil
ename=tryjsref_animationstart

Εκτυπωση με κουμπι και συναρτηση
<body>
<p></p>
<p>Click the button to print the current page.</p>
<button onclick="print_current_page()">Print this page</button>
<script>
function print_current_page()
{
window.print();
}
</script>
</body>

Αλλαγη κειμενου με κλικ πανω στο 1ο
κειμενο
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
document.getElementById("demo").innerHTML = "YOU
CLICKED ME!";
}
</script>
</body>
</html>

Αλλαγη χρωματος κειμενου με κλικ
πανω στο κειμενο
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text
color.</p>
<script>
document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>

• document.getElementById("myP").style.fontSt
yle = "italic";

Αλλαγη γραμματοσειρας
• <!DOCTYPE html>
• <html>
• <!DOCTYPE html>
• <html>
• <body>
• <p id="myP">This is a paragraph.</p>
• <p onclick="myFunction()">Set font</p>
•
• <script>
• document.getElementById("myP").style.font = "italic bold 20px arial,serif";
• }
• </script>
• </body>
• </html>

Χρωματος και γραμματοσειρας μαζι
• <script>
• document.getElementById("myP").style.font
= "italic bold 20px
arial,serif";document.getElementById("myP").
style.color = "red";
• }

αλλαγή χρώματος φόντου με πάτημα
πάνω σε κείμενο
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">αλλαγη χρωματος
φοντου με πατημα πανω σε κειμενο.</p>
<script>
document.body.style.backgroundColor ='green';
}
</script>

εισαγωγη εικονας ως φοντου με
πατημα πανω σε κειμενο
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">εισαγωγη εικονας ως φοντου
με πατημα πανω σε κειμενο.</p>
<script>
document.body.style.backgroundImage =
"url('https://4.bp.blogspot.com/-
pkH1ifjMND4/VnZQWO9k6sI/AAAAAAAABZY/tYroKlOJRSo/s320/ligh
t-bulb.gif')";
}
</script>

Position background image
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-image: url('https://r-cf.bstatic.com/images/hotel/max1024x768/513/51319391.jpg');
• background-repeat: no-repeat;
• }
• </style>
• </head>
• <body>
• <p type="button" onclick="myFunction()">Position background image</p>
• <script>
• document.body.style.backgroundPosition="top right";
• }
• </script>
• </body>
• </html>

ondblclick Event
• <!DOCTYPE html>
• <html>
• <body>
• <p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>
• <p id="demo"></p>
• <script>
• document.getElementById("demo").innerHTML = "Hello World";
• }
• </script>
• </body>
• </html>

• The onblur event occurs when an object loses
focus.

• <!DOCTYPE html>
• <html>
• <body>
• Enter your name: <input type="text" id="fname" onblur="myFunction()">
• <p>When you leave the input field, a function is triggered which transforms the input text to upper
case.</p>
• <script>
• var x = document.getElementById("fname");
• x.value = x.value.toUpperCase();
• }
• </script>
• </body>
• </html>

onfocus event
• The onfocus event occurs when an element
gets focus.
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-
color.</p>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</body>
</html>

The onfocusin event occurs when an
element is about to get focus.
• <!DOCTYPE html>
• <html>
• <body>
• Enter your name: <input type="text" onfocusin="myFunction(this)">
• <p>When the input field gets focus, a function is triggered which changes the background-
color.</p>
• <script>
• function myFunction(x) {
• x.style.background = "yellow";
• }
• </script>
• </body>
• </html>

The onfocusout event occurs when an
element is about to lose focus.
• <!DOCTYPE html>
• <html>
• <body>
• Enter your name: <input type="text" id="fname" onfocusout="myFunction()">
• <p>When you leave the input field, a function is triggered which transforms the input text to upper
case.</p>
• <script>
• var x = document.getElementById("fname");
• x.value = x.value.toUpperCase();
• }
• </script>
• </body>
• </html>

https://www.w3schools.com/jsref/eve
nt_buttons.asp

Κλικ πανω σε κουμπι

Αλλαγή κειμενου με πατημα κουμπιου
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
{
document.getElementById("demo").innerHTML="Hello World";
};
</script>
</body>
</html>
Δηλώνω ip μεσα
στο p
Βάζω το κουμπί
που να καλει τη
συναρηση
Δηλώνω τη
συνάρτηση που
θα βαζει το
κειμενο
αντικαθιστώντας
το αρχικο

Αλλαγη χρωματος κειμενου με κλικ
πανω σe κουμπι
<!DOCTYPE html>
<html>
<body>
<p id="demo">allagh xrmatos.</p>
<button onclick="myFunction()">allagh xrmatos</button>
<script>
document.getElementById("demo").style.color = "red";
}
</script>

Αλλαγη χρωματος γραμματοσειρας με
πατημα σε κουμπι[2ος τροπος]
x.style.color<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the color of this paragraph.</p>
<script>
var x = document.getElementById("demo");
x.style.color = "red";
}
</script>
</body>
</html>

Αλλαγη γραμματοσειρας
• <!DOCTYPE html>
• <html>
• <body>
• <p id="myP">This is a paragraph.</p>
• <button type="button" onclick="myFunction()">Set font</button>
•
• <script>
• document.getElementById("myP").style.font = "italic bold 20px arial,serif";
• }
• </script>
• </body>
• </html>

υψος εικονας
• <!DOCTYPE html>
• <html>
• <body>
• <img id="myImg" src="compman.gif" width="107" height="98">
• <p>Click the button to change the height of the image to 300px.</p>
• <button onclick="myFunction()">Try it</button>
• <script>
• document.getElementById("myImg").height = "300";
• }
• </script>
• </body>
• </html>

Πλατος εικονας
• <!DOCTYPE html>
• <html>
• <body>
• <img id="myImg" src="compman.gif" width="107" height="98">
• <p>Click the button to change the width of the image to 300px.</p>
• <script>
• document.getElementById("myImg").width = "300";
• }
• </script>
• </body>
• </html>

Αλλαγή εικόνας
• <!DOCTYPE html>
• <html>
• <body>
• <button onclick="document.getElementById('myImage').src='https://4.bp.blogspot.com/-
pkH1ifjMND4/VnZQWO9k6sI/AAAAAAAABZY/tYroKlOJRSo/s320/light-bulb.gif'">Turn on the
light</button>
• <img id="myImage"
src="https://previews.123rf.com/images/wavebreakmediamicro/wavebreakmediamicro1107/wave
breakmediamicro110718574/10194105-vertical-light-bulb-on-a-white-background.jpg"
style="width:100px">
• <button
onclick="document.getElementById('myImage').src='https://previews.123rf.com/images/wavebrea
kmediamicro/wavebreakmediamicro1107/wavebreakmediamicro110718574/10194105-vertical-
light-bulb-on-a-white-background.jpg'">Turn off the light</button>
• </body>
• </html>

<!DOCTYPE html>
<html>
<body>
<button
onclick="document.getElementById('myImage').src='pic_b
ulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif"
style="width:100px">
<button
onclick="document.getElementById('myImage').src='pic_b
ulboff.gif'">Turn off the light</button>
</body>
</html>

document.body.style.backgroundColor = 'green';
Αλλαγη χρωματος φοντου με πατημα σε κουμπι
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Set background image</button>
<script>
document.body.style.backgroundColor = 'green';
}
</script>
</body>
</html>

Style .backgroundImage
αλλαγη φοντου με εικονα
Example
• Set a background image for a document:
• document.body.style.backgroundImage = "url
('img_tree.png')";

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Set background
image</button>
<script>
document.body.style.backgroundImage = "url('img_tree.png')";
}
</script>
</body>
</html>

backgroundPosition me koympi
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<button type="button" onclick="myFunction()">Position background image</button>
<script>
document.body.style.backgroundPosition="top right";
}
</script>
</body>
</html>

Value Description
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
If you only specify one keyword, the other value will be "center".
x% y% The x value indicates the horizontal position and the y value indicates the
vertical position. The top left corner is 0% 0%. The right bottom corner is 100%
100%. If you only specify one value, the other value will be 50%.
xpos ypos The x value indicates the horizontal position and the y value indicates the
vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any
other CSS units. If you only specify one value, the other value will be 50%. You
can mix % and units

backgroundRepeat = "no-repeat";
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-image: url('https://r-cf.bstatic.com/images/hotel/max1024x768/513/51319391.jpg');
•
• }
• </style>
• </head>
• <body>
• <p type="button" onclick="myFunction()">Position background image</p>
• <script>
• document.body.style.backgroundRepeat = "no-repeat";
• }
• </script>
• </body>
• </html>

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
{
var y=5;
var x=y+2;
document.getElementById("demo").innerHTML="x="+x;
}
</script>
</body>
</html>

Δημιουργουμε
κουμπί ώστε να
εκτελεστει μετα
τη φορτωση του
προγραμματος
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()" >Try it</button>
<script>
{
document.write("Oops! The document
disappeared!");
}
</script>
</body>
</html>
Εξαφανιση
κειμενου
To onclick
καλεί τη
συνάρτηση
myFunction
()"
H συναρτηση
εξαφανιζει τα
προηγουμενα
κειμενα!
εμφανιζει ένα το
μνμ ‘Oops! The
document
disappeared!’

η συναρτηση alert() - onclick event
<html>
<head>
</head>
<body>
<button type="button"
onclick="alert('Welcome!')">Click Me!</button>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<dialog id="myDialog">This is an open dialog window</dialog>
<script>
document.getElementById("myDialog").open = true;
}
</script>
</body>
</html>
Το open θα
ανοιξει το
πλαισιο
ΣΥΜΒΆΝ
Κείμενο που θα
εμφανιστεί στο
πλαίσιο

To onclick
καλεί τη
συνάρτηση
alert
alert εμφανιζει
ένα παραθυρο
με το μνμ
welcome
Το κουμπί
θα εχει το
μνμ click
me

window.open
• The open() method opens a new browser
window, or a new tab, depending on your
browser settings and the parameter values.
• Tip: Use the close() method to close the
window.

<!DOCTYPE html>
<html>
<body>
<script>
window.open("https://www.sportfm.gr");
}
</script>
</body>
</html>

Window History
• The window.history object can be written
without the window prefix.
• To protect the privacy of the users, there are
limitations to how JavaScript can access this
object.
• Some methods:
• history.back() - same as clicking back in the
browser
• history.forward() - same as clicking forward in the
browser

• page01.html, που είναι το όνομα της
ιστοσελίδας (εγγράφου) που θα εμφανισθεί
μέσα στο δευτερογενές παράθυρο,
• • Window1, που είναι το όνομα του νέου
παραθύρου και
• • toolbar=yes, δηλ. το νέο παράθυρο θα έχει
γραμμή εργαλείων (toolbar).

back
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

Για να εμφανίσουμε ένα άλλο παράθυρο (δευτερογενές ή εστιασμένο) εκτός
από το βασικό παράθυρο του φυλλομετρητή και να τοποθετήσουμε μέσα σ'
αυτό τα περιεχόμενα ενός άλλου HTML εγγράφου, γράφουμε τον εξής
κώδικα :
<html>
<head>
<script type="text/javascript">
function WinOpen() {
window.open("page01.html", "Window1", "toolbar=yes");
}
</script>
</head>
<body>
<form>
<input type="button" value="Πίσω δύο σελίδες" onclick="history.go(-2)">
<input type="button" value="Προηγούμενη σελίδα" onclick="history.go(-1)">
<input type="button" value="Επόμενη σελίδα" onclick="history.go(1)">
<input type="button" value="Μπροστά δύο σελίδες" onclick="history.go(2)"> </form>
</html>

Math Object
• The Math object allows you to perform
mathematical tasks.
• Math is not a constructor. All properties/methods
of Math can be called by using Math as an object,
without creating it:
• var x = Math.PI; // Returns PI
var y = Math.sqrt(16); // Returns the square
root of 16
• Try it Yourself »
•

Property Description
E Returns Euler's number (approx. 2.718)
LN2 Returns the natural logarithm of 2 (approx. 0.693)
LN10 Returns the natural logarithm of 10 (approx. 2.302)
LOG2E Returns the base-2 logarithm of E (approx. 1.442)
LOG10E Returns the base-10 logarithm of E (approx. 0.434)
PI Returns PI (approx. 3.14)
SQRT1_2 Returns the square root of 1/2 (approx. 0.707)
SQRT2 Returns the square root of 2 (approx. 1.414)

τετραγωνικη ριζα του 64
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo")
.innerHTML = Math.sqrt(64);
</script>
</body>
</html>
τετραγωνικη ριζα του του χ
<!DOCTYPE html>
<html>
<body>
δωσε αριθμο: <input type="number" id="mynum" value="">
<p id="demo"></p>
<script>
var x = document.getElementById("mynum").value;
var y = Math.sqrt(x);
document.getElementById("demo").innerHTML= y;
}
</script>
</body>
</html>

Υπολογισμος τετραγωνικης ριζας του χ
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var y = Math.sqrt(x);
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>

δυναμεις
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.pow()</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.pow(8,2);
</script>
</body>
</html>

Pow(x,y)
<!DOCTYPE html>
<html>
<style>
.b{width:32px; height:32px;
}
</style>
<body>
<h2>JavaScript Math.pow()</h2>
<form>
δωσε αριθμο: <input class=b type="" id="mynum" value=""><input class=b type="number" id="mynum2" value="">
</form>
<p id="demo"></p>
<script>
var y= document.getElementById("mynum2").value;
z=Math.pow(x,y);
document.getElementById("demo").innerHTML=z;
}
</script>
</body>
</html>

Αποδοση π
<!DOCTYPE html>
<html>
<body>
<p>Math.PI returns the ratio of a circle's circumference to its diameter:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>
</body>
</html>

Αποδοση κοντινοτερου ακεραιου
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.round()</h2>
<p>Math.round(x) returns the value of x rounded to its nearest integer:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.round(4.4);
</script>
</body>
</html>

• <!DOCTYPE html>
• <html>
• <head>
• <meta charset=utf-8 />
• <title>JavaScript program to calculate
• multiplication and division of two numbers
• </title>
• <style type="text/css">
• body {margin: 30px;}
• </style>
• </head>
• <body>
• <form>
• 1st Number : <input type="text"
• id="firstNumber" /><br>
• 2nd Number: <input type="text"
• id="secondNumber" /><br>
• <input type="button" onClick="multiplyBy()"
• Value="Multiply" />
• <input type="button" onClick="divideBy()"
• Value="Divide" />
• </form>
• <p>The Result is : <br>
• <span id = "result"></span>
• </p>
• <script>
• function multiplyBy()
• {
• num1 = document.getElementById
• ("firstNumber").value;
• ("secondNumber").value;
• document.getElementById
• ("result").innerHTML = num1 * num2;
• }
• function divideBy()
• {
• ("firstNumber").value;
• ("secondNumber").value;
• document.getElementById("result").innerHTML =

Αποδοση τυχαιου αριθμου
<!DOCTYPE html>
<html>
<body>
<p>Math.floor(Math.random() * 100)) returns a random integer between 0 and 99
(both included):</p>
<p id="demo"></p>
<script>
Math.floor(Math.random() * 100);
</script>
</body>
</html>

Αποδοση τυχαιου αριθμου από 0-99
με το πατημα κουμπιου
<!DOCTYPE html>
<html>
<body>
<p>Math.floor(Math.random() * 100)) returns a random integer between 0 and 99
<p id="demo"></p>
<button onclick="myFunction()">hhhhhhh</button>
<script>
document.getElementById("demo").innerHTML =Math.floor(Math.random() * 100);}
</script>
</body>
</html>

• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript Math.random()</h2>
• <p>Math.random() returns a random number between
0 and 1:</p>
• <script>
• document.getElementById("demo").innerHTML =
Math.random();
• </script>
• </body>
• </html>

Με κουμπι 0-1
<html>
<body>
<p>Math.random() returns a random number between 0 and 1:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =Math.random();}
</script>
</body>
</html>

Με κουμπι 0-10
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 and 1:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =Math.floor(Math.random() * 10);}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 10) + 1) returns a random integer between 1 and 10
<p id="demo"></p>
<script>
Math.floor(Math.random() * 10) + 1;
</script>
</body>
</html>

0-9
• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript Math</h2>
• <p>Math.floor(Math.random() * 10) returns a random integer between 0 and 9 (both
• included):</p>
• <script>
• document.getElementById("demo").innerHTML =Math.floor(Math.random() * 10);
• </script>
• </body>
• </html>

JavaScript Math.sin()
υπολογισμος ημιτονου γωνιας 90
• <!DOCTYPE html>
• <html>
• <body>
• <p>Math.sin(x) returns the sin of x (given in
radians):</p>
• <p>Angle in radians = (angle in degrees) * PI / 180.</p>
• <script>
• document.getElementById("demo").innerHTML =
• "The sine value of 90 degrees is " + Math.sin(90 *
Math.PI / 180);
• </script>
• </body>
• </html>

Υπολογισμος ημιτονου γωνιας χ
Math.sin()
<!DOCTYPE html>
<html>
<body>
δωσε x : <input type="number" id="mynum" value="">
<p id="demo"></p>
<script>
var y = Math.sin(x * Math.PI / 180);
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>

Date();
• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript new Date()</h2>
• <p>new Date() creates a new date object with the current date and time:</p>
• <script>
• var d = new Date();
• document.getElementById("demo").innerHTML = d;
• </script>
• </body>
• </html>
• The innerHTML property sets or returns the HTML content (inner HTML) of an element

βιντεο
<!DOCTYPE html>
<html>
<body>
<h3>A demonstration of how to access a VIDEO element</h3>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>Click the button to get the duration of the video, in seconds.</p>
<p id="demo"></p>
<script>
var x = document.getElementById("myVideo").duration;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

nav
• <nav id="myNav">
• <a href="#">HTML</a> |
• <a href="#">CSS</a>
• </nav>

Property Description
default Sets or returns the default state of the track
kind Sets or returns the value of the kind attribute of the track
label Sets or returns the value of the label attribute of the track
readyState Returns the current state of the track resource
src Sets or returns the value of the src attribute of the track
srclang Sets or returns the value of the srclang attribute of the track
track Returns a TextTrack object representing the track element's text track data

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('Harry Potter','Wizard')">Try
it</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
arguments
μεταβλητες

The function above will alert
"Welcome Harry Potter, the Wizard"
when the button is clicked.
The function is flexible, you can call
the function using different
arguments, and different welcome
messages will be given:
2 κουμπια
1 για κάθε ονομα και
επαγγελμα

Window resizeBy() Method
<!DOCTYPE html>
<html>
<body>
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeBy(250, 250);
myWindow.focus();
}
</script>
</body>
</html>

JavaScript If...Else Statements
If Statement
Χρησιμοποιήστε τη εντολή if για να εκτελέσετε κάποιον κώδικα μόνο αν
ισχύει μια καθορισμένη προϋπόθεση.
Σύνταξη
if (condition)
{
κώδικας που πρέπει να εκτελεστεί αν η προϋπόθεση είναι αληθής
}
Note that if is written in lowercase letters. Using uppercase letters (IF) will
generate a JavaScript error!
Example
Make a "Good day" greeting if the time is less than 20:00:
if (time<20)
{
x="Good day";
}
The result of x will be:
Good day

Προσθήκη Μηνυμάτων σε Φόρμες
<!DOCTYPE html>
<html>
<head>
function AlertBox() {
alert("Καλημέρα από τη Φλώρινα")
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="check1" onclick="AlertBox()">
Υπογράψτε
</form>
</body>
</html>

If...else Statement
• Use the if....else statement to execute some code if a
condition is true and another code if the condition is
not true.
συνταξη
• if (condition)
{
κώδικας που πρέπει να εκτελεστεί αν η προϋπόθεση είναι
αληθής
}
else
{
κώδικας που πρέπει να εκτελεστεί αν η προϋπόθεση δεν
είναι αληθής
}

Example
If the time is less than 20:00, you will get a "Good day"
greeting, otherwise you will get a "Good evening"
greeting
• if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
• The result of x will be:Good day

Logical Operators
&& and (x < 10 && y > 1) is true Try it »
|| or (x == 5 || y == 5) is false Try it »
! not !(x == y) is true

Δειξιμο σωστης απαντησης χωρις if
<!DOCTYPE html>
<html>
<body>
<p>An unordered list:</p>
ποια είναι η πρωτευουσα της βορειου Ευβοίας
<ul>
<li>αιδηψός</li>
<li>ιστιαία</li>
<li>πευκι</li>
</ul>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x[1].innerHTML;
}
</script>
</body>
</html>

prompt
• The prompt() method displays a dialog box
that prompts the visitor for input.
• prompt(text, defaultText)

<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<p id="demo"></p>
<script>
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>

Δειξιμο σωστης απαντησης με if
[με if και αριθμημενη λιστα]
<body>
ποια είναι η πρωτευουσα της βορειου Ευβοίας
<ol>
<li>αιδηψός</li>
<li>ιστιαία</li>
<li>πευκι</li>
</ol>
<script>
if (x==2)
{ document.write('kerdises'); }
else{document.write('exases'); }
}
</script>

<html>
<head>
<title>IF Statments!!!</title>
var age = prompt("Please enter your age");
if(age>=18)
document.write("You are an adult <br />");
if(age<18)
document.write("You are NOT an adult <br />");
</script>
</head>
<body>
</body>
</html>

• <!DOCTYPE html>
• <head></head><body>
• δωσε αριθμο: <input type="number" id="mynum1" value="">
• δωσε αριθμο: <input type="number" id="mynum2" value="">
• <script>
• var x = document.getElementById("mynum1").value;
• var y = document.getElementById("mynum2").value;
• var z;
• if(x>75 && y>175)
• {
• z='psilos varis';
• }
• else if(x>75 && y<175)
• {
• z ='psilos elafrys';
• }
• else if(x<75 && y<175)
• {
• z='kontos elafrys';
• }else{
• z ='kontos varys';
• }
• document.getElementById("demo").innerHTML =z;
• }
• </script>
• </body>
• </html>

8.2.9 Η Συνάρτηση Confirm()
<head>
function redirect() {
if (confirm("Η διεύθυνση της σελίδας έχει αλλάξει")) {
location = 'new.html'
}
}
</script>
</head>
<body onload = "redirect()">

• Αφού ολοκληρωθεί το φόρτωμα της
σελίδας θα κληθεί η συνάρτηση redirect()
και θα εμφανισθεί ένα πλαίσιο διαλόγου
επιβεβαίωσης με το επεξηγηματικό
κείμενο και τα πλήκτρα OK και Cancel.
• Αν κάνουμε κλικ στο πλήκτρο OK, θα
εκτελεσθεί η εντολή if και θα πάμε στην
καινούργια ιστοσελίδα, σύμφωνα με την
τιμή της μεταβλητής location.

If...else if...else Statement
• Use the if....else if...else statement to select one of several blocks of
code to be executed.
• Syntax
• 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
}

Example
If the time is less than 10:00, you will get a "Good morning" greeting, if not,
but the time is less than 20:00, you will get a "Good day" greeting, otherwise
you will get a "Good evening" greeting:
• if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}

<!DOCTYPE html>
<html>
<body>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100"
height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>

8.2.18 Η Εντολή For
Η σύνταξη της εντολής for είναι η εξής :
for (αρχική τιμή; συνθήκη; εντολή) {
... εντολές ...
}
Ακολουθεί ένα παράδειγμα :
function function1() {
var i
for (i=1; i<4; i++) {
alert("Η τιμή του i είναι : " + i)
}
alert("Ο βρόχος ολοκληρώθηκε και το i είναι ίσο με : " + i)
}

Example
for (var i=0; i<5; i++)
{
x=x + "The number is " + i + "<br>";
}

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

• JavaScript Random Integers
• Math.random() used with Math.floor() can be used to return random integers.
• Example
• Math.floor(Math.random() * 10); // returns a random integer from 0 to 9
• Example
• Example
•

object
• <!DOCTYPE html>
• <html>
• <body>
• <script>
• var person = {
• firstName: "John",
• lastName : "Doe",
• id : 5566,
• fullName : function() {
• return this.firstName + " " + this.lastName;
• }
• };
• document.getElementById("demo").innerHTML = person.fullName();
• </script>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript Variables</h2>
• <script>
• // Create and display a variable:
• var car = "Fiat";
• document.getElementById("demo").innerHTML = car;
• </script>
• </body>
• </html>

• Objects are variables too. But objects can
contain many values.
• This code assigns many values (Fiat, 500,
white) to a variable named car:
• var car = {type:"Fiat", model:"500",
color:"white"};

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " +
car.type;
</script>
</body>
</html>

You define (and create) a JavaScript
object with an object literal:
Example
var person = {firstName:"John",
lastName:"Doe", age:50, eyeColor:"blue"};
•

Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue

• you can access object properties in two ways:
objectName.propertyName
• or
objectName["propertyName"]

• The this Keyword
• In a function definition, this refers to the
"owner" of the function.
• In the example above, this is the person
object that "owns" the fullName function.
• In other words, this.firstName means
the firstName property of this object.
• Read more about the this keyword at JS this
Keyword.

• var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

while
• while (condition) {
// code block to be executed
}

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
</script>
</body>
</html>

• The Do/While Loop
• The do/while loop is a variant of the while loop. This loop will execute the code block once, before
checking if the condition is true, then it will repeat the loop as long as the condition is true.
• Syntax
• do {
}
while (condition);
• Example
• The example below uses a do/while loop. The loop will always be executed at least once, even if the
condition is false, because the code block is executed before the condition is tested:
• Example
• do {
text += "The number is " + i;
i++;
}
while (i < 10);

• The Do/While Loop
• do {
}
while (condition);

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Do/While Loop</h2>
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
</script>
</body>
</html>

• Ο παρακάτω κώδικας θα μπορούσε να
συνδυαστεί με κουμπιά ,κλάσεις και να μπει
μετα τις κλασεις των κουμπιών
[υπεσυνδεσμων]
• Επειτα όλος ο κώδικας μεσα στο weebly

<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
alert('You Got it Right!');
window.open('www.wikihow.com');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>

<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: purple;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
Ορίζω την κλάση
button ,αυτή θα
δωσει μορφοποιηση
στον υπερσυνδεσμο
ώστε να φαινεται
σαν κουμπί στο
κουμπί

<SCRIPT>
var testV = 1;
while (testV < 1000) {
if (!pass1)
history.go(-1);
window.open('https://gtutor2.weebly.com/user0.html');
break;
}
testV+=1;
var pass1 =
}
history.go(-1);
return " ";
}
</SCRIPT>
</head>
Ορίζω την
συνάρτηση password
όπου θα βάλω
κωδικό στο κουμπί
για εισαγωγή στην
σελίδα
Το βαζω για το λινκ
υπερσυνδεσμου σε
περιπτωση που δεν
τρεχει το button
Το λινκ του
button[ετικετα]

<body>
<a
href="https://seanaatraining.weebly.com/epsilongammachiepsiloniotarho943delt
aiotaomicron-
940muupsilonnualphasigmaf.html"class="button"onClick="passWord()"
>Link Button</a>
<button class="button"onClick="passWord()">Button</button>
</body>
</html>
Κουμπί από
υπερσυνδεσμο που
οδηγει στην σελίδα
Κουμπί με κλάση button
και συναρτηση password
οδηγεί στην σελίδα
Το βαζω σε
περιπτωση που δεν
τρεχει το button

<html>
<head>
<SCRIPT>
var testV = 1;
while (testV < 3) {
if (!pass1) {
history.go(-1);}
window.open('http://www.youtube.com');
break;
}
testV+=1;
var pass1 =
}
if (pass1.toLowerCase()!="letmein" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<body>
</style>
</head>
<CENTER>
<FORM>
<input type="button" value="Enter
Protected Area"
onClick="passWord()">
</FORM>
</CENTER>

• Υπάρχει όμως και άλλος τρόπος
• Χρησιμοποιώντας τον παρακάτω κώδικα σε
μια σελίδα <SCRIPT>
var testV = 1;
while (testV < 3) {
if (!pass1)
history.go(-1);
window.open('www.wikihow.com');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please
Try Again.','Password');
}
history.go(-1);
return " ";
}

Έχω το αποτελεσμα

• Κάνοντας κλικ στο κουμπί μου ζητά κωδικό
• Αν δωσω σωστο κωδικό θα με βάλει στο σάιτ
που θελω

• Πριν από αυτην την σελίδα με το κουμπι[που
ζηταει κωδικο εισοδου]
• Θα εχω μια άλλη που με τα κουμπακια του
weebly θα με παραπέμπουν σε αυτην την
σελιδα
• Δηλαδη

Εδώ προαιρετικα εχω χρησιμοποιησει 3 κουμπια του weebly
που με πηγαινουν στα επιμερη εκπαιδευτικα μερη του σάιτ

Password Visibility
• <!DOCTYPE html>
• <html>
• <body>
• <p>Click the radio button to toggle between password visibility:</p>
• Password: <input type="password" value="FakePSW" id="myInput"><br><br>
• <input type="checkbox" onclick="myFunction()">Show Password
• <script>
• var x = document.getElementById("myInput");
• if (x.type === "password") {
• x.type = "text";
• } else {
• x.type = "password";
• }
• }
• </script>
• </body>
• </html>

STAMATA ME TO DEIKTH TOY
PONTIKIOY
• <marquee id='scroll_news' style="font-family:Book
Antiqua; color: #FFFFFF" bgcolor="#000080" >
<div
onMouseOver="document.getElementById('scroll_news')
.stop();"
onMouseOut="document.getElementById('scroll_news').
start();">
News 1 News 2 News 3 News 4 ....... More news here
</div>
• </marquee>

<marquee id='scroll_news4' style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080"
>News 1 News 2 News 3 News 4 ....... More news here </marquee>
<input type='Button' value='Stop' id ='b1' onClick='button_click()';>
<SCRIPT LANGUAGE="JavaScript">

</script>
αν η τιμη στο
κουμπι γραφει start

GAMES
• https://www.w3schools.com/graphics/game_c
anvas.asp

NO RIGHT CLICK for Images
• Secure your website with JavaScript,

• <script language=JavaScript>
• var message="Function Disabled!";
• function clickIE4(){
• if (event.button==2){ alert(message); return false; } }
• function clickNS4(e){ if
(document.layers||document.getElementById&&!document.all){
• if (e.which==2||e.which==3){
• alert(message); return false; } } }
• if (document.layers){
• document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4; } else if
(document.all&&!document.getElementById){
document.onmousedown=clickIE4; } document.oncontextmenu=new
Function("alert(message);return false") </script>

• "NO RIGHT CLICK" for Source
Here is a handy little script which will not only
protect your images from right clicking, but your
whole page. Remember this only stops some
visitors from viewing your source. There are ways
around it and if someone really wants to view
your source they may find a way. There is another
trick below to protect your source code, so keep
reading.

• Disable Copy and Paste for greater website security.
• One of the most popular questions I recieve here at
Hypergurl is "How do you stop visitors from stealing your
webpage information?"
• Below is a little trick that will stop your visitors from
copying and pasting your webpage information. Anyone
with experience may know a way around this trick.
However it will make it hard enough to discourage them
and get them moving on to easier targets.
• Add the following html code to your BODY tag:
Here is how your BODY tag may look once implimented:
<body bgcolor="#FFFFFF" ondragstart="return false"
onselectstart="return false">

Απενεργοποιηση δεξι κλικ
<script language=JavaScript>
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
} function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message); return false;
}
}
} if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false") </script>

JavaScript Switch Statement
• Use the switch statement to select one of many blocks of
code to be executed.
• Syntax
• 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

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
Display today's weekday-name. Note that
Sunday=0, Monday=1, Tuesday=2, etc

var day=new
Date().getDay();
switch (day)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's
Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}
The result of x will be:
Today it's Thursday

The default Keyword
• Use the default keyword to specify what to do if there is no match:
• Example
• If it is NOT Saturday or Sunday, then write a default message:
• var day=new Date().getDay();
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
}
• The result of x will be:
• Looking forward to the Weekend

The While Loop
• The while loop loops through a block of code as long as a specified
condition is true.
Syntax
while (condition)
{
code block to be executed
}
Example
The loop in this example will continue to run as long as the variable i is less
than 5:
Example
while (i<5)
{
i++;
}

The Do/While Loop
The do/while loop is a variant of the while loop.
This loop will execute the code block once, before
checking if the condition is true, then it will
repeat the loop as long as the condition is true.
Syntax
do
{
code block to be executed
}
while (condition);

Example
The example below uses a do/while loop. The loop will
always be executed at least once, even if the condition
is false, because the code block is executed before the
condition is tested:
Example
do
{
i++;
}
while (i<5);

JavaScript Labels
As you have already seen, in the chapter about the switch statement, JavaScript
statements can be labeled.
To label JavaScript statements you precede the statements with a colon:
label:
statements
The break and the continue statements are the only JavaScript statements that can
"jump out of" a code block.
Syntax:
break labelname;
continue labelname;
The continue statement (with or without a label reference) can only be used inside a
loop.
The break statement, without a label reference, can only be used inside a loop or a
switch.
With a label reference, it can be used to "jump out of" any JavaScript code block:

The Break Statement
• You have already seen the break statement used in an earlier
chapter of this tutorial. It was used to "jump out" of a switch()
statement.
• The break statement can also be used to jump out of a loop.
• The break statement breaks the loop and continues executing the
code after the loop (if any):
• Example
• for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
}

• Example
• cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
break list;
}

• Since the if statement has only one single line
of code, the braces can be omitted:
• for (i=0;i<10;i++)
{
if (i==3) break;
}
•

• <html>
• <head>
• <title>Second JavaScript Example </title>
• <script>
• function CheckPassword(user, pass1,pass2)
• {
• if (pass1== pass2) {
• alert("Successful Registration! n Username:"+ user + "n Password:"+ pass1) }
• else {
• alert("Retype your password")
• }
• }
• </script>
• </head>
• <body>
• <form>
• Username: <input type="text" name= "username" /><br/><br/>
• Password: <input type="password" name= "password1"/><br/><br/>
• Confirm Password: <input type="password" name= "password2"/><br/><br/>
• <input type= "button" value= "Register"
• onClick="CheckPassword(form.username.value, form.password1.value,
• form.password2.value)" />
• <input type="reset" value="Clear" />
• </form>

Mobile Navigation Menu
• <!DOCTYPE html>
• <html>
• <head>
• <meta name="viewport" content="width=device-width, initial-scale=1">
• <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
• <style>
• body {
• font-family: Arial, Helvetica, sans-serif;
• }
• .mobile-container {
• max-width: 480px;
• margin: auto;
• background-color: #555;
• height: 500px;
• color: white;
• border-radius: 10px;
• }
• .topnav {
• overflow: hidden;
• background-color: #333;
• }
• .topnav #myLinks {
• display: none;
• }
• .topnav a {
• color: white;
• padding: 14px 16px;
• text-decoration: none;
• display: block;
• }
• .topnav a.icon {
• background: black;
• display: block;
• position: absolute;
• right: 0;
• top: 0;

jQuery
• is a JavaScript Library.
• Adding jQuery to Your Web Pages
• There are several ways to start using jQuery on
your web site. You can:
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google
•

• If you don't want to download and host jQuery
yourself, you can include it from a CDN (Content
Delivery Network).
• Both Google and Microsoft host jQuery.
• To use jQuery from Google or Microsoft, use one
of the following:
• Google CDN:
• <head>
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/3.4.1/jquery.min.js"></script>
</head>

• The jQuery syntax is tailor-made
for selecting HTML elements and performing
some action on the element(s).
• Basic syntax is: $(selector).action()

$(document).ready(function)
• The ready event occurs when the DOM (document object
model) has been loaded.
• Because this event occurs after the document is ready, it is
a good place to have all other jQuery events and functions.
Like in the example above.
• The ready() method specifies what happens when a ready
event occurs.
• Tip: The ready() method should not be used together with
<body onload="">.
• Syntax
• Two syntaxes can be used:
• $(document).ready(function)

jQuery Method Chaining
• <!DOCTYPE html>
• <html>
• <head>
• <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
• <script>
• $(document).ready(function(){
• $("button").click(function(){
• $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
• });
• });
• </script>
• </head>
• <body>
• <p id="p1">jQuery is fun!!</p>
• <button>Click me</button>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• alert("Background color = " + $("p").css("background-color"));
• });
• });
• </script>
• </head>
• <body>
• <h2>This is a heading</h2>
• <p style="background-color:#ff0000">This is a paragraph.</p>
• <p style="background-color:#00ff00">This is a paragraph.</p>
• <p style="background-color:#0000ff">This is a paragraph.</p>
• <button>Return background-color of p</button>
• </body>
• </html>

CSS Property
• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("p").css("background-color", "yellow");
• });
• });
• </script>
• </head>
• <body>
• <p style="background-color:#ff0000">This is a paragraph.</p>
• <p style="background-color:#00ff00">This is a paragraph.</p>
• <p style="background-color:#0000ff">This is a paragraph.</p>
• <p>This is a paragraph.</p>
• <button>Set background-color of p</button>
• </body>
• </html>

• jQuery css() Method
• The css() method sets or returns one or more
style properties for the selected elements.
• Return a CSS Property
• To return the value of a specified CSS
property, use the following syntax:
• css("propertyname");

jQuery hide() and show()
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Κανοντας κλικ
στο κουμπι
ενεργ.η
συναρτηση
που κρυβει τις
παραγραφους

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

• $(this).hide() - hides the current element.

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("#test").hide();
• });
• });
• </script>
• </head>
• <body>
• <p>This is a paragraph.</p>
• <p id="test">This is another paragraph.</p>
• <button>Click me</button>
• </body>
• </html>

<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Κανοντας κλικ στην
παραγραφο ενεργ.η
συναρτηση που κρυβει τις
παραγραφους

<html>
<head>
<script
<script>
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script
<script>
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
Φερνοντας το ποντικι στην
παραγρ.1 ενεργ.η
συναρτηση που εμφανιζει
μνμ

<!DOCTYPE html>
<html>
<head>
<script>
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
Κανοντας κλικ στο input ενεργ.η
συναρτηση που to kanei kitrino
Φευγοντας από το input ενεργ.η
συναρτηση που to kanei kitrino

• The jQuery syntax is tailor-made for selecting HTML
elements and performing some action on the element(s).
• Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
• Examples:
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with class="test".
• $("#test").hide() - hides the element with id="test".

• The element Selector
• The jQuery element selector selects elements based on the
element name.
• You can select all <p> elements on a page like this:
• $("p")
• Example
• When a user clicks on a button, all <p> elements will be hidden:
• Example
$("p").hide();
});
});

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("p").hide(1000);
• });
• });
• </script>
• </head>
• <body>
• <button>Hide</button>
• <p>This is a paragraph with little content.</p>
• <p>This is another small paragraph.</p>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("#hide").click(function(){
• $("p").hide();
• });
• $("#show").click(function(){
• $("p").show();
• });
• });
• </script>
• </head>
• <body>
• <p>If you click on the "Hide" button, I will disappear.</p>
• <button id="hide">Hide</button>
• <button id="show">Show</button>
• </body>
• </html>
Κλικ στο κουμπι με id
παραγρ.1 ενεργ.η
συναρτηση που κρυβει την
παραγραφο

https://www.w3schools.com/jquery/jq
uery_hide_show.asp
• jQuery toggle()
• You can also toggle between hiding and
showing an element with the toggle() method.
• Shown elements are hidden and hidden
elements are shown:
• Example
$("p").toggle();
});

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("p").toggle();
• });
• });
• </script>
• </head>
• <body>
• <button>Toggle between hiding and showing the paragraphs</button>
• <p>This is a paragraph with little content.</p>
• <p>This is another small paragraph.</p>
• </body>
• </html>

• effects Method Description
animate() Runs a custom animation on the selected elements
clearQueue() Removes all remaining queued functions from the selected elements
delay() Sets a delay for all queued functions on the selected elements
dequeue() Removes the next function from the queue, and then executes the function
fadeIn() Fades in the selected elements
fadeOut() Fades out the selected elements
fadeTo() Fades in/out the selected elements to a given opacity
fadeToggle() Toggles between the fadeIn() and fadeOut() methods
finish() Stops, removes and completes all queued animations for the selected
elements
hide() Hides the selected elements
queue() Shows the queued functions on the selected elements
show() Shows the selected elements
slideDown() Slides-down (shows) the selected elements
slideToggle() Toggles between the slideUp() and slideDown() methods
slideUp() Slides-up (hides) the selected elements
stop() Stops the currently running animation for the selected elements
toggle() Toggles between the hide() and show() methods
jQuery Effect Methods
The following table lists all the jQuery methods for creating animation effects.

• fadeIn() The fadeIn() method gradually
changes the opacity, for selected elements,
from hidden to visible (fading effect).
• fadeOut() The jQuery fadeOut() method is
used to fade out a visible element
• fadeToggle() The jQuery fadeToggle() method
toggles between
the fadeIn() and fadeOut() methods.
• fadeTo()
$(selector).fadeIn(speed,easing,callback)

• The jQuery fadeTo() method allows fading to a given
opacity (value between 0 and 1).
• Syntax:
• $(selector).fadeTo(speed,opacity,callback);
• The required speed parameter specifies the duration of the
effect. It can take the following values: "slow", "fast", or
milliseconds.
• The required opacity parameter in the fadeTo() method
specifies fading to a given opacity (value between 0 and 1).
• The optional callback parameter is a function to be
executed after the function completes.
• The following example demonstrates the fadeTo() method
with different parameters:

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("#div1").fadeTo("slow", 0.15);
• $("#div2").fadeTo("slow", 0.4);
• $("#div3").fadeTo("slow", 0.7);
• });
• });
• </script>
• </head>
• <body>
• <p>Demonstrate fadeTo() with different parameters.</p>
• <button>Click to fade boxes</button><br><br>
• <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
• <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
• <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
• </body>
• </html>

Parameter Description
speed Optional. Specifies the speed of the fading effect. Default value is 400
millisecondsPossible values:
•milliseconds
•"slow"
•"fast"
easing Optional. Specifies the speed of the element in different points of the
animation. Default value is "swing"Possible values:
•"swing" - moves slower at the beginning/end, but faster in the
middle
•"linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the fadeIn() method is
completedTo learn more about callback, visit our jQuery Callback
chapter

• jQuery fadeIn() Method
• The jQuery fadeIn() method is used to fade in
a hidden element.
• Syntax:
• $(selector).fadeIn(speed,callback);

fade
• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("#div1").fadeIn();
• $("#div2").fadeIn("slow");
• $("#div3").fadeIn(3000);
• });
• });
• </script>
• </head>
• <body>
• <p>Demonstrate fadeIn() with different parameters.</p>
• <button>Click to fade in boxes</button><br><br>
• <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
• <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
• <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
• </body>
• </html>

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("#div1").fadeOut();
• $("#div2").fadeOut("slow");
• $("#div3").fadeOut(3000);
• });
• });
• </script>
• </head>
• <body>
• <p>Demonstrate fadeOut() with different parameters.</p>
• <button>Click to fade out boxes</button><br><br>
• <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
• <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
• <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
• </body>
• </html>

• jQuery slideDown() Method
• The jQuery slideDown() method is used to slide down an element.
• Syntax:
• $(selector).slideDown(speed,callback);
• The optional speed parameter specifies the duration of the effect. It
can take the following values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after
the sliding completes.
• The following example demonstrates the slideDown() method:
• Example
• $("#flip").click(function(){
$("#panel").slideDown();
});

• slideDown()
• slideUp()
• slideToggle()

<!DOCTYPE html>
<html>
<head>
<script>
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

The animate() Method
$("div").animate({left: '250px'});
});

• <!DOCTYPE html>
• <html>
• <head>
• <script>
• $("div").animate({left: '250px'});
• });
• });
• </script>
• </head>
• <body>
• <button>Start Animation</button>
• <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position
property of the element to relative, fixed, or absolute!</p>
• <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
• </body>
• </html>

Java script jquery2

Recommended

Recommended

More Related Content

Similar to Java script jquery2

Similar to Java script jquery2 (9)

Recently uploaded

Recently uploaded (20)

Java script jquery2