SlideShare una empresa de Scribd logo
1 de 23
Descargar para leer sin conexión
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?

Más contenido relacionado

La actualidad más candente

Dotnet content
Dotnet contentDotnet content
Dotnet contentmaheshcs1
 
JavaScript objects and functions
JavaScript objects and functionsJavaScript objects and functions
JavaScript objects and functionsVictor Verhaagen
 
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 MakhometAleksandr 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++Arpita Patel
 
Introduction to Object Oriented Javascript
Introduction to Object Oriented JavascriptIntroduction to Object Oriented Javascript
Introduction to Object Oriented Javascriptnodeninjas
 
Type-level programming
Type-level programmingType-level programming
Type-level programmingDmytro Mitin
 

La actualidad más candente (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 a JavaScript Getting Started: A Crash Course in JS Fundamentals

Structured web programming
Structured web programmingStructured web programming
Structured web programmingahfast
 
Sharable of qualities of clean code
Sharable of qualities of clean codeSharable of qualities of clean code
Sharable of qualities of clean codeEman Mohamed
 
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
 
Learning groovy -EU workshop
Learning groovy  -EU workshopLearning groovy  -EU workshop
Learning groovy -EU workshopadam1davis
 
JavaScript: Patterns, Part 3
JavaScript: Patterns, Part  3JavaScript: Patterns, Part  3
JavaScript: Patterns, Part 3Chris Farrell
 
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.pptxMukundSonaiya1
 
Optionals by Matt Faluotico
Optionals by Matt FaluoticoOptionals by Matt Faluotico
Optionals by Matt FaluoticoWithTheBest
 

Similar a JavaScript Getting Started: A Crash Course in JS Fundamentals (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
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 

Último (20)

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

JavaScript Getting Started: A Crash Course in JS Fundamentals

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