This content originally appeared on DEV Community and was authored by Yuri Filatov
Welcome back!
In the previous lesson we talked a lot about the base of communication. Your goal wat to ket known with 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 was the post made.
tag - variable will be used then for filter to apply (to search by tags)
This way you keep your information in as tructure in js file, then to immitate communication. More code for js you can see in one of my posts
Functions
You already know, hot 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 places masses into one structure, so with the functions. For that opportunity we have classes.
Classes have name and all functions connected to one class. You will ask me, how do we connect out items' structure with this class? Class is a uniques place to keep all functions - like a template for any variable, mas or structure. We don't need to connect them. We will call this functions for our structure, but about it later.
Making class
class work { ... }
What every class needs? A constructure - a bilder of object.
constructor(posts) {
this._posts=posts;
}
What is this and why do we place dot?
This - marker that we use variables in our class. Like a path: if we don't put this., our object don't have 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 fieds 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 dissapear - it is just inside of the function. You can call the function and send data named post, but in your brackets it will be 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 this points, out function gives as 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 now - 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 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.
More info you can find on my website
Good luck with your job!
This content originally appeared on DEV Community and was authored by Yuri Filatov
Yuri Filatov | Sciencx (2021-06-08T14:21:05+00:00) Website lesson 6: js function realization. Retrieved from https://www.scien.cx/2021/06/08/website-lesson-6-js-function-realization/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.