Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Course outline

Week 1: Introduction to Mobile Development

 Overview of mobile app development
 Introduction to mobile platforms and languages
 Introduction to design principles for mobile apps
Week 2: Tools and Programming Concepts
 Overview of development tools, IDEs, and SDKs
 Introduction to object-oriented programming for mobile app development
 Mobile app architecture and programming languages (Java, Swift, Kotlin, JavaScript)
Week 3: Mobile App Testing
 Overview of mobile app testing
 Different types of testing and tools used in testing process
Week 4: Mobile App Deployment
 Introduction to deploying mobile apps to app stores (Google Play Store, Apple App Store)
 Understanding app store guidelines and requirements
Week 5: Mobile App Analytics
 Overview of mobile app analytics
 How to track and analyze app usage data to improve app performance and user experience
Week 6: Mobile App Security
 Introduction to mobile app security
 Best practices for securing user data and protecting against malicious attacks
Week 7: Project and Review
 Students work on a mobile app development project
 Review of key concepts and skills learned throughout the course

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

1.0 Introduction

1.1 Mobile Operating Systems (MOS)

Mobile operating systems are the software platforms that provide the fundamental services and functions
needed to operate mobile devices, such as smartphones, tablets, and smartwatches. A mobile operating
system provides a framework for developers to create mobile applications that can run on the device, and it
also provides a user interface for users to interact with their device and applications.

Mobile operating systems are designed specifically for mobile devices, and they are different from traditional
desktop operating systems such as Windows, macOS, and Linux. The most popular mobile operating systems
are iOS, Android, and Windows Mobile, with iOS and Android being the dominant platforms.

Each mobile operating system has its own unique set of features, interface, and programming languages. For
example, iOS is developed by Apple and is exclusive to Apple devices, such as the iPhone and iPad. iOS uses
the programming languages Objective-C and Swift, and it is known for its sleek and user-friendly interface,
as well as its tight integration with other Apple products and services.

On the other hand, Android is an open-source operating system developed by Google and used by a wide
range of mobile device manufacturers. Android uses the programming language Java, and it is known for its
flexibility and customizability. Android also offers a wide range of devices at different price points, making it
accessible to a wider range of users.

Mobile operating systems also play an important role in mobile app development. Developers must consider
the unique features and constraints of each operating system when creating their applications, and they must
use the appropriate programming languages and development tools for the platform they are targeting.

1.2 Mobile Apps Development

Mobile app development refers to the process of creating software applications that run on mobile devices,
such as smartphones, tablets, and smartwatches. These applications are designed to provide users with a
range of services and functionalities, from productivity tools to social networking to gaming.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Mobile app development involves a range of skills and technologies, including programming languages,
development frameworks, and user interface design. The most popular programming languages for mobile
app development are Java for Android apps, Swift for iOS apps, and Kotlin for both platforms. Developers
use these languages to write code that can run on mobile devices and access the device's hardware and
software features, such as the camera, GPS, and sensors.

Mobile app development frameworks, such as React Native and Flutter, are also widely used by developers
to create cross-platform mobile apps. These frameworks allow developers to write code once and deploy it
across multiple platforms, such as iOS and Android, which can save time and resources.

In addition to programming languages and development frameworks, mobile app development also involves
user interface design. A good user interface is essential for creating a positive user experience and can make
the difference between a successful app and a failure. Developers use design tools and principles to create
interfaces that are visually appealing, easy to use, and optimized for mobile devices.

Mobile app development also involves a range of other activities, such as testing, debugging, and
deployment. Developers must test their apps thoroughly to ensure that they work properly on a range of
devices and under different conditions. They must also debug any errors or problems that arise during
development, and deploy the app to app stores or other distribution channels.

Mobile app development is an exciting and rapidly evolving field that requires a range of skills and
knowledge. With the right tools, technologies, and design principles, developers can create innovative and
engaging mobile apps that meet the needs of users and businesses alike.

1.2.1 Some Common Tools for Designing Mobile Apps

There are many mobile app design tools available that can help designers create visually appealing and user-
friendly mobile apps. Here are a few common examples:

1 Sketch: Sketch is a popular vector design tool that is widely used for designing user interfaces and
icons for mobile apps. It has an intuitive interface and a range of features that make it easy to create
detailed designs.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2 Adobe XD: Adobe XD is a design tool that is specifically designed for creating user interfaces for
mobile apps. It allows designers to create interactive prototypes and test them on a range of devices.

3 Figma: Figma is a collaborative design tool that is popular among teams working on mobile app
design. It has a range of features, including real-time collaboration, that make it easy for teams to
work together on design projects.

4 InVision: InVision is a design tool that allows designers to create interactive prototypes for mobile
apps. It also has a range of features for sharing designs with stakeholders and gathering feedback.

5 Canva: Canva is a graphic design tool that is popular for creating visual content for social media and
marketing. It also has a range of templates and design elements that can be used to create mobile app
designs.

These are just a few examples of the many mobile app design tools that are available. By using these tools,
designers can create high-quality mobile app designs that meet the needs of their users.

1.3 Types of Mobile Apps

There are several different types of mobile apps, each with its own characteristics and use cases. The most
common types of mobile apps include:

1 Native apps: These are mobile apps that are specifically designed and developed for a particular
platform, such as iOS or Android. Native apps are built using platform-specific programming
languages and development tools, which can result in high performance and a seamless user
experience.

2 Hybrid apps: These are mobile apps that combine elements of native and web apps. Hybrid apps are
built using web technologies such as HTML, CSS, and JavaScript, and then wrapped in a native
container that allows them to access device features and be distributed through app stores.

3 Web apps: These are mobile apps that run entirely within a web browser, without the need to
download or install anything on the device. Web apps are typically built using web technologies, and
they can be accessed through a mobile browser like Safari or Chrome.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

4 Progressive web apps (PWA): These are web apps that are designed to look and feel like native apps,
and can be added to a user's home screen like a native app. PWAs use web technologies such as
HTML, CSS, and JavaScript, but also include features such as offline support and push notifications.

5 Cross-platform apps: These are mobile apps that can run on multiple platforms, such as iOS and
Android, using a single codebase. Cross-platform apps are typically built using frameworks such as
Kotlin Multi-platform Mobile (KMM), React Native, Flutter or Xamarin, which allow developers to
write code once and deploy it across multiple platforms.

6 Augmented reality (AR) apps: These are mobile apps that use the device's camera and sensors to
overlay digital content onto the real world. AR apps can be used for gaming, education, marketing,
and more.

7 Virtual reality (VR) apps: These are mobile apps that use the device's sensors and display to create a
fully immersive virtual environment. VR apps are typically used for gaming and entertainment, but
can also be used for education and training.

Each type of mobile app has its own strengths and weaknesses, and the choice of which type to use depends
on factors such as the target audience, development budget, and desired features and functionality.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

1.4 Mobile Apps Architecture

Mobile app architecture refers to the overall structure and design of a mobile app, including how its
components are organized, how they communicate with each other, and how data is managed and processed.

There are several different approaches to mobile app architecture, but one common pattern is the Model-
View-Controller (MVC) architecture. In the MVC architecture, the app is divided into three main
components:

1 Model: This component represents the data and the business logic of the app. It includes data
structures, database access, and algorithms for processing and manipulating data.

2 View: This component represents the user interface of the app. It includes the screens, buttons,
menus, and other elements that the user interacts with.

3 Controller: This component acts as the intermediary between the model and the view. It handles user
input and communicates with the model to retrieve and update data, and it also updates the view to
reflect changes in the model.

Another popular architecture pattern for mobile app development is the Model-View-ViewModel (MVVM)
architecture. In this pattern, the app is divided into three components:

1 Model: This component is similar to the MVC pattern, representing the data and business logic of the
app.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2 View: This component is responsible for rendering the user interface, but it does not contain any
business logic. Instead, it is bound to a ViewModel.

3 ViewModel: This component acts as the intermediary between the view and the model. It contains the
business logic and provides data and behavior to the view.

In addition to these architecture patterns, there are many other approaches to mobile app architecture, such as
the Clean Architecture, the Flux Architecture, and the Redux Architecture. Each of these patterns has its own
strengths and weaknesses, and the choice of which to use depends on factors such as the complexity of the
app, the development team's experience and preferences, and the target platform.

1.4.1 Designing Android App Architecture

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

The latest guidelines for the architecture of Android applications emphasize several critical concepts that
developers should follow to create successful and safe apps. To produce a good Android app, developers
should ensure a robust separation of concerns and rely on a model to drive the user interface. For instance,
any code that doesn't interact with the user interface or the operating system shouldn't be in an activity or
fragment. Keeping these elements as tidy as possible can help avoid many issues related to life cycle.
Ultimately, the system has complete control over whether activities or fragments are destroyed.

Additionally, models that are distinct from the user interface should manage data and account for life cycle
concerns.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

1.4.2 Designing iOS App Architecture

The iOS app architecture is divided into four major parts:

1 Core Services: The core Services provides direct access to the database along with file controls.

2 Interface Level: Cocoa Touch is another name for the Interface level. The level contains a variety of
components that can be utilized to create a variety of interfaces. furthermore, the cocoa touch
provides information to the layers that the users generate.

3 Core OS: the core OS is also known as the Kernel level. the level works directly with the files system
and controls the validity of certificates that belong to the application. the Kernel-level is responsible
for the security of the entire system.

4 Media Level: this level contains the tools that are related to process all media formats.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

1.5 Mobile Apps Development Frameworks

Mobile platforms are the operating systems that power mobile devices such as smartphones and tablets.
There are two main mobile platforms: Android, which is developed by Google, and iOS, which is developed
by Apple.

Android is an open-source platform based on the Linux kernel. It is used by many device manufacturers,
including Samsung, LG, and HTC. Android apps are primarily written in Java, although Kotlin has become
increasingly popular in recent years. Android apps can be distributed through the Google Play Store, which is
the official app store for Android.

iOS is a closed platform that is used exclusively on Apple devices such as the iPhone and iPad. iOS apps are
primarily written in Swift or Objective-C. iOS apps can be distributed through the Apple App Store, which is
the official app store for iOS.

In addition to Android and iOS, there are other mobile platforms such as Windows Phone and Blackberry,
although these platforms have a much smaller market share than Android and iOS.

There are also several cross-platform development frameworks that allow developers to write apps that can
be deployed on multiple platforms. Some popular cross-platform frameworks include React Native, Xamarin,
and Flutter. These frameworks typically use web technologies such as HTML, CSS, and JavaScript to create
mobile apps that can be run on both Android and iOS.

This course will utilize the React Native cross-platform framework to demonstrate how to develop, test,
debug, and distribute mobile applications for both Android and iOS platforms.

1.5 Introduction to Design Principles for Mobile Apps

Design principles for mobile apps are essential to create engaging and user-friendly applications. Mobile
devices have a smaller screen size, and users interact with them differently than with desktop devices.
Therefore, it is crucial to consider these factors when designing mobile apps.

Some of the key design principles for mobile apps include:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

1 Simplicity: Mobile apps should have a clean and simple interface that is easy to use and understand.
The user interface should be designed in a way that allows users to accomplish tasks quickly and
efficiently.

2 Consistency: The design of mobile apps should be consistent throughout the app, including the use of
colors, fonts, and layout. Consistency helps users to navigate the app more easily and reduces
confusion.

3 Navigation: Navigation in mobile apps should be intuitive and straightforward. Users should be able
to move between screens and sections of the app with ease.

4 Responsiveness: Mobile apps should be responsive and fast. Users expect apps to respond quickly to
their input and to load content promptly.

5 Accessibility: Mobile apps should be accessible to all users, including those with disabilities. Design
elements such as text size and color contrast should be considered to ensure that the app is easy to use
for everyone.

By following these design principles, mobile app developers can create apps that are not only visually
appealing but also user-friendly and effective in meeting the needs of their users.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Curriculum (JavaScript, React and React Native)

JavaScript

Week 1: Introduction to JavaScript

 Variables and data types
 Operators
 Conditional statements
 Loops
 Functions
 Arrays
 Objects
Week 2: Intermediate JavaScript
 Higher-order functions
 Callbacks
 Scope and closures
 ES6 syntax (arrow functions, let and const)
 Promises
 Error handling
 Debugging techniques
Week 3: DOM Manipulation and Event Handling
 Selecting and manipulating HTML elements
 Event listeners and handlers
 Creating and modifying HTML elements
 Form handling
Week 4: Asynchronous JavaScript
 AJAX and HTTP requests
 Fetch API

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

 Async/await
 Working with JSON data
Week 5: Introduction to React
 JSX syntax
 Components and props
 State and lifecycle
 Rendering elements
 Handling events
Week 6: Advanced React
 Conditional rendering
 Lists and keys
 Forms and handling user input
 React Router
 Redux basics
Week 7: Building a React Application
 Planning and structuring an application
 Using third-party libraries
 Styling with CSS
 Testing and debugging
 Deploying a React application
React
Week 1: Introduction to React
 What is React?
 Setting up a React development environment
 Components and JSX
 Rendering and updating components

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

 Props and state

 Handling user input
 Conditional rendering
Week 2: React Fundamentals
 Lists and keys
 Forms and handling user input
 Lifecycle methods
 Composing components
 React Router
Week 3: Advanced React Topics
 Handling asynchronous data with AJAX
 Using Redux for state management
 Higher-order components
 React Context API
 React hooks
 Testing React components
Week 4: Building a React Application
 Planning and structuring an application
 Using third-party libraries and components
 Styling with CSS and preprocessors
 Optimizing performance
 Debugging techniques
 Deploying a React application
React Native
Week 1: Introduction to React Native
 What is React Native?

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

 Setting up a development environment

 Components and JSX in React Native
 Rendering and updating components
 Styling components with CSS
 Building layouts with Flexbox
 Handling user input
Week 2: React Native Fundamentals
 Navigation and routing with React Navigation
 Using APIs and handling asynchronous data with Axios
 Working with forms and input validation
 Persisting data with AsyncStorage
 Integrating with third-party libraries and components
Week 3: Advanced React Native Topics
 Animations and gestures
 Using Redux for state management
 Building custom components
 Using native modules and libraries
 Testing React Native components
 Deploying a React Native application
Week 4: Building a React Native Application
 Planning and structuring an application
 Optimizing performance and debugging techniques
 Adding push notifications and integrating with other device features
 Deploying a React Native application to app stores

Introduction to JavaScript

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

JavaScript is a programming language that allows you to add interactivity and dynamic behavior to web
pages. It is primarily used for client-side and server-side scripting and is supported by all modern web
browsers. Here's a simple example of JavaScript code:

Variables and Data Types: Variables are used to store data values in JavaScript. There are different types of
data that can be stored in variables, such as numbers, strings, booleans, arrays, and objects. Here's an
example:

Operators: Operators are used to perform operations on variables and values. JavaScript supports various
types of operators, such as arithmetic, assignment, comparison, logical, and more. Here's an example of using
arithmetic and comparison operators:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Conditional Statements: Conditional statements are used to make decisions based on certain conditions.
JavaScript provides if, else if, and else statements for conditional logic. Here's an example:

Loops: Loops allow you to repeat a block of code multiple times. JavaScript provides for and while
loops. Here's an example of a for loop:

Functions: Functions are reusable blocks of code that perform a specific task. They allow you to organize and
modularize your code. Here's an example of a function that calculates the square of a number:

There are three types of functions in JavaScript; Named functions, anonymous functions and arrow
functions.
1. Named Functions: Named functions are defined with a specific name and can be used by referencing that
name. They are declared using the function keyword, followed by the function name and a pair of
parentheses for parameters (if any). Here's an example of a named function:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2. Anonymous Functions: Anonymous functions, as the name suggests, do not have a specific name. They are
typically used as callbacks or assigned to variables for later use. Anonymous functions are defined without a
function name and can be invoked through the variable they are assigned to. Here's an example:

3. Arrow Functions: Arrow functions, also known as fat arrow functions, provide a concise syntax for writing
functions. They are a shorthand alternative to traditional function expressions. Arrow functions are defined
using the => arrow syntax and do not bind their own this value. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Arrays in JavaScript are used to store multiple values in a single variable. They are a fundamental data
structure and provide a way to organize and access data in an ordered manner. Arrays can hold elements of
any data type, including numbers, strings, booleans, objects, and even other arrays.

Here are some key points to understand about arrays in JavaScript:

1. Declaration and Initialization: Arrays can be declared and initialized using square brackets [] and a
comma-separated list of values enclosed within the brackets. Here's an example:

2.

Accessing Elements: Array elements are accessed using zero-based indexing. Each element has a
specific position in the array, starting from index 0. To access an element, you can use square brackets
along with the index. Here's an example:

In
this

example, the first element "apple" is accessed using index 0, and the third element "orange" is accessed using
index 2.

3. Modifying Elements: Array elements can be modified by assigning a new value to a specific index.
Here's an example:

In
this

example, the second element "banana" is replaced with "grape" using assignment.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

4. Array Length: The length property of an array gives the number of elements in the array. Here's an
example:

In
this

example, the length property is used to retrieve the number of elements in the fruits array.

5. Array Methods: JavaScript provides several built-in methods to perform operations on arrays. Some
commonly used array methods include push(), pop(), shift(), unshift(), splice(),
concat(), slice(), join(), indexOf(), and forEach(). These methods enable adding or
removing elements, combining arrays, searching for elements, iterating over array elements, and
more.

In this example, push() adds the "mango" element to the end of the fruits array, and pop() removes
and returns the last element.
shift(): The shift() method removes the first element from an array and returns that element. This
operation also updates the array, shifting all other elements down by one index. Here's an example:
In
this

example, shift() removes the first element "apple" from the fruits array and returns it.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2. unshift(): The unshift() method adds one or more elements to the beginning of an array and
returns the new length of the array. This operation also updates the array, shifting existing elements up
by one index. Here's an example:

In
this

example, unshift() adds the element "apple" to the beginning of the fruits array, and it returns the
new length of the array.

3. splice(): The splice() method allows adding, removing, or replacing elements in an array at a
specified index. It modifies the original array and returns the removed elements as a new array. Here's
an example:
In
this

example, splice() removes two elements starting from index 1 ("banana" and "orange") and adds "grape"
and "mango" at the same position.

4. concat(): The concat() method combines two or more arrays and returns a new array
containing the merged elements. The original arrays remain unchanged. Here's an example:
In
this

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

example, concat() merges the fruits array and the moreFruits array, creating a new array
combinedFruits.

5. slice(): The slice() method returns a shallow copy of a portion of an array into a new array. It
takes two optional parameters: the starting index and the ending index (exclusive). Here's an example:

In
this

example, slice() creates a new array slicedFruits containing elements from index 1 to index 3
(exclusive).

6. join(): The join() method converts all elements of an array into a single string. It concatenates
the elements using a specified separator and returns the resulting string. Here's an example:

Array Destructuring and Restructuring

Array destructuring and restructuring are techniques in JavaScript that allow you to extract values from
arrays and assign them to variables. They provide a concise and convenient way to work with array elements.

1. Array Destructuring: Array destructuring allows you to unpack values from an array into individual
variables. It provides a shorthand syntax to assign array elements to variables based on their position.
Here's an example:

In
this

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

example, the array fruits is destructured into three variables: firstFruit, secondFruit, and
thirdFruit. Each variable is assigned the corresponding value from the array based on their position.

Array destructuring can also be used with rest syntax to capture remaining elements into another array. Here's
an example:

In this

example, the first two elements are assigned to firstFruit and secondFruit, while the remaining
elements are captured in the restFruits array.

2. Array Restructuring: Array restructuring, also known as array packing, is the reverse process of array
destructuring. It allows you to create an array from variables or values and assign it to an array
variable. Here's an example:

In
this

example, the variables firstFruit, secondFruit, and thirdFruit are used to create the fruits
array.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Array restructuring is particularly useful when you have a set of variables or values that you want to combine
into an array.

Overall, array destructuring and restructuring provide a convenient way to extract and assign values from
arrays, making your code more concise and readable. They are powerful techniques that can simplify
working with array data in JavaScript.

Arrays Sorting
In JavaScript, arrays can be sorted using the sort() method, which arranges the elements of an array in
ascending order based on their string representations by default. However, for more complex sorting
requirements, you can provide a custom comparison function as an argument to the sort() method.

Here are a few approaches to sorting arrays:

1. Sorting in Ascending Order: By default, the sort() method sorts elements in ascending order based
on their string representations. Here's an example:

In
this

example, the numbers array is sorted using the sort() method, which arranges the elements in ascending
order.

2. Sorting in Descending Order: To sort an array in descending order, you can provide a custom
comparison function to the sort() method. The comparison function takes two parameters (a and b)
and returns a negative value if a should be placed before b, a positive value if b should be placed
before a, or 0 if the order remains unchanged. Here's an example:

In
this

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

example, the custom comparison function (a, b) => b - a is provided to the sort() method. This
function subtracts a from b, resulting in a negative value for descending order.

3. Sorting with Custom Comparison Function: You can provide a custom comparison function to the
sort() method to define a specific sorting criterion. For example, to sort an array of objects based
on a specific property, you can compare the values of that property in the comparison function. Here's
an example:

In this example, the students array is sorted based on the age property of each object. The custom
comparison function (a, b) => a.age - b.age subtracts the age of a from the age of b, resulting in
ascending order based on age.

By using custom comparison functions, you can sort arrays based on various criteria and achieve the desired
sorting order.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Objects
In JavaScript, an object is a fundamental data type that allows you to store and organize related data as key-
value pairs. Objects are used to represent real-world entities, concepts, or structures and provide a way to
group related data and functions together.

Here are some key points to understand about JavaScript objects:

1. Object Declaration: Objects can be declared using object literal notation, which is a comma-separated
list of key-value pairs enclosed within curly braces `{}`. The keys are strings that represent the
property names, and the values can be any valid JavaScript data type. Here's an example:

In
this

example, the person object is declared with three properties: name, age, and gender, along with their
respective values.

2. Accessing Object Properties: Object properties can be accessed using dot notation or bracket notation.
Dot notation involves using the object name followed by a dot . and the property name. Bracket
notation uses square brackets [] and the property name as a string. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In
this

example, the name property is accessed using dot notation, and the age property is accessed using bracket
notation.

3. Modifying Object Properties: Object properties can be modified by assigning a new value to a
specific property. Here's an example:

In
this

example, the age property is modified using dot notation, and the gender property is modified using
bracket notation.

4. Object Methods: Objects can also contain functions, known as methods, as property values. These
methods can perform actions or computations related to the object. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this example, the greet property is a method that logs a greeting message using the name property of
the person object.

5. Object Iteration: You can iterate over an object's properties using various methods, such as
for...in loop or Object.keys() method. This allows you to perform operations on each
property of the object. Here's an example:

In
this

example, the for...in loop is used to iterate over the properties of the person object and log their key-
value pairs.

JavaScript objects provide a powerful way to represent and manipulate complex data structures. They are
widely used in JavaScript applications for organizing and managing data in a structured manner.

More Ways to Loop Over an Object

In addition to the for...in loop and the Object.keys() method, there are a few more ways to iterate
over an object in JavaScript:

1. Object.values(): The Object.values() method returns an array of the object's property

values. You can then iterate over this array using any array iteration method, such as forEach(),
map(), or a simple for loop. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this

example, Object.values(person) returns an array of the values in the person object, and
forEach() is used to iterate over the values and log them.

2. Object.entries(): The Object.entries() method returns an array of the object's key-

value pairs as arrays. Each inner array contains two elements: the key and the corresponding value.
You can iterate over this array using any array iteration method. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this

example, Object.entries(person) returns an array of arrays, each containing the key-value pairs of
the person object. The forEach() method is used to iterate over these inner arrays, and destructuring is
used to assign the key and value to separate variables.

3. for...of loop with Object.entries(): You can also use a for...of loop in combination
with Object.entries() to iterate over the key-value pairs directly. Here's an example:

In
this

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

example, Object.entries(person) returns an iterable that can be directly used with a for...of
loop. The destructuring syntax is used to assign the key and value to separate variables within each iteration.

These additional ways to iterate over an object offer more flexibility and options over the previous options.

Object Destructing and Restructuring

Object destructuring and restructuring are techniques in JavaScript that allow you to extract values from
objects and assign them to variables. They provide a convenient way to work with object properties and
enable you to access and manipulate specific values with ease.

