Role of a graphic designer in developing the website

How Does JavaScript Work on the Website?

JavaScript which is also known as "JS" is a programming language that allows users to manage the web pages. This has a dynamic coding structure which manages the response of servers like online playing games, online shopping and all other faculties which are being used online. It is all possible because of the concept of Java Script. JavaScript takes the user's commands and executes them on the browser and hence it is also called Client-Side Scripting Language. It also reflects that JavaScript is a computer programming language which gets executed over the browsers. The basic purpose of using JavaScript is to collect information which is being put by the user on the website like the number, name, age etc...

JavaScript code needs to be implemented with the normal page and once you execute the code then the interpreter reads the code and loads the page for which request has been made. Lots of time, across sites which always update their web design including content, information, images, graphics etc... and it is all possible because of JavaScript code. It makes the site dynamic and even a layman can manage their own website from the control panel.

Sometimes people get confused with the concept of HTML, CSS and JavaScript, so for theoretical understanding here we will explain the terminologies individually so that you could have clarity in mind regarding the concepts.


HTML: With the concept of HTML (HyperText Markup Language), we set the structure of our website so that the website could have formal visibility. The elements get used in the format of tags. Here you can set headings, paragraphs, images etc... HTML is a simple concept and one can even learn the same in a week or so.


CSS: The concept of CSS (Cascading Style Sheet) is used to give style to the created HTML which will add some grace on the web page. Elements like effects, background images, fonts etc... can be set so that the website could look beautiful.


JavaScript: As explained above this is a client-side programming language which increases the interactivity of a user to the website. By using the concept of JavaScript you enable control to manage the whole website from your own because JavaScript makes a website dynamic.

User of JavaScript

The mentioned Scripting language is used by the designer or developer of Information Technology while making any new project to validate the forms which are being used on the website. Data is the most crucial thing of the era and professionals are running behind it because this is the key to their success hence to fulfill the motto of data collection, generally, websites capture the details of the users and then JavaScript has been in order to rectify and validate the entries. For example: if you are looking to collect data of females, then you will give the command to search Female entries in form from 1-100. In this way majorly JavaScript is being used.

Further, JavaScript makes the website dynamic so that users can manage their sites by updating the content, images, videos etc... at regular intervals.

Example of JavaScript:

Let us have a quick example of JavaScript by making the most famous project of "Hello World" but here we will see "Hello Gujrat". So let's get started with the steps:

  1. 1.  

    In the first step, visit the test site at which you are working and form a new folder with the name "Scripts". Under the same newly created folder, make a new file and give it a name of 'main.js' Don't forget to save the folder 'Script'. Now go to the 2nd step.

  2. 2.  

    Here, you need to go into the file 'index.html' and simply add the below-mentioned code before the clogging the tag


     <Script> src="scripts/main.js"></script>

    This is basically doing the same job as the <link> element for CSS — it applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page).

  3. 3.  

    After adding the above add the below-mentioned code in the main.js file which you have created in step 2.

    let myHeading = document.querySelector('h1');
     myHeading.textContent = 'Hello Gujrat!';

After completion of the above steps, keep in mind to save the HTML and JavaScript files. Run the index.html in the browser which is available in the system. This step will change the heading of the text and now it will be visible as "Hello Gujrat". This has been by first using a function called querySelector() to grab a reference to your heading, and store it in a variable called myHeading. This is very similar to what we did using CSS selectors. It needs to be selected first if you are willing to interact with any of the elements.

Now you need to set a value of the heading variables textContent to Hello Gujrat and in this way, Javascript has been used in this simple project.