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:

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

  1. Document
    In the first one, we printed hello world in the console...
    Now, we will print it in the document!
    Like this:

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!

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:

and then you can write:

Very simple!

3. If statements

If statements in js are so helpful!

you can write:

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:

5. Functions

Functions are soooooo cooool in js!

you can write:

then you shoudl CALL the function:

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:

try this code and see the output!

ENJOY!

Voters
Daeluk
sprotulipac
ArjunRathod
Iceshard6587
ParkerA130
desert88
clynch7093
Ennard65
xXAgneXx
SHENJINHUA
Comments
hotnewtop
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!

[deleted]

@Baconman321 Thank you so much for the suggesting!

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

Baconman321

@Zuhdi28 No problem!

DLRWLiyanwaduge

Very good, very good indeed👌.

[deleted]

@DLRWLiyanwaduge thank you!

VulcanWM

Thanks, it helped me a lot!

[deleted]
VulcanWM

Can we talk in a repl? @Zuhdi28

[deleted]

@medcho ok i'll make a repl for chatting

NonmetalAlloy

Very useful, nice!

ironblockhd

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

[deleted]

@ironblockhd thanks for suggestion!

i like if, it is better

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

[deleted]

@Razia86 np :)

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.

JordanDixon1

Hello. You need help on any projects? @Zuhdi28

[deleted]

@JordanDixon1 js or python?

JordanDixon1

@Zuhdi28 either one.

[deleted]

@JordanDixon1 oh you know js?

JordanDixon1

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

Bookie0

Cool thanks for the tutorial!

[deleted]
Bookie0
[deleted]

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

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

[deleted]

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

Bookie0

Yeah I’m gonna try and do it @Zuhdi28

[deleted]

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

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

[deleted]