SlideShare une entreprise Scribd logo
1  sur  30
CODE CREW | INTRO TO JAVASCRIPT 
INTRO TO 
JAVASCRIPT 
Jamal O’Garro 
Code Crew 
Software Engineer + Instructor
CODE CREW | INTRO TO JAVASCRIPT 
JAVASCRIPT 
• Is a programming language 
• Created by Netscape 
• Runs in browser & server 
• Java is not JavaScript! 
• Is actually named 
ECMAScript
CODE CREW | INTRO TO JAVASCRIPT 
WHAT DOES JAVASCRIPT LOOK LIKE?
CODE CREW | INTRO TO JAVASCRIPT 
DATA TYPES
CODE CREW | INTRO TO JAVASCRIPT 
LOGICAL OPERATORS
CODE CREW | INTRO TO JAVASCRIPT 
VARIABLES
CODE CREW | INTRO TO JAVASCRIPT 
UNDEFINED vs. NULL 
• Both represent absence of a value 
• If a variable has not been initialized it is “undefined” 
• Null is used to initialize or empty a variable
CODE CREW | INTRO TO JAVASCRIPT 
IF / ELSE STATEMENTS
CODE CREW | INTRO TO JAVASCRIPT 
ARRAYS
CODE CREW | INTRO TO JAVASCRIPT 
LOOPS
CODE CREW | INTRO TO JAVASCRIPT 
FUNCTIONS
CODE CREW | INTRO TO JAVASCRIPT 
MORE ABOUT FUNCTIONS 
• Function declarations 
• Function expressions 
• Functions and scope 
• Anonymous functions vs named functions
CODE CREW | INTRO TO JAVASCRIPT 
OBJECTS
CODE CREW | INTRO TO JAVASCRIPT 
MORE ABOUT OBJECTS 
• There are several ways to create objects 
• If a variable is part of an object is called a property 
• If a function is part of an object it is called a method
CODE CREW | INTRO TO JAVASCRIPT 
EXERCISE
CODE CREW | INTRO TO JAVASCRIPT 
OBJECT-ORIENTED JAVASCRIPT
CODE CREW | INTRO TO JAVASCRIPT 
PROTOTYPAL INHERITANCE 
• JavaScript uses objects for inheritance 
• Objects are linked to each other by a special 
prototype object 
• If we create a new instance of an object using a 
constructor the new object “inherits” the properties 
and methods of the parent
CODE CREW | INTRO TO JAVASCRIPT 
CONSTRUCTOR FUNCTIONS 
Allow us to create new instances of objects
CODE CREW | INTRO TO JAVASCRIPT 
THIS 
• When a function is called as a method of an object, 
“this” is set to the object the method is called on 
• If we use “this” with a constructor function it refers to 
the new object being created 
• If “this” is called outside of the context of a function it 
will refer to the global object
CODE CREW | INTRO TO JAVASCRIPT 
THE DOM
CODE CREW | INTRO TO JAVASCRIPT 
DOM SELECTORS 
querySelector 
querySelectorAll 
getElementById 
getElementsByTagName 
getElementsByClassName
CODE CREW | INTRO TO JAVASCRIPT 
EVENTS 
onclick 
onfocus 
onblur 
onmouseover 
onload
CODE CREW | INTRO TO JAVASCRIPT 
jQUERY
jQUERY SELECTOR 
$ 
CODE CREW | INTRO TO JAVASCRIPT
jQUERY EVENTS 
click 
focus 
blur 
hover 
load 
CODE CREW | INTRO TO JAVASCRIPT
CODE CREW | INTRO TO JAVASCRIPT 
AJAX 
Allows us to dynamically update a web page without 
having to reload the entire page
CODE CREW | INTRO TO JAVASCRIPT 
APIs
CODE CREW | INTRO TO JAVASCRIPT 
JAVASCRIPT FRAMEWORKS
CODE CREW | INTRO TO JAVASCRIPT 
NODE.js
CODE CREW | INTRO TO JAVASCRIPT 
THANKS MUCH!!! 
Jamal O’Garro 
Code Crew 
Software Engineer + Instructor

Contenu connexe

Tendances

