1. CSCI 3100 Tutorial 5 JavaScript & Ajax Jichuan Zeng jczeng@cse.cuhk.edu.hk Department of Computer Science and Engineering The Chinese University of Hong Kong

2. Objective of This Tutorial What is JavaScript How to add content to your web pages using JavaScript The basic syntax of JavaScript JavaScript together with HTML5 and CSS3 jQuery and Ajax applications Tools for JavaScript Development

3. JavaScript in a Nutshell video

4. Highlights of JavaScript JavaScript is not the script version of Java

5. Highlights of JavaScript JavaScript is not just the front end programming language.

6. Basic Syntax of JavaScript The Prompt and basic operations What gets return from the code

7. Basic Syntax of JavaScript Variables Operators Functions Conditional Statements Array Object

8. Advanced Syntax of JavaScript Functions are also Objects Anonymous functions and callbacks

9. HTML Integrated with JavaScript The Tag … JavaScript statements … In HTML 4.x or XHTML pages: … JavaScript statements … Put your JavaScript in a separate file (Recommended)

10. DOM and JavaScript Document Object Model JavaScript interacts with HTML page content via DOM access. window.alert("Warning!") document.write("Hello World!") window.onload = function () {... } document.getElementById("btn1").onclick = sheet; var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para);

11. JavaScript and HTML5 Some new HTML5 tags – New semantic elements like,,, and. – New form control attributes like number, date, time, calendar, and range. – New graphic elements: and. – New multimedia elements: and. Drag and Drop (code) Animation (code)

12. JavaScript and CSS3 CSS Primer – Selector p { color: red; font-weight: bold; } – ID #div1 { color: yellow; background-size: auto; } – Class.info { font-family: Arial, Verdana, sans-serif; color: green; } Internal Style Sheet External Style Sheet

13. JavaScript and CSS3 Some CSS3 new features: – Box Model – Backgrounds and Borders – Gradients – Text Effects – 2D/3D Transformations – Animations Light Effects (code)

14. jQuery jQuery is the most popular and extensible JavaScript library. Huge resources of plug-in for almost any application you might have. Simple syntax. Include:

15. jQuery Easy object accessing Easy Ajax Easy event handling JavaScript Code Html Code

16. Ajax Ajax allows you to communicate with the server in the background. Ajax allows you to display the results on your page without having a page refreshing. Let your pages interact more smoothly with the user. Traditional client-server interactionAjax client-server interaction Delay while loading new or revised pages A whole page must be loaded including many unchanged items

17. Ajax JQuery allows you to write Ajax in a few lines of code. $.ajax({ type: “POST”, // type url: ‘test’, data: “id=138&price=200” }).done(function(data){ …// callback });

18. Development Tools Sublime Text, Notepad++, UtraEdit, VIM, Emac, Eclipse, Netbeans, Aptana, WebStorm, Visual Studio, Xcode IDE is strongly recommended.

19. Debug JavaScript

20. Some useful APIs Google Map API https://developers.google.com/maps/documentation/javascript/tutorial#api_ key Google Chart API https://google-developers.appspot.com/chart/interactive/docs/gallery Facebook Plugins https://developers.facebook.com/docs/plugins/ Twitter API https://dev.twitter.com/web/javascript

21. References http://jquery.com/ http://www.w3schools.com/jquery/ http://www.w3schools.com/css/css_howto.asp https://www.javascript.com/ http://githut.info/ http://www.crockford.com/javascript/javascript.html