Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript

503 views

Published on

Introduzione all'uso

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Javascript

  1. 1. JavaScript Istruzioni per l’uso ugo.rinaldi@gmail.com
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. HTML DOM  With the HTML DOM, JavaScript can access and change all the elements of an HTML document 10
  11. 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. 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. 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

×