Learn JavaScript From Scratch

Learn JavaScript From
Scratch
Mohd Manzoor Ahmed
(Microsoft Certified Trainer | 15+yrs Exp)

What Are We Going To Learn?
● Introduction To JavaScript
● Introduction To Visual Studio
● Modes Of Execution
● Data Types In JavaScript
● Conditional Statements
● UnConditional Statements
● Iterative or Loop
● Types Of Variables
● Events
● OOPs Through JavaScript
● Object
● Class
● Properties
● Methods

Enroll Here
At 50% OFF - Use Coupon Code as ‘HALF-OFF’

Why JavaScript?
● We need responsive HTML pages.
○ React to events.
○ Read and write HTML elements.
○ Validate data.
○ Detect the visitor's browser.
○ Lot more these days....

What is JavaScript?
● JavaScript is a scripting and lightweight programming language.
● It is an interpreted language and requires a browser to run it.
● Everyone can use JavaScript without purchasing any license.
● It is usually embedded directly into HTML pages in script tag inside head tag.
● You can use any text editor to write javascript including HTML
○ <head>
○ <script type=”text/javascript”>

Display Hello World
● Mostly used methods to display any content at runtime on web page are
○ document.write()
○ console.log()
○ window.alert()

What is JavaScript?
● But these days it is being written in separate file and it’s extension is .js say
myScript.js
● It is being referred in the web pages using script tag at the bottom of the page, i.e.,
after body tag.
○ <html>
○ <head>
○ </head>
○ <body>

IDE - Introduction To Visual Studio
● https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx
Any Version

Demo
Getting Friendly with Visual Studio 2015

Modes Of Execution
● Immediate mode of script execution is writing script inside body tag and gets
executed as soon as page loads.
● Deferred mode of script execution is writing script in head tag and gets executed
on any event.

Demo
For both immediate and deferred modes

Data Types In JavaScript
● numbers
● strings
● arrays
● objects
● array of objects

Single Variable Declaration
● var x;
● x=10;
● or
● var x=10;
● or
● x=10;
● var x=10;
● x=’Peter’;
● x=”John”;
● x=12.6;

Performing Operations - Require Operators
● Arithmetic : +,-,*,/,%
● Assignment : =, += (x+=y => x=x+y),-=,*=,%=
● Comparison : ==,===,!==,!===,<,<=,>,>=,

Control Structure
● Controlling the flow of our structure is achieved through the following statements
● Conditional
○ if, if else, else..if ladder and switch..case
● UnConditional
○ break, continue, goto and return. (Covered in functions)
● Iterative or Loop

Conditional Statements - if else
<script type="text/javascript">
var t=6;
if (t<10) {
document.write("<b>Good morning</b>");
}
else {
document.write("Good day!");
}
</script >

Conditional Statements - else if Ladder
var t=16;
if (t<10) {
document.write("<b>Good morning</b>");
}
else if (t>10 && t<16) {
document.write("<b>Good day</b>");
}
else {
document.write("<b>Hello World!</b>");
}
</script>

Demo
For if, if else and else if ladder

Conditional Statements - switch case default
theDay=5;
switch (theDay){
case 5: document.write("Finally Friday");
break;
case 6: document.write("Super Saturday");
break;
case 0: document.write("Sleepy Sunday");
break;
default: document.write("I'm looking forward to this weekend!");
}
</script>

Iterative Statements - for
Syntax
for (statement 1; statement 2; statement 3) {
___________________
}
Ex:
for(i=0;i<10;i++){
document.write(“MTT”+<br/>);
}

Iterative Statements - while
Syntax:
while (condition) {
___________
}
Eg:
i=0;
while(i<10){
i++;
}

Iterative Statements - do while
Syntax:
do {
_____________
}
while (condition);
Eg:
i=0;
do{
i++;}
while(i<10);

Array Variable Declaration
● An Array is collection of similar type of elements.
● It can be defined in three ways
● Literal Array: var x=[‘Peter’,’John’,’Bob’]; or var x=[]; //best approach
● Condensed Array: var x=new Array(‘Peter’,’John’,’Bob’);
● Regular Array: var x=new Array();
○ x[0]=’Peter’;

