Introduction

Introduction to Javascript

Introduction to javascript programming

Before getting started with javascript we should know basic elements of a webpage. HTML, CSS are the basic elements of a webpage. Now, you got the doubt if HTML an CSS are the basic elements why javascript?

  • HTML - is used to create a skeleton for the webpage.
  • CSS - is used to add styles to the HTMl skeleton.

Why to use javascript on client side ?

Now, you might got some idea about why we use javascript on client side (i.e browser in case of web). We use javascript to give life to the webpage. It allows user to interact with the webpage.

If you don't about web and it's tech HTML and CSS then I recommend you to read about it.

What are the tools to get started with Javascript?

We need

  1. A web browser (i.e Google Chrome)
  2. A Text Editor (i.e VS Code)
  3. A Thinking Mind (i.e I know you already have it)
add-link

Hello world program with javascript

  • Create a document with name first_program.html and add the below code.
<html>
    <body>
        <h1 id="hello"></h1>
    <script type="text/javascript">
        document.getElementById('hello').innerHTML = "Hello World";
    </script>
    </body>
</html>

In the above code, we have created a webpage and embedded javascript with tag script. Now, we know how to use javascript inside a web page using script tag.

understand the developer tools in browser

I'm assuming that you have a google chrome browser if not download and install it. Now, open the chrome browser and press Ctrl + Shift + J. It will show the screen like below.

Chrome developer tools

Elements

  • It is used to see the HTML elements tree structure and called as DOM (Document Object Model)
  • We can edit the DOM by inspecting it.

Console

  • It will show the javascript warnings and errors if any.
  • We can make use of the Console to execute the javascript expressions. Let's copy and paste the expression 55 + 45 and press enter. We will get output as 100.

Sources

  • It will show the assets like images, videos, javascript, css, etc.
  • Information of other domains that are used in the webpage.

Network

  • It will show the all network calls sent to different servers.

Performance

  • We can check the performance of the webpage, how it responds & how much time it's taking to load the data, etc.

Memory

  • We can profile memory usage and track down leaks if any

Application

  • Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.

Security panel

  • Debug mixed content issues, certificate problems, and more.

Now you have got the basic idea of how we can make use of the developer tools.

Like all other programming languages we have a print statement in javascript. But it's called as console. We can use it like below.

console.log("100 + 50 = ", 100 + 50);

Open the developer tools and execute the above code, it will give output 100 + 50 = 150

How to use separate javascript files with HTML document?

We can use a separate javascript files in the web documents. Javascript file has the extension of .js.

Let's see an example to it.

sum.js

function calc_sum(n1, n2){
    return n1 + n2;
}
console.log("100 + 50 = ", calc_sum(100, 50));

my_file.html

<html>
<body>
<script src="./sum.js"></script>
</body>
</html>

Make sure both files are in the same directory then only it will work. We have given a relative path to the file in the above example. We can give full file path or a web path.

We can make use of <script src="{{file path}}"> tag like above to use separate javascript files with web pages.

Open the webpage and browser console. It will show output 100 + 50 = 150.