CSCI 3100 Tutorial 8 Web Development Tools 1 Junjie Hu jjhu@cse.cuhk.edu.hk Department of Computer Science and Engineering The Chinese University of Hong Kong

Objective of This Tutorial Learn to improve the front-end of your website: Use jQuery and JavaScript tricks for efficient coding Use Google Maps/Charts for good data visualization Use Facebook plugins to connect your service with social network Use WebGL for building fancy and realistic user interface

Outline More About JavaScript JQuery Google Maps API Google Charts API Facebook Plugins WebGL and THREE.js

JS: Event & Console.log Use event handler for user interaction Use console.log to check the identifiers Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/webtools1.html

JS: Time Interval Use setInterval keep invoking your function in every time interval. See also: clearInterval(), setTimeout(), clearTimeout() Demo: http://appsrv.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/interval.html

JS: Detect Different Browsers & Platforms Use navigator.userAgent and navigator.platform to detect the browser and platform users use. Demo: http://appsrv.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/detect.html

JQuery Include: Find documents HERE: Learn jQuery HERE: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> Find documents HERE: http://api.jquery.com/ Learn jQuery HERE: https://learn.jquery.com/ http://www.w3schools.com/jQuery/

JQuery Easy object accessing Easy Ajax Easy event handling JavaScript Code Easy object accessing Easy Ajax Easy event handling Html Code PHP Code Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/webtools1.html

Google Map API Find documents HERE: Learn Google Map API HERE: https://developers.google.com/maps/documentation/javascript/reference Learn Google Map API HERE: https://developers.google.com/maps/documentation/javascript/tutorial Obtained API Key: https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Google Map API Include GoogleMapAPI: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArVnl6S_GKJYWE47fAs 0FOijS3UawFF0Y&sensor=false"></script> Insert GoogleMap into your website: JavaScript Code Html Code Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlemap.html

Google Map API Create event handler for Map Using google.maps.event.addListener Find the click location on the map from event.latLng Add markers using new google.maps.Marker Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlemap.html

Google Map API Add Controls to the Map Change the styles of the Map You can modify controls, set their positions, drawing custom controls https://developers.google.com/maps/docu mentation/javascript/controls Change the styles of the Map https://developers.google.com/maps/docu mentation/javascript/styling Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlemap2.html

Google Map API You can add your own information window for markers https://developers.google.co m/maps/documentation/javas cript/infowindows Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlemap3.html

Google Map API Use panorama More info: https://developers.google.com/maps/documentation/javascript/streetview Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlemap4.html

Google Map API Convert address to geographic coordinates Use geocoder More info: https://developers.google.c om/maps/documentation/j avascript/geocoding Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlemap5.html

Google Chart API Visualize data on your websites https://google-developers.appspot.com/chart/interactive/docs/gallery

Google Chart API Draw an pie chart Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlechart.html

Google Chart API Draw an column chart Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/googlechart2.html

Facebook Plugins Plugins allowing Like / Share buttons Documents: https://developers.facebook.com/docs/plugins/ Unlike other JavaScript libs, Facebook does not use standalone lib files To include Facebook plugins:

Facebook Plugins Add like buttons and share buttons with HTML tags Demo: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/facebook.html

WebGL and THREE.js WebGL is a JavaScript API for creating 3D scene. The syntax is similar to openGL THREE.js is a JavaScript API for creating 3D scene using HTML5 canvas ,WebGL and SVG Much easier to use

THREE.js Use THREE.js to build a 3D scene and insert objects into the scene. Camera perspective setting Geometry and material setting Change rendering parameters to create animation Documents: http://threejs.org/docs/ DEMO: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1/webgl.html

References All code in this tutorial can be found HERE: Other links: http://www.cse.cuhk.edu.hk/csci3100/tutorial/webtools1.zip Other links: http://jquery.com/ https://developers.google.com/maps/documentation/javascript/tutorial https://developers.google.com/chart/?hl=zh-tw https://developers.facebook.com/docs/plugins/ http://learningwebgl.com/blog/?page_id=1217 http://threejs.org/