SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture03.pdf · Using jQuery •After you added jQuery into your project, you need to wait jQuery to load all its necessary

SEEM4570 System Design and Implementation

Lecture 3 – Events

Preparation

• Initialize a new project.• Reset everything to scratch.• Delete img/logo.png

• I assume you don’t need the Cordova logo.• Modify three files (see the following pages for detail):

index.html, js/index.js and css/index.css

© 2017 Gabriel Fung 2

Preparation (cont’d)

• Modify index.html:• <!DOCTYPE html>

<html><head>

<meta name="format-detection" …><meta name="msapplication-tap-highlight" …><meta name="viewport" …><link rel="stylesheet" type="text/css” href="css/index.css"><script src="cordova.js"></script><script src="js/index.js"></script>

</head><body></body></html>



• Modify index.css:• * {

-webkit-tap-highlight-color: rgba(0,0,0,0);}body {

-webkit-touch-callout: none;-webkit-text-size-adjust: none;-webkit-user-select: none;width:100%;height:100%;margin:0px;padding:0px;

}



• Modify index.js:• DELETE EVERYTHING (i.e. you will have an empty file)



• Now you should have the following structure:• +--www

+--css+--index.css <-- revised

+--img <-- nothing+--js

+--index.js <-- empty+--index.html <-- revised



• Run your project (e.g. type “simulate ios” in the command prompt):


Make sure turn on “Developer mode”

JavaScript Events

• Events are "things" that happen to HTML elements.• Here are some examples of HTML events:

• An HTML page has finished loading • The page fires a “loaded event”

• You are typing your email address in a text box• The text box fires a ”change event”

• You clicked a button• The button fires a “click event”.

• When JavaScript is used in HTML pages, JavaScript can "react" on these events.


Cordova DeviceReady Event

• As you may guess from the name of this event, the “deviceready” event means that the mobile device is “ready to use” now.• Technically, once this event fires, you can safely write the

logic of your app now.

• Reference:• https://cordova.apache.org/docs/en/latest/


https://cordova.apache.org/docs/en/latest/

Cordova DeviceReady Event (cont’d)

• You should write your program AFTER the device ready event fired.• Revise your index.js:• document.addEventListener("deviceready", function(){

/*Write your programmig logic here!*/

});


About Document Event

• It takes the following form:• document.addEventListener("XXX", function(){ … });

• The above statement means:• In this document, I want it to listen to the event XXX. If the

event XXX fires, I want to run the statements inside the function.


Tidy Your Program

• Let say, you write index.js as:• document.addEventListener("deviceready", function(){

// You write 1,000 lines here. Put your whole app // inside this function

});

• There is nothing wrong in the above code. But we usually say that it is not robust and difficult to follow. • Instead, we usually want to decompose a large

program into smaller pieces.• Two related terms: “cohesion” and “coupling”. You will learn

more about them later in this course.


Tidy Your Program (cont’d)

• One way I like is to encapsulate everything into object:• document.addEventListener("deviceready", function(){

console.log(”Device is ready now.");app.init();

});

var app = {init: function() {

console.log(”App is initialized now.");}

};


Tidy Your Program (cont’d)

• Run your app and you should see:


jQuery

• jQuery is a JavaScript Library.• jQuery greatly simplifies JavaScript programming,

especially event handling and animation.• jQuery takes a lot of common tasks that require many lines

of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

• jQuery is easy to learn.


Why jQuery?

• There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.• Many of the biggest companies on the Web use

jQuery, such as:• Google• Microsoft• IBM


Adding jQuery

• There are two ways to start using jQuery on your web site:• Method 1: download the jQuery library from jQuery.com

and include in your application.• Method 2: include jQuery from a CDN, like Google.


Method 1: Download jQuery

• There are two versions of jQuery available for downloading:• Production version

• It has been minified and compressed. Please use this one in doing your project.

• Development version• This is for testing and development. It is common that this version

contains many bugs.


Method 1: Download jQuery (cont’d)

• After you downloaded the jQuery library, save it into your project directory. • +--www

+--css+--img+--js

+--index.js+--jquery.js

+--index.html

• Add into your index.html:• <script src="js/jquery.js"></script>

<script src="cordova.js"></script><script src="js/index.js"></script>


Method 2: Include from CDN

• If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network):• <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.

2.1/jquery.min.js"></script><script src="cordova.js"></script><script src="js/index.js"></script>


Using jQuery

• After you added jQuery into your project, you need to wait jQuery to load all its necessary resources before you can use it.• Just like Cordova, you need to wait for the “deviceready”

event.

• There are a number of ways to ”wait jQuery”, and I recommend the following short hand:• $(function(){

/*Everything inside here means jQuery is loaded and youare safe to use jQuery’s functions.*/

});© 2017 Gabriel Fung 21

Using jQuery in Cordova

• Now we revise the index.js as follows:• $(function(){

document.addEventListener("deviceready", function(){ console.log(”Device is ready now.");app.init();

});});

var app = {init: function() {

console.log(”App is initialized now.");}

};

• Now you are ready to use jQuery in your Cordova projects.


Revise index.html and index.css

• Before we continue, let us revise index.html:• …

…<body>

<div id="red" class="square"></div><div id="green" class="square"></div><div id="blue" class=”rectangle"></div><div id="yellow" class="rectangle"></div>

</body>


Revise index.html and index.css (cont’d)

• And also revise index.css:• …

….square{ position:absolute; width:100px; height:100px; }.rectangle{ position:absolute; width:200px; height:100px; }#red{ top:0px; left:0px; background:red; }#green{ top:0px; left:100px; background:green; }#blue{ top:100px; left:0px; background:blue; }#yellow{ top:200px; left:0px; background:yellow; }


Revise index.html and index.css (cont’d)

• Run your app and you should see:


jQuery Basic Syntax

• The jQuery syntax is tailor-made for selecting HTML elements and performing actions on them.• Basic syntax is: $(selector).on(event, action)• $ tell JS we use jQuery now.• (selector) is used to find HTML elements (based on their

names, ids, classes, types, attributes and much more).• https://www.w3schools.com/jquery/jquery_ref_selectors.asp

• event is the event that you want to monitor on those matched elements.• https://www.w3schools.com/jquery/jquery_ref_events.asp

• action is what you want to do when the event is triggered.


https://www.w3schools.com/jquery/jquery_ref_selectors.asp

https://www.w3schools.com/jquery/jquery_ref_events.asp

The element Selector

• The jQuery selector finds elements based on the element name.• Example:• When we clicked on any div, it will show a message in the

console:• var app = {

init: function() {$("div").on("click", function(){

console.log("div is clicked!");});

}};


The element Selector (cont’d)

• Example:• When we clicked on any div, all divs will fade out:

• var app = {init: function() {

$("div").on("click", function(){$("div").fadeOut();

});}

};


Using “this”

• We can use the magic keyword “this” to refer the element that triggered the event.• Example:• When we clicked on a div, only the clicked div will fade out:


$("div").on("click", function(){$(this).fadeOut();

});}

};


The id Selector

• The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.• Example:• When we clicked on the red div, all divs will fade out:


$(”#red").on("click", function(){$("div").fadeOut();

});}

};


