To start off, JavaScript is an interpretive programming language, which can interact with html code, enabling dynamic content on sites.
There are various ways Javascript coding can be linked with a webpage. The two main methods are using internal and external Javascript.
When you want to use internal JavaScript, special tags are needed to interpret the code as JavaScript.
See below:
Whereas when using external Javascript files, it can be linked by placing like so:
The above method is usually placed inside of the <head></head> tags like so:
Then there are ways to use Javascript inline as well. When for example using the html onclick mehtod:
Let's start using Javascript.
To start off, let's say we want to create variables with Javascript.
This can easily achieved. The question you want to ask yourself is 'What do I want to save in the variable?' or even 'What is a variable?'.
Lets start with what is a variable is:
A variable is merely a container for data.
There are various types of variables. These are called Data Types. Here is the list with examples of each in brackets: String ( "Hello World" ), number ( 343 ) , boolean(which is either 0[true] or 1[false]), Arrays (This consists of a group of values like so [ 2,3,4,5,6 ]. This array example consists of 5 values) and lastly objects ( var person = { name : "Phillip", surname: "van der Berg", age: 23 }; ), but I will go into more depth on a later stage.
Lets say you have a textbox and want to save the user's input in a variable. Following is an example of each Data Type:
As seen above, the 'var' is merely how you declare a variable. Whatever comes after the equals sign (=) is what decides what type of variable it will be.
Now we move on to using for, while and do while loops.
1. A for loop can be used when you want to run certain code for a specific number of times of when you want to read date stored in Arrays or Objects.
Below is the basic structure of a for loop:
Now what does this mean?
First of all, the 'for' initializes the for loop with the perameters inside the parentheses. The 'var' merely declares the number variable 'x'. Then we look at x = 0; What this means is that we will start counting from 0, and x < 10 means that we don't want the value to become more than 10. Lastly, the x++ means the variable x will be incremented by 1. It can also be written as x = x + 1. If the value of x was to be printed out in the for loop, you will have the output of 0 1 2 3 4 5 6 7 8 9. Although it only goes up to 9, there are 10 values as it starts at 0.
Next there is a While loop. What this does, it runs the code in the body until the condition is met, for example:
As seen above, the variable x is declared, and in the while loop, it checks if x is equal to 2.
Fisrtly x is equal to 0, thus is not equal to 2, so the code inside will run. You will get the popup alert, after which x will increment by 1. Now it goes through the loop another time, with x = 1. Again the popup alert shows, because x is not equal to 2 and is yet again incremented. Now x is equal to 2, thus the condition is met, so this ends the while loop. Now the second alert will run.
Lastly we have a do while loop which looks like so:
The only difference between this and the while loop is that with a do while loop, the code is run before it checks whether x is equal to 2. What I have done is to change the x value to 3 and the while condition to check whether x is smaller than 2. Seeing that 3 is not smaller than 2, the while loop won't execute, but with the do while, because the condition isn't checked yet, the alert will execute and x will be incremented, then the condition will see that x is not smaller than 2, thus exiting the do while loop.
The last thing regarding the basics is if and else if statements.
Lets start with an if statement:
It is similar to a while loop only that it checks if a condition is met. In this case if the condition is met, the code inside will run, unlike the while loop.
First I set the variable x equal to 3. Now the if statement checks whether x is equal to 3 which is true in this case. Thus the code will run.
Next we have the if else statement. This is the same as the if statement, but uses an else with it:
As you can see, it checks whether the condition is met in the if statement, if it's not it goes to the else if statement to check whether that condition is met, and because it is, it will skip the last else statement.
How this works is it checks if condition is met, otherwise, it goes to the else if and if it is met, the coding inside that statement is run, otherwise it will go to the lase else statement, after which the code will run, if none of the conditions were met.
As seen above we say x = 3; This is how we set a variable to a given value. And if we look at the if statement's condition, we see x == 3. This checks whether the value of x is equal to 3. If you accidentally use only one '=' in the if statement, x will be set to 3 in this case, and the code will run, which you don't want.
Other than ==, you can use >, <, !=, <=, >=, ===, !==.
These are called Comparisson Operators. One reason they are used is to compare values of variables.
Next we have Conditional operators, which can also be used with an if statement.
These are &&, || and !
&& / and can be used to check multiple conditions at the same time, but when && is used, all conditions must meet. For example:
As seen on the left, we have 2 if statements. In the first on it checks whether x is smaller than 10 and whether girls is bigger than 10. Seeing that 10 (boys) is not smaller than 10, the condition is not met, as they both have to be correct.
In the second if statement, it checks if boys is smaller than 20, which is correct, and if girls if bigger than 10, which is also correct. Now the code will run.
|| / or works similar to the &&, except that with or, either of the conditions can be met for the code to run. Only one condition has to be met.
Lastly !/not.
I mostly use this for boolean variables, but can be used with other variables. Here is an example of both
!x will return true because x = false. It will return the opposite of the x value.In the second if statement, I created 2 conditions to show the difference, which are basically the same. They both check if x is not equal to 10. Just the different ways it can be used.
If anything is unclear, don't hesitate to ask. I will be adding more advanced tuotials during the new few weeks, so don't be scarse.
Good read I will definitely be following your blog! Keep it up!
ReplyDelete