introduction to Javascript

#javascript #beginners

MOSE

History of JavaScript

JavaScript was created at Netscape Communications ****by Brendan Eich in 1995. Netscape and Brendan Eich designed JavaScript as a scripting language for Netscape Navigator which was a leading web browser in the 1990s.
JavaScript's first name was Mocha. After that, it was known as Live Script and later known as JavaScript.

JavaScript placement

JavaScript can be placed in a html file in the body section using a script tag and placing you JavaScript code within the tags.

<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>

Can also be placed in an external file source with an extension ".js" e.g filename.js then include it in a html code using script tag and **src **attribute

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

JavaScript Variables

JavaScript has variables that you can declare with
the optional var keyword.var age="21years"
JavaScript variable shouldn't start with numbers but with letters or underscore. i.e can be declared as _name="Moses" and name="Moses" but *not *1name="Moses" which is an invalid variable
They are case sensitive. i.e Name and name are two different variables.
Don`t use reserved words as variables
NB:

Operators

let's declare variables
A = 10 B = 20

1. +(Addition)
Adds two operands. Ex:

result = a + b; document.write("a + b = "); document.write(result);
will give
a + b = 43
NOW TRY USING THE OTHER OPERATORS

2. -(Subtraction)
Subtracts the second operand from the first
Ex: A - B will give -10

3. *(Multiplication)
Multiply both operands
Ex: A * B will give 200

4. / (Division)
Divide the numerator by the denominator
Ex: B / A will give 2

5. % (Modulus)
Outputs the remainder of an integer division
Ex: B % A will give 0

6. ++ (Increment)
Increases an integer value by one
Ex: A++ will give 11

7. -- (Decrement)
Decreases an integer value by one
Ex: A-- will give 9

Comparison Operetors

A = 10
B = 20

1. == (Equal)
Checks if the value of two operands are equal or not, if yes, then
the condition becomes true.
Ex:
result = (a == b); document.write("(a == b) => "); document.write(result);
THE OUTPUT FOR THE CODE WILL BE
(a == b) => false

2. != (Not Equal)
Checks if the value of two operands are equal or not, if the values
are not equal, then the condition becomes true.
Ex: (A != B) is true.

3. > (Greater than)
Checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true.
Ex: (A > B) is not true.
4. < (Less than)
Checks if the value of the left operand is less than the value of
the right operand, if yes, then the condition becomes true.
Ex: (A < B) is true.

5. >= (Greater than or Equal to)
Checks if the value of the left operand is greater than or equal to
the value of the right operand, if yes, then the condition becomes
true.
Ex: (A >= B) is not true.

6. <= (Less than or Equal to)
Checks if the value of the left operand is less than or equal to the
value of the right operand, if yes, then the condition becomes
true.
Ex: (A <= B) is true.

Conditional statements

if else statement

The ‘if’ statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.
syntax
`

if (expression){
 Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}

Example

<html>
<body>
<script type="text/javascript">
<!--
var age = 20;
if( age < 18 ){
 document.write("<b>You are not qualified to enter the site</b>")
}else{
welcome to the site
}
//-->
</script>
<p>Try using a different variable value</p>
</body>
</html>

Output
You are not qualified to enter the site. Set the variable to a different value and ten try...
**

else if statement

else if statement allows JavaScript to make a correct decision out of several conditions.
syntax

if (expression 1){
 Statement(s) to be executed if expression 1 is true
}else if (expression 2){
 Statement(s) to be executed if expression 2 is true
}else if (expression 3){
 Statement(s) to be executed if expression 3 is true
}else{
 Statement(s) to be executed if no expression is true
}

Example

<html>
<body>
<script type="text/javascript">
<!--
var series = "outpost";
if( series == "blacklist" ){
 document.write("<b>TheBlacklist</b>");
}else if( series == "witcher" ){
 document.write("<b>The Witcher</b>");
}else if( series == "outpost" ){
 document.write("<b>The Outpost</b>");
}else{
 document.write("<b>Not Available</b>");
}
//-->
</script>
<p>Try using a different variable value</p>
</body>
</html>

output

The Outpost Try using a different variable value