1. HTML5 Demo ISYS 350

2. HTML 5 http://www.the-art-of-web.com/html/html5-form- validation/#.UdytIOLn_zc http://www.the-art-of-web.com/html/html5-form- validation/#.UdytIOLn_zc http://diveintohtml5.info/forms.html http://24ways.org/2009/have-a-field-day-with-html5-forms/ http://www.w3.org/TR/html5/forms.html

3. New INPUT types http://www.w3schools.com/html/html_form_input_types.asp INPUT type="number" INPUT type="range” Other types: – email, url, tel, etc Age: Satisfaction:

4. 'required' attribute Example: Your Name:

5. ‘placeholder’ Attribute Placeholder attribute which lets us display a prompt or instructions inside the field. Example: Email Address:

6. Adding New Elements to HTML http://www.w3schools.com/html/html5_browsers.asp Creating an HTML Element document.createElement("myHero") myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } My First Hero

7. HTML5 Multimedia: Video,Audio,Youtube,Etc. http://www.w3schools.com/html/html_media.asp Your browser does not support the video tag. <iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k">

8. HTML5 Geolocation http://www.w3schools.com/html/html5_geolocation.asp The navigator.geolocation.getCurrentPosition() method returns an object with latitude, longitude and other properties. Latitude Logitude Static map

9. HTML5 Geolocation Demo var x; function getLocation() { x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; } Click the button to get your coordinates. Try It

10. Google Maps http://www.w3schools.com/googleapi/default.asp Maps basic Maps overlays

11. Static Map Image var x; function getLocation() { x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = " "; } Click the button to get your coordinates. Try It

12. Google Maps http://www.w3schools.com/googleapi/default.asp var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({position:myCenter,}); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); function newLocation(lat,lng) { myCenter=new google.maps.LatLng(lat,lng); initialize(); } function getLocation() { newlat=parseFloat(window.prompt("Enter Latitude:")); newlng=parseFloat(window.prompt("Enter Longitude:")); newLocation(newlat,newlng); }

13. JavaScript Array http://www.w3schools.com/js/js_arrays.asp Declare an array: –rateValues=[.04,.05,.06,.07,.08]; –rateDisplay=["4%","5%","6%","7%","8%"]; Array property: –length: The length property returns the number of elements Loop with array: –for (i=0;i<rateValues.length-1;i++)

14. Array and document.write demo Enter PV: rateValues=[.04,.05,.06,.07,.08]; rateDisplay=["4%","5%","6%","7%","8%"]; document.write(" "); for (i=0;i<rateValues.length-1;i++) { document.write(" " + rateDisplay[i]+" "); } document.write(" "); Select Year: 10 year 15 year 30 year Future Value: