Andersen

Website lesson 6: js function realization

Yuri Filatov's photo
Yuri Filatov
·

5 min read

fb_img-RTLS_1200x630-1-1024x538.png Welcome back!

In the previous lesson we talked a lot about the base of communication . Your goal was to get to know the structure of js.

Today we are moving to the real things.

Keeping everything in structure

You have your items just placed somewhere in your html file. Now, let's define the types of variables to put your items in some structure.

var posts = [

{

    `id: '1',`
    destination: 'China',
    createdAt: new Date(2014, -1, 1, 2, 3, 4, 567),
    author: 'ChingHang',
    tag: "summer",
    flug: 'A-730'
},

id - order of your element, then to get your item with no filter but with the order.

destination - appropriate name for the variable that describes destination of flight.

createdAt - date type to show when the post was made.

tag - variable will be used then for filter to apply (to search by tags) This way you keep your information in a structure in a js file, then to imitate communication. More code for js you can see in one of my posts .

Functions

You already know how to make simple functions. Here for your items there will be not one function, but many (edit, add, remove and so on). So your functions should also have a structure, like you place masses into one structure, so with the functions. For that opportunity we have classes.

Classes have names and all functions connected to one class. You will ask me, how do we connect our items' structure with this class? Class is a unique place to keep all functions - like a template for any variable, mass or structure. We don't need to connect them. We will call these functions for our structure, but about it later.

Making class

class work { ... }

What does every class need? A constructor - a bilder of objects.

constructor(posts) {

this._posts=posts;

}

What is this and why do we place dots?

This - marker that we use variables in our class. Like a path: if we don't put this., our object doesn't have a path to our class, so it is the object outside the class. Dot is just the separator.

Feel the difference:

this.posts - variable posts belongs to class (posts from the class, not from the structure, cause it is outside the class)

posts - outside the class. So we have a structure named posts

Template of this:

[path].[object]

What is in the brackets?

As always it is something we send to the function (data to work with).

Validating object

Object, that you will add in the future can be incorrect: some fields are empty or incorrect length of name (1000 symbols for example)

We need a validating function not to catch mistakes in future.

validatePost(Object){

    `return Object.id != null && Object.destination != null &&` `Object.destination.length<400`

      `  && Object.author != null && Object.createdAt != null && typeof Object.id === "string" && typeof Object.destination === "string" && typeof Object.flug === "string"

        && typeof Object.author === "string"`

}

As always in the brackets is our data to work with. You will ask me, why Object, but not posts and moreover posts is a structure, not an element, where did this Object come from??

The answer is easy: you can place whatever you want in the brackets (Object or "fkdfjldf" or "hello") even though they are not initialized variables. This data comes from outside and the name in the brackets will be used only in the body in function and then disappear - it is just inside of the function. You can call the function and send data named post, but in your brackets it will be an object and it is not a mistake (Imagine in your head that you send this post to object, object works inside and that's all).

What do we return?

We return a boolean variable (true or false) and we ask our function:

  • if the object's id sent to the function not equal to 0
  • if its destination isn't empty
  • if its author name isn't empty
  • if all text variables are less than 400 symbols
  • if the type of id, destination and author name is string

So if the answer is yes for these points, our function gives a true answer.

More functions we will explain later, cause they are not as understandable as these. Btw, if everything is easy for you, just check the whole my code (a little bit old) and try your best.

Communicating

How do we communicate with functions? You already know - we call it using its name and data we will send to.

But these functions were just nowhere, now we have a structure and a class. How to connect??

let a = new work(posts);

let a - is our variable that now has the type for our class

Like we assign the type for a variable - object of the work class.

What is in the brackets? Constructure.

What for? Yes, we can make a variable, name it, but it is not initialized.

Make some temp object (temporary, the object to add, remove and validate, cause it has to be outside to make sense)

temp = {

    `id: '1',`

    `destination: 'Griechenland',`

    `createdAt: new Date(2013, 0, 1, 2, 3, 4, 567),`

    `author: 'SergeevaAnna',`

    `flug: 'A-322'`

`}`

Assigning the function

Object of class -> name of function (path) -> data:

console.log("a message that we have tested validatePost: ")

console.log(a.validatePost(temp))

A message is needed then not to forget which answer belongs to which question. Here we output the result of the function.

a - object

validatePost - path

temp - data

Hopefully, it is still understandable to you!

Next lesson we will move to harder functions, now you have 4 days to try your best, trying to make simple functions but not just somewhere in your js file, but in structures and classes - template.

Good luck with your job!

Written by Yuri Filatov, IT Expert at Andersen

HTMLCSSTutorialBeginner Developers