Scribd
Upload
3 views

Introduction to JS

JavaScript (JS) is a programming language primarily used in HTML pages, allowing for dynamic content modification and user interaction. It features variables, operators, data types, functions, and control structures like loops and conditionals. JavaScript can be embedded in HTML using the SCRIPT tag and supports both internal and external scripts.

Uploaded by

Abdulfatah Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Introduction to JS

JavaScript (JS) is a programming language primarily used in HTML pages, allowing for dynamic content modification and user interaction. It features variables, operators, data types, functions, and control structures like loops and conditionals. JavaScript can be embedded in HTML using the SCRIPT tag and supports both internal and external scripts.

Uploaded by

Abdulfatah Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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/

You might also like