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.
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!
As you know, almost every language (if not every) has variables.
JS is no exception.
Variables are defined with the
It will automatically adapt to what type you are using (string, int, float, ect.)
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
- NUMBERS DO NOT NEED TO HAVE QUOTES.
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 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 */
These two methods are similar.
console.log method is like print.
When you type
and press run the console should return.
I don't keep
console.logs at the end of my project. I mainly use these for seeing where my code went wrong.
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.
A box should appear at the top of your screen with the text "Alerting"
Prompt and confirm bring up a box like alert, but are mostly used for user input.
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.
This will bring up a confirm box. (returns true/false)
var ready = confirm("ready?")
document is an object that is everything in the current html file.
This will get element base by
var test = document.getElementById("test")
.getElementsByClassName gets all elements with the class name you specify.
.getElementsByTagName gets all elements with the tag name (element name) you specify.
- ("#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
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.
- 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
constto declare variables.
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
letare 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
.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!