COMP06243 2018 Client Side Scripting

General Details

Full Title
Client Side Scripting
Transcript Title
Client Side Scripting
Code
COMP06243
Attendance
N/A %
Subject Area
COMP - 0613 Computer Science
Department
COEL - Computing & Electronic Eng
Level
06 - Level 6
Credit
05 - 05 Credits
Duration
Semester
Fee
Start Term
2018 - Full Academic Year 2018-19
End Term
9999 - The End of Time
Author(s)
Una LEstrange, John Weir, Colm Davey
Programme Membership
SG_KAPPL_H08 201800 Bachelor of Arts (Honours) in Computing in Application Design and User Experience SG_KSMAR_H08 201800 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KSODV_H08 201800 Bachelor of Science (Honours) in Computing in Software Development SG_KAPPL_B07 201800 Bachelor of Arts in Computing in Application Design and User Experience SG_KCMPU_H08 201800 Bachelor of Science (Honours) in Computing SG_KSMAR_C06 201800 Higher Certificate in Science in Computing in Smart Technologies SG_KSMAR_B07 201800 Bachelor of Science in Computing in Smart Technologies SG_KAPPL_C06 201800 Higher Certificate in Science in Computing in Application Design and User Experience SG_KSODV_B07 201800 Bachelor of Science in Computing in Software Development SG_KSODV_C06 201800 Higher Certificate in Science in Software Development SG_KCMPU_C06 201800 Higher Certificate in Science in Computing in Computing SG_KCMPU_B07 201800 Bachelor of Science in Computing in Computing SG_KSOFT_B07 201800 Bachelor of Science in Computing in Software Development SG_KAPPL_H08 201900 Bachelor of Arts (Honours) in Computing in Application Design and User Experience SG_KSMAR_H08 201900 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KSODV_H08 201900 Bachelor of Science (Honours) in Computing in Software Development SG_KCMPU_H08 201900 Bachelor of Science (Honours) in Computing SG_KSMAR_C06 201900 Higher Certificate in Science in Computing in Smart Technologies SG_KCMPU_C06 201900 Higher Certificate in Science in Computing in Computing SG_KCMPU_B07 201900 Bachelor of Science in Computing in Computing SG_KSODV_B07 201900 Bachelor of Science in Computing in Software Development SG_KCMPU_H08 202000 Bachelor of Science (Honours) in Computing SG_KSODV_H08 202000 Bachelor of Science (Honours) in Computing in Software Development SG_KSMAR_H08 202000 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KAPPL_H08 202100 Bachelor of Arts (Honours) in Computing in Application Design and User Experience SG_KSODV_B07 202100 Bachelor of Science in Computing in Software Development SG_KSODV_H08 202100 Bachelor of Science (Honours) in Computing in Software Development SG_KCMPU_H08 202100 Bachelor of Science (Honours) in Computing SG_KCMPU_C06 202100 Higher Certificate in Science in Computing SG_KCMPU_B07 202100 Bachelor of Science in Computing SG_KSMAR_H08 202100 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KSODV_H08 202200 Bachelor of Science (Honours) in Computing in Software Development SG_KCMPU_H08 202200 Bachelor of Science (Honours) in Computing SG_KSODV_H08 202400 Bachelor of Science (Honours) in Computing in Software Development SG_KCMPU_H08 202400 Bachelor of Science (Honours) in Computing
Description

Modern web applications rely on code that runs in a browser to deliver much of the interactivity available to users of websites and this module will enable students to develop scripts at the client end to provide an interactive user experience. The learner will gain a thorough knowledge of JavaScript while understanding the need for client-side scripting and its place in application development. The learner will obtain the relevant knowledge to be able to sit the MTA ‘Introduction to Programming using JavaScript’ Microsoft exam.

Learning Outcomes

On completion of this module the learner will/should be able to;

1.

Describe the need for client side scripting and the fundamentals of the JavaScript language

2.

Debug scripts using browser debugging tools and appraise appropriate IDEs

3.

Dynamically style a webpage employing knowledge of the Document and Browser Object Model

