1. CSCI 3100 Tutorial 8 Web Development Tools 1
Junjie Hu
Department of Computer Science and Engineering
The Chinese University of Hong Kong

2. 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

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

4. JS: Event & Console.log Use event handler for user interaction
Use console.log to check the identifiers
Demo:

5. JS: Time Interval
Use setInterval keep invoking your function in every time interval.
See also: clearInterval(), setTimeout(), clearTimeout()
Demo:

6. JS: Detect Different Browsers & Platforms
Use navigator.userAgent and navigator.platform to detect the browser and platform users use.
Demo:

7. JQuery Include: Find documents HERE: Learn jQuery HERE:
<script src="
Find documents HERE:
Learn jQuery HERE:

8. JQuery Easy object accessing Easy Ajax Easy event handling
JavaScript Code
Easy object accessing
Easy Ajax
Easy event handling
Html Code
PHP Code
Demo:

9. Google Map API Find documents HERE: Learn Google Map API HERE:
Learn Google Map API HERE:
Obtained API Key:

10. Google Map API Include GoogleMapAPI:
<script type="text/javascript" src=" 0FOijS3UawFF0Y&sensor=false"></script>
Insert GoogleMap into your website:
JavaScript Code
Html Code
Demo:

11. 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:

12. Google Map API Add Controls to the Map Change the styles of the Map
You can modify controls, set their positions, drawing custom controls
mentation/javascript/controls
Change the styles of the Map
mentation/javascript/styling
Demo:

13. Google Map API You can add your own information window for markers
m/maps/documentation/javas cript/infowindows
Demo:

14. Google Map API Use panorama
More info:
Demo:

15. Google Map API Convert address to geographic coordinates Use geocoder
More info: om/maps/documentation/j avascript/geocoding
Demo:

16. Google Chart API Visualize data on your websites

17. Google Chart API Draw an pie chart
Demo:

18. Google Chart API Draw an column chart
Demo:

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

20. Facebook Plugins Add like buttons and share buttons with HTML tags
Demo:

21. 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

22. 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:
DEMO:

23. References All code in this tutorial can be found HERE: Other links:
Other links: