Menu
close
Apply Now
Contact
Parent Programme
Bachelor in Computing (Level 7 NFQ)
NFQ Level & Reference
Level 6 / Ref: M2.11
Duration
12 Weeks X 3 Hours each week
MODULE TITLE
Front-end Web Development 2
STAGE
2
Monule Credit Unit
ECTS: 5

Front-end Web Development 2

Introduction to Front-end Web Development

The aim of this module is to equip learners with intermediate-level expertise in modern, client-side JavaScript software development.

Learners will acquire the concepts and skills that will enable them to build client-facing JavaScript-driven applications that conform to ES5/ES6 standards.

Indicative Syllabus Content

Front-end Web Development 2

JavaScript Fundamentals

  • Introduction – language evolution, integrating JS with HTML, deferring script loading
  • Working with web browser Developer Tools, testing and debugging techniques
  • Code structure – variables and scope, data types, naming conventions, statements and expressions, template literals
  • Basic operations – arithmetic, operator precedence, type conversion and coercion

Functions

  • Function declarations, anonymous function expressions, and arrow functions
  • Calling functions, storing results in variables, passing arguments to functions
  • Special syntax of single-line, single-argument arrow functions

Making Decisions with JavaScript

  • Comparison and logical operators, if/else branching, ternary operator, switch statements
  • Equality operators: == and ===, truthy and falsy values

Document Object Model (DOM) Manipulation and Event Handling

  • The Document Object Model (DOM) – getting/ setting elements and styling with CSS.
  • Handling events in the DOM: event handlers, event listeners, event propagation

Iteration, Arrays, and Objects

  • JavaScript loops – for loops with breaking and continuing, while, do while loops
  • Arrays – indexes, creating, populating, updating, common ES5/ES6 array methods
  • Objects – built-in and developer-created objects, keys, practical use cases, JSON data format

Asynchronous JavaScript and APIs

  • Blocking code and non-blocking code models, callback and higher-order functions
  • Request, Response, and Promise objects
  • Fetch API with promise chaining and async/await syntax, error handling

Minimum Intended Learning Outcomes (MIMLOs)

Upon successful completion of this module, the learner should be able to:
MIMLO1
Develop code that performs basic string and arithmetic operations, integrate into an HTML page, and debug and test with DevTools.
MIMLO2
Construct functions of different types, demonstrating an understanding of scope, arguments, and return values.
MIMLO3
Evaluate the use of various decision-making constructs and select the most appropriate for a given programming scenario.
MIMLO4
Manipulate dynamically the Document Object Model (DOM) and apply event propagation to manage user interactions.
MIMLO5
Manipulate arrays and objects by performing looping, indexing, and updating operations with ES5/ES6 methods.
MIMLO6
Design and implement web apps with remote content retrieved asynchronously, including error handling.

Assessment

MIMLOs
Assessment
Percentage
1, 2, 3, 4, 5, 6
CA 1 – Practical Lab Work (In-class examination)
Total 100%
CA 2 – Practical Lab Work (In-class examination)
All Assessments
CA 3 – Personal Portfolio – Practical Web site Project

Reassessment Opportunity

Where the combined marks of the assessment and examination do not reach the pass mark the learner will be required to repeat the element of assessment that they failed. Reassessment materials will be published on Moodle after the Examination Board Meeting and will be aligned to the MIMLOs and learners will be capped at 40% unless there are personal mitigating circumstances.

Aims & Objectives

The objectives of this module will ensure learners:

  • Incorporate JavaScript code in web pages and use browser DevTools for testing/debugging.
  • Work with variables, data types, template literals, and operators.
  • Implement various function types; hoisting, arguments, and return values.
  • Select appropriate control/branching structures for various decision-making use cases.
  • Manipulate the Document Object Model (DOM) and respond to user actions.
  • Perform basic operations on arrays and objects with modern ES5/ES6 methods.
  • Access content from remote databases with the asynchronous Fetch API.
[TheChamp-Sharing]
APPLY NOW
Top