What is Javascript(JS)?
● JavaScript is a programming language for use in HTML pages
● Script is a programming language for use in HTML pages
● Invented in 1995 at Netscape Corporation (LiveScript)
● JavaScript programs are run by an interpreter built into the user's
web browser (not on the server)
What can JavaScript Do?
● JavaScript can dynamically modify an HTML page
● JavaScript can react to user input
● JavaScript can validate user input
● JavaScript can be used to create cookies (yum!)
● JavaScript is a full-featured programming language
● JavaScript user interaction does not require any communication
with the server
Using JavaScript in your HTML
● JavaScript can be inserted into documents by using the SCRIPT
tag
Internal Script……………………..,.
<html>
<head>
<title>Hello World in JavaScript</title>
</head>
<body>
<script type="text/javascript">
console.log("Hello World!");
</script>
</body>
</html>
External Scripts
● Scripts can also be loaded from an external file
● This is useful if you have a complicated script
JavaScript Variables
Variable means anything that can vary. JavaScript includes variables
which hold the data value and it can be changed anytime.
JavaScript uses reserved keywords var,let and const to declare a variable.
A variable must have a unique name. You can assign a value to a variable
using equal to (=) operator when you declare it or before using it.
Variables declared within a function are local to that function and
variables declared outside any functions are global functions( variable
scope)
Creating a variable in JavaScript is called "declaring" a variable.This can
be done using the var ,let and const keywords.
After the declaration, the variable has no value (technically it has the value
of undefined).
To assign a value to the variable, use the equal sign:
Eg let name = “Albert”;
JavaScript Operators
An operator performs some operation on single or multiple operands (data
value) and produces a result. For example 1 + 2, where + sign is an
operator and 1 is left operand and 2 is a right operand. + operator adds two
numeric values and produces a result which is 3 in this case.
JavaScript includes the following categories of operators.
1. Arithmetic Operators
Arithmetic operators are used to perform mathematical operations
between numeric operands.
+ Adds two numeric operands.
- Subtract right operand from left operand
* Multiply two numeric operands.
/ Divide left operand by right operand.
% Modulus operator. Returns remainder of two
operands.
+ Increment operator. Increase operand value by
+ one.
-- Decrement operator. Decrease value by one.
2. Comparison Operators
JavaScript language includes operators that compare two
operands and return Boolean value true or false.
== Compares the equality of two operands
without considering type.
=== Compares equality of two operands with
type.
!= Compares inequality of two operands.
> Checks whether left side value is greater
than right side value. If yes then returns true
otherwise false.
< Checks whether left operand is less than
right operand. If yes then returns true
otherwise false.
>= Checks whether left operand is greater than
or equal to right operand. If yes then returns
true otherwise false.
<= Checks whether left operand is less than or
equal to right operand. If yes then returns
true otherwise false.
3. Logical Operators
Logical operators are used to combine two or more conditions.
JavaScript includes following logical operators.
&& && is known as AND operator. It checks
whether two operands are non-zero (0, false,
undefined, null or "" are considered as zero), if
yes then returns 1 otherwise 0.
|| || is known as OR operator. It checks whether
any one of the two operands is non-zero (0,
false, undefined, null or "" is considered as
zero).
! ! is known as NOT operator. It reverses the
boolean result of the operand (or condition)
4. Assignment Operators
JavaScript includes assignment operators to assign values to variables
with less key strokes.
= Assigns right operand value to left operand.
+= Sums up left and right operand values and assign the
result to the left operand.
-= Subtract right operand value from left operand value
and assign the result to the left operand.
*= Multiply left and right operand values and assign the
result to the left operand.
/= Divide left operand value by right operand value and
assign the result to the left operand.
%= Get the modulus of left operand divide by right
operand and assign resulted modulus to the left
operand.
JavaScript Data Types
Data type indicates characteristics of data. It tells the compiler whether the
data value is numeric, alphabetic, date etc., so that it can perform the
appropriate operation.
JavaScript includes primitive and non-primitive data types as per latest
ECMAScript 5.1.
Primitive Data Types
1. String- A string is textual content. It must be enclosed in single
or double quotation marks.
2. Number-Number type represents integer, float, hexadecimal,
octal or exponential value. First character in a Number type
must be an integer value and it must not be enclosed in
quotation marks.
3. Boolean - Boolean can have only two values, true or false. It is
useful in controlling program flow using conditional statements
like if..else, switch, while, do..while.
Non-primitive Data Type
1. Object
Object is a non-primitive data type in JavaScript. It is like any other
variable, the only difference is that an object holds multiple values in
terms of properties and methods. Properties can hold values of
primitive data types and methods are functions.
Var person = { firstNAme : “Albert” , lastName : “Byrone”}
2. Date = new Date()
Date methods:
getFullMonth
getHour
getDay
3. Array -
An array is a special type of variable, which can store multiple
values using special syntax. Every value is associated with a numeric
index starting with 0. The following figure illustrates how an array
stores values.
Var cars = [ “car”, 1, 3]
JavaScript is a dynamic or loosely-typed language because a variable can
hold value of any data type at any point of time.
JavaScript Functions
In JavaScript, a function allows you to define a block of code, give it a
name and then execute it as many times as you want.
A JavaScript function can be defined using a function keyword.
//defining a function
function sum()
// code to be executed
};
sum();
function sum(){
//code
sum();
//calling a function
<function-name>();
Function Expression
JavaScript allows us to assign a function to a variable and then use that
variable as a function. It is called function expression.
var add = function sum(val1, val2) { return val1 +
val2; }; var result1 = add(10,20);
Anonymous function
JavaScript allows us to define a function without any name. This
unnamed function is called a anonymous function. Anonymous
function must be assigned to a variable.
var showMessage = function (){ alert("Hello
World!"); }; showMessage();
NB:
Javascript Conditions
● Use if to specify a block of code to be executed, if a specified
condition is true
● Use else to specify a block of code to be executed, if the same
condition is false
● Use else if to specify a new condition to test, if the first condition is
false
● Use switch to select one of many blocks of code to be executed
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each
time with a different value.
● for - loops through a block of code a number of times
● for/in - loops through the properties of an object
● for/of - loops through the values of an iterable object
● while - loops through a block of code while a specified
condition is true
● do/while - also loops through a block of code while a
specified condition is true
Conditional statements control behavior in JavaScript and determine
whether or not pieces of code can run.
There are multiple different types of conditionals in JavaScript
including:
● “If” statements: where if a condition is true it is used to
specify execution for a block of code.
● “Else” statements: where if the same condition is false it
specifies the execution for a block of code.
● “Else if” statements: this specifies a new test if the first
condition is false.
Now that you have the basic JavaScript conditional statement
definitions, let’s show you examples of each.
If Statement Example
As the most common type of conditional, the if statement only runs if
the condition enclosed in parentheses () is truthy.
EXAMPLE
if (10 > 5) {
var outcome = "if block";
}
outcome;
OUTPUT
"if block"
Here’s what’s happening in the example above:
● The keyword if tells JavaScript to start the conditional
statement.
● (10 > 5) is the condition to test, which in this case is true —
10 is greater than 5.
● The part contained inside curly braces {} is the block of code
to run.
● Because the condition passes, the variable outcome is
assigned the value "if block".
Else Statement Example
You can extend an if statement with an else statement, which adds
another block to run when the if conditional doesn’t pass.
EXAMPLE
if ("cat" === "dog") {
var outcome = "if block";
} else {
var outcome = "else block";
}
outcome;
OUTPUT
"else block"
IIn the example above, "cat" and "dog" are not equal, so the else block
runs and the variable outcome gets the value "else block".
Else If Statement Example
You can also extend an if statement with an else if statement, which
adds another conditional with its own block.
EXAMPLE
if (false) {
var outcome = "if block";
} else if (true) {
var outcome = "else if block";
} else {
var outcome = "else block";
outcome;
OUTPUT
"else if block"
You can use multiple if else conditionals, but note that only the first
else if block runs. JavaScript skips any remaining conditionals after it
runs the first one that passes.
EXAMPLE
if (false) {
var outcome = "if block";
} else if (true) {
var outcome = "first else if block";
} else if (true) {
var outcome = "second else if block";
} else {
var outcome = "else block";
}
outcome;
OUTPUT
"first else if block"
An else if statement doesn’t need a following else statement to work.
If none of the if or else if conditions pass, then JavaScript moves
forward and doesn’t run any of the conditional blocks of code.
EXAMPLE
if (false) {
var outcome = "if block";
} else if (false) {
var outcome = "else if block";
outcome;
OUTPUT
"first else if block"
JQUERY Resources
https://www.w3schools.com/jquERy/default.asp
https://jqueryui.com/
