UI/UX Presentation6

Chapter 4.
Mobile UI BesNOt
Practices JavaScript
1
Aim
To familarise the students with the basic knowledge
of JavaScript and how to use java script to develop
Mobile User Interface
2
Instructional Objectives
Objectives of this chapter are:
• Explain the main components of JavaScript
• Elaborate the features and benefits of JavaScript
• Demonstrate how to use various events and methods in JavaScript
• Illustrate the use of data type in JavaScript
• Describe the properties and methods of Object
3
Introduction
• JavaScript is an interpreter, client-side, event-based, object oriented scripting
language.
• It is used to create interactive and dynamic web pages.
• Mobile user interface (UI) design is an essential creation of mobile apps.
• JS scripts are written in the form of plain text.
• It is similar to HTML, XML, Java, PHP, etc. that use any text editor and simple code.
• The Windows Notepad is used to create and edit our JavaScript code.
• A wide variety of alternatives are available such as wordpad, Atom, Breackets etc.
• Notepad is the most preferred method to demonstrate JavaScript’s efficiency.
• JavaScript permits to create a custom pages “on the fly” without using a
server-side languages like PHP, Python, Java, etc.
4
JavaScript
5
JavaScript
• JavaScript is a client side, interpreted, object oriented, high level scripting language.
• JavaScript is a dynamic scripting language that executes within a browser.
• JavaScript code is inserted inside an HTML page using the JavaScript tag.
Advantages of JavaScript Disadvantages of JavaScript

• Speed is one of the prime advantages of ∙ In some cases, the code can be misused
Javascript. when it is executed on the users' computer.
• JavaScript is comparatively simple to
learn and implement. ∙ JavaScript can be interpreted in different
• As it is client-side, reduces the need on ways based on the browsers.
the website server.
6
JavaScript
(i) Syntax
JavaScript syntax is the set of rules by which we know how java script program can be
constructed.
JavaScript program can be written within the <script>tag.
The <script> tags tells where the Script has to be placed.
Java script is got the privilege to be placed in any part of HTML document.
The most ideal methods to place JavaScript in an HTML file are in the following tags −
• <head>...</head>
• <body>...</body>
• <body>...</body> and <head>...</head>
• Place in an external file and then include in
<head>...</head> section.
7
JavaScript
(i) Syntax
Semicolons are
Optional
In JavaScript semicolon is optional when the statements are placed on a separate line.
Case Sensitivity
JavaScript coding’s are case-sensitive. The keywords, variables, function names, and any other
identifiers that are used in JavaScript should be typed with a methodology of usage.
Comments in
JavaScript
The comments like //, /* and */ are supported in C and C++. They are supported by JavaScript also.
Values and String:

There are two types of values in JavaScript. They are- Fixed values and variable values. Fixed
values are called literals. Variable values are called variables.
8
JavaScript
(ii) Statements
In JavaScript, statements are the "instructions" that are to be executed by the web browser.
Statements Used in JavaScript

Keyword Description
break Terminates the loop in which the break statement is present
continue Jumps out of a loop and starts execution from the beginning of the loop
do … while Statement “write-”Executes a block of statement at least once and repeat the block
for Marks a block of statements to be executed as long as a condition is true
If…else Switch statement “-marks what? Write properly
return Exit from a function and return a value from a function
switch Marks a block of statements to be executed, depending on different cases
Try…catch Implements error handling to a block of statements
var Declares a variable
9
JavaScript
(iii) Variables
JavaScript variables store the data values.
Example:
var num1 = 15;
var num2 = 16;
var num3= num1 + num2;
One statement, many variables

