JavaScript Basics for Beginners - With Examples [For FREE]

Welcome, in this "JavaScript Basics for Beginners" tutorial we will cover everything that a beginner should know about JavaScript.
After this tutorial, you will have Basic Understandings of JavaScript which will help you to Start and Adopt JavaScript Easily and Quickly.
Let's get Started with our first JavaScript Topic.

Alert your NAME using JavaScript

Inside your HTML file you need to use "<script>" tags to write JavaScript Code.
Here we are using "alert()" to print our Name inside Alert Box.
Where "alert()" is a Predefined Method in JavaScript. Which shows the given text inside Alert Box.

index.html

<script>
   alert("My Name is ProgrammingHEAD");
</script>
JavaScript Basics for Beginners - With Examples [For FREE]

Here we are using inline JavaScript.
There are 2 more ways to use JavaScript with HTML.

1. Internal JavaScript

2. External JavaScript

Internal JavaScript

Same as CSS, we declare JavaScript Internally within an HTML File. Where our JavaScript Function, Variables and Everything is Present Internally.
We can Write Internal JavaScript inside "<head>" Tags (if you want to Priorities JavaScript Loading) or we can use it inside "<body>" tags (We recommend writing JavaScript Code inside "BODY" tags after all HTML Elements).

index.html

<html>
  <head>
    <title>My First JS CODE</title>
  </head>
<body>
  <script>
    alert("My First JavaScritp CODE")
  </script>
</body>
</html>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

External JavaScript

The Working of an External JavaScript and Internal JavaScript is the SAME.
It's just the way you include is different.
Where internal Script is present in the same File and all the Functions, Variables and Data are Available Internally.
But in External JavaScript, we will import a ".js" file first. And after that, we will be able to access all the functions, Variables, and Data from an External file.

external.js

alert("My name is ProgrammingHEAD");

index.html [Where we will include our External JavaScript "external.js" file]

<html>
  <head>
    <title>My First JS CODE</title>
    <script src="external.js"></script>
  </head>
<body>
</body>
</html>

Now we know the Two methods to use JavaScript inside our HTML Document.
What if you don't want to use internal nor External JavaScript?
Then we have IN-LINE JavaScript for you.
Here we use HTML Tags attributes like "onClick" to fire JavaScript Function.

Alert your Name using IN-LINE JavaScript:

If you want to display your Name inside an alert box, you can do that by using "onClick" Events.
This "onClick" event will RUN whenever the user clicks the Button.

index.html

<html>
<body>

  <button onClick="alert('ProgrammingHead')">
    Click Here
  </button>

</body>
</html>

Change Content using JavaScript

Using HTML we can design a Static Website. We can only change Texts by editing the HTML Document.
If we want to change Something on Click or PageLoad or Mouse Hover.
We can do that using JavaScript.
First, we have to know how can we change just HTML texts using JavaScript.

Step 1: Select your Text/Content using JavaScript

