1. 4.1. Manage and maintain JavaScript. 4.2. Update the UI by using JavaScript. Understanding JavaScript and Coding Essentials

2. Agenda JavaScript Functions and Variables jQuery and Third-Party Libraries Locating and Accessing Elements Listening and Responding to Events Updating the Content of Elements Adding Elements

4. Building Interactive Applications

5. What is JavaScript?.js

6. Connecting JavaScript with HTML document.write("Hello World Wide Web"); 1 2

7. JavaScript Demo This is a boring website! document.write("Hello, World!"); 1

9. Functions function doSomethingAwesome() { var name = prompt(“What is your name?”); alert(name + “, you just did something awesome!"); }

10. How to Define a Function function helloWorld() { alert(‘Hello, World!’); } function keyword function name statement everything between the curly braces is a code block

11. Naming Functions

12. Definition and Execution of Functions function doSomethingAwesome() { var name = prompt(“What is your name?”); alert(name + “, you just did something awesome!"); } Defining the Function

13. Variables

14. How to Declare a Variable var height = 6; variable keyword variable name variable value assignmen t operator

15. Rules for Naming Variables Variable names must start with a letter, dollar sign ($), or an underscore (_). It must NOT start with a number. Variable names can contain letters, numbers, dollar signs, and underscores, but NOT dashes (-) or periods (.). You cannot use keywords or reserved words. Variables are case sensitive, which means that thisVariable is different from ThisVariable. Use names that describe the information you are storing. If a variable name uses two or more words, capitalize the first letter of ever word AFTER the first word. 123 456

16. Types of Data

17. Comments /*These comments are typically reserved for describing how an entire script file works or to comment out an entire block of script. */ //this function does something awesome! function doSomethingAwesome() { var name = prompt(“What is your name?”); alert(name + “, you just did something awesome!"); } JavaScript

19. JavaScript Libraries

21. Objects in JavaScript THIS IS AN OBJECT

22. Document Object Model (DOM) document attribute text>

23. Locating and Accessing Elements document.getElementById(‘demo’); objectmethod name parameter

24. getElementById() Demo Get today's date and add it to an element on the page. document.getElementById("demo").innerHTML=Date();

26. Events in Programming Event HandlersAssociated Events onsubmit form submission onkeydown onkeypress onkeyup keystrokes onclick onmousedown onmouseup mouse or touchpad clicks onload onunload page loading/unloading onselect item selection

27. Event Handlers Demo Select some of the text: function myFunction() { document.getElementById('demo').innerHTML = "Selecting text is awesome!"; }

29. Updating Content in Elements

30. innerHTML Demo Updating Content document.getElementById("demo").innerHTML=‘Using JavaScript is super fun!’;

32. The createElement method Make elements, like images, appear on screen with the document object’s createElement method Add the element to the screen using the appendChild() method function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; // Adds it to the tag document.body.appendChild(img); } JavaScript <button onclick="show_image (’dog.jpg’, 276,110, ’Stella');"> Display an image! HTML

33. createElement Demo Creating Elements Display an image! function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; // Adds it to the tag document.body.appendChild(img); }

34. Summary JavaScript Functions and Variables jQuery and Third-Party Libraries Locating and Accessing Elements Listening and Responding to Events Updating the Content of Elements Adding Elements

35. © 2015 Microsoft Corporation. All rights reserved.