1. Object Destructuring: Object destructuring allows you to unpack values from an object into individual
variables. It provides a concise syntax to assign object properties to variables based on their names.
Here's an example:

In this

example, the person object is destructured into three variables: name, age, and gender. Each variable is
assigned the value of the corresponding property from the object.

Object destructuring also allows you to assign default values to variables in case the property is undefined in
the object. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this example, the gender property is not present in the person object, so the default value "unknown"
is assigned to the gender variable.

2. Object Restructuring: Object restructuring, also known as object packing, is the reverse process of
object destructuring. It allows you to create a new object or modify an existing object by using
variables or values. Here's an example:

In this

example, the variables name and age are used to create the person object. The properties of the object are
assigned the values of the corresponding variables.

Object restructuring can also be used to extract specific properties from an object and create a new object
with those properties. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this

example, the name and age properties are extracted from the person object and used to create the
newPerson object.

Object destructuring and restructuring provide a concise and powerful way to work with object properties in
JavaScript. They help simplify code and improve readability by allowing you to extract and assign values
more efficiently.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2.0 Intermediate JavaScript

 Higher-order functions
 Callbacks
 Scope and closures
 ES6 syntax (arrow functions, let and const)
 Promises
 Error handling
 Debugging techniques

2.1 Higher-order functions

JavaScript higher-order functions are functions that can take other functions as arguments or return functions
as their results. They provide a powerful and flexible way to work with functions and enable functional
programming paradigms. Here are a few examples of JavaScript higher-order functions:

1. map(): The map() method applies a provided function to each element in an array and returns a new
array containing the results. Here's an example:

In this

example, the map() function takes an arrow function that multiplies each element of the numbers array by
itself. The resulting array, squaredNumbers, contains the squared values.

2. filter(): The filter() method creates a new array with all elements that pass a provided test.
It takes a callback function as an argument that determines the condition for filtering. Here's an
example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this

example, the filter() function uses the arrow function to test each element of the numbers array. The
callback function checks if the number is even (num % 2 === 0), and only the even numbers are included
in the resulting array, evenNumbers.

3. reduce(): The reduce() method applies a function to reduce an array to a single value. It
iterates through the array, accumulating the result at each step. Here's an example:

In
this

example, the reduce() function takes a callback function and an initial value of 0. The callback function
adds each element of the numbers array to the total accumulator, resulting in the sum of all the numbers.

4. forEach(): The forEach() method executes a provided function once for each array
element. It does not return a new array and is primarily used for iterating over an array. Here's an
example:

In this

example, the forEach() function iterates through each element of the numbers array and logs it to the
console.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

5. some(): The some() method tests whether at least one element in the array passes a provided
condition. It returns true if any element satisfies the condition; otherwise, it returns false. Here's
an example:

In this

example, the some() function checks if any number in the numbers array is even. Since 2 and 4 are even
numbers, the result is true.

6. every(): The every() method tests whether all elements in the array satisfy a provided condition. It
returns true if every element passes the condition; otherwise, it returns false. Here's an example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2.2 Callbacks
In JavaScript, a callback is a function that is passed as an argument to another function and is invoked or
executed inside that function. Callbacks are a fundamental concept in JavaScript and are widely used to
achieve asynchronous and event-driven programming.

Callbacks are commonly used in JavaScript for asynchronous operations, such as making API requests,
reading files, or handling events. They allow us to specify what should happen once an asynchronous task is
completed or an event is triggered. This enables non-blocking behavior and helps in managing the flow of
control in asynchronous programming scenarios.

Examples
Here's an example that demonstrates the concept of callbacks:
In this

example, we have a function called greet() that takes two arguments: name and callback. The
greet() function logs a greeting message using the provided name and then invokes the callback
function.

We also define another function called sayGoodbye() which simply logs a "Goodbye!" message.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

When we call the greet() function and pass "John" as the name argument and sayGoodbye as the
callback, the greeting message "Hello, John!" is logged, and then the callback function
sayGoodbye() is invoked, resulting in the "Goodbye!" message being logged.

2. Event Handling: Callbacks are commonly used to handle events in JavaScript. For example, when a button
is clicked, you can specify a callback function that should be executed when the click event occurs:

In this

example, we pass an anonymous function as the callback to the addEventListener() method. The
function is executed whenever the "click" event is triggered on the button with the ID "myButton".

3. Asynchronous Operations: Callbacks are extensively used for asynchronous operations, such as fetching
data from an API or performing database queries. Here's an example using the setTimeout() function to
simulate an asynchronous delay:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this example, the fetchData() function simulates an asynchronous operation with a delay of 2000
milliseconds (2 seconds). It invokes the callback function processData() and passes the received data as
an argument.

4. Array Iteration: Callbacks can be used with array methods such as forEach(), map(), and filter().
Here's an example using the forEach() method:

In this

example, we use the forEach() method to iterate over each element in the numbers array. The callback
function multiplies each number by 2 and logs the result.