The class Selector

• The class selector uses the class name of an HTML tag to find the elements.• Example:• When we clicked on the div having the ”square” class, it will

fade out:• var app = {

init: function() {$(".square").on("click", function(){

$(this).fadeOut();});

}};


About HTML Classes

• Note that we can have more than one class for an HTML element. • Example:• <div class=“square large fancy”></div>• The above div belongs to three classes: “square”, “large”

and “fancy”• By assigning more than one classes to an element, we

can manipulate an element far more easier.


jQuery Events

• Some common events:• click• touchstart• touchend• touchmove• touchcancel

• Reference:• https://developer.mozilla.org/en-

US/docs/Web/Events/touchstart


https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

Other Resources

• Some other resources that can help you to add more events to your app easily:• https://github.com/benmajor/jQuery-Touch-Events

• Swipe, Tap, Double Tap, …• https://jquerymobile.com/

• Optimized for mobile platform


https://github.com/benmajor/jQuery-Touch-Events

https://jquerymobile.com/

jQuery Animate

• Previously, you already used an animation effect “fadeOut”. We can animate elements using the method called “animate”.• Example 1:• When we clicked on a div, it will fade to 10% opacity:


$("div").on("click", function(){$(this).animate({opacity: 0.1}, 500);

});}

};


This is the milliseconds to complete the animation

jQuery Animate

• Example 2:• When we clicked on a div, it will move to a new position:


$("div").on("click", function(){var x = $(this).position().top + 50;var y = $(this).position().left + 50;$(this).animate({top:x+"px", left:y+"px"}, 500);

});}

};


jQuery Animate (cont’d)

• Example 3:• When we clicked on a div, it will move to a new position. If

it already moved to a new position, it will move back.• $("div").on("click", function(){

if(!$(this).hasClass("new_position")){$(this).addClass("new_position");var x = $(this).position().top + 50;var y = $(this).position().left + 50;$(this).animate({top:x+"px", left:y+"px"});

}else{

$(this).removeClass("new_position");var x = $(this).position().top - 50;var y = $(this).position().left - 50;$(this).animate({top:x+"px", left:y+"px"});

}});



• The above code has unexpected behavior when you clicked on it continuously!• We need to stop the element to listen to any event

when it is moving.



• Example (2nd Attempt):• $("div").on("click", function(){

if(!$(this).hasClass("moving")){$(this).addClass("moving");if(!$(this).hasClass("new_position")){

$(this).addClass("new_position");var x = $(this).position().top + 50;var y = $(this).position().left + 50;$(this).animate({top:x+"px", left:y+"px"}, 500, function(){

$(this).removeClass("moving");});

}else{

$(this).removeClass("new_position");var x = $(this).position().top - 50;


jQuery Animate (cont’d)var y = $(this).position().left - 50;$(this).animate({top:x+"px", left:y+"px"}, 500, function(){

$(this).removeClass("moving");});

}}

});


Documents

SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture03.pdf · Using jQuery •After you added jQuery into your project, you need to wait jQuery to load all its necessary