Introduction to Actor Model and Akka
Introduction to Actor Model and AkkaIntroduction to Actor Model and Akka
Introduction to Actor Model and Akka
Yung-Lin Ho
 

Tendances (20)

Reflection in Pharo: Beyond Smalltak
Reflection in Pharo: Beyond SmalltakReflection in Pharo: Beyond Smalltak
Reflection in Pharo: Beyond Smalltak
 
Reacting to the Isomorphic Buzz
Reacting to the Isomorphic BuzzReacting to the Isomorphic Buzz
Reacting to the Isomorphic Buzz
 
An Overview of the React Ecosystem
An Overview of the React EcosystemAn Overview of the React Ecosystem
An Overview of the React Ecosystem
 
Gatling @ Scala.Io 2013
Gatling @ Scala.Io 2013Gatling @ Scala.Io 2013
Gatling @ Scala.Io 2013
 
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular
 
Why I don’t want to develop iOS apps in Objective C
Why I don’t want to develop iOS apps in Objective CWhy I don’t want to develop iOS apps in Objective C
Why I don’t want to develop iOS apps in Objective C
 
Variables in Pharo5
Variables in Pharo5Variables in Pharo5
Variables in Pharo5
 
Lecture 3 - ES6 Script Advanced for React-Native
Lecture 3 - ES6 Script Advanced for React-NativeLecture 3 - ES6 Script Advanced for React-Native
Lecture 3 - ES6 Script Advanced for React-Native
 
Quick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmineQuick tour to front end unit testing using jasmine
Quick tour to front end unit testing using jasmine
 
Akka (BeJUG)
Akka (BeJUG)Akka (BeJUG)
Akka (BeJUG)
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
Reflection in Pharo: Beyond Smalltak
Reflection in Pharo: Beyond SmalltakReflection in Pharo: Beyond Smalltak
Reflection in Pharo: Beyond Smalltak
 
Web development basics (Part-5)
Web development basics (Part-5)Web development basics (Part-5)
Web development basics (Part-5)
 
Introduction to Actor Model and Akka
Introduction to Actor Model and AkkaIntroduction to Actor Model and Akka
Introduction to Actor Model and Akka
 
New in Spring Framework 5.0: Functional Web Framework
New in Spring Framework 5.0: Functional Web FrameworkNew in Spring Framework 5.0: Functional Web Framework
New in Spring Framework 5.0: Functional Web Framework
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Intro To React Native
Intro To React NativeIntro To React Native
Intro To React Native
 
Introduction to Scala language
Introduction to Scala languageIntroduction to Scala language
Introduction to Scala language
 
Spring Northwest Usergroup Grails Presentation
Spring Northwest Usergroup Grails PresentationSpring Northwest Usergroup Grails Presentation
Spring Northwest Usergroup Grails Presentation
 
Type script for_java_dev_jul_2020
Type script for_java_dev_jul_2020Type script for_java_dev_jul_2020
Type script for_java_dev_jul_2020
 

En vedette (10)

Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1
 
Javascript intro for MAH
Javascript intro for MAHJavascript intro for MAH
Javascript intro for MAH
 
JavaScript Intro
JavaScript IntroJavaScript Intro
JavaScript Intro
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
JavaScript - Intro
JavaScript - IntroJavaScript - Intro
JavaScript - Intro
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 

Similaire à Intro to javascript (4 week)

AppeX and JavaScript Support Enhancements in Cincom Smalltalk
AppeX and JavaScript Support Enhancements in Cincom SmalltalkAppeX and JavaScript Support Enhancements in Cincom Smalltalk
AppeX and JavaScript Support Enhancements in Cincom Smalltalk
ESUG
 
Better code, littler classes
Better code, littler classesBetter code, littler classes
Better code, littler classes
drewz lin
 
Fii Practic Frontend - BeeNear - laborator3
Fii Practic Frontend - BeeNear - laborator3Fii Practic Frontend - BeeNear - laborator3
Fii Practic Frontend - BeeNear - laborator3
BeeNear
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
Jamshid Hashimi
 

Similaire à Intro to javascript (4 week) (20)

Javascript omg!
Javascript omg!Javascript omg!
Javascript omg!
 
Running JavaScript Efficiently in a Java World
Running JavaScript Efficiently in a Java WorldRunning JavaScript Efficiently in a Java World
Running JavaScript Efficiently in a Java World
 