While working with JavaScript we need to select and Specify the HTML Element where we want to add Changes.
For Selecting HTML Elements of have "document.GetElementById()" this will select HTML Elements by its ID (we also have getElementsByClassName and querySelector() but for now let's focus on this one).

Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

Step 2: Choose What Type of Change we want to apply

After selecting your HTML ELement now we have to tell JavaScript what type of change we want to apply.
We are goanna use the ".innerHTML" property because we want to change the inner HTML Text values of our Selected Element.

Step 3: Assign new Values There

After adding the ".innerHTML" property we need to assign new values to our Selected Element.

in this example, we change the Paragraph text from "Button is UnChecked" to "Button Checked" on a Button Click.
And you guessed it right, we are goanna use onClick Event for that.

index.html

<html>
<body>
  <p id="myText">Button is UnChecked</p>
  <button onClick="document.getElementById('myText').innerHTML='Button Clicked'"> Click Me </button>
</body>
</html>

Till now we only know two methods to show output (alert() and .innerHTML).
But there are more JavaScript Output Display Possibilities Like:
document.write() and console.log().

JavaScript document.write() Method

This "document.write()" methods is same as "document.getElementById().innerHTML" but here you don't need to select an HTML Element in order to write.
Here this "document.write()" method will add/write to your HTML Document while rendering your HTML File.
But when you call this Method using onClick, this will overwrite the Whole HTML Document output and write/Display Assigned text There

In this example, we will add "This Text Added using JS" text to our HTML Document.

index.html

<html>
<body>
  <p id="myText">Click This Button to see Something</p>
  <button onClick="document.write('This Text Added using JS')"> Click Me </button>
</body>
</html>

JavaScript console.log() Method

Unlike document.write(), this won't show output inside your HTML Document. Instead, this will show the out inside the console Tab.
This is very helpful when you don't want to show some text in the main HTML document but still want to keep track of it. Then console.log() is perfect for you. Because it's hidden in the Main HTML output but you can still access it within your Browsers Console Tab.
(To open "Console Tag", press the f12 key and Click the "Console" Tab or Click on your Browsers Menu Button and Select Developer Options from there).

index.html

<html>
<body>
  <p id="myText">Check Console (After Clicking this Button)</p>
  <button onClick="console.log('Button Was Clicked')"> Click Me </button>
</body>
</html>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

Functions in JavaScript

If you don't want to code everything in a single line and want to organize your Code.
Then functions are the best thing for you.
We have Pre-Defined Functions like alert(), write() and log().
But we can manually create our UserDefined Function in JavaScript.
Where you can Define or Write a Particular Task inside a Function.
And when you need that Function to run Just CALL IT.

How to create Functions in JavaScript?

To create or Define a Function you need to use the "function" keyword to tell JavaScript that we are creating a function here.
Then your function name is followed by these "()" round parentheses/Brackets.
and after that add these "{}" curly brackets and between them, you need to write your Functions Code.
Like :

index.js

function myFun(){
  //my Code Here
}

So keep in mind you need to Call a function to Execute its Code.
So in this example, we will call our Function by using the "onClick" Method.

index.html

<html>
<body>

  <button onClick="myFun()">Click Me</button>
  <script>
    function myFun(){
       alert("Got this from UserDefinedFunction");
    }
  </script>

</body>
</html>

there are lots of things that we have to cover with functions like "Parameters" ETC. Which I will try to explain here in a very Short.
So while calling your Function you can Pass "Parameters".
So it's very useful when you need some data to perform inside your Function. You can pass that data while calling your FUnction.
For example, I want to add two numbers and I have a function that can add them.
So while calling my function I can also pass two values that I want to ADD.

index.html

<html>
<body>

  <button onClick="addThem(2,4)">ADD</button>

  <script type="text/javascript">
    function addThem(a,b){
      alert(a+b);
    }
  </script>

</body>
</html>

Comments in JavaScript

You can think of Comments as TextNotes or GuidTexts that can help you when you are working with thousand lines long Files.
And there you can use Comments to add TextNotes about a Particular Section or Element. (I use them in inSide JavaScript when I want to remove something Temprarly then I usually comment Them out)

Comments always got ignored at the time of execution so it won't affect your Code.

So to add comments in JavaScript we have Single line Comments

index.html [Single Line Comment]

//Single Line Comment

index.html [Multi-Line Comments]

/*
 multi
 Line
 Comments
*/

index.html [Using Single Line Comment and Multi-Line Comments in JavaScript]

<script type="text/javascript">
    // Adding 2 with 2 
	document.write(2+2)
    //Substracting 2 with 2
	document.write(2+2)
    /* 
	Multiplying 2 with 2
	document.write(2*2)
    }*/
</script>

Here we got only Addition and Subtraction values
And our Multiplication method got Skipped Because we were using MultiLine Comments There.

Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Just 10$/hSee Plans100% Free Trial + Money Back Guaranty
Logo