Learn to Code via Tutorials on Repl.it!

← Back to all posts
JS BASIC Tutorial
h
JWZ6 (644)

OK SO UH YES HI EVERYONE

THIZ IZ A JWAVASCWIP TUTOWIAL.

This is a JavaScript tutorial.

SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

Let's Start!

Alert Messages

In Javascript, you can do something like alert("I Alerted Something, I guess..."); to alert people something. There are 3 different types to alert messages.

1. Basic Alert

I already described this LOL. Just do alert("Your text"); or window.alert("Your text"); to alert.

2. Prompt Alert

This is basically asking for user input in an alert. Just do prompt("What your asking for"); or window.prompt("What your asking for"). You can do a ...ext","highlighted text"); to get some text inside the prompt highlighted!

3. Confirm

This takes in true or false, basically boolean. I guess... Like the other alert-thingies, we use window.confirm("YES OR NO or something like ThAt"); or confirm("YES OR NO or something like ThAt");. YEET You press either ok or cancel. Ok is true and Cancel is false!

Variables and Constants

Variables

You must always use var when defining a variable. You can start with a number as your variable. You also can't use capital letters in your variables's name. You can't start a variable in JS with a number. var js_is_nice = "I LUV JS";. That right there is an example of a variable. Use can use it like document.write(js_is_nice);.

Constants

You must always use const when defining a constant. The rules for the constant name are the same with variables. const whee = 23;. That is an example of a constant. They CANNOT be changed.

Quick Note

Like C++, you must have a ; at the end of a line of code, as long as it's not a function or a if statement annnnnnnnnd you get the idea, I think...

document.write()

You might've been confused when I wrote document.write(js_is_nice);. Wellllllll,document.write()prints text in HTML, though it will **CLEAR** all the text printed in the HTML. I remember that you don't need "" or '' when printing numbers. You can squash (I guess that's how u say it) stuff with the+sign.document.write("YAY!" + 2);`. That's an example.

HTML

Now you might be thinking

WELLLLLLLLLLLLLLLLLLLLLL, you CAN use HTML in JS! :)

FOR EXEMPL, WEEE HAV document.write("<p>YAYEET</p>"). That works! IF YOU WANT TO INCLUDE STUFF like styling and onclick, PAY ATTENTION! If you do something like document.write("<p style="font-size: 50px">uh</p>");, You would get an error. (I think). BUT... If you do document.write('<p style="font-size: 50px">uh</p>');, you would get NO error weird, right. AND THEN IT'S VICE VERSA. YOU could ALSO use nested quotes by adding a backslash, like var yee = "impostor\"is\"sus";. TADA!

console.log

This will type stuff inside the CONSOLE, not the HTML. Basically works the same way as document.write(). YEET

FUNCTIONS

Functions in JS are basically def's in Python. They might look like:

function yay(){
  alert("WOOHOO");
}

You can use a function like yay();. MAKE SURE that your function name ends with a (). Functions are very useful because you can connect them with onclick in HTML. NICE, RIGHT?

Comments

One-line comments start with a //. Multi-line comments start with /* and they end with */. YEET.

getElementById

You use this method if you want to get an HTML's thingy's ID. This is helpful for getting user input! Make sure to use .value if you want the value of the id. YAY! Example:

Html:

<script src="script.js"></script>
<h2>ONE + ONE:</h2>
<input type="text" placeholder="math" id="yee">
<button onclick="solve_check()">Verify</button>

Js:

const you_answer = document.getElementById("yee").value;
if (you_answer == 2){
  alert("CORRECT");
}
else {
  alert("bruh");
}

That would check if you are right or wrong.

if, else if, else

OK! If statements look like if (<expression>) {what you want}. For example, if (lol) I did if (1 < 2){alert("YES");}, I would get YES. Else if is the same thing. Else looks like else {}. It's not toooooooooooo hard.

removeChild

Wow! JUST get the Element Id and create a var for it. then do that var name.removeChild(name.childNodes[0]);. No need for .value here! Example:

function remove(){
  var bruh = document.getElementById("thing");
  bruh.removeChild(bruh.childNodes[0]);
}

This will remove the thing that has the Id thing. If you have an Id used more than once, use childNodes to select which one. This won't fully clear a button though.

Remove Everything in HTML

Just do: document.body.innerHTML = ""; to remove everything in the HTML.

