JavaScript intro

Adding JavaScript to to a webpage

before we start coding JavaScript we need to link JavaScript to our page.

<script src="script.js"></script>

An important thing about JavaScript linking is that you should always link it inside the body of the site not in the head. This is because the JavaScript can actually take longer to load in the head.

The Browser Console

Websites on browsers like google have developer tools and to go into any website's code you press Ctrl + Shift + I, this should bring up the websites code, network, security etc.
inside the console we can learn important stuff about JavaScript here's how.

console.log(2)
console.log(1)
console.log(3)

console.log() is a function that tells the console what to put down
even though the orders of the numbers are mixed around JavaScript will still always read top to bottom. so what should appear is

2
1
3

Variables, Constants and Comments

variables store values to be used later
there are multiple ways to make a variable so lets start off with the easiest way: let, let gives variables a value.

let age = 25;
console.log(age)

the output of this command would just be the number 25 but that shows that the value of the variable (age) is 25 and since JavaScript works from top to bottom you'll want to put variables pretty high up so their remembered

lets say we want to show multiple variables, well that's easy

let age = 25;
let year = 2005;
console.log(age,year);

with a comma you can put multiple variables on one line.
the output of this command would be 25 2005
since JavaScript reads from top to bottom you can do

let age = 25;
console.log(age)

let age = 30;
console.log(age)

and you'll see that the second line of console.log shows 30 while the first still shows 25.
an important note is that the const command will create an error if you try to give it a new value so

const age = 25;
age = 30
console.log(age)

all that can come out of this is an error

Data Types at a Glance

There are currently 7 types of data in JavaScript:
Number which is just a number
String which is letters to make statements
Boolean is true or false used for evaluating conditions

Null a variable with no value
Undefined is a variable with no determined value
Object a complex data structure
Symbol is used within objects

Strings and String Methods

strings store letters number and more, their a line of text that are held
for strings you always use either double or single quotes
strings can also equal values of variables
so lets make a variable with a value

let john = 'ThatGuy'

so now the variable (john) is equal to 'ThatGuy' so whenever we type out (john) in a console.log 'ThatGuy' will come out
but what if i want to have john's full name on my website

lets learn how to join variables together
and the best way to do this is with string addition

let firstName = 'john'
let lastName = 'johnderson'

let fullName = firstName + lastName;

console.log(fullnName)

after doing this there might not be a space between the names so what people will do is add a space to the equation

let firstName = 'john'
let lastName = 'johnderson'

let fullName = firstName + ' ' + lastName;

console.log(fullnName)

adding that extra space will make it so first and last name are seperated
another important fact is that javascript numbers start at 0
so the command

console.log(fullnName[0])

will give you the first letter in the name with console.log(fullnName[1]) giving you the second letter and so on and so on
as well as the command

console.log(fullName).length

will give you the number of characters within that variable
there is also
lastIndexOf
and
firstIndexOf
lastIndexOf('m') will look for the last time in a variable you type the letter m
firstIndexOf('m) will look for the first time in a variable you the the letter m

slice is a command that slices out certain parts of a variable so in a 30 word vairable if you slice (4,6) it will (starting from position 4) cut in the next 6 things, so everything before and after the slice will be cut out leaving only the slice

replace is a command that replaces the first instance of a character with a character of your choice
so for example
john
replace (o,w)
so his name is now jwhn
its used with variables

Numbers

number as just that, numbers
JavaScript has some calculating abilities but it has its limits
the console can also calculate radius, percent, remainder, and other things like it. most of the math is very 2D shape based
also each equation has its own symbol
addition +
subtraction -
multiplication *
division /
to the power of **
percent %
so lets do some math

let radius = 10;
const pi = 3.14;

let result = pi * radius**2;

then we get the area 314 and so we can see that JavaScript is capable of some pretty complex math but I don't think we can use it to find the square root of -1
Now that we've seen JavaScript do some math lets see how it did it
so we have to go over the order of operations
starting with brackets
then things to the power of
division
multiplication
addition
subtraction

Template Strings

template strings are long equations of variables and strings

const title = 'Welcome';
const author = 'mario';
const likes = 30;

let result = 'the website called ' + title + 'by ' + author + 'has ' likes + ' likes';
console.log(result);

Variables can be added to strings without the addition equation
as so:

let result = 'The blog called ${title} by ${author} has ${likes} likes';
console.log(result);

and the final part is making HTML templates

let html =
<h2>${title}</h2>
<p>By ${author}</p>
<span>This blog has ${likes} likes </span>
console.log(html)

Arrays

arrays are rows or columns of things. it creates a list

let ninjas = ['shaun', 'ryu', 'chun-li']
console.log(ninjas)

if we add [1] to ninjas it makes a new variable and it makes the it so the first list option is shown. but you can also make it into a variable that will show up instead

let ninjas = ['shaun', 'ryu', 'chun-li']
let ninjas[1] = 'ken'
console.log(ninjas[1])

lets make some more lists of things

let ages = [20, 25, 30, 35];
console.log(ages[2]);

you see the number [2] will make only the number 25 show up

lets say that your tired of these lists of similar things you can make lists of strings and numbers

let random = [1, 'john', 3, 'steve', 5];
console.log(random);

by using the .length addition it shows the number of items in the list, so using .length above would show 5 items

let random = [1, 'john', 3, 'steve', 5];
console.log(random.length);

next we can make ways so that everything can be joint using a singular method

let result = random.join(',');
console.log(result)

but now lets mix more than just list items lets mix lists.

let results = random.concat(['john', 'steve'])

Null and Undefined

something with no value or a unknown value, null is intentionally not having a value but undefined is an unintentional lack of value.
first lets make a variable with no value

let age;

when something has no value it will be given its own value automatically 'undefined'
also adding anything by a undefined number it will come out as NaN or Not A Number
if we intentionally make a value null we do something different

let age = Null;

Boolean & Comparisons

Boolean is true and false, its and 1 and 0 of JavaScript and is one of the major parts of it
console.log(true, false) looks like a string when its set up but the way you know this is a command is the lack of quotes
we use Booleans to see if something is true
so lets mess with Booleans

let email = '[e-mail]';

let result = email.includes('@');

console.log(result);

this command searches for a '@' in the variable email, if there is an @ it will come back as true, if not then it will come back as false
also lets say in your code age = 25
you can double check by putting age == 25
the double = means you want to see if age is equal to 25
you change it from a statement to a question
in a similar way if age = 25 you can ask age != 30
which tells the code age isn't 30 right? so it will make sure that age does not equal 30
you can also see if age > 40 or age < 40
these work just as to see whether age is greater or lesser than a number, in this case 40
same things but => or =< is greater than or equal to/ less than or equal to

Loose vs Strict Comparison

loose comparison means two types of the same thing are equal
25 = '25'
strict comparison does not allow this meaning that 25 cannot equal anything but 25

Type Conversion

type conversion changes the type of data on something
an example is something going from string to number
you can add strings of numbers to a number to make it into a number type data

also using the command typeof will tell you the type of data it is