Scribd
Upload
9 views

Chapter 4 - Javascript in Webdev

about javascript indeep

Uploaded by

Abel Sisay
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Chapter 4 - Javascript in Webdev

about javascript indeep

Uploaded by

Abel Sisay
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Chapter Four

JAVASCRIPT
Introduction

• JavaScript is a lightweight, interpreted


programming language.
• Very easy to implement because it is integrated
with HTML.
• It is open and cross-platform.
• Great for developing front-end as well as back-end
softwares using different JavaScript based
frameworks like jQuery, React, Express, Node.JS etc.
• It comes installed on every modern web browser
• Chrome, Firefox, Safari, …
• you really do not need any special environment setup.
• JavaScript engines were originally used only in web
browsers
• now extended to mobile app development, desktop
app development, and game development.
Application of JavaScript

• Some of the applications of JavaScript


• Client side validation
• Verifying any user inputs before submitting to server
• Manipulating HTML Pages
• Adding and deleting any html tags, Change its look and
feel..
• User Notifications
• Back-end Data Loading
- Retrieve data from server using Ajax
• Presentations
• creating presentations with website look and feel with libraries like
RevealJS, BespokeJS
• Server Applications
• Build fast and scalable network applications including
webservers with Node JS
JavaScript Syntax

• You can place the <script> tags, anywhere in your page.


• In <Head> is Recommended.
• Language attribute specifies what scripting language you are using.
Type also tells the same thing and recommended in recent version of
HTML
• function document.write which writes a string or HTML (both)
into our HTML document.
• there is no main() function/method
JavaScript Syntax

• spaces, tabs, and newlines that appear in JavaScript


programs are ignored.
• Semicolons are Optional (if each statement is on separate
line).

• JavaScript is a
case-sensitive
language.

• Comments
Datatype

• Datatype - defines type of value and operation.


• JavaScript allows you to work with three primitive data types
• Numbers e.g. 123, 120.50, 123e5, 123e-5 etc.
− JavaScript does not make a distinction between integer
values and floating-point values.
− All numbers are represented as 64-bit floating-point values.
• Strings e.g “hello world" etc.
• You can use single or double quotes.
• Boolean e.g. true or false.
• JavaScript also defines two trivial data types,
• null and
• Undefined – a variable without a value
Datatype

• JavaScript supports a composite data type known as object.


• written with curly braces { }

• JavaScript arrays
• support numbered indexing
• are written with square brackets.
• Array items are separated by commas.
Identifiers and Reserved Words

• In JavaScript, the first character must be a letter, or an


underscore (_), or a dollar sign ($).
• Subsequent characters may be letters, digits, underscores, or
dollar signs.
• Reserved words (like JavaScript keywords) cannot be used as
names. abstract else instanceof switch do
boolean enum int synchronized double
break export interface this import
byte extends long throw in
case false native throws static
catch final new transient super
char finally null true with
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
Variables

• Variables are containers for storing data (values).


• There are 3 ways to declare a JavaScript variable: var, let,
const.

• After the declaration, the variable has no value ( undefined )


• To assign a value to the variable, use the equal sign.

• You can also assign a value to the variable when you declare
it.
• JS is untyped language. variable can hold a value of any data
type
Variables

• var
• can be re-declared and updated
• You can use the variable before it is declared (called
Hoisting)
• can NOT have block scope - Variables declared inside a { }
block can be accessed from outside the block

• let ( introduced in ES6 (2015) )


• can be updated but not re-declared
• must be Declared before use.
• have Block Scope - Variables declared inside a { } block
cannot be accessed from outside the block

• const ( also introduced in ES6 (2015) )


• Can not be updated and re-declared
• have Block Scope - Variables declared inside a { } block
cannot be accessed from outside the block
Operators

• Arithmetic Operators: +, -, *, /, %, **, ++, --


• Assignment Operators: =, +=, -=, /=, %=,
**=
• Comparision Operators: ==, ===, !=, !==, >,
>=, <, <=, ?
• Logical Operators: &&, ||, !
• Type Operators: typeof, instanceof
• Bitwise Operators: &, |, ~, ^, <<, >>, >>>
Operators

• + operator can also be used to add (concatenate) strings.

• Assignment operator += can also be used to concatenate


strings

• Adding a number and string, the result will be string.

• The order of the operation also matters


Operators

• JavaScript will try to convert strings to numbers in all numeric


operations.

• Trying to do arithmetic with a non-numeric string will result in


NaN

• Operator Precedence.
Conditional Statements

• Perform different actions for different decisions using


conditional statements
• If statement
• Switch statement
If Statements

• JavaScript supports the following forms of if..else statement −


• if statement

• if...else statement

• if...else if... statement.


switch Statements

• to perform a multiway branch


• especially when all of the branches depend on the value of a single
variable
Loops

• JavaScript supports different kinds of loops:


• for - loops through a block of code a number of times

• for/in - loops through the properties of an object


- one property from object is assigned to variablename
- this loop continues till all the properties of the object are
exhausted.
Loop …

• for/of - loops through the values of an iterable object


(iterable data structures such as Arrays, Strings, Maps, NodeLists)
Loop …

• 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
Function

• a block of code designed to perform a particular task


• executed when "something" invokes it or calls it.
• Declaration always begins with keyword function,
• no return type
Example Code

You might also like