Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Javascript
Similar to Javascript (20)
Recently uploaded
Recently uploaded (20)
Javascript
- 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
- 13. Altro codice di esempio 13 ๏ window.open("http://www.w3schools.com"); ๏ myWindow = window.open("", "", "width=400, height=200"); ๏ myWindow.close(); ๏ myWindow.focus(); ๏ myWindow.blur(); ๏ myWindow.print(); ๏ myWindow.resizeTo(500, 500); ๏ window.history.back(); ๏ window.history.go(-2); ๏ http://www.w3schools.com/js/js_examples.asp