SlideShare a Scribd company logo
1 of 23
Download to read offline
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

What's hot (8)

Intelli J IDEA
Intelli J IDEAIntelli J IDEA
Intelli J IDEA
 
Next Generation of Javascript
Next Generation of JavascriptNext Generation of Javascript
Next Generation of Javascript
 
Dotnet content
Dotnet contentDotnet content
Dotnet content
 
JavaScript objects and functions
JavaScript objects and functionsJavaScript objects and functions
JavaScript objects and functions
 
Web Development Innovations and trends in 2016 - Aleksandr Makhomet
Web Development Innovations and trends in 2016 - Aleksandr MakhometWeb Development Innovations and trends in 2016 - Aleksandr Makhomet
Web Development Innovations and trends in 2016 - Aleksandr Makhomet
 
array of object pointer in c++
array of object pointer in c++array of object pointer in c++
array of object pointer in c++
 
Introduction to Object Oriented Javascript
Introduction to Object Oriented JavascriptIntroduction to Object Oriented Javascript
Introduction to Object Oriented Javascript
 
Type-level programming
Type-level programmingType-level programming
Type-level programming
 

Similar to JavaScript Getting Started

Structured web programming
Structured web programmingStructured web programming
Structured web programming
ahfast
 
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
OWF12/PAUG Conf Days Dart   a new html5 technology, nicolas geoffray, softwar...OWF12/PAUG Conf Days Dart   a new html5 technology, nicolas geoffray, softwar...
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
Paris Open Source Summit
 
JavaScript: Patterns, Part 3
JavaScript: Patterns, Part  3JavaScript: Patterns, Part  3
JavaScript: Patterns, Part 3
Chris Farrell
 

Similar to JavaScript Getting Started (20)

04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
 
Learn JavaScript From Scratch
Learn JavaScript From ScratchLearn JavaScript From Scratch
Learn JavaScript From Scratch
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Go_ Get iT! .pdf
Go_ Get iT! .pdfGo_ Get iT! .pdf
Go_ Get iT! .pdf
 
Structured web programming
Structured web programmingStructured web programming
Structured web programming
 
Dart workshop
Dart workshopDart workshop
Dart workshop
 
Learn TypeScript from scratch
Learn TypeScript from scratchLearn TypeScript from scratch
Learn TypeScript from scratch
 
Python for web security - beginner
Python for web security - beginnerPython for web security - beginner
Python for web security - beginner
 
UNIT 1 (7).pptx
UNIT 1 (7).pptxUNIT 1 (7).pptx
UNIT 1 (7).pptx
 
Sharable of qualities of clean code
Sharable of qualities of clean codeSharable of qualities of clean code
Sharable of qualities of clean code
 
Javascript
JavascriptJavascript
Javascript
 
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
OWF12/PAUG Conf Days Dart   a new html5 technology, nicolas geoffray, softwar...OWF12/PAUG Conf Days Dart   a new html5 technology, nicolas geoffray, softwar...
OWF12/PAUG Conf Days Dart a new html5 technology, nicolas geoffray, softwar...
 
Learning groovy -EU workshop
Learning groovy  -EU workshopLearning groovy  -EU workshop
Learning groovy -EU workshop
 
Extending Node.js using C++
Extending Node.js using C++Extending Node.js using C++
Extending Node.js using C++
 
JavaScript: Patterns, Part 3
JavaScript: Patterns, Part  3JavaScript: Patterns, Part  3
JavaScript: Patterns, Part 3
 
Javascript Programming according to Industry Standards.pptx
Javascript Programming according to Industry Standards.pptxJavascript Programming according to Industry Standards.pptx
Javascript Programming according to Industry Standards.pptx
 
Javascript
JavascriptJavascript
Javascript
 
Optionals by Matt Faluotico
Optionals by Matt FaluoticoOptionals by Matt Faluotico
Optionals by Matt Faluotico
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

JavaScript Getting Started

  • 1.
  • 3. Who I’m ● My name is Hazem Hagrass ● Lead Software Engineer @BADR, joined BADR @2010 ● Contacts: ○ website ○ hazem.hagrass@badrit.com ○ 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);