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
PPTX
Introduction to Web Development - JavaScript
PDF
4.trasformers filters-adapters
PPTX
JavaScript | Introduction
PDF
JavaScript Objects
PPTX
Functions and Objects in JavaScript
PPTX
Concept of constructors
PPTX
Inheritance in c++
Datatype in JavaScript
Introduction to Web Development - JavaScript
4.trasformers filters-adapters
JavaScript | Introduction
JavaScript Objects
Functions and Objects in JavaScript
Concept of constructors
Inheritance in c++

What's hot (8)

PDF
Intelli J IDEA
PPTX
Next Generation of Javascript
PDF
Dotnet content
PDF
JavaScript objects and functions
PDF
Web Development Innovations and trends in 2016 - Aleksandr Makhomet
PPTX
array of object pointer in c++
PDF
Introduction to Object Oriented Javascript
PDF
Type-level programming
Intelli J IDEA
Next Generation of Javascript
Dotnet content
JavaScript objects and functions
Web Development Innovations and trends in 2016 - Aleksandr Makhomet
array of object pointer in c++
Introduction to Object Oriented Javascript
Type-level programming
Ad

Similar to JavaScript Getting Started (20)

PPTX
04-JS.pptx
PPTX
04-JS.pptx
PPTX
04-JS.pptx
PPTX
Learn JavaScript From Scratch
PPTX
Introduction to JavaScript
PDF
Go_ Get iT! .pdf
PDF
Structured web programming
PDF
Dart workshop
PPTX
Learn TypeScript from scratch
PDF
Python for web security - beginner
PPTX
UNIT 1 (7).pptx
PDF
Sharable of qualities of clean code
PPTX
Javascript note for engineering notes.pptx
PDF
PDF
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
PDF
Learning groovy -EU workshop
PDF
Extending Node.js using C++
PDF
JavaScript: Patterns, Part 3
PPTX
Javascript Programming according to Industry Standards.pptx
PPTX
Javascript
04-JS.pptx
04-JS.pptx
04-JS.pptx
Learn JavaScript From Scratch
Introduction to JavaScript
Go_ Get iT! .pdf
Structured web programming
Dart workshop
Learn TypeScript from scratch
Python for web security - beginner
UNIT 1 (7).pptx
Sharable of qualities of clean code
Javascript note for engineering notes.pptx
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
Learning groovy -EU workshop
Extending Node.js using C++
JavaScript: Patterns, Part 3
Javascript Programming according to Industry Standards.pptx
Javascript
Ad

Recently uploaded (20)

PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Unlocking AI with Model Context Protocol (MCP)
PPT
Teaching material agriculture food technology
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Machine learning based COVID-19 study performance prediction
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
Electronic commerce courselecture one. Pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
Cloud computing and distributed systems.
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
DOCX
The AUB Centre for AI in Media Proposal.docx
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
The Rise and Fall of 3GPP – Time for a Sabbatical?
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Unlocking AI with Model Context Protocol (MCP)
Teaching material agriculture food technology
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Machine learning based COVID-19 study performance prediction
Building Integrated photovoltaic BIPV_UPV.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Digital-Transformation-Roadmap-for-Companies.pptx
Chapter 3 Spatial Domain Image Processing.pdf
A comparative analysis of optical character recognition models for extracting...
Electronic commerce courselecture one. Pdf
Per capita expenditure prediction using model stacking based on satellite ima...
Cloud computing and distributed systems.
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
The AUB Centre for AI in Media Proposal.docx

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);