Welcome to the World of JavaScript

What you should already know?

World Wide Web

Basic HTML

Some Coding Experience

Don't know Coding?

Not to Worry.. :)

You will learn to Code

What is JavaScript?

JavaScript...

• Cross Platform
• Object - Oriented
• Scripting Language

JavaScript...

Small

Light-Weight language

JavaScript...

Contains standard library of objects like 'Array', 'Date', 'Math' etc.

Client-Side JavaScript...

Extends the core language by supplying objects to control a browser and its Document Object Model (DOM)

Example...

Client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation

Server-Side JavaScript...

extends the core language by supplying objects relevant to running JavaScript on a server

Example...

It allows an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server

Are JavaScript & Java Same?

Yes, In some ways...

But...

Fundamentally they are different

The Differences...

Java is completely a programming language, whereas JavaScript is a coded program that can be introduced into HTML pages

The Differences...

Java is an Object Oriented programming language or rather structured language like C or C++ whereas JavaScript is a client side scripting language and it is said to be unstructured programming

Getting Started

Basics...

Borrows most of its syntax from Java & also influenced by AWK, Perl & Python

Basics...

It is Case Sensitive & Uses Unicode character set.

JavaScript Output

JavaScript can display data in different ways:

1. alert box - window.alert()

2. HTML output - document.write()

3. HTML Element - innerHTML

4. Browser Console - console.log()

window.alert()

document.write()

innerHTML

console.log()

JavaScript Syntax

A set of rules how JavaScript Programs are constructed. A computer program is a list of instructions to be executed by the programmer. In a programming language these are called statements. JavaScript statements are separated by semicolon.

JavaScript Statements

These are composed of 5 things:

1. Values / Variables

2. Operators

3. Expressions

4. Keywords &

5. Comments

JavaScript Declarations

There are 3 types of Declarations

1. var - declares a variable

2. let - declares a block scope local variable

3. const - declares a read-only named constant

Variables

A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).

Declaring Variables...

Keyword -> 'var'

var x = 12

Can be used to declare both Global and Local variables

x = 12

This simply declares a Global variable, can't be used locally

Declaring Literals

Literals are the fixed values in a JavaScript Program

Numbers

Strings

Expressions

JavaScript Operators

Two types of JavaScript Operators are there...

1. Assignment Operator

2. Arithmetic Operator

Assignment Operator (=)

Arithmetic Operators (+-*/)

JavaScript Keywords

JavaScript is Case Sensitive

The variable 'lastName' and 'lastname' are two different variables as all the JavaScript identifiers are Case Sensitive

JavaScript Statements

The statement tells that the browser to write "Hello World" inside an HTML element with id="demo"

Semicolons ;

Semicolons separates JavaScript Statements

When separated by Semicolon multiple statements in a single line is allowed

JavaScript White Spaces

JavaScript ignores multiple spaces. You can white spaces to make it more readable.

JavaScript Line-Length & Line-Break

For best readability, programmers often like to avoid code lines longer than 80 characters.

If a JavaScript statement doesn't fit in one line, the best place to break it is, after an operator

JavaScript Code Blocks

JavaScript statement can be grouped together into code blocks (inside curly bracket {...})

Purpose of code blocks is to define statements to be executed together

JavaScript Keywords

1. break - terminates a switch loop

2. continue - jumps out of a loop and starts at the loop

3. debugger - stops the execution of JavaScript and calls the debugging function (if available)

4. do...while - executes a block of statements & repeats when the condition is true

5. for - marks a block of statements to be executed as long as the condition is true

Keywords...

6. function - declares a function

7. if...else - marks a block of statements to be executed depending upon a condition

8. return - exits a function

9. switch - marks a block of statements to be executes depending upon different cases

10. try...catch - implements error handling to block of statements

11. var - declares a variable

Keywords (contd...)

JavaScript Comments

Example...

JavaScript Data Types

JavaScript variables can hold number like 100 or string like "Hello World". Javascript can handle many types of data but among them the two most imp datatypes are number and string

Declaring JavaScript Variables

Example

Value = undefined

A variable declared without a value will be declared as a undefined variable

JavaScript Operators

+    Addition

-    Subtraction

*    Multiplication

/     Division

%   Modulus

++   Increment

--    Decrement

JavaScript Assignment Operators

Operator                Example               Same As

=                         x = y                    x = y

  + =                            x + = y                  x = x + y

   - =                            x - = y                   x = x - y

   * =                           x * = y                    x = x * y

    / =                           x / = y                    x = x / y

   % =                         x % = y                     x = x % y

JavaScript String Operators

The + operator is used to concatenate strings

Adding Strings and Numbers

Adding two numbers will return a number but adding a number and a string will return a string

JavaScript Comparison & Logical Operators

Operator & Operands

Operands - The numbers in an arithmetic operation

Operator - The operation to be performed between to operands