• Many variables can be declared in one statement by separating the variables by comma.
Undefined value of JavaScript variable
• When a variable is declared without an initial value, it will have the value called
undefined.
Re-declaring JavaScript variable
• When a variable is re-declared in JavaScript it will not lose its value.
10
JavaScript
(iv) Data Types
• JavaScript variables can hold numerous data types.
• There are two kinds of data types- Primitive data type
and Non Primitive data type.
11
JavaScript
(v) Operators
Operators operate on one or two or more than two operands. Following
operators are supported by the JavaScript.
1. Arithmetic Operators
2. Assignment Operators
3. Comparison Operators
4. Logical (or Relational) Operators
5. Conditional (or ternary) Operators
6. Bitwise Operators
7. Type Operators
12
JavaScript
(vi) Events
• Event is an action that handles the interaction between HTML and JavaScript.
• There are various types of events like page loading, button click, key pressing.
• After the occurrence of the event, JavaScript coded responses is executed like data
validation, message display to the user etc.
Syntax:
With single quotes: <HTML-element Some-event='some JavaScript'>
With double quotes: <HTML-element Some-event="some JavaScript">
13
Quiz / Assessment
1) The __________ is a dynamic scripting language.
a) JavaScript
b) HTML
c) XML
d) Visual basic
2) Fixed values are called as __________.
e) Constants
f) Variables
g) Identifiers
h) Literals
14
JS Forms
15
JS Forms
HTML form validation can be performed by JavaScript. The server can
handle all the validation and processing of information submitted via a
form without using JavaScript but the client side validation reduces the
time.
JavaScript method to validate a HTML form
16
JS Forms
(i) Forms API
• An application programming interface (API) is a set of procedure,
definitions, protocols, and tools for creating application software.
• The JavaScript API has its main reference to describe the available classes,
events, objects, and public APIs with their usage in adaptive form.
Constraint Validation DOM Methods
Property Description
checkValidity() Function returns true when an input
elements contains valid data.
setcustomValidity() Function returns and sets the
validation message property of an input
element.
17
JS Forms Validity Property
(i) Forms API
Validity properties
The validity property of an input
element comprises a number of
properties associated to the validity
of data.
18
Quiz / Assessment
3) __________ side validation is performed by a web server, after sending the
input to the server.
a) Server
b) Client
c) Web
d) System
4) __________ method is used to validate input element
e) willValidate
f) Validated
g) Validity
h) byValidate
19
JS Objects
20
JS Objects
(i) Object Definition
The objects are the rulers and the prime concepts of JavaScript. Everything in
JavaScript is an object. The following can be considered as an object.
• Booleans
• Numbers
• Strings
• Dates
• Maths
• Regular expressions
• Arrays
• Functions
• Objects
21
JS Objects
Objects are Variables Containing Variables.
Variables of JavaScript can contain single value. Example: var name = "John";
Creating a JavaScript Object

With JavaScript, our own object can be defined and created. There are various methods to create
new objects:
• We can define and create a single object by using an object literal.
• We can define and create a single object, with the new keyword.
• We can define an object constructor, and then can create constructed type object.
22
JS Objects
Using an Object Literal
JavaScript object can be created in simple terms using literals. Using an object literal, the
object can be defined and created in one statement.
Using an Object Constructor

Generally to create an "object type" is to require to use an object constructor function
The “this” Keyword

In JavaScript, “this” is use to point to the current object. The this keyword in an object
constructor which does not carry any value. It is an alternate for the new object.
23
JS Objects
(ii) Object Properties
• Properties are the most significant part of any JavaScript object.
• Properties are the values associated with a JavaScript object.
• A JavaScript object is a collection of unordered properties.
• Properties can regularly be changed, added, and deleted, but some are read
only.
(iii) Object Methods
• JavaScript methods are the actions that can be executed on objects.

• A JavaScript method is a property that has the function definition.
24
JS Objects
(iv) Object Prototypes
Every JavaScript object has a prototype. The prototype is also an object. All JavaScript
objects inherit their properties and methods from their prototype.
Creating a Prototype:
• The normal way to create an object prototype is to utilize an object constructor
function.
Adding Properties to a Prototype:
• The property can be added as a new property to a prototype the same way as you add a
new property to an existing object, since the prototype is not an existing object.
Adding Methods to a Prototype:
• The constructor function can also define methods.
Using the prototype Property:
• The JavaScript prototype property permits to add new properties to an existing
prototype.
25
Quiz / Assessment
5) The __________ contain multiple values.
a) Objects
b) Variable
c) Class
d) Array
6) A JavaScript object is a collection of __________ properties.
e) Ordered
f) Listed
g) Unordered
h) List
26
JS Functions
27
JS Functions
(i) Function Definition
In JavaScript functions are defined with the keyword
function. The function declaration or a
function expression can be used.
Syntax
function functionName(parameters)
{
code to be executed
}
28
JS Functions
(ii) Function Parameters
A JavaScript function does not perform any inspection on parameter values
(arguments). Function parameters are the names listed in the function
definition. Function arguments are the actual values passed to and received by
the function.
Syntax
functionName(parameter1, parameter2,
parameter3) {
code to be executed
}
29
JS Functions
The objects are the rulers and the prime concepts of JavaScript. Everything in
JavaScript is an object. The following can be considered as an object.
• Booleans
• Numbers
• Strings
• Dates
• Maths
• Regular expressions
• Arrays
• Functions
• Objects
30
JS Functions
Arguments are Passed by Value:

The parameters that are present in a function call, are the function's arguments.
JavaScript arguments are passed by value.
Objects are Passed by Reference

While we consider the JavaScript, object references are values. Because of this,
objects will behave like they are passed by reference.
31
JS Functions
(iii) Function Invocation
JavaScript functions can be invoked in 4 types. The methods differs in
how this is initialized.
The this Keyword:

