Skip to content
← Back to Community
JavaScript tutorial!
Profile icon
[deleted]

Hello and welcome to another tutorial!

JavaScript tutorial!

I know all you guys need to make games, amazing websites... and more.
recommended for @Bookie0
So let's start!

1. Hello World!

A hello world example can be writed with 3 examples:

  • In the console
  • In the document
  • In the alert
  1. Console
    It is very simple... you only should write:
console.log("Hello World!"); // or Console.log("Hello World!");

And then you just click inspect in the document and hit console and you should see:

Hello World!
  1. Document
    In the first one, we printed hello world in the console...
    Now, we will print it in the document!
    Like this:
document.write("Hello World!"); // or Document.write("Hello World!");

And then you should see in your document "Hello World!" in the left top of your document.

  1. Alert
    VERY VERY VERY VERY Simple alert in javascript for hello world!
alert("Hello World!");

And then you should see an alert comes says "Hello World!"

2. Variables

Variables are so simple in javascript(let's call it js)...
you must write:

var a_string = "Hello World!";

and then you can write:

var a_string = "Hello World!"; // and then console.log(a_string); // or document.write(a_string); // or alert(a_string);

Very simple!

3. If statements

If statements in js are so helpful!

you can write:

var name = "Zuhdi"; if(name === "Zuhdi"){ alert("Hello Zuhdi!"); } else { alert("I don't know you."); }

and then it will come an alert says "Hello Zuhdi" because name is equal to Zuhdi!

4. Comments

I don't need to late on comments...
you only should write:

// this is a comment

5. Functions

Functions are soooooo cooool in js!

you can write:

function add(num1, num2){ var result = num1 + num2; return result; }

then you shoudl CALL the function:

add(5, 17);

and the output will be 22

Why?

because in the add function we put in these () a num1 and num2... and when we call it, we wrote in the () our numbers

So...

THAT'S IT!

6. Simple Calculator with prompts and alerts.

From what we learned today: we need to make a simple calc!

let's start:

var num1 = prompt("First number:") var num2 = prompt("Second number:") var op = prompt("Operator:") num1; num2; op; if(op === "+"){ alert(num1 + num2); } else if(op === "-"){ alert(num1 - num2); } else if(op === "/"){ alert(num1 / num2) } else if(op === "*"){ alert(num1 * num2); } else { alert("INVALID!") }

try this code and see the output!

ENJOY!

Voters
Profile icon
mvbarry
Profile icon
gayram2004
Profile icon
PuTri7
Profile icon
AjayKumar151
Profile icon
SergioRuiz19
Profile icon
somanshrathour
Profile icon
FranciscoBarra1
Profile icon
SeamusChan
Profile icon
Jefferson8868
Profile icon
K-Black2021
Comments
hotnewtop
Profile icon
Baconman321

Even though alert is a global method of window, it is always a good practice to put window in front of alert like this: window.alert('hello world'). The same rule should apply to other built-in methods like prompt, confirm, and more (btw method just means function inside of an object for those who don't know). Also, you forgot to add multi-line comments. Multi-line comments are VERY useful for those who need comments that span multiple lines. This is a better option versus having to put the // on every line of what you are going to say. A multi-line starts like this: /* and ends like this */. There are a ton of other languages that support this very commenting syntax. Examples include C++, C, PHP, CSS, and lots more!

Profile icon
[deleted]

@Baconman321 Thank you so much for the suggesting!

Profile icon
Baconman321

@Zuhdi28 Your welcome, great tutorial overall! Oh, and also: Javascript is case sensitive, so I don't know if Document.write would work. Even if it does, you should make sure to present it as document.write not Document.write. Also a quick note, (if you didn't know this) document.write clears everything on the page, meaning if you put a

tag in there with text, it would be "deleted".

Profile icon
[deleted]
Profile icon
Baconman321

@Zuhdi28 No problem!

Profile icon
DLRWLiyanwaduge

Very good, very good indeed👌.

Profile icon
[deleted]

@DLRWLiyanwaduge thank you!

Profile icon
VulcanWM

Thanks, it helped me a lot!

Profile icon
[deleted]
Profile icon
VulcanWM

Can we talk in a repl? @Zuhdi28

Profile icon
[deleted]

@medcho ok i'll make a repl for chatting

Profile icon
NonmetalAlloy

Very useful, nice!

Profile icon
[deleted]
Profile icon
ironblockhd

Recommendation for beginners: use switch/case instead of multiple if-else statements

Profile icon
[deleted]

@ironblockhd thanks for suggestion!

i like if, it is better

Profile icon
Razia86

Hi, Thanks for this quick tutorial but the addition is not working. System is treating variables as string and concatenating them instead of adding them as numbers, i tried using functions but it isn't working.
I'll look for a solution :)

Profile icon
[deleted]

@Razia86 np :)

Profile icon
NicholasFrancio

@Razia86 This is because the user input for num1 and num2 is being saved as a string no matter what you type. There are two types of ways to ask for input through prompt that i know of.

1st way ↓
prompt("") // gets saved as a string

2nd way ↓
promptNum("") // gets saved as an integer.

!Solution! - Just put "Num" in front of the "prompt" word.

Profile icon
JordanDixon1

Hello. You need help on any projects? @Zuhdi28

Profile icon
[deleted]

@JordanDixon1 js or python?

Profile icon
JordanDixon1

@Zuhdi28 either one.

Profile icon
[deleted]

@JordanDixon1 oh you know js?

Profile icon
JordanDixon1

@Zuhdi28 A little. I know some jquery, besides I can always use google XD

Profile icon
Bookie0

Cool thanks for the tutorial!

Profile icon
[deleted]
Profile icon
Bookie0
Profile icon
[deleted]

@Bookie0 it is a series... so i'll keep uploading javascript tutorials... and did you tried the final code for calc?

Profile icon
Bookie0

Rn I’m occupied with online school, but maybe later if i have time I will do it @Zuhdi28 and I’m planning on making it with css so that it looks cool. Maybe you can teach me how to do buttons that look good for the calculator

Profile icon
[deleted]

@Bookie0 I’m planning on making it with css so that it looks cool.
what??????????????????????
the same idea!
here is the calc

Profile icon
Bookie0

Yeah I’m gonna try and do it @Zuhdi28

Profile icon
[deleted]

@Bookie0 let's make a collab to make it!
you should need js!

Profile icon
Bookie0

Ok, I’m available in like 10 minutes i will tell you when. Make a new one than your calculator you already made @Zuhdi28

Profile icon
[deleted]