WT Unit-3 PPT.pptx
WT Unit-3 PPT.pptxWT Unit-3 PPT.pptx
WT Unit-3 PPT.pptx
 
JAVASCRIPT and JQUERY For Beginner
JAVASCRIPT and JQUERY  For BeginnerJAVASCRIPT and JQUERY  For Beginner
JAVASCRIPT and JQUERY For Beginner
 
Swift Micro-services and AWS Technologies
Swift Micro-services and AWS TechnologiesSwift Micro-services and AWS Technologies
Swift Micro-services and AWS Technologies
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AppeX and JavaScript Support Enhancements in Cincom Smalltalk
AppeX and JavaScript Support Enhancements in Cincom SmalltalkAppeX and JavaScript Support Enhancements in Cincom Smalltalk
AppeX and JavaScript Support Enhancements in Cincom Smalltalk
 
Better code, littler classes
Better code, littler classesBetter code, littler classes
Better code, littler classes
 
Awesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescriptAwesome html with ujs, jQuery and coffeescript
Awesome html with ujs, jQuery and coffeescript
 
Plugin Development @ WordCamp Norway 2014
Plugin Development @ WordCamp Norway 2014Plugin Development @ WordCamp Norway 2014
Plugin Development @ WordCamp Norway 2014
 
Java script
Java scriptJava script
Java script
 
Java script basics
Java script basicsJava script basics
Java script basics
 
Fii Practic Frontend - BeeNear - laborator3
Fii Practic Frontend - BeeNear - laborator3Fii Practic Frontend - BeeNear - laborator3
Fii Practic Frontend - BeeNear - laborator3
 
Nashorn
NashornNashorn
Nashorn
 
Cascalog at Strange Loop
Cascalog at Strange LoopCascalog at Strange Loop
Cascalog at Strange Loop
 
Cappuccino - A Javascript Application Framework
Cappuccino - A Javascript Application FrameworkCappuccino - A Javascript Application Framework
Cappuccino - A Javascript Application Framework
 
Js tacktalk team dev js testing performance
Js tacktalk team dev js testing performanceJs tacktalk team dev js testing performance
Js tacktalk team dev js testing performance
 
JavaScript - Chapter 7 - Advanced Functions
 JavaScript - Chapter 7 - Advanced Functions JavaScript - Chapter 7 - Advanced Functions
JavaScript - Chapter 7 - Advanced Functions
 
IP Unit 2.pptx
IP Unit 2.pptxIP Unit 2.pptx
IP Unit 2.pptx
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
 

Plus de Jamal Sinclair O'Garro

Plus de Jamal Sinclair O'Garro (14)

A Look at TensorFlow.js
A Look at TensorFlow.jsA Look at TensorFlow.js
A Look at TensorFlow.js
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React + Redux for Web Developers
React + Redux for Web DevelopersReact + Redux for Web Developers
React + Redux for Web Developers
 
Intro to ionic 2
Intro to ionic 2Intro to ionic 2
Intro to ionic 2
 
Intro to ES6 / ES2015
Intro to ES6 / ES2015Intro to ES6 / ES2015
Intro to ES6 / ES2015
 
The Ten Code Commandments
The Ten Code CommandmentsThe Ten Code Commandments
The Ten Code Commandments
 
Using TypeScript with Angular
Using TypeScript with AngularUsing TypeScript with Angular
Using TypeScript with Angular
 
Intro to UI-Router/TypeScript
Intro to UI-Router/TypeScriptIntro to UI-Router/TypeScript
Intro to UI-Router/TypeScript
 
Intro to Node.js
Intro to Node.jsIntro to Node.js
Intro to Node.js
 
Intro to iOS Development
Intro to iOS DevelopmentIntro to iOS Development
Intro to iOS Development
 
Intro to rails 2_kg_edited
Intro to rails 2_kg_editedIntro to rails 2_kg_edited
Intro to rails 2_kg_edited
 
Intro to Ruby on Rails
Intro to Ruby on RailsIntro to Ruby on Rails
Intro to Ruby on Rails
 
Intro to HTML + CSS
Intro to HTML + CSSIntro to HTML + CSS
Intro to HTML + CSS
 
