CHAPTER-4

Client Side Scripting

JavaScript
• Console
• The console is a panel that displays important messages, like errors, for
developers. Much of the work the computer does with our code is invisible to
us by default. If we want to see things appear on our screen, we can print,
or log, to our console directly.
• Syntax
• Is case sensitive
• Doesn’t require semi colon
• It has dynamic declaration of variables
JavaScript
• Variable declaration
• var
• let
• const
• Cannot reassign
• Have to assign value
• Data Types
• Primitive
• Stored directly in the location the variable accesses
• String
• Number
• Boolean
• Null
• Undefined
JavaScript
• Data types
• Reference
• A pointer to a location in memory
• Arrays
• Objects
• Functions
• Dates

• Type conversion
• toString()
• parseInt()
• parseFloat()
JavaScript
• Math Object
• Math.PI
• Math.E
• Math.round()
• Math.ceil()
• Math.floor()
• Math.sqrt()
• Math.abs()
• Math.pow()
• Math.min()
• Math.max()
• Math.random()
JavaScript
• String Methods
• Concat
• Template Literals
• Length
• Change case
• Indexing
• indexOf method
• Getting last item from string
• Substring
• Slice
• Split
• Replace
• includes
JavaScript
• Array and Array methods
• Arrays are mutable
• Push
• Unshift
• Pop
• Shift
• splice
• Reverse
• Concat
• Sort
JavaScript
• Object literals
• Date and Time
• getDate
• getDay
• getMonth
• getFullYear
• getHour
• getSecond
• getMillisecond
JavaScript
• Conditional Statements
• Single line conditional statements doesn’t require curly braces but it’s
always advisable to use curly braces
• If
• Equality
• equivalence
• Else-if
• Ternary operators
• Switch
JavaScript
• Functions
• Function declaration
• Declaring functions
• Function Parameters
• Passing values to the function
• Default parameters
• Function expression
• Assigning the function into a variable
• Property methods
• Assigning the functions inside the object and calling them using object method
JavaScript
• Loops
• For
• While
• Do-while
• forEach
• For-in
JavaScript
• Windows Object
• console.log
• alert()
• prompt()
• confirm
• window.location
• window.location.search
• window.location.reload
• window.history.go
• Scope
• Block level
• Global
JavaScript
• DOM Manipulation
• Single child selectors
• document.getElementById()
• document.QuerySelector()
• Multiple child Selectors
• document.getElementsByClassName()
• document.getQuerySelectorAll()
• document.getElementsByTagName()
• Methods
• Getting id and class
• Style
• innerText
• innerHTML
JSON
• Let’s say there is a website which display information about laptops.
The website get’s its data from the server so they need to talk to each
other to transfer data
• But in what format the data can be transferred?
• Plain text
• The first type of laptop is low end laptop which is suitable for light office work.
The second type of laptop is high end laptop which is suitable for multi tasking
and taking caring of high process demanding software and applications
• This text is easy to read and understand for the end user but not for the
server
JSON
• Then to overcome this issue XML is introduced
<?xml version="1.0" encoding="UTF-8"?>
<root>
<laptop>
<id>01</id>
<name>Low end laptop</name>
</laptop>
<laptop>
<id>02</id>
<name>High end laptop</name>
</laptop>
</root>
• XML has been in use for many years, still the format could be bulky and cause too much
overhead for web services
JSON
• That is when JSON came into play
• JSON stands for JavaScript Object Notation, a lightweight format for
storing and transporting data from a server to a web page, it is "self-
describing" and easy to understand
JSON
JSON
{
“Laptop": [
{
"id":"01",
"name": “low end laptop",
“uses": [“office",“movie"]
},
{
"id":"02",
"name": “high end laptop",
“uses": [“graphics", “3D",“Gaming"]
}
]
}
JSON
• Advantages
• Less verbose
• Objects align in code
• Faster
• Readable
• Structure matches the data
Example Programs in JS
• Word count
• Random number generator
• Email validation
• Password validation
• Reverse string
• Switch variable value
• Arithmetic and logical operators (+, -, *, /, ||, &&)
• DOM Manipulation (id, class, query and queryAll selectors)
• Array and String Methods