How JS works?

How JS works?

Javascript for beginners

In web part of programming, Javascript acts as a client-side scripting language that allows you to manipulate the content on the page. To explain what I just said in more simple words, Javascript, like CSS and HTML, is downloaded from the server into the browser and used during while the page is displayed. It is a scripting language and the code is not compiled so it should not contain sensitive information as it can be inspected by anyone.

Why we need Javascript?

The answer is simple: for a more interactive web page. These days you can do most of your animations with CSS, but it is also possible with Javascript. You can do also check fields for correct data, add/remove/change elements from the page and many others.

Well known Javascript frameworks

jQuery ( https://jquery.com/ ) is one of the frameworks that allow you to do quickly what I said before. There are also frameworks that allow you to write a complete application on client-side and communicate with the server only for certain parts of the page. React ( https://reactjs.org ) , Angular ( https://angular.io/ ) . These 2 frameworks are built by Facebook respectively Google and they have a very large community to search for help.

Simple example of using Javascript

For this first article about Javascript, I will just introduce you to basics of the language and we’ll go deeper in future articles.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <p id="my-text">Hello world!</p>
</body>
</html>
/* script.js */

var text = "Hello world from Javascript!";
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("my-text").textContent = text;
});

As you might notice, the script tag is now placed inside the head tag. Some scripts need to be placed inside body tag in order to have better performance and page load times, but we’ll talk about this in a more advanced article.

HTML is created with a bunch of tags. All tags together form the HTML DOM. DOM has a lot of events like onclick, onmousedown, onkeypress ... And all these events can be followed with Javascript like in the example above. We listen to see if the content is loaded in the browser and only after that, we modify it. To declare variables you use var variable = value To declare a function you use function name(parameter) { return value } To call a function you use name(value)

Check out the next articles for more advanced examples! See you there!

Share on

See Also
Send us a few words.
What would you like to see different on this blog?
👌
👎