Learn to Code via Tutorials on Repl.it!

A Guide To JavaScript (I suck at it): Part 1

JAVASCRIPT!

THIS IS PART 1. THIS WILL COVER SOME BASICS.

There is a repl at the bottom of this post. It has the final code used.

Javascript goes along with HTML and CSS.

You don't have to know CSS, but you should know HTML.

Before we start, you should have and HTML, CSS, JS repl with two file (index.html and script.js (no css needed)).

This should be the code in your html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Learn JS</title>
  </head>
  <body>
    <div id="ID">This is a div with an id</div>
    <script src="script.js"></script>
  </body>
</html>

LETS GET STARTED!

Variables

As you know, almost every language (if not every) has variables.

JS is no exception.

Variables are defined with the var keyword.

It will automatically adapt to what type you are using (string, int, float, ect.)

VARIABLE RULES:

VARIABLES MUST START WITH A LETTER.
- THEY CAN THEN CONTAIN NUMBERS BUT CANNOT START WITH THEM.
VARIABLES CAN START WITH UPPERCASE OR LOWERCASE
- LETTERS AND CAN BE FILLED WITH BOTH.
- Tho for the record I keep em starting lowercase so they don't turn the ugly green color.
STRINGS MUST BE IN "" or ''.
NUMBERS DO NOT NEED TO HAVE QUOTES.

EXAMPLE:

var int = 1
var str = "str"

AFTER CREATING A VARIABLE, YOU JUST HAVE TO TYPE THE NAME OF THE VARIABLE TO REASSIGN IT.

var variable = 1

variable = "e"

DID YOU NOTICE HOW YOU CAN CHANGE VARIABLE TYPES WHEN REASSIGN A VARIABLE?

COMMENTS

Comments are important to understand and can help clean up code. It also lets other people understand what parts of code is doing.

SINGLE LINE COMMENTS

Single line comments start with //.

// This is a single line comment

MULTI LINE Comments

Multi line comments start with /* and end with */

/* This
is
a
multi
line
comment */

LOG, ALERT

These two methods are similar.

LOG

The console.log method is like print.

When you type

console.log("Logging")

and press run the console should return.

Logging

I don't keep console.logs at the end of my project. I mainly use these for seeing where my code went wrong.

ALERT

The alert method is also good for bug testing.

I use this when I am on a computer with inspect is disabled and I can't see the console.

alert("Alerting")

A box should appear at the top of your screen with the text "Alerting"

PROMPT, CONFIRM

Prompt and confirm bring up a box like alert, but are mostly used for user input.

PROMPT

This will bring up a box asking you to input text. (returns input)

var dayGoingGood = prompt("How was your day?", "Put in text")

The first parameter is what you are asking and the second is what the placeholder text should be.

CONFIRM

This will bring up a confirm box. (returns true/false)

var ready = confirm("ready?")

DOCUMENT

document is an object that is everything in the current html file.

.getElementById

This will get element base by Id

var test = document.getElementById("test")

Other .get

.getElementsByClassName gets all elements with the class name you specify.
.getElementsByTagName gets all elements with the tag name (element name) you specify.

.querySelectorAll =

("#YourIdNameHere") -> All elements with the specified ID
(".YourClassNameHere") -> All elements with the specified Class
("YourTagNameHere") -> All elements with the specified Tag Name

There are more document properties, but that would take forever to go through so you should research that bit on your own.

LETS WRITE SOME CODE

A couple things I forgot to mention. Strings and strings can be added together (+ operator), and strings and ints can be added together (+ operator). Also elements have properties, one of them being .innerText (which is the text the element contains.)

I am not going to say what this system is, so try to guess while coding it.

var textElement = document.getElementById("ID")

var name = prompt("Name", "John")
var text = prompt("What do you want to say", "Hi!")

textElement.innerText = name + " says " + text

Lets go through this step by step.

First we create a variable called textElement. This is connected to the div we made in the HTML code earlier.
Next we create two variables which is the name and what you want to say. We use prompts to get what we want the user wants to say.
Finally, we add the name variable and a string "says" and add the variable text and then set that to the div's text.

THATS IT!

I hoped you enjoyed and Part two will come out soon.

Don't hesitate to ask any questions about what you learned. I'm happy to help.

-Rishabh

Voters

Comments

hot new top

Cool But...

There is CSS in js and you need it for web dev. so you should eventually learn it.
The "ugly green color" you talk about is the syntax highlighting. Class names start with an uppercase letter. Classes are important so...
You can also use let and const to declare variables.
More info about #3: Links let | const
You create variables like this: var variableName; | Then you can do: variableName = "Value";. You can also do this directly: var variableName = "Value";.
You should mention how var, const, & let are only used when first initialing or declaring a variable.
Please explain what the console is. Don't forget, there is a better console in the browser's dev tools as well.
You should put screenshots of alerts, prompts, confirms, and console.logs.
Other .gets: You should also tell that for the document.querySelectorAll() function, you use CSS selectors.
Explain what happens when you add an int and a string together.
Tell that alerts, prompts, and confirm boxes and really annoying and are not good in a production website!
Functions? Seems basic!

Good though!

@TalinSharma Ya i know. The green color is classes which is a bit more advanced. I forgot to mention string + int, i will do that later.
Const and let will be explained in the next tutorial.

Thx!

Rishabh

Yeah! I agree with @TalinSharma || @RishabhRanjit should really have done better || @RishabhRanjit is the best!

@ErrorAtNight uh..... ok...

G M A I L