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
Cool But...
letandconstto declare variables.var variableName;| Then you can do:variableName = "Value";. You can also do this directly:var variableName = "Value";.var,const, &letare only used when first initialing or declaring a variable.console.logs..gets: You should also tell that for thedocument.querySelectorAll()function, you use CSS selectors.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!
Yeah! I agree with @TalinSharma || @RishabhRanjit should really have done better || @RishabhRanjit is the best!
@ErrorAtNight uh..... ok...
G M A I L
@TalinSharma I hate css, it sucks.