Download as PDF, PPTX
More Related Content
![JavaScriptL18 [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptl18autosaved-230306080220-c2cb9b0e-thumbnail.jpg?width=640&height=640&fit=bounds)
Javascript
- 1.
- 2. JavaScript is oneof 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 JavaScriptcan 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 PlacingJavaScripts 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 statementsare 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 JavaScriptfunction 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 Withthe 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 eventhandler 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 diesempio 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