SlideShare a Scribd company logo
JavaScript Getting Started
JavaScript
Getting Started
Who I’m
● My name is Hazem Hagrass
● Lead Software Engineer @BADR, joined BADR @2010
● Contacts:
○ website
○ hazem.hagrass@badrit.com
○ Linkedin
What is JavaScript?
● JavaScript was introduced in 1995 as a way to add
programs to web pages in the Netscape Navigator
browser.
● Has almost nothing to do with the programming
language named Java. The similar name was inspired
by marketing considerations.
What is JavaScript?
● It is an interpreted programming language.
● It is object-based programming.
● It describes how your html should act(Logic)
Use of JavaScript
● Use it to add/remove elements and control DOM
○ Any dom element can be shown, hidden and changed.
● Create pages dynamically
○ Based on the user's choices, the date, or other external data,
JavaScript can produce pages that are customized to the user.
● Interact with the user
○ It can do some processing of forms and can validate user input
when the user submits the form.
Writing JavaScript
● Writing JavaScript code is typically embedded in the
HTML, to be interpreted and run by the client's
browser.
Remember!
● JavaScript code is case sensitive.
● White space between words and tabs are ignored.
● Line breaks are ignored except within a statement.
The SCRIPT Tag
● The <SCRIPT> tag alerts a browser that JavaScript code
follows.
● It is typically embedded in the HTML:
<SCRIPT language = "JavaScript"> statements</SCRIPT>
Implementing JavaScript
● Embedding code.
<SCRIPT> alert(“HELLO WORLD”); </SCRIPT>
● External file.
<SCRIPT SRC="filename.js"> </SCRIPT>
Data Types
● Object
● Function
● Numbers
● Strings
● Booleans
● null
● undefined: default value for any variable.
Programming Basics
● In JavaScript you don't have to declare a variable's
data type before using it.
● Any variable can hold any JavaScript data type,
including:
○ String data.
○ Numbers.
○ Boolean values (T/F)
Reserved Words
break case catch class const continue debugger default
delete do else enum export extends false finally for
function if implements import in instanceof interface let
new null package private protected public return static
super switch this throw true try typeof var void while with
yield
Variables
● To declare variables, use the keyword var and the
variable name
var userName
● To assign values to variables, add an equal sign and
the value
var userName = "Smith"; var price = 100;
Variables Names
● It name must start with a letter or an underscore.
firstName or _myName
● You can use numbers in a variable name, but not as
the first character
name01
● Capitalize the first letter of every word except the
first
salesTax or userFirstName
Objects
● JavaScript supports programming with objects.
● The different screen elements such as Web pages,
forms, text boxes, images, and buttons are treated as
objects.
● Every object has its own properties and methods.
Global Object
● As crockford says, the object that dare not speak of its
name.
● Variables defined by var makes it local to the scope.
● Variables should be defined by var, otherwise its a
global variable.
● Use of it should be minimized.
Built-in Objects
● Math – provides for math calculations
○ Format: Math.method(#)
○ Methods: abs(), log(), pow(), random(), round(),
sqrt()
● Date – provides date and time information
○ Format: new Date().method()
○ var rightNow = new Date();
var theYear = rightNow.getFullYear()
Built-in Objects
● String – provides for string manipulation
○ Format: stringName.method()
○ var theString = "my name";
var printString = theString.bold();
var numChars = theString.length
Arrays
● Inherits from Object.
● No need to provide length to create new array.
var x = [‘a’, ‘b’, ‘c’];
x.push(‘d’);
● Methods
○ concat
○ join
○ push
○ slice
○ sort
○ splice
Functions
● Inherits from Object.
function sum(a, b){ return a + b;}
● Functions can be contained inside other functions.
● The scope of inner function has access to continues
even if the parent function have returned.
function sum(a, b){
function sum2Numbers(x1, x2){ return x1 + x2;}
return sum2Numbers(a, b);
}
Functions
● Functions inside an object is called a method.
● When invoked with too many arguments, the rest are
ignored.
function sum(a, b){ return a + b;} sum(1, 1, 2);
● When invoked with fewer arguments, the rest are set
to undefined.
sum(1);
Thank You
Any Questions?

More Related Content

ODP
Datatype in JavaScript
Rajat Saxena
 
PPTX
Introduction to Web Development - JavaScript
SadhanaParameswaran
 
PDF
4.trasformers filters-adapters
xavazque2
 
PPTX
JavaScript | Introduction
Velimir Bulatovic
 
PDF
JavaScript Objects
Hazem Hagrass
 
PPTX
Functions and Objects in JavaScript
Dhananjay Kumar
 
PPTX
Concept of constructors
kunj desai
 
PPTX
Inheritance in c++
Dheenadayalan18
 
Datatype in JavaScript
Rajat Saxena
 
Introduction to Web Development - JavaScript
SadhanaParameswaran
 
4.trasformers filters-adapters
xavazque2
 
JavaScript | Introduction
Velimir Bulatovic
 
JavaScript Objects
Hazem Hagrass
 
Functions and Objects in JavaScript
Dhananjay Kumar
 
Concept of constructors
kunj desai
 
Inheritance in c++
Dheenadayalan18
 

What's hot (8)

PDF
Intelli J IDEA
Afkham Azeez
 
PPTX
Next Generation of Javascript
Squash Apps Pvt Ltd
 
PDF
Dotnet content
maheshcs1
 
PDF
JavaScript objects and functions
Victor Verhaagen
 
PDF
Web Development Innovations and trends in 2016 - Aleksandr Makhomet
Aleksandr Makhomet
 
PPTX
array of object pointer in c++
Arpita Patel
 
PDF
Introduction to Object Oriented Javascript
nodeninjas
 
PDF
Type-level programming
Dmytro Mitin
 
Intelli J IDEA
Afkham Azeez
 
Next Generation of Javascript
Squash Apps Pvt Ltd
 
Dotnet content
maheshcs1
 
JavaScript objects and functions
Victor Verhaagen
 
Web Development Innovations and trends in 2016 - Aleksandr Makhomet
Aleksandr Makhomet
 
array of object pointer in c++
Arpita Patel
 
Introduction to Object Oriented Javascript
nodeninjas
 
Type-level programming
Dmytro Mitin
 
Ad

Similar to JavaScript Getting Started (20)

PPTX
04-JS.pptx
RazanMazen4
 
PPTX
04-JS.pptx
RazanMazen4
 
PPTX
04-JS.pptx
RazanMazen4
 
PPTX
Learn JavaScript From Scratch
Mohd Manzoor Ahmed
 
PPTX
Introduction to JavaScript
SadhanaParameswaran
 
PDF
Go_ Get iT! .pdf
Gagan Chouhan
 
PDF
Structured web programming
ahfast
 
PDF
Dart workshop
Vishnu Suresh
 
PPTX
Learn TypeScript from scratch
Mohd Manzoor Ahmed
 
PDF
Python for web security - beginner
Sanjeev Kumar Jaiswal
 
PPTX
UNIT 1 (7).pptx
DrDhivyaaCRAssistant
 
PDF
Sharable of qualities of clean code
Eman Mohamed
 
PPTX
Javascript note for engineering notes.pptx
engineeradda55
 
PDF
Javascript
20261A05H0SRIKAKULAS
 
PDF
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
Paris Open Source Summit
 
PDF
Learning groovy -EU workshop
adam1davis
 
PDF
Extending Node.js using C++
Kenneth Geisshirt
 
PDF
JavaScript: Patterns, Part 3
Chris Farrell
 
PPTX
Javascript Programming according to Industry Standards.pptx
MukundSonaiya1
 
PPTX
Javascript
Prashant Kumar
 
04-JS.pptx
RazanMazen4
 
04-JS.pptx
RazanMazen4
 
04-JS.pptx
RazanMazen4
 
Learn JavaScript From Scratch
Mohd Manzoor Ahmed
 
Introduction to JavaScript
SadhanaParameswaran
 
Go_ Get iT! .pdf
Gagan Chouhan
 
Structured web programming
ahfast
 
Dart workshop
Vishnu Suresh
 
Learn TypeScript from scratch
Mohd Manzoor Ahmed
 
Python for web security - beginner
Sanjeev Kumar Jaiswal
 
UNIT 1 (7).pptx
DrDhivyaaCRAssistant
 
Sharable of qualities of clean code
Eman Mohamed
 
Javascript note for engineering notes.pptx
engineeradda55
 
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
Paris Open Source Summit
 
Learning groovy -EU workshop
adam1davis
 
Extending Node.js using C++
Kenneth Geisshirt
 
JavaScript: Patterns, Part 3
Chris Farrell
 
Javascript Programming according to Industry Standards.pptx
MukundSonaiya1
 
Javascript
Prashant Kumar
 
Ad

Recently uploaded (20)

PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
PDF
CIFDAQ'S Market Insight: BTC to ETH money in motion
CIFDAQ
 
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
DevOps & Developer Experience Summer BBQ
AUGNYC
 
PDF
GYTPOL If You Give a Hacker a Host
linda296484
 
PPTX
C Programming Basics concept krnppt.pptx
Karan Prajapat
 
PDF
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PDF
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
CIFDAQ
 
PDF
Software Development Methodologies in 2025
KodekX
 
PDF
CIFDAQ's Token Spotlight: SKY - A Forgotten Giant's Comeback?
CIFDAQ
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
Google’s NotebookLM Unveils Video Overviews
SOFTTECHHUB
 
PDF
Software Development Company | KodekX
KodekX
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
CIFDAQ'S Market Insight: BTC to ETH money in motion
CIFDAQ
 
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
DevOps & Developer Experience Summer BBQ
AUGNYC
 
GYTPOL If You Give a Hacker a Host
linda296484
 
C Programming Basics concept krnppt.pptx
Karan Prajapat
 
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
CIFDAQ
 
Software Development Methodologies in 2025
KodekX
 
CIFDAQ's Token Spotlight: SKY - A Forgotten Giant's Comeback?
CIFDAQ
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
Google’s NotebookLM Unveils Video Overviews
SOFTTECHHUB
 
Software Development Company | KodekX
KodekX
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 

JavaScript Getting Started

  • 3. Who I’m ● My name is Hazem Hagrass ● Lead Software Engineer @BADR, joined BADR @2010 ● Contacts: ○ website ○ [email protected] ○ Linkedin
  • 4. What is JavaScript? ● JavaScript was introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser. ● Has almost nothing to do with the programming language named Java. The similar name was inspired by marketing considerations.
  • 5. What is JavaScript? ● It is an interpreted programming language. ● It is object-based programming. ● It describes how your html should act(Logic)
  • 6. Use of JavaScript ● Use it to add/remove elements and control DOM ○ Any dom element can be shown, hidden and changed. ● Create pages dynamically ○ Based on the user's choices, the date, or other external data, JavaScript can produce pages that are customized to the user. ● Interact with the user ○ It can do some processing of forms and can validate user input when the user submits the form.
  • 7. Writing JavaScript ● Writing JavaScript code is typically embedded in the HTML, to be interpreted and run by the client's browser.
  • 8. Remember! ● JavaScript code is case sensitive. ● White space between words and tabs are ignored. ● Line breaks are ignored except within a statement.
  • 9. The SCRIPT Tag ● The <SCRIPT> tag alerts a browser that JavaScript code follows. ● It is typically embedded in the HTML: <SCRIPT language = "JavaScript"> statements</SCRIPT>
  • 10. Implementing JavaScript ● Embedding code. <SCRIPT> alert(“HELLO WORLD”); </SCRIPT> ● External file. <SCRIPT SRC="filename.js"> </SCRIPT>
  • 11. Data Types ● Object ● Function ● Numbers ● Strings ● Booleans ● null ● undefined: default value for any variable.
  • 12. Programming Basics ● In JavaScript you don't have to declare a variable's data type before using it. ● Any variable can hold any JavaScript data type, including: ○ String data. ○ Numbers. ○ Boolean values (T/F)
  • 13. Reserved Words break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield
  • 14. Variables ● To declare variables, use the keyword var and the variable name var userName ● To assign values to variables, add an equal sign and the value var userName = "Smith"; var price = 100;
  • 15. Variables Names ● It name must start with a letter or an underscore. firstName or _myName ● You can use numbers in a variable name, but not as the first character name01 ● Capitalize the first letter of every word except the first salesTax or userFirstName
  • 16. Objects ● JavaScript supports programming with objects. ● The different screen elements such as Web pages, forms, text boxes, images, and buttons are treated as objects. ● Every object has its own properties and methods.
  • 17. Global Object ● As crockford says, the object that dare not speak of its name. ● Variables defined by var makes it local to the scope. ● Variables should be defined by var, otherwise its a global variable. ● Use of it should be minimized.
  • 18. Built-in Objects ● Math – provides for math calculations ○ Format: Math.method(#) ○ Methods: abs(), log(), pow(), random(), round(), sqrt() ● Date – provides date and time information ○ Format: new Date().method() ○ var rightNow = new Date(); var theYear = rightNow.getFullYear()
  • 19. Built-in Objects ● String – provides for string manipulation ○ Format: stringName.method() ○ var theString = "my name"; var printString = theString.bold(); var numChars = theString.length
  • 20. Arrays ● Inherits from Object. ● No need to provide length to create new array. var x = [‘a’, ‘b’, ‘c’]; x.push(‘d’); ● Methods ○ concat ○ join ○ push ○ slice ○ sort ○ splice
  • 21. Functions ● Inherits from Object. function sum(a, b){ return a + b;} ● Functions can be contained inside other functions. ● The scope of inner function has access to continues even if the parent function have returned. function sum(a, b){ function sum2Numbers(x1, x2){ return x1 + x2;} return sum2Numbers(a, b); }
  • 22. Functions ● Functions inside an object is called a method. ● When invoked with too many arguments, the rest are ignored. function sum(a, b){ return a + b;} sum(1, 1, 2); ● When invoked with fewer arguments, the rest are set to undefined. sum(1);