Scribd
Upload
36 views

Training Assignment: Front-End Advanced

This document provides specifications for three programming assignments for a front-end advanced training course. The first specification involves writing a Vec class to represent vectors with plus and minus methods and a length property. The second specification involves writing a Group class similar to JavaScript's Set, with add, delete, and has methods. The third specification asks how to call hasOwnProperty on an object that itself has a hasOwnProperty property.

Uploaded by

Nguyễn Đức Đạt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

Training Assignment: Front-End Advanced

This document provides specifications for three programming assignments for a front-end advanced training course. The first specification involves writing a Vec class to represent vectors with plus and minus methods and a length property. The second specification involves writing a Group class similar to JavaScript's Set, with add, delete, and has methods. The third specification asks how to call hasOwnProperty on an object that itself has a hasOwnProperty property.

Uploaded by

Nguyễn Đức Đạt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Front-end Advanced

T ra ining A s s ignme nt

Document Code 25e-BM/HR/HDCV/FSOFT

Version 1.1

Effective Date 7/1/2019

Hanoi, mm/yyyy
Training Assignments Front-end Advanced Issue/Revision: x/y

RECORD OF CHANGES

No Effective Date Change Description Reason Reviewer Approver

1 30/May/2019 Create a new assignment Create new DieuNT1 VinhNV

2 07/Jun/2019 Update Fsoft Template Update DieuNT1 VinhNV

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 2/5


Training Assignments Front-end Advanced Issue/Revision: x/y

Contents
Unit 5: OOP and Prototypes ............................................................................................................................... 4
Objectives ................................................................................................................................................... 4
Specification 1 ............................................................................................................................................ 4
Specification 2 ............................................................................................................................................ 4
Specification 3 ............................................................................................................................................ 5

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 3/5


Training Assignments Front-end Advanced Issue/Revision: x/y

CODE: JS-A.M.A501 (OOP)


TYPE: Medium
LOC: 300
DURATION: 120 minutes

Unit 5: OOP and Prototypes


Objectives

• Understand the core concepts, step to analysis, design and program to OOP
• Able to recognize class, field, method, interactions between classes
• Understand the 4 attributes of OOP: Abstraction, Inheritance, Encapsulation and Polymorphism
• Undertand OOP Principles to create Abstract class, Interface
Specification 1
Write a class Vec that represents a vector in two-dimensional space. It takes x and y parameters (numbers),
which it should save to properties of the same name.
Give the Vec prototype two methods, plus and minus, that take another vector as a parameter and return a
new vector that has the sum or difference of the two vectors’ (this and the parameter) x and y values.
Add a getter property length to the prototype that computes the length of the vector—that is, the distance of
the point (x, y) from the origin (0, 0).

Expected Output:
1. // Your code here.
2. console.log(new Vec(1, 2).plus(new Vec(2, 3)));
3. // => Vec{x: 3, y: 5}
4. console.log(new Vec(1, 2).minus(new Vec(2, 3)));
5. // => Vec{x: -1, y: -1}
6. console.log(new Vec(3, 4).length);
7. // => 5
Specification 2
The standard JavaScript environment provides another data structure called Set. Like an instance of Map, a
set holds a collection of values. Unlike Map, it does not associate other values with those—it just tracks
which values are part of the set. A value can be part of a set only once—adding it again doesn’t have any
effect.
Write a class called Group (since Set is already taken). Like Set, it has add, delete, and has methods. Its
constructor creates an empty group, add adds a value to the group (but only if it isn’t already a
member), delete removes its argument from the group (if it was a member), and has returns a Boolean value
indicating whether its argument is a member of the group.
Use the == operator, or something equivalent such as indexOf, to determine whether two values are the
same.
Give the class a static from method that takes an array as argument and creates a group that contains all
the values produced by iterating over it.

Expected Output:
1. class Group {
2. // Your code here.
3. }
4.
5. let group = Group.from([10, 20]);
6. console.log(group.has(10));
7. // → true
8. console.log(group.has(30));
9. // → false
10. group.add(10);
11. group.delete(10);
12. console.log(group.has(10));
13. // → false

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 4/5


Training Assignments Front-end Advanced Issue/Revision: x/y

Specification 3
Earlier in the chapter I mentioned that an object’s hasOwnProperty can be used as a more robust alternative
to the in operator when you want to ignore the prototype’s properties. But what if your map needs to include
the word "hasOwnProperty"? You won’t be able to call that method anymore because the object’s own
property hides the method value.
Can you think of a way to call hasOwnProperty on an object that has its own property by that name?

Expected Output:
1. let map = { one: true, two: true, hasOwnProperty: true };
2.
3. // Fix this call
4. console.log(map.hasOwnProperty.call(‘one’));
5. // → true

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 5/5

You might also like