If you have done everything right before, then now you have the same website as in your own template.
Is work on HTML and CSS ended?
Of course, no. Your code is for no communication.
Just as an example if you want to make a function that shows the items, you have to understand that there must be some place for your items. Just imagine it in your head: your items aren't just placed, it can be kept in js in some mas and an empty div can be used to place them - like a rectangle to fill it.
Then, what for have you already printed your items?
It is a template and you will use it to know how to print in future: where, how many and so on.
Communication base
Maybe, you have a question: if we make a communication, then which tag communicates with user?
Yes, it is not any tag like table or h1.
Firstly, ask yourself, how will it look.
- A button, that on-click open filters to apply
- Or a button that registrates a new user
- A text area to keep information
- Button to keep your choice
- Button = like (color change and block on this button)
So, your template (both css and html) should have these forms
Moving to JS
JS - is real coding (like we need logic and math skills).
Firstly we make a goal (as in my template):
- I want to apply filters for my items
- I want to print my items with and without filters
- I want to edit my item
- I want to add a new item
- I want to delete one item or delete them all
- I also need a validating function not to catch mistakes
- I want to keep my user's information: name, surname and so on.
- I want to react on posts: like.
Then, first step is just to connect your emty js file with the html one. For this we in head write tag script and mention the name of js file in src. Now, they are connected.
What is the structure?
JS is different to others languages. Forget about this hat, you don't need to write any structure for coding.
What for do we use script?
- There we write our functions
- And we can also check our work by js.
You don't need to compile, all you have to do is to open then your html file in the browser and check the console (ctrl+shift+c -> console)
First step
Check if everything okay, by immitating communication in your js file and check the console in the browser:
console.log("it works")
(yes, just put it into your file without any introductionary code)
Understanding the usage of functions
If you want to write a function that sums 2 nums, so to output the result, what would you do?
just writing definite numbers and sum up them every time... it is a little bit useless. For that we have functions - a general answer to all questions. (Result for every numbers to sum up)
function sum (a,b) {
return a + b
}
sum - name of your function
(a,b) - variables that will be sent to the=is function every time it is called
a+b - math solution for the problem, that will be returned.
Easy? Im pleasant
So how to see the result? Where is it returned to?
Call the function by using its name and variables or number to be sent.
console.log(sum(12,4));
We output the result of a function with data - 12 and 4. Check the console, it must be 16.
If you send other number, you won't catch a mistake, try it. Function - general for every number / variable.
Not print, but get
You can feel free to try this functions and output, but how to input?
var name = prompt("What is your name?");
Var - the sign of variable
name - name :)
Now your variable name contains a text. What can you easily study and try?
- Outputs and inputs (immitating communication with user)
- All that you see in my link as a tutorial.
You have to understand, what are you working with (not to learn every method). Why?
Then when you have a question "How to add a new item?" you have to understand that your items are a structure and you push a new one back, filling all apropriate variables with information and validating it.
Hopefully, it is all understandable and you will try your best with JS tutorials to know the base.
Next lesson, we will try real coding.
Good luck in your job!
Top comments (0)