Learn to Code via Tutorials on Repl.it!

← Back to all posts
JavaScript tutorial!
[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!

Comments
hotnewtop
Baconman321 (1060)

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!

[deleted]

@Baconman321 Thank you so much for the suggesting!

Baconman321 (1060)

@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 <p> tag in there with text, it would be "deleted".

DLRWLiyanwaduge (5)

Very good, very good indeed👌.

[deleted]

@DLRWLiyanwaduge thank you!

VulcanWM (2340)

Thanks, it helped me a lot!

VulcanWM (2340)

Can we talk in a repl? @Zuhdi28

[deleted]

@medcho ok i'll make a repl for chatting

ironblockhd (425)

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

[deleted]

@ironblockhd thanks for suggestion!

i like if, it is better

Razia86 (1)

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 :)

[deleted]

@Razia86 np :)

NicholasFrancio (6)

@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.

JordanDixon1 (175)

Hello. You need help on any projects? @Zuhdi28

[deleted]

@JordanDixon1 js or python?

[deleted]

@JordanDixon1 oh you know js?

JordanDixon1 (175)

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

Bookie0 (6023)

Cool thanks for the tutorial!

[deleted]

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

Bookie0 (6023)

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

[deleted]

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

Bookie0 (6023)

Yeah I’m gonna try and do it @Zuhdi28

[deleted]

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

Bookie0 (6023)

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