Iterative Statements - for/in
Syntax:
for(item in list)
{
____________
}
Eg: var people=[‘Peter’,’John’,’Bob’];
for (i in people) {
document.write(people[i] +”<br/>”);
}

Functions
● It is a set of instructions to perform a specific task.
● It can be classified into four categories.
○ No Parameter - No Return Value
○ With Parameter - No Return Value
○ No Parameter - With Return Value
○ With Parameter - With Return Value

Types Of Variables or Scope Of Variables
● Local : Declared inside the function.
● Global : Declared outside the function.

Events
● Windows
● Form
● Keyboard
● Mouse

Windows Events
Major windows events
● onload
Eg:
<element onload="script">
Note:
● It is mostly used on <body> tag.
● Introduction to navigator object.

Forms Events
Major events used with form elements
● onfocus : textbox
● onblur : textbox
● onchange : textbox and dropdown list
● onsubmit : form
Note:
● Introduction to getElementById object.
● Introduction to test() method of Regular Expression

Keyboard Events
Major Keyboard events are
● onkeydown //textbox
● onkeyup //textbox
● onkeypress //textbox
Note:
● Count number of characters in the textarea, like in twitter.

Mouse Events
Major mouse events
● onclick : button
● onmouseover : link
● onmouseout : link
Note:
● Introducing <marquee> tag

Creating
Calculator
● Basic Operations
● Introducing eval function

Stand Alone Object/s
● Single Object
○ var obj={“RollNo”:1, “Name”:"Peter", “Marks”:75};
○ obj.RollNo
● List Of Object
○ var lstObj=[{“RollNo”:1, “Name”:"Peter", “Marks”:75},
{“RollNo”:2, “Name”:"John", “Marks”:25},
{“RollNo”:3, “Name”:"Bob", “Marks”:35}]

Why OOPs?
● No strong binding between data and functions.

OOPs Through JavaScript
● Object
● Class
● Properties
● Methods

Analogy
Student
● rollNo
● name
● marks
● getDetails()
● getResult()
Properties
Methods
Class
● Objects
○ Jack
○ Peter
○ John

Object & Class
● Object
○ Any real time entity is called as an object.
○ Every object consist of state(look and feel) and behaviour(what is does).
○ States are called as properties and behaviors are called as methods.
● Classes
○ Class is a blueprint of an object.

Constructor
● Constructor is invoked automatically when we create an object.
● You cannot invoke constructor explicitly.
● It is used to initialize an object.
● Here in javascript, it is slightly different.

Defining A
Class
function Student(){
this.rollNo=123;
this.name="ManzoorThetrainer";
this.marks=75;
this.getResult=function(){
if(this.marks>=35)
return “Pass”;
else
return “fail”;
}
}
● Javascript is prototype-oriented,
classless, or instance-based
programming.
● But we can simulate the class
concept using JavaScript functions.

Object Creation
var obj=new Student();
alert(obj.rollNo + “ ” obj.name);
alert(obj.getResult());
obj.rollNo=111;
obj.name=”Peter”;
obj.marks=23;
● Creating Object
● Accessing Properties
● Accessing Method

Constructor
function Student(r,n,m){
this.rollNo=r;
this.name=n;
this.marks=m;
…
…
}
var obj=new Student(1,”Jack”,78);
● Creating Class
● Creating Object
● Accessing Properties
● Accessing Method

List Of Objects
function Student(r,n,m){
this.rollNo=r;
this.name=n;
this.marks=m;
…
…
}
var lstObj=new Array(); / [];
lstObj.push(new Student(1,”Jack”,78));
lstObj.push(new Student(2,”Peter”,81));
● Creating List Of Object
● Accessing Object’s Properties
● Accessing Object’s Method

Learn JavaScript From Scratch

More Related Content

What's hot (20)

Similar to Learn JavaScript From Scratch (20)

More from Mohd Manzoor Ahmed (8)

Recently uploaded (20)

Learn JavaScript From Scratch