Sheeraz ali
cyber security researcher and web developer
What is Javascript?
What can you do with it?
Where does Javascript code run?
Javascript vs ECMAScript?
What is Javascript?
“Everything is possible. The impossible just takes longer.”
What you can do with Javascript?
- Cool SVG Animations - Species In Pieces
- Fun With Sound Elements - Pratap
- Amazing Scroll Animations - Alfred
- Machine Learning - TenserFlow.js
- Cool Ui Animations - Anime.js
- Power Of 3D - Track , Taotajima ,Lars Berg
- More
FrontEnd
BackEnd
Full Stack
JavaScript Engine
Browser
Node
- Googles V8
- Spider Monkey
ECMA Script
Javascript
Programming Language
Specification
V1
ES2015/ES6
1997
2015
2016
....
VSCode
Atom
Sublime Text
Setting Up Our Developer
Environment
Node Js
First Look At JavaScript
Where Can You Write JavaScript?
- Script Tag's
- External Javascript Files
Variables
Name
Age
IsCute
Breed
Types Of Variables
Var
Let Const
Naming Rules
Reserved Keywords
ARE CASE SENSITIVE
CANT START WITH A NUMBER
CANT HAVE SPACE OR HYPHEN
DataTypes
Strings
Number
Boolean
Arrays
Objects
Functions
Null
Undefined
Operators
Operators
Variables
Expressions
Algorithms
Arithmetic
Assignment
Comparison
Logical
Bitwise
Look here
Arrays? Its Just a List
0
1
2
3
4
5
6
7
8
...
Arrays? Its Just a List
0
1
2
3
4
5
6
7
8
...
"Sheeraz"
20
"Ali"
"Black"
Making an Array
Array Functions
Some More Array Functions
Some More Array Functions
Problems with arrays ?
Objects They are just like arrays but they have keys in them.
Objects {}?
Conditionals?
Yes
No
?
Yes
No
?
Yes
No
?
IF , Else
Loops
Take out all the books
from the bag
Types of Loops
- For loop
- while loop
- do-while loop
- For IN
- ForEach
- For Of
When we know when to stop
When we don't know when to stop
For's of JS
Bucket have 10 clothes in it
While
:max_bytes(150000):strip_icc()/GettyImages-180411607-5c1b38c746e0fb0001619568.jpg)
While Muddy Clothes WASH WASH WASH!!!
While
Functions ()?
Lets make maggie
function makeMaggie(){
}
Head
Body
Return
Functions ()?
Lets make maggie
Code Reuse
Why would i make it two times ?
Arguments
variety is the spice of life
Scope?
Global / Window Scope
Private / Functional Scope
Block Scope
Built in Functions ()?
Maggie + Water Time
Microwave
Maggie
Console.log()
"sheeraz"
Prints On Console
Sheeraz
DOM Manipulation
Cool ES6/ES7 Functions
Map
We Have an emergency!!!!
Batman has a problem that he just couldn't solve the problem is he is stuck in a huge building where there are 100 criminals and civilians trapped those civilians are wearing blue T-shirts and criminals are wearing red and a bomb is ticking so he has to save them in 8 min's but he can't do it alone he needs our help. we have to write a javascript program to save all the people wearing a blue T-shirt
It is EASY!!
If a person is wearing blue Tell batman and count as saved
Else if a person is wearing red tell batman and count criminal
Else move on say not a person
Code Template for exercise
function genratePeople(){
let people = [];
for (let i=0; i < 101; i++){
let randint = Math.floor(Math.random() * 2 )
if( randint === 1){
people.push("red");
}else{
people.push('blue');
}
}
return people;
}
let people = genratePeople();
// Your Code Starts here use people array as an input
Resources
Thanks.
JavaScript Fundamentals
By Sheeraz ali
JavaScript Fundamentals
Workshop slides for javascript fundamentals at Bhopal Coders
