Hi there, this article is for people who know HTML and CSS, but JavaScript looks too complex to learn. This is the easiest javascript tutorial on the internet.
Pre-requisites
- You Should have a little bit of knowledge about HTML and CSS.
- VSCODE
- Know how to create an index.html file.
- Already know a C/C++ based language (a little bit).
What is JavaScript?
It's a programming language for the web. It's as simple as that.
So let's get started without wasting time.
Setup
Start by opening a folder in VScode and making a file as index.html. Press ! and Press Enter. You should be able to generate the HTML boilerplate.
Then in the head tag add the script tag.
<head>
<script src="./script.js" defer> <script>
<head/>
Now Create a new file right beside the index.html file named script.js
Add this to your script file.
alert("hello");
You should be able to see this popup when you open the html file in the browser.
This means you have successfully linked JavaScript to your HTML.
Function in JavaScript
You can make a function in JS like this.
function foo(){
console.log('foo');
}
foo();
Here foo is the name of the Function.
Console in JavaScript
Press Ctrl+Shift+I in your browser where you have the Console Tab. Here you can find error messages and messages from console.log() calls.
The console.log("foo") from the above function is also displayed here.
Buttons and OnClick
Make an HTML button with an onClick prop. Like this
<button onclick="foo()">Hello</button>
Anything inside the onClickprop will be executed every time you click on this button. In our case every time we click the button the function foo() will be called.
Variables
Let's add a variable let count = 0; Here count is the name of the variable and it is initialized to zero. Let's change our function a little bit.
let count = 0;
function increamentcount(){
count++;
console.log(count);
}
Here every time the function is called the count is incremented and displayed in the console.
We will change the button to something like this
<button onclick="increamentcount()">count++</button>
Conditional Statement in JavaScript
Here is a simple if statement in Javascript.
if(count == 10){
count = 0;
}
This is similar to C++ style conditional statements.
Document Manipulation (Basics)
Your whole HTML file is a document in itself. Manipulating this document via Javascript is called Document Manipulation.
Let's make a paragraph tag with id = "count". Note that for Document Manipulation we use id's on the objects.
*What's an object? *
Anything inside the HTML document is an object.
<body>
<p id="count"></p>
<button onclick="increamentcount()">count++</button>
</body>
Now we will declare another variable that will target this paragraph tag.
let paragraph = document.getElementById('count');
Here we are getting an element/object by its id.
Then instead of printing in the console, we will make the innerText of the paragraph the count variable.
function increamentcount(){
count++;
paragraph.innerText = count;
}
Socials
Twitter (X): https://x.com/ihsanhaamza
LinkedIn: https://www.linkedin.com/in/hamza-ihsan/
Github: https://github.com/thehamzaihsan
Top comments (0)