Callbacks are a powerful feature of JavaScript that enable flexibility and extensibility in code. They allow us
to define custom behavior that can be executed at specific times, in response to events, or after asynchronous
operations complete. By using callbacks, we can write code that is modular, reusable, and capable of
handling diverse scenarios.

2.3 Scope and closures

2.3.1 Scope
Scope refers to the accessibility or visibility of variables, functions, and objects in some particular part of
your code during runtime. In JavaScript, there are two main types of scope: global scope and local scope.

1. Global Scope: Variables declared outside of any function have global scope. They can be accessed
from anywhere within the program, including inside functions. For example:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this example, the variable globalVariable is declared outside of any function, making it accessible
globally.

2. Local Scope: Variables declared inside a function have local scope. They are only accessible within
the function where they are declared. For example:

In this example, the variable localVariable is declared inside the bar() function and can only be
accessed within that function. Trying to access it outside the function will result in an error.

2.3.2 Closures
Closures, on the other hand, are functions that remember the environment in which they were created, even if
they are executed outside that environment. Closures allow functions to access variables from their outer
(enclosing) scope, even after the outer function has finished executing.

Here's an example of a closure:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this example, the outerFunction() defines an innerFunction() that can access the
outerVariable declared in its outer scope. The outerFunction() returns the innerFunction,
which is assigned to the closureFunction variable. When the closureFunction is invoked, it still has
access to the outerVariable due to the closure created during the creation of innerFunction.

Closures are powerful as they allow you to maintain and encapsulate data within a function, even after the outer
function has finished executing. They provide a way to create private variables and implement various design
patterns in JavaScript.

Understanding scope and closures is crucial for writing clean and maintainable JavaScript code and for handling
variable visibility and data encapsulation effectively.

2.3.3 Promises
Promises are a feature introduced in JavaScript to handle asynchronous operations in a more structured and
manageable way. They provide an alternative to using callbacks, making it easier to work with asynchronous
code and handle the results or errors that may occur.

A promise represents the eventual completion or failure of an asynchronous operation and can have three
possible states: pending, fulfilled, or rejected. Here's how a promise is typically constructed:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In the
above
code,
a new

promise is created using the `Promise` constructor, which takes a callback function as an argument. The
callback function receives two parameters: `resolve` and `reject`. Inside the callback function, you
perform your asynchronous operation, such as making an API call or reading a file. If the operation is
successful, you call `resolve(result)` with the result value. If there's an error, you call
`reject(error)` with the error object.

Once a promise is created, you can chain `.then()` and `.catch()` methods to handle the resolved value
or catch any errors that occur. Here's an example:

The

`.then()` method is called when the promise is fulfilled, and it takes a callback function that receives the
resolved value as an argument. You can perform any desired operations with the resolved value inside this
callback. On the other hand, the `.catch()` method is called when the promise is rejected, and it takes a
callback function that receives the error object as an argument. You can handle errors and perform error-specific
tasks inside this callback.

Promises can also be chained together using multiple `.then()` methods to create a sequence of
asynchronous operations that depend on each other. Each `.then()` returns a new promise, allowing you to
chain subsequent operations.

Here's how promises work:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

1. Create a new Promise object: The Promise constructor takes a function as an argument, which is
called the executor function. The executor function has two parameters: resolve and reject. Inside
the executor function, you perform the asynchronous operation. If the operation is successful, you call
resolve(result) with the result value. If there is an error, you call reject(error) with the
error value.

2. Attach callbacks: After creating the promise, you can attach callbacks using the `.then()` and
`.catch()` methods. The `.then()` method is called when the promise is resolved (i.e., the
asynchronous operation is successful), and it takes a callback function that handles the resolved value.
The `.catch()` method is called when the promise is rejected (i.e., there is an error), and it takes a
callback function that handles the rejection reason.

Promises provide a more structured and readable way to handle asynchronous code compared to nested
callbacks. They help avoid callback hell and make error handling more straightforward. They are widely used in
modern JavaScript, especially when working with APIs, performing network requests, or any other
asynchronous operations. To fetch Data from an API for example, a promise could be used as shown in the
example below:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In this

example, the `fetchData()` function returns a Promise that fetches data from an API using the `fetch()`
function. When the data is successfully retrieved, the Promise resolves with the data. If any errors occur during
the fetch operation, the Promise rejects with the error. The resolved data can then be accessed in the
`.then()` method, and any errors can be handled in the `.catch()` method. To read a File, the following
code can be used:

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

In
this

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

example, the readFile function takes a file as a parameter and returns a Promise. Inside the Promise's
executor function, we create a FileReader object and define the onload and onerror event handlers.

The onload event handler is responsible for resolving the Promise with the file content when the file
reading is successful. The file content is accessed through event.target.result.

The onerror event handler is triggered if there is an error during the file reading process. In such cases, we
call reader.abort() to abort the reading process and reject the Promise with an error.

Finally, we use reader.readAsText(file) to read the file as text. You can use other methods like
readAsDataURL() or readAsArrayBuffer() depending on the type of file you are reading.