Integers and Floats

The JavaScript file automatically converts int's and floats so you do don't need to convert them.

While Loops

JS while loops are the same as C++ while loops, so yeeeeeeeeeahhhhhhhhhhh. I shall STILL explain!

while (/*conditon*/){
  // What you want
}

You have your while block and your condition goes in the parentheses. Inside those {} (brackets), you can do what you want.

Let

var can be error-prone (as said by @tussiez). let would work better. The main difference is that if you let (lol) something inside brackets, you can't use them on the outside, but var can. let yee = 500. That's an example of let.

OK THAT's It I hope you enjoyed this!

BYE

Comments
hotnewtop
Th3Coder (129)

Hey @ChickenPea, I know you're the alt of jason37! You deleted that account and both your alts! (Th3C0derB0y and Th3C0derKid)

Also, I can tell because of your 'crazy text' comments. It was inspired from the comment I made (the one that you replied 'shut up', remember?) Don't take this too seriously though, I'm not mad at you. Just pointing that out!

JWZ6 (644)

@Th3Coder MAYBE @ChickenPea SUS I NEED SOMEONE TO BAN U

Th3Coder (129)

@JWZ6 I sense an impostor among us (uhh, is this meme dead?)

JWZ6 (644)

@Th3Coder when the impostor is SUS

ch1ck3n (2028)

@Th3Coder he spammed on my posts he pinged me for no reason and i think i am real victim here

JWZ6 (644)

@ch1ck3n sorry Though i hope you found this helpful

Th3Coder (129)

@ch1ck3n maybe he's like that! Let's just ignore him.

ch1ck3n (2028)

@JWZ6 i already know js so i didnt find it helpful lol

ch1ck3n (2028)

@JWZ6 i like the humor in it

Th3Coder (129)

@JWZ6 btw his account is already deleted!

That was quick

JWZ6 (644)

@1d10tBoy2 aAAAH STOP COMMENTING

tussiez (1638)

Nonono!


var is error-prone. Always use let and const
You should explain while loops.. not everyone knows C++

tussiez (1638)

@JWZ6 *Scoped, lol
Yay!
And yes, you can use variables with capital letters.

tussiez (1638)

@JWZ6 You can't start a variable with a number.

For removeChild, here's another way to do it:

const foo = (id) => {
  const ele = document.getElementById(id);

  if(ele && ele.parentNode) {
    ele.parentNode.removeChild(ele);
    return true;
  } else {
    return false;
  }
}

Not very weird, you get an error:

.. because: you close the quote, as shown in the syntax highlighting used below:

To use nested quotes in quotes, add a backslash:

CuriousMonkey (48)

yo this is actually a good tutorial like actually. when my dad taught me he was like telling me about functions at like step 2

Bookie0 (6248)

You can use syntax highlighting by adding js after the 3 backticks (`):

function remove(){
  var bruh = document.getElementById("thing");
  bruh.removeChild(bruh.childNodes[0]);
}
Th3Coder (129)

@JWZ6 umm what did he say? It's deleted now...

Edit: nvm turns out he said 'idiot'. Why did you say that? @ChickenPea (I mean, the comment is just a meme so yeah XD)

Th3Coder (129)

@JWZ6 nah, it's not your fault. Thanks though! :)

JWZ6 (644)

@Th3Coder btw I added strikethrough but i don't know how to do the other 2, sorry

Th3Coder (129)

@JWZ6 great job! I think we need to use the <sup></sup> and <sub></sub> tags for them! (Sorry if this is wrong though XD)

JWZ6 (644)

@Th3Coder I mean i is not very sure how to use them sorry...

Th3Coder (129)

@JWZ6 I just realized you used the text-decoration attribute! That's VERY creative indeed!

It's okay if you don't know how to do that, because honestly I'm not so sure I can do that too XD

Th3Coder (129)

@JWZ6 now all his comments are deleted!

I bet he'll delete the account...

JWZ6 (644)

@Th3C0d3rB0y delete those spam comments on my text editor post or else I'll REPORT you

JWZ6 (644)

@Th3C0d3rB0y I'm saying for the text editor not this

Th3Coder (129)

@Th3C0d3rB0y stop spamming in JWZ6's Text Editor!

Gh0stHack3r (63)

Noice... Though i see people saying there are errors..... I don't know js I see mistakes to.... I think