For such simple CODE → you don’t have to install anything.
So, for you beginners it is very important first to understand how Velo-Code works.
- You have a Wix-Site.
- Your Wix-Site has pages.
- Now you navigate onto one of your pages.
- DO NOT FORGET TO ACTIVATE THE CODE-MODE first (DEV-MODE).
- Now you see your page and the CODE-AREA.
- Every page has already a simple BASIC-CODE-SETUP like…
$w.onReady(()=> {
....
....
....
....
});
You can see this as the very STARTING-POINT of your page (except the IMPORTS, which you put on the very TOP of your pages).
Once you page is → READY ← (this is exactly, what the basic code is for), waiting for the page to be ready first before interacting with it.
Ok, let’s say, your PAGE is → READY ! Now you want to say → ‘Hello World’, like every code-beginner do (either directly on the page, or at least inside of the CONSOLE).
Since we are ongoing-PROGRAMMERS → we work with the console (ONLY), because this will become our best friend in the FUTURE.
Ho to use the CONSOLE ? There are 2-OPTIONS !
a) Using the CONSOLE directly inside of the Wix-Editor.
b) Using the console on your published LIVE-SITE in the BROWSER of your choice, for example —> Google-Chrome.
You press F12 and navigate to the----> CONSOLE. Now you can see in an additional console.window all outputs of your pages interactions and functions.
BACK TO YOUR PROVIDED CODE…
$w.onReady(function () {
// To select an element by ID use: $w('#elementID')
// Click 'Preview' to run your code
console.log("Hello World");
});
We delete the → COMMENTS <— we do not need them yet…
$w.onReady(function () {
console.log("Hello World");
});
We add some more code…
$w.onReady(function () { console.log('Page is ready...');
console.log("Hello World");
});
Now, after publishing your site and opening it inside of a BROWSER of your choice, you navigate to the CONSOLE of your BROWSER and take a look onto the LOGs you got from your page.
Let us expand the code even more and add a TIME-DELAY, to create a TIME-DELAYED message to our CONSOLE…
$w.onReady(function () { console.log('Page is ready...');
console.log("Hello World");
setTimeOut(()=>{
console.log("Hello World again, after 3-seconds !");
},3000);
});
Check the outputs.
Now, you understand how all the process-flow is working —> Now you can dive into your futured ADVENTURE !!! HAPPY CODING !!!
