Clilstore Facebook WA Linkedin Email
Login

This is a Clilstore unit. You can link all words to dictionaries.

Built-in Objects and User Created Objects in JavaScript

Inici

1. Video 1

Watch the following video about "Time zone" changes around the world:

 

After watching the video, click on the button "Video activity 1" and try to fill all the gaps listening to the video again.

2. Date Formats Around The World

Look at the following world map which shows de different date formats around the world. After studying it, try to show the date format used by JavaScript as indicated below.

Date Format Wold Map

Now, open "Sublime Text" and create a new Date object as shown below:

let now = new Date();

console.log(now);

Now answer the following questions:

3. Time zones

Follow the link shown below and investigate the different existing time zones. Discuss with your partner the questions below. You can use the substitution table in case you need some help:

Time Zone Map Link

Time zones map

 Questions:

  1. What curious facts can you see in the map?
  2. What is the country with more time zones?
  3. What do the stripped zones mean?
  4. Why the time zones are horizontal instead of vertical in Australia?

Substitution table:

4. Programming Time Zones

Click the button "Date methods" and explain the different methods of the object Date(), like in the following substitution table:

DateMethods

Question:

Evaluate each method and decide which one fits better depending on the different situations. For each situation, you must take one of the possible options, typing the corresponding programming code. Afterwards, discuss your option with your partners, justifying your opinion and debating the best option. You can use the substitution table below:

Substitution Table 2

Situation 1: We want to calculate the number of days between two dates of the same country.

Situation 2: We want to calculate the number of months between two historic acts.

Situation 3: We want to calculate the number of weeks between two dates of different countries taking into account the daylight saving between them.

5. Video 2

Watch the first four minutes of the following video about some JavaScript array methods.

 

Then, try to complete the JCloze activity clicking the button "Video activity 2".

6. Queues and stacks

Imagine these both situations:

Think of other situations and classify them depending on their structure, discussing with your partners about if they belong to a queue or a stack configuration.

Question: What of the previous JavaScript methods will be concerned in each situation? Guess the names of the corresponding methods in the following images:

Image of queue and stack

7. Nested structures

Click on the button "Nested structure algorithm" and try to order the steps in order to program a function in order to check if a structure is properly nested. Take into account the sequence words involved for guessing what the step order is.

Afterwards, try to explain the correct algorithm steps to a colleague using this sequence words:

Sequence words

Questions:

Look at the following nested structures:

  1. (){}[]
  2. ({[]})
  3. ({}[()])
  4. [{}[([]{})]]

Do you think they are properly nested? Why? What main features must this kind of structures accomplish? Discuss it in pairs.

 

What kind of structure will you use to determine if a structure is properly nested or not? A queue or a stack? Why? Discuss it with your partner.

8. Program your function

Taking into account the algorithm and the structure needed. Write a function:

function solution(S){...};

that, given a string S consisting of N characters, returns 1 if S is properly nested and 0 otherwise. (Use "Sublime text" software)

9. Creating user methods

Now that we know how built-in objects work and what properties and methods are, it's time to program our own objects.

Read the following definition of what an object is in JavaScript:

“In computer programming, each physical thing in the world can be represented as an object, for instance, a hotel or a car. Programmers might say that one particular hotel or car is an instance of the hotel or the car object. Each object can have its own properties, events and methods; together they create a working model of that object.”

In pairs, look the following words up in the dictionary (you only have to click them and select the desired dictionary on the right side of this page). 

Words:

After that, look at the following image where a "car" object is shown. After studying it, click on the button "Image words" and try to answer all the questions about the image:

Object Parts

In the following activities, we will go in detail about property and method definitions. Events will be covered in upcoming modules.

10. Video 3

View the following video about how objects are declared in JavaScript, trying to understant as much as possible.

Watch the video again and click on the button "Video activity 3". Try to fill the gaps listening again to the video.

Now, define the object of the first activity and define its properties (made, currentSpeed, color and fuel) and values as explained on the video (pay attention to the position of the special characters: {} , :  and ,. Follow this template in order to define it:

Object Properties

11. Anonymous functions as variables

Functions in Javascript can be stored in variables or passed as a parameter. When these functions are declared, they don’t need a name. Look at the following example:

var varName = function(parameter1, parameter2,…){

     (function body)

}

In order to call this function, we will type the following code:

varName(parameter1, parameter2,…);

In pairs, try to find out and discuss how methods are defined and called in a Javascript object. You can use the following substitution table in order to explain your guess.

Object Substitution Table

Reach an agreement and write your final decision like this:

We think that object methods are defined ........., and are called ......

 

12. Defining a New Object

Look at the final definition of the car object (events are not yet defined in this section):

var car = {

       made : “BMW”,

       currentSpeed : 45,

       color : “silver”,

       fuel : “diesel”,

       changeSpeed: function (mph){

             this.currentSpeed += mph;

      }

};

Does the method definition match your guess? What does the word ‘this’ mean in this context? Discuss it with your partner.

Taking into account the previous object definition, try to define the properties and methods of this new object (pay attention to what each method must do):

Defining new object

Clilstore Video activity 1Date methodsVideo activity 2Nested structure algorithmImage wordsVideo activity 3

Short url:   https://clilstore.eu/cs/5600