In JavaScript, the keyword called this, is the object that "owns" the current code. The value of
this, when used in a function, is the object that "owns" the function.
Invoking a JavaScript function:

The code inside the JavaScript function is executed only when it is invoked. The code in a
function is not executed when the function is defined. It is executed when the function
is invoked. Generally the term "call a function" is used instead of "invoke a function".
32
JS Functions
(iii) Function Invocation
The Global Object
When a function is invoked without an owner object, the value of this becomes
the global object. In a web browser the global object is the browser window.
• Invoking a Function as a Method

• Invoking a Function with a Function
constructor
• Invoking a Function with a Function
Method
33
JS Functions
(iv) Function Closure
Example code
The variable add is assigned the return value of a self-invoking function. The self-invoking
function only runs once. It sets the counter to zero (0), and returns a function expression. This
way add becomes a function. The "wonderful" part is that it can access the counter in the
parent scope. This is called a JavaScript closure.
34
Quiz / Assessment
7) Function __________ are the real values passed to and received by the
function.
a) Arguments
b) Definition
c) Declaration
d) Header
8) JavaScript functions have a built-in object called the __________ object.

e) Declaration
f) Definition
g) Arguments
h) Header
35
Activity - I
Brief description of activity
Online
Install JavaScript tool for any one
Activity device and get it ready to test a
(30 minutes) mobile application.
36
Summary
✔ The web browsers will execute the JavaScript in different ways based on the compatibility,
JavaScript is a dynamic language that executes within a browser.
✔ JavaScript take no notice of spaces, tabs, and newlines that appear in JavaScript programs
✔ JavaScript keywords are used to recognize actions to be performed.
✔ In JavaScript statements are "instructions" that are to be "executed" by the web browser
✔ JavaScript statements can be collected together in code blocks, inside curly brackets {...}.
✔ When there is a need to have an "object type" that can be used to create many objects of one
type.
✔ The delete operator should not be used on predefined JavaScript object properties.
✔ The code inside the JavaScript function is executed only when it is invoked
37
e-References
• JavaScript Road Trip Part 1 (1st ed.). Retrieved from
https://www.codeschool.com/courses/javascript-road-trip-part-1
• Cesani, E. &Dranka, L. HCI Principles for Mobile Devices (1st ed.). SlideShare. Retrieved from
http://www.slideshare.net/cesani/10-principles-of-hci-for-mobile-devices
• Intro To HCI (1st ed.). Retrieved from
http://d.ucsd.edu/class/intro-hci/2015/mobile_app_tips.html
• JavaScript Kit (1st ed.). Retrieved from
• http://www.javascriptkit.com/
• JavaScript Road Trip (1st ed.). Retrieved from
https://www.codeschool.com/courses/javascript-road-trip-part-1
• HCI Principles for Mobile Devices (1st ed.). Retrieved from
http://www.slideshare.net/cesani/10-principles-of-hci-for-mobile-devices
• Dataflow (1st ed.). Retrieved from
• https://cycle.js.org/
38
External Resources
• Love, S. (2005). Understanding Mobile Human – Computer

Interaction. MA, USA: Butterworth-Heinemann Newton.
• Interaction Design: Beyond Human – Computer Interaction by

Jennifer Preece, Yvonne Rogers, Helen Sharp.
• Essential Mobile Interaction Design by Cameron Banga, Josh

Weinhold.
39

UI/UX Presentation6

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

UI/UX Presentation6

Încărcat de

Drepturi de autor:

Formate disponibile

Chapter 4.

• Elaborate the features and benefits of JavaScript

• Demonstrate how to use various events and methods in JavaScript

• Illustrate the use of data type in JavaScript

• Describe the properties and methods of Object

Advantages of JavaScript Disadvantages of JavaScript

Values and String:

Statements Used in JavaScript

One statement, many variables

With single quotes: <HTML-element Some-event='some JavaScript'>

With double quotes: <HTML-element Some-event="some JavaScript">

JavaScript method to validate a HTML form

Constraint Validation DOM Methods

(i) Forms API

Creating a JavaScript Object

Using an Object Constructor

The “this” Keyword

• JavaScript methods are the actions that can be executed on objects.

Arguments are Passed by Value:

Objects are Passed by Reference

The this Keyword:

Invoking a JavaScript function:

• Invoking a Function as a Method

8) JavaScript functions have a built-in object called the __________ object.

• Love, S. (2005). Understanding Mobile Human – Computer

• Interaction Design: Beyond Human – Computer Interaction by

• Essential Mobile Interaction Design by Cameron Banga, Josh

S-ar putea să vă placă și