Intro to Programming
Intro to ProgrammingIntro to Programming
Intro to Programming
 

Dernier

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Dernier (20)

Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 

Intro to javascript (4 week)

  • 1. CODE CREW | INTRO TO JAVASCRIPT INTRO TO JAVASCRIPT Jamal O’Garro Code Crew Software Engineer + Instructor
  • 2. CODE CREW | INTRO TO JAVASCRIPT JAVASCRIPT • Is a programming language • Created by Netscape • Runs in browser & server • Java is not JavaScript! • Is actually named ECMAScript
  • 3. CODE CREW | INTRO TO JAVASCRIPT WHAT DOES JAVASCRIPT LOOK LIKE?
  • 4. CODE CREW | INTRO TO JAVASCRIPT DATA TYPES
  • 5. CODE CREW | INTRO TO JAVASCRIPT LOGICAL OPERATORS
  • 6. CODE CREW | INTRO TO JAVASCRIPT VARIABLES
  • 7. CODE CREW | INTRO TO JAVASCRIPT UNDEFINED vs. NULL • Both represent absence of a value • If a variable has not been initialized it is “undefined” • Null is used to initialize or empty a variable
  • 8. CODE CREW | INTRO TO JAVASCRIPT IF / ELSE STATEMENTS
  • 9. CODE CREW | INTRO TO JAVASCRIPT ARRAYS
  • 10. CODE CREW | INTRO TO JAVASCRIPT LOOPS
  • 11. CODE CREW | INTRO TO JAVASCRIPT FUNCTIONS
  • 12. CODE CREW | INTRO TO JAVASCRIPT MORE ABOUT FUNCTIONS • Function declarations • Function expressions • Functions and scope • Anonymous functions vs named functions
  • 13. CODE CREW | INTRO TO JAVASCRIPT OBJECTS
  • 14. CODE CREW | INTRO TO JAVASCRIPT MORE ABOUT OBJECTS • There are several ways to create objects • If a variable is part of an object is called a property • If a function is part of an object it is called a method
  • 15. CODE CREW | INTRO TO JAVASCRIPT EXERCISE
  • 16. CODE CREW | INTRO TO JAVASCRIPT OBJECT-ORIENTED JAVASCRIPT
  • 17. CODE CREW | INTRO TO JAVASCRIPT PROTOTYPAL INHERITANCE • JavaScript uses objects for inheritance • Objects are linked to each other by a special prototype object • If we create a new instance of an object using a constructor the new object “inherits” the properties and methods of the parent
  • 18. CODE CREW | INTRO TO JAVASCRIPT CONSTRUCTOR FUNCTIONS Allow us to create new instances of objects
  • 19. CODE CREW | INTRO TO JAVASCRIPT THIS • When a function is called as a method of an object, “this” is set to the object the method is called on • If we use “this” with a constructor function it refers to the new object being created • If “this” is called outside of the context of a function it will refer to the global object
  • 20. CODE CREW | INTRO TO JAVASCRIPT THE DOM
  • 21. CODE CREW | INTRO TO JAVASCRIPT DOM SELECTORS querySelector querySelectorAll getElementById getElementsByTagName getElementsByClassName
  • 22. CODE CREW | INTRO TO JAVASCRIPT EVENTS onclick onfocus onblur onmouseover onload
  • 23. CODE CREW | INTRO TO JAVASCRIPT jQUERY
  • 24. jQUERY SELECTOR $ CODE CREW | INTRO TO JAVASCRIPT
  • 25. jQUERY EVENTS click focus blur hover load CODE CREW | INTRO TO JAVASCRIPT
  • 26. CODE CREW | INTRO TO JAVASCRIPT AJAX Allows us to dynamically update a web page without having to reload the entire page
  • 27. CODE CREW | INTRO TO JAVASCRIPT APIs
  • 28. CODE CREW | INTRO TO JAVASCRIPT JAVASCRIPT FRAMEWORKS
  • 29. CODE CREW | INTRO TO JAVASCRIPT NODE.js
  • 30. CODE CREW | INTRO TO JAVASCRIPT THANKS MUCH!!! Jamal O’Garro Code Crew Software Engineer + Instructor