2. JavaScript is one of the 3 languages all web
developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web
pages
2
3. <script> nella HEAD
JavaScript can be placed in the <body> and the <head> sections
of an HTML page.
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
3
4. <script> Nel BODY
<body>
<h1>MyWeb Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
4
5. External JavaScript
Placing JavaScripts in external files has some advantages:
It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
5
6. Output
JavaScript can "display" data in different ways:
• Writing into an alert box, using window.alert().
• Writing into the HTML output using document.write().
• Writing into an HTML element, using innerHTML.
• Writing into the browser console, using console.log()
• Esempi:
• alert(5 + 6);
• <button onclick="document.write(5 + 6)">Try it</button>
//after an HTML document is loaded, it will delete all existing HTML:
• <p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
• console.log(5 + 6); //Activate the browser console with F12, and select "Console" in the menu.
6
7. Syntax
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
Costanti: 10, 10.50,“Joe”,‘Jack’
Variabili: var x; x=0; var y=100; var z = x + y; //VAR eVar ≠ var
Operatori: +, -, *, /, (5 + 6) * 10
Expressionis a combination of values, variables, and operators, which computes to a value.
Keyword :var è un esempio di keyword
Commenti: //, /* …*/
In programming languages, camel case often starts with a lowercase
letter: firstName, lastName, masterCard, interCity
7
8. Variables & operators
JavaScript variables are containers for storing data values
JavaScript identifiers are case-sensitive
the equal sign (=) is an "assignment" operator, not an "equal to"
operator (== in JavaScript)
It's a good programming practice to declare all variables at the
beginning of a script
var person = "John Doe", carName = "Volvo", price = 200;
var carName = "Volvo";
var carName;
var x = "5" + 2 + 3;
var b=true, b2=false;
+, -, *, /, %, ++, --, =, +=, -=, *=, /=, %=, ==, ===, !=,
!==, >, <, >=, <=
8
9. Functions
A JavaScript function is a block of code designed to perform a particular task
(DEFINITION)
A JavaScript function is executed when "something" invokes it (calls it).
(INVOCATION)
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
var x = myFunction(4, 3); // Function is called, return value will end up in x
Esempio Moltiplicazione
Esempio Celsius
In JavaScript, you can use functions the same way as you use variables.
var x = toCelsius(32);
var text = "The temperature is " + x + " Centigrade";
Equivale a
var text = "The temperature is " + toCelsius(32) + " Centigrade";
9
10. HTML DOM
With the HTML DOM, JavaScript can access and change all
the elements of an HTML document
10
11. Changing HTML Elements
document.getElementById(“ide“) Find an element by element id
element.innerHTML= Change the inner HTML of an element
element.attribute= Change the attribute of an element
element.setAttribute(attribute,value) Change the attribute of an element
element.style.property= Change the style of an element
11
12. Esempi
Esempi
document.getElementById(id).onclick=function(){code}
Adding event handler code to an onclick event
document.getElementById("myImage").src = "landscape.jpg";
document.getElementById("p2").style.color = "blue";
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
//hidden/visible
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
//oppure così con la funzione oppure questo
The onload, onunload, onchange, onmouseover, onmouseout, onfocus, onblur
12