4.

Consume data from an API and employ AJAX to render JSON data from a server

Teaching and Learning Strategies

The lecture will be used to explain key concepts. A flipped learning approach will be used from time to time. The lab classes will be used to code practical examples of tasks, based on worksheets.

Appropriate materials will be available on video for out of class use for learners who find certain concepts difficult.

Module Assessment Strategies

An in-class assessment worth 20% will take place in week 6, with an out of class assignment worth 30% (dynamically manipulate a website) taking place in week 10, over two weeks. The terminal exam will be an open book, lab-based exam.

Repeat Assessments

The repeat exam (open book, lab-based) will cover all learning outcomes

Indicative Syllabus

Describe the need for client-side scripting and the fundamentals of the JavaScript language

  • The evolution of the client device and range of devices available
  • Lexical structure (literals, identifiers, reserved words etc.)
  • Data types, conditional processing, arrays, objects
  • Functions and Methods, passing objects, callbacks
  • Event listeners and the event-driven model, IIFE

Debug scripts using browser debugging tools and appraise appropriate IDEs

  • The Document Object Model and how to manipulate elements  and attributes
  • Using a browser to debug code (breakpoints, stepping into/over, blackboxing)
  • Use tools such as JSHint to analyse code
  • Using Chrome Developer Tools and Firebug,
  • Installing and configuring small footprint IDEs (e.g. Brackets)
  • Adding extensions to IDEs and linting options (e.g. ESLint)

 Dynamically style a webpage employing knowledge of the Document and Browser Object Model

  • Setting attributes and manipulating CSS with JavaScript methods
  • The difference between the DOM and BOM
  • The DOM tree, node types and node navigation
  • Dynamically adding/removing elements to/from the DOM tree
  • JavaScript methods element styling and manipulation
  • Functions as arguments and JavaScript callbacks

Consume data from an API and employ AJAX to render JSON data from a server

  • Understand the purpose of an API (e.g. Google maps, OMDb)
  • Consuming data from an API and rendering to a browser 
  • Implementing plugins for specific tasks
  • AJAX and JSON (the XMLHttpRequest object)

Coursework & Assessment Breakdown

Coursework & Continuous Assessment
50 %
End of Semester / Year Formal Exam
50 %

Coursework Assessment

Title Type Form Percent Week Learning Outcomes Assessed
1 Evaluation of core JavaScript concepts Coursework Assessment Open Book Exam 20 % Week 6 1
2 Dynamically redesign an existing website Coursework Assessment Assignment 30 % Week 11 2,3,4
             

End of Semester / Year Assessment

Title Type Form Percent Week Learning Outcomes Assessed
1 Terminal Exam Final Exam Open Book Exam 50 % End of Semester 1,3,4
             
             

Full Time Mode Workload


Type Location Description Hours Frequency Avg Workload
Lecture Lecture Theatre Lecture 1 Weekly 1.00
Practical / Laboratory Computer Laboratory Lab practical work 3 Weekly 3.00
Independent Learning Not Specified Independent learning 3 Weekly 3.00
Total Full Time Average Weekly Learner Contact Time 4.00 Hours

Required & Recommended Book List

Recommended Reading
2016-11-04 JAVASCRIPT: Easy JavaScript Programming For Beginners. Your Step-By-Step Guide to Learning JavaScript Programming (JavaScript Series) CreateSpace Independent Publishing Platform
ISBN 1539929183 ISBN-13 9781539929185
Recommended Reading
2016-09-16 Understanding Ecmascript 6 No Starch Press
ISBN 1593277571 ISBN-13 9781593277574
Recommended Reading
2017-08-24 Json for Beginners: Your Guide to Easily Learn Json In 7 Days Independently published
ISBN 1549578456 ISBN-13 9781549578458

Module Resources

Journal Resources

NA

URL Resources

https://developer.mozilla.org/en-US/

https://www.w3.org/

http://jquery.com/

https://www.npmjs.com/

http://stackoverflow.com/

Other Resources

Virtual machines

 

Additional Information

NA