To use the readFile function, you can add an event listener to the file input element, just like in the
previous example. When the file input changes, the selected file is passed to the readFile function, and
you can handle the file content using the resolved Promise value or catch any errors with the rejected
Promise.

Using Promises provides a more structured and manageable way to handle asynchronous file reading
operations, allowing you to chain multiple asynchronous operations together or handle errors using
.then() and .catch() respectively.

2.3.3 Error Handling

In JavaScript, error handling is crucial for handling and managing runtime errors and exceptions that occur
during the execution of your code. Effective error handling helps prevent program crashes and allows you to
gracefully handle and recover from errors. JavaScript provides several mechanisms for error handling:

1. try...catch statement: The try...catch statement allows you to catch and handle exceptions
within a specific block of code. You enclose the code that may throw an exception within the try
block, and if an exception is thrown, it is caught and handled in the catch block.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

If an exception is thrown within the try block, the code execution jumps to the corresponding catch
block, and the exception is assigned to the error variable. You can then handle the exception within the
catch block by executing custom error-handling code.

2. throw statement: The throw statement allows you to manually throw a new exception. You
can use it to create and throw custom error objects or to re-throw exceptions caught in a catch
block.

When an exception is thrown, the normal code flow is interrupted, and the control jumps to the nearest
try...catch block or, if not caught, to the global error handler.

3. Global error handler: If an exception is not caught within a try...catch block, it is considered
an unhandled exception, and the JavaScript runtime environment provides a global error handler to
catch such exceptions. You can attach an event listener to the window object's error event to
handle uncaught exceptions.

By listening to the error event, you can capture unhandled exceptions, log error details, and perform any
necessary actions.

It's important to note that error handling should be used judiciously and applied where necessary to handle
exceptional scenarios. Proper error messages and meaningful handling allow for better debugging and
improve the user experience of your applications.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

Additionally, you can also use try...catch and throw statements in conjunction with Promises to
handle asynchronous errors. By catching errors in the catch block of a Promise chain, you can handle any
exceptions that occur during asynchronous operations.

In this example, if the fetch request fails or the response is not successful, an error is thrown. The error is
then caught in the subsequent `.catch()` block, allowing you to handle the error and log appropriate
messages.

By using proper error handling techniques, you can detect and manage exceptions, log errors, provide
fallback options, and improve the stability and reliability of your JavaScript code.

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

2.3.3 Debugging Techniques

Debugging is an essential part of JavaScript development that helps identify and fix errors and issues in your
code. Here are some commonly used debugging techniques in JavaScript:
1. Console.log: One of the simplest and most widely used debugging techniques is inserting
console.log() statements in your code. You can output variables, object properties, or specific messages
to the browser console to get insights into the state and flow of your program.

By examining the logged values and messages in the console, you can track the execution path and identify
potential issues.

2. Browser Developer Tools: All modern browsers come with built-in developer tools that provide powerful
debugging capabilities. These tools allow you to inspect and analyze your JavaScript code, HTML structure,
CSS styles, network requests, and more.

• To open the browser's developer tools, right-click on a web page and select "Inspect" or use the
keyboard shortcut (e.g., F12 in Chrome and Firefox).

• Use the "Console" tab to log messages and interact with the console directly.

• Utilize the "Sources" tab to navigate through your JavaScript files, set breakpoints, step through code
execution, and examine variables and their values.

• The "Network" tab helps analyze network requests and responses, including AJAX calls and API
interactions.

3. Breakpoints: Breakpoints allow you to pause the execution of your code at specific lines or statements. By
setting breakpoints in your code using the browser's developer tools, you can inspect variables, step through
the code line by line, and examine the program's state at each breakpoint.

4. Step-by-step Execution: With the help of browser developer tools, you can execute your code step by step,
which allows you to understand how the program flows and identify any unexpected behavior. Common

Course Lecturer: Muhammad Salisu Ali ([email protected])

 Department of Cyber Security Faculty of Computing, Federal University Dutse

CIT 407 / CSE 413 – Mobile Applications Development

step-by-step execution techniques include stepping into functions, stepping over statements, and stepping out
of functions.

5. Debugger Statement: The debugger statement is a handy tool for initiating a debugging session directly
from your code. When the JavaScript engine encounters the debugger statement, it pauses execution and
opens the browser's developer tools at that point, allowing you to inspect variables and execute code step by
step.

6. Stack Traces: When an error occurs, JavaScript generates a stack trace that provides information about the
sequence of function calls that led to the error. The stack trace is logged to the browser console, helping you
identify the source of the error and the function calls involved.

7. Watch Expressions: Watch expressions allow you to monitor the value of variables or expressions during
debugging. By adding variables or expressions to the watch list in the developer tools, you can observe their
values change as the code executes, helping you track down unexpected behavior.

These techniques can be used individually or in combination to debug JavaScript code effectively. It's
important to have a good understanding of these techniques and practice using them to diagnose and resolve
issues efficiently.

Course Lecturer: Muhammad Salisu Ali ([email protected])