SEEM4540 TUTORIAL 2: JAVASCRIPT & JQUERY

Size: px

Start display at page:

Download "SEEM4540 TUTORIAL 2: JAVASCRIPT & JQUERY"

Archibald Haynes
7 years ago
Views:

1 SEEM4540 TUTORIAL 2: JAVASCRIPT & JQUERY 16 Feb 2016

2 JavaScript(JS) 2 Developed by Netscape A cross platform script language Mainly used in web environment Run programs on browsers (HTML is not programmable) It can be run on the server side also Supposed to call "mocha" or "LiveScript", but changed to "JavaScript" eventually Netscape wants to continue the success of Java!

3 JavaScript (JS) (cont'd) 3 Some typical usages: Form validation Handle Events (e.g., when you "click" a button, when you mouse move, etc.) Animations and visual effects Manipulate Cookies A cookie is a small piece of data stored in your computer by the browser when you browse a web page. Interact with different HTML components

4 JavaScript (JS) (cont'd) 4 JavaScript is a Scripting Language A scripting language is a lightweight programming language. It does nothing with Java. Easy to learn. JavaScript is an Object Oriented Programming Language (as least from my point of view) Some people may argue with me But that's fine, different people have different opinions, right? A good article:

5 Different Kinds of Programming 5 In general, there are two kinds of programming: Procedural Programming Also known as Imperative Programming E.g., C Object Oriented Programming (OOP) E.g., Java, C++, Objective-C We will discuss OOP in detail later! In order to appreciate the powerfulness of OOP, it is better to learn how to write!

6 The <script> Tag 6 JavaScripts must be written in <script> </script>. <script> </script> can be put anywhere in <html> </html>. Try this: <script> alert("my First JavaScript"); </script>

7 Writing JS Statement and Semicolon 7 Each JS statement is a command to the browser, which tells the browser what to do. Just like any programming language You can add semicolon (" ; ") or not to add a semicolon at the end of a JS statement Ending statements with semicolon is optional in JavaScript. But I recommend you to add semicolon. Your code will be more clean and easy to follow

8 Writing JS Comments 8 Similar to C or Java, we use /**/ or // to write comment: <script> /* This is a comment */ alert("hello"); // This is another comment alert("yeah"); </script>

9 Writing JS Variables 9 Like all programming languages, JS also have variables to store data Unlike C/Java, you do not need to define the data type! A sample C program: main(){ int a = 10, b = 12; double pi = ; char[5] str = "hello } A sample JS program: var a = 10, b = 12; var pi = ; var str = "hello";

10 Writing JS Variables (cont'd) 10 For a programming language that do not need to define the data types of the variables, we call these programming has a feature of Dynamic Typing. Data types of variables will be defined dynamically E.g. PHP, JS, Otherwise, if we need to define the data types, we call them Static Typing E.g. C, C++, Java,

11 Writing JS Variables (cont'd) 11 There are totally 7 different data types: Boolean Number String Undefined Null Array Object

12 JavaScript as Function 12 We can write function using JS: <!DOCTYPE html> <html> <script> function myfunction(){ document.write("<p>this is a paragraph 1</p>"); document.write("<p>this is a paragraph 2</p>"); } </script> <body> <script>myfunction()</script> </body> </html>

13 JS and Objects 13 Technically, "Everything" in JavaScript is Object!! String, Number, Array, What's so special about Object? An object is a piece of data, with properties and methods

14 JS and Objects (cont d) 14 Let's continue our string example: var str = "Local"; var len = str.length; // len = 5 var str2 = str.replace("l", "V"); // str2 = Vocal var str3 = str.touppercase(); // str3 = LOCAL var str4 = str.replace("l", "V").toLowerCase(); // str4 = VOCAL Note: when you access the "methods" of an object, you have to put "()" at the end. If you access the "properties", you do not need to do so.

15 Create You Own Object using JSON 15 JSON JavaScript Object Notation Object is delimited by { and }. Inside { } the properties are defined as name and value pairs (name : value) and separated by commas (, ). Array is defined inside [ ]. Example: {firstname:"john", lastname:"smith", id:12345, courses: ["seem4570", "seem3490"]} The object (person) in the example above has 4 properties: firstname, lastname, id and courses.

16 JavaScript Framework 16 To write JavaScript more efficiently, we will usually use some Framework: You can think about a Framework is a set of ready-touse functions and objects, so that we do not need to write everything by ourselves! One of the most powerful and my favorite JavaScript Framework is jquery

17 jquery 17 jquery is a JavaScript Framework. It is lightweight. jquery takes a lot of common tasks that requires many lines of JavaScript code to accomplish, and wraps it into methods that you can call with a single line of code.

18 What jquery can do? 18 HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX

19 Adding jquery into Your Site Method 1 19 There are two versions of jquery available for downloading: Production version Development version Both versions can be downloaded from jquery.com The jquery library is a single JavaScript file. To add jquery library into your site, simply type: <head> <script src="jquery.js"></script> </head>

20 Adding jquery into Your Site Method 2 20 If you don't want to download and host jquery yourself, you can include it from a CDN (Content Delivery Network). Google CDN: <script src=" y.min.js"></script> Microsoft CDN: <script src=" js"></script>

21 Host vs. CDN 21 Many users already have downloaded jquery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

22 jquery Syntax 22 Basic syntax: $(selector). eventoraction(params) Explanation: $ define/access jquery selector find an element/group of elements eventoraction event or action to be performed params parameters required by the event. Examples: $("p").hide(); $("p").click(function(){ $("p").hide() });

23 More about jquery 23

24 References 24 JavaScript: JSON: jquery:

Example. Represent this as XML

Example. Represent this as XML Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple