JavaScript intro 
Published: 2020-11-19 18:55:12


# Adding JavaScript to to a webpage
before we start coding JavaScript we need to link JavaScript to our page.
```javascript
<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.
```JavaScript
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 
```JavaScript
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.
```javascript 
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 
```javascript 
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 
```javascript 
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
```javascript 
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
```javascript 
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
```javascript 
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 
```javascript 
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
```javascript 
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 
```javascript
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
```javascript 
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
```javascript
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:
```javascript 
let result = 'The blog called ${title} by ${author} has ${likes} likes';
console.log(result);
```
and the final part is making HTML templates
```javascript
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
```javascript 
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 
```javascript 
let ninjas = ['shaun', 'ryu', 'chun-li']
let ninjas[1] = 'ken'
console.log(ninjas[1])
```
lets make some more lists of things
```javascript 
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
```javascript 
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
```javascript 
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
```javascript
let result = random.join(',');
console.log(result)
```
but now lets mix more than just list items lets mix lists. 
```javascript 
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
```javascript
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 
```javascript
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
```javascript
let email = 'john@johnmail.com';

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