FULLSTACK DEVLOPMENT

FULL SATCK DEVELOPMENT

MODULE-1
I) Basic JavaScript Instructions:

1) STATEMENTS:
• A script is a series of instructions that a computer can follow one-by-one.
• Each individual instruction or step is known as a statement.
• Statements should end with a semicolon.

Example

• Each of the lines of code in above example is a statement.

• The curly braces indicate the start and end of a code block.

2) Java script Is Case Sensitive:

• JavaScript is case sensitive so hourNow means something different to HourNow or
HOURNOW.

3) Statements Are Instructions And Each One Starts On A New Line.

• A statement is an individual instruction that the computer should follow. Each one should
start on a new line and end with a semicolon.
• The semicolon also tells the JavaScript interpreter when a step is over, indicating that it
should move to the next step.

4) Statements Can Be Organized Into Code Blocks

II) COMMENTS

• They help make your code easier to read and understand.

• This can help you and others who read your code.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 1

FULLSTACK DEVLOPMENT

• Multi-Line Comments
To write a comment that stretches over more than one line, you use a multi-line comment,
starting with the /* characters and ending with the * / characters.
• Single-Line Comments
In a single-line comment, anything that follows the two forward slash characters // on that
line will not be processed by the JavaScript interpreter.
Single line comments are often used for short descriptions of what the code is doing.

III) WHAT IS A VARIABLE?

• A script will have to temporarily store the bits of information it needs to do its job. It can
store this data in variables.
How to declare variable:

• JavaScript interpreter knows that var keyword used to create a variable.

• In order to use the variable, you must give it a name.
Example: quantity
• If a variable name is more than one word, It is usually written in cameIcase. This means
the first word is all lowercase and any subsequent words have their first letter capitalized.
How to assign the value to the variable:
Example:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 2

FULLSTACK DEVLOPMENT

• Once you have created variable ,you can assign a value to the variable.
• Variable name should describe the kind of data the variable holds.(ex.quantity)
• The equals (=) operator is used to assign a value to the variable.
• Until you have assigned a value to the variable ,the programmer say the value is
undefined.

USING A VARIABLE TO STORE A NUMBER

• Here, three variables are created and values are assigned to them.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 3

FULLSTACK DEVLOPMENT

USING A VARIABLE TO STORE A STRING:

Example:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 4

FULLSTACK DEVLOPMENT

USING QUOTES INSIDE A STRING:

Example:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 5

FULLSTACK DEVLOPMENT

USING A VARIABLE TO STORE A BOOLEAN:

Example:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 6

FULLSTACK DEVLOPMENT

SHORT HAND FOR CREATING VARIABLES:

RULES FOR NAMING VARIABLES:

Here are six rules you must always follow when giving a variable a name:

• The name must begin with a letter, dollar sign ($), or an underscore (_). It must not start
with a number.
• The name can contain letters, numbers, dollar sign ($), or an underscore (_). Note that
you must not use a dash(-) or a period (.) in a variable name.
• You cannot use keywords or reserved words.
• All variables are case sensitive, so score and Score would be different variable names.
• Use a name that describes the kind of information that the variable stores.
• If your variable name is made up of more than one word, use capital letter for the first
letter of every word after the first word.

IV) DATA TYPES

• NUMERIC DATA TYPE
• STRING DATA TYPE
• BOOLEAN DATA TYPE

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 7

FULLSTACK DEVLOPMENT

In addition to these three data types, JavaScript also has others (arrays,objects,
undefined, and null)

NUMERIC DATA TYPE:

• The numeric data type handles numbers.
• You can use numbers 0-9.
• You can also have negative numbers (such as -23678)
• You can also have Decimals (three quarters is written as 0.75).
STRING DATA TYPE:
• The strings data type consists of letters and other characters.
• The string data type is enclosed within a pair of quotes(“hai”,’Hello’)
• These can be single or double quotes, but the opening quote must match the closing
quote.
BOOLEAN DATA TYPE:
• Boolean data types can have one of two values: true or false.

ARRAY DATA TYPE:

An array is a special type of variable. It doesn't just store one value; it stores a list of values that
are related to each other.
UNDEFINED DATA TYPE:
• A variable that has been declared, but no value has been assigned to it yet.
NULL DATA TYPE:
• A variable with no value -it may have had one at some point, but no longer has a value.

CREATING AN ARRAY:

• The values are assigned to the array inside a pair of square brackets, and each value is
separated by a comma.
• The values in the array do not need to be the same data type, so you can store a string, a
number and a Boolean all in the same array.
• This technique for creating an array is known as an array literal.

Example-1:
var colors;
colors =['white', 'black', ' custom '];

• Array created using a different technique called an array constructor.

• This uses the new keyword followed by Array();
• The values are then specified in parentheses (not square brackets), and each value is
separated by a comma.
• You can also use a method called itern() to retrieve data from the array.
• The index number of the item is specified in the parentheses.
Example:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 8

FULLSTACK DEVLOPMENT

VALUES IN ARRAYS:
• Values in an array are accessed as if they are in a numbered list. It is important to know
that the numbering of this list starts at zero (not one).

• Numbering Items In An Array

• Accessing Items In An Array
• Number Of Items In An Array

NUMBERING ITEMS INAN ARRAY

• Each item in an array is automatically given a number called an index. This can be used
to access specific items in the array.
• Consider the following array which holds three colors:
var colors;
colors= ['white ',
'black ',
' custom'];

ACCESSING ITEMS IN AN ARRAY

• To retrieve the third item on the list, the array name is specified along with the index
number in square brackets.
Example:
var itemThree;
itemThree = colors [ 2] ;

• Here you can see a variable called i temThree is declared. Its value is set to be the third
color from the colors array.

NUMBER OF ITEMS IN AN ARRAY

• Each array has a property called length, which holds the number of items in the array.
• The name of the array is followed by a period symbol (or full stop) which is then
followed by the length keyword.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 9

FULLSTACK DEVLOPMENT

Example:
var numColors ;
numColors =colors.length;
• Above you can see that a variable called numColors is declared. Its value is set to be the
number of the items in the array.

V) EXPRESSIONS:
• An expression evaluates into (results in) a single value.
Broadly speaking there are two types of expressions.

1. Expressions that just assign a value to a variable

2. Expressions that use two or more values to return a single value

Expressions that just assign a value to a variable:

• This is done using the assignment operator (the equals sign).
var color = 'beige';
• When you first declare a variable using the var keyword, it is given a special value of
undefined. This will change when you assign a value to it.
• Undefined is a data type like a number, string, or Boolean.

Expressions that use two or more values to return a single value:

• You can perform operations on any number of individual values (see next page) to
determine a single value.
For example:
var area = 3 * 2;
OPERATORS:
• Operators allow programmers to create a single value from one or more values.

• Assignment Operators
• Arithmetic Operators
• String Operators
• Comparison Operators
• Logical Operators

Assignment Operators:
• JavaScript contains the following mathematical operators, which you can use with
numbers.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 10

FULLSTACK DEVLOPMENT

STRING OPERATOR:
• There is just one string operator: the+ symbol. It is used to join the strings on either side of it

VI) WHAT IS A FUNCTION?

• Functions let you group a series of statements together to perform a specific task.
• If different parts of a script repeat the same task, you can reuse the function (rather than
repeating the same set of statements).
i) Declaring A Function:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 11

FULLSTACK DEVLOPMENT

• To create a function, you give it a name and then written the statements needed to
achieve its tasks inside the curly braces. This is known as Function Declaration.
• Declare a function using the function keyword.
• Give the function name followed by parenthesis.
• write the block of code(statements) within curly braces.

ii) Calling a function:

• After declaring the function, you can execute all the statements between its curly braces
with just one line of code. This is known as calling function.

• The function stores the instructions for a specific task.

• When you need the script to perform that task, you call the function.
• The function executes the code in that code block.
• When it is finished, the code continues to run from the point where it was initially called.
iii) Calling functions that need information:
• When you call a function that has parameters, you specify the values it should use in the
parentheses that follow its name.
• The values are called arguments, and they can be providing as values or as variable.
`

iv)Getting a single value out of a function:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 12

FULLSTACK DEVLOPMENT

• Some functions return information to the code that called them.

• The wallOne variable holds the value 15,which was calculated by the calculateArea()
function.
• The wallTwo variable holds the value 40,which was calculated by the calculateArea()
function.
• This also demonstrates how the same function can be used to perform the same steps with
different values.
v) Getting a multiple values out of a function:
• Functions can return more than one value using an array.
Example:
This function calculates the area and volume of a box.
`

• The areaOne variable holds the area of a box that is 3X2.The area is the first value in
the sizes array.
• The volumeOne variable holds the volume of a box that is 3X2X3.The volume is the
second value in the sizes array.
vi)Function Expression:
• If you put a function where the interpreter would expect to see an expression, then it is
treated as an expression, and it is known as a function expression.
• In function expressions, the name is usually omitted. A function with no name is called
an anonymous function.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 13

FULLSTACK DEVLOPMENT

vii) Variable Scope:

• The location where you declare a variable will affect where it can be used within your
code. If you declare it within a function, it can only be used within that function. This is
known as the variable's scope.
• Two types of variable scope are:
i) Local Variable
ii) Global Variable
• When a variable is created inside a function using the var keyword, it can only be used in
that function. It is called a local variable or function-level variable. It is said to have
local scope or function-level scope.
• If you create a variable outside of a function, then it can be used anywhere within the script. It is
called a global variable and has global scope.
• Below, area is a local variable and wallSize is a global variable.

Example:

VII) WHAT IS AN OBJECT?

• Objects group together a set of variables and functions to create a model of a something you
would recognize from the real world. In an object, variables and functions take on new names.
• If a variable is part of an object, it is called a property.
• If a function is part of an object, it is called a method.
• Methods represent tasks that are associated with the object.
Example:
• This object represents a hotel. It has five properties and one method. The object is in
curly braces. It is stored in a variable called hotel.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 14

FULLSTACK DEVLOPMENT

WAYS TO CREATE OBJECTS:

• Literal Notation
• Object Constructor Notation

Creating an object using literal notation:

• Literal notation is the easiest and most popular way to create objects.

• This object is called hotel which represents a hotel.

• It shows the name of the hotel by accessing the object's name property and the number of
vacant rooms using the checkAvailability() method.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 15

FULLSTACK DEVLOPMENT

• To use the method, you can use the object name followed by the method name.
hotel.checkAvailability().

Accessing an object:
• Access the object properties and methods of an object using dot notation(.).

Example :

• Also access the properties using square brackets.

Creating Objects Using Constructor :

• The new keyword and the object constructor create a blank object. Then add
properties and methods to the object.

Example:

Create The Object, Then Add Properties & Methods:

• In both of these examples, the object is created on the first line of the code sample. The
properties and methods are then added to it afterwards.
• Once you have created an object, the syntax for adding or removing any properties and
methods from that object is the same.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 16

FULLSTACK DEVLOPMENT

Creating An Object With Properties & Methods:

• A colon separates the key/value pairs. There is a comma between each key/value pair.
• The function can be used to create multiple objects. The this keyword is used instead of
the object name.

This (IT IS A KEYWORD):

• The keyword this is commonly used inside functions and objects. Where the function is
declared alters what this means. It always refers to one object, usually the object in which
the function operates.
• We can use this keyword to return function in global scope and global variables.

• When a function is created at the top level of a script (that is, not inside another object or
function), then it is in the global scope or global context.

• All global variables also become properties of the window object. so when a function is
in the global context, you can access global variables using the window object, as well
as its other properties.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 17

FULLSTACK DEVLOPMENT

Built-in objects:
• The three groups of built-in objects
1. Browser object model
2. Document object model
3. Global JavaScript object

1.Browser object model:

• The browser object model creates a model of the browser tab or window.
• It is the topmost object in the Browser Object Model and it contains other objects that tell
you about the browser.
• Properties and methods of window object

2. Document object model:

• The topmost object in the Document Object Model (or DOM) is the document object.
• It represents the web page loaded into the current browser window or tab.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 18

FULLSTACK DEVLOPMENT

Properties and methods of DOM

3. Global JavaScript object: string

• The global objects do not form a single model. They are group of individual
objects that relate to different parts of the JavaScript language.
Properties and methods of string:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 19

FULLSTACK DEVLOPMENT

Global JavaScript object: Number

• Whenever you have a value that is a number, you can use the methods and properties of
the Number object on it.

Global JavaScript object: MATH

• The Math object has properties and methods for mathematical constants and functions.

Global JavaScript object: DATE and TIME:

• Once you have created a Date object, the following methods let you set and retrieve the
time and date that it represents.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 20

FULLSTACK DEVLOPMENT

DECISIONS AND LOOPS:

• There are two components to a decision
1. Evaluation of a condition (comparison operators
==,!=,===,!==,>,<.>=,<=,logical operators &&,||,!)
2. Conditional statements(if,then,else)

If statement: if statement evaluates a condition. If the condition evaluates to true any

statements in the subsequent code block are executed.

Example:

If… else statement: The if…else statement checks a condition, if it is resolves to true the
first code block will be executed, if the condition resolves to false the second code block
is run instead.

Switch statement: A switch statement starts with a variable called the switch value. Each case
indicates a possible value for this variable and the code that should run if the variable matches
that value.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 21

FULLSTACK DEVLOPMENT

Loops:

• Loops checks a condition .if it returns true ,a code block will run . then the
condition will be checked again and if it still returns true, the code block will run
again.it repeats until the condition returns false.
• There are 3 common types of loops
For loop, While loop, Do while loop
For loop:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 22

FULLSTACK DEVLOPMENT

While loop:

Do while loop:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 23