SlideShare a Scribd company logo
Introduction to JavaScript
Hands-on
Getting Started with JavaScript
Kevin Hoyt and Mihai Corlan | Adobe
About Us
Kevin Hoyt
@krhoyt
Adobe Evangelist
Mihai Corlan
@mcorlan
Adobe Evangelist
What is JavaScript
1. Prototype-based
2. Scripting language
3. Dynamic
4. Weakly typed
5. First-class functions
6. Multi-paradigm
@krhoyt @mcorlan
Adding JavaScript to a Page - Inline
<script type="text/javascript">
document.writeln( "It works!" );
</script>
@krhoyt @mcorlan
Adding JavaScript to a Page - External
<script
src="myscript.js"
type="text/javascript">
</script>
document.writeln( "It works!" );
In your HTML file:
In the "myscript.js" file:
@krhoyt @mcorlan
Variables
var _myName = "Mihai";
var hisName = "Kevin";
Variables are defined using the special keyword "var"
followed by a valid name. Valid names can be any
combination of letters, "$" and "_".
@krhoyt @mcorlan
Variable Types
var myVar; // undefined
var myVar = null; // null
var myVar = 3.14; // Number
var myVar = "MAX"; // String
var myVar = true; // Boolean
var myVar = { // Object
first: "Mihai",
last: "Corlan"
};
@krhoyt @mcorlan
Arrays
var simpleArray = [1, 2, 3, 4];
var complexArray = new Array();
complexArray.push( 1 );
complexArray.push( "Kevin" );
An array is an ordered list of variables. Values inside
the array can be of any type. You can even mix the
types for each value.
@krhoyt @mcorlan
Custom Data Types
An object is a collection of properties assigned to a
single variable.
var myVar = {
index: 0,
name: "Mihai Corlan",
isAdobe: true
};
@krhoyt @mcorlan
Control Structures - if ... else
var color = "red";
if( color === "red" ) // === vs. ==
{
document.body.style.backgroundColor = "red";
} else if( color === "blue" ) {
document.body.style.backgroundColor = "blue";
} else {
document.body.style.backgroundColor = "#CCFFFF";
}
@krhoyt @mcorlan
Control Structures - switch ... case
var color = "red";
switch( color ) {
case "red":
document.writeln( "It is red." );
break;
case "blue":
document.writeln( "It is blue." );
break;
default:
document.writeln( "Huh?" );
break;
}
@krhoyt @mcorlan
Control Structures - for
var div;
var numbers = [1, 2, 3, 4, 5, 6];
for( var n = 0; n < numbers.length; n++ )
{
div = document.createElement( "div" );
div.innerHTML = numbers[n];
div.style.fontSize = numbers[n] + "em";
document.body.appendChild( div );
}
@krhoyt @mcorlan
Control Structures - while
var current = 0;
var limit = 5;
while( current < limit )
{
document.writeln( current );
current = current + 1;
}
@krhoyt @mcorlan
Control Structures - do ... while
var current = 0;
var limit = 5;
do {
document.writeln( current );
current = current + 1;
} while( current < limit );
@krhoyt @mcorlan
Functions
function sayHello()
{
document.writeln( "Hello World!" );
}
sayHello();
A function is a block of code that will be executed
when it is called. Functions allow you to reuse code
that needs to be executed more than once, or in more
than one place.
@krhoyt @mcorlan
Functions - Arguments and Return Values
function addNumbers( value1, value2 )
{
return value1 + value2;
}
var sum = addNumbers( 2, 2 );
document.writeln( sum );
@krhoyt @mcorlan
Variable Scope
var value = 0;
function tellMe() {
var value = 1;
document.writeln( value );
}
tellMe(); // Will be 1
document.writeln( value ); // Will be 0
JavaScript has one "global" scope. Each function
also has its own scope. If you omit "var" then values
default to the global scope.
@krhoyt @mcorlan
Handling Events
document.images[0].addEventListener(
"click",
function() { alert( "I was clicked!" ); }
);
document.addEventListener(
"mousemove",
doMouseMove
);
Events are signals generated when specific actions
occur. JavaScript is aware of these signals and can
run scripts in reaction to them.
@krhoyt @mcorlan
Handling Events
@krhoyt @mcorlan
focus When a form element is selected
blur When a form element is deselected
change User updates a form element value
click Mouse is clicked on an element
mousedown The mouse is pressed
mousemove Mouse is moved while pressed
mouseup The mouse is released
touchstart A touch is started
touchmove A registred touch point has moved
touchend A touch has ended
And many more!
Selectors
Type: IMG, DIV, INPUT
Attribute: INPUT[type="text"]
Class: .green, INPUT.green
ID: #username, #password
Psuedo: DIV > p:first-child
@krhoyt @mcorlan
Selectors
var cat = null;
var cats = null;
cat = document.querySelector( '#cat' );
cats = document.querySelectorAll( '.cat' );
for( var c = 0; c < cats.length; c++ )
{
...
}
@krhoyt @mcorlan
Debugging
@krhoyt @mcorlan
+
Debugging
for( var m = 0; m < 10; m++ )
{
// Log value to developer tooling
console.log( 'Number is: ' + m );
}
// Stops execution
// Shows some value
alert( 'Done at: ' + m );
@krhoyt @mcorlan
What is JavaScript
1. Prototype-based
2. Scripting language
3. Dynamic
4. Weakly typed
5. First-class functions
6. Multi-paradigm
@krhoyt @mcorlan
Introduction to JavaScript
Hands-on
Getting Started with JavaScript
Kevin Hoyt and Mihai Corlan | Adobe

More Related Content

What's hot (20)

React.js 20150828
React.js 20150828React.js 20150828
React.js 20150828
LearningTech
 
Dwr explanation
Dwr explanationDwr explanation
Dwr explanation
Arun Maharana
 
Asp.docx(.net --3 year) programming
Asp.docx(.net --3 year) programmingAsp.docx(.net --3 year) programming
Asp.docx(.net --3 year) programming
Ankit Gupta
 
Cara membuka workbook yang terproteksi
Cara membuka workbook yang terproteksiCara membuka workbook yang terproteksi
Cara membuka workbook yang terproteksi
Irmaoly
 
Node js crash course session 6
Node js crash course   session 6Node js crash course   session 6
Node js crash course session 6
Abdul Rahman Masri Attal
 
Java script how to
Java script how toJava script how to
Java script how to
julian vega
 
Mvvmintroduction 130725124207-phpapp01
Mvvmintroduction 130725124207-phpapp01Mvvmintroduction 130725124207-phpapp01
Mvvmintroduction 130725124207-phpapp01
Nguyen Cuong
 
JavaScript Training
JavaScript TrainingJavaScript Training
JavaScript Training
Ramindu Deshapriya
 
Update statement in PHP
Update statement in PHPUpdate statement in PHP
Update statement in PHP
Vineet Kumar Saini
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
Nelson Glauber Leal
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
Nelson Glauber Leal
 
Web 5 | JavaScript Events
Web 5 | JavaScript EventsWeb 5 | JavaScript Events
Web 5 | JavaScript Events
Mohammad Imam Hossain
 
2.java script dom
2.java script  dom2.java script  dom
2.java script dom
PhD Research Scholar
 
Web 6 | JavaScript DOM
Web 6 | JavaScript DOMWeb 6 | JavaScript DOM
Web 6 | JavaScript DOM
Mohammad Imam Hossain
 
Java script objects
Java script objectsJava script objects
Java script objects
AbhishekMondal42
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
Shrijan Tiwari
 
Knockout vs. angular
Knockout vs. angularKnockout vs. angular
Knockout vs. angular
MaslowB
 
Demystifying cache in doctrine ORM
Demystifying cache in doctrine ORMDemystifying cache in doctrine ORM
Demystifying cache in doctrine ORM
Luís Cobucci
 
Web Scripting Project JavaScripts and HTML WebPage
Web Scripting Project JavaScripts and HTML WebPageWeb Scripting Project JavaScripts and HTML WebPage
Web Scripting Project JavaScripts and HTML WebPage
Sunny U Okoro
 
Knockoutjs
KnockoutjsKnockoutjs
Knockoutjs
Karthik Sathyanarayanan
 
Asp.docx(.net --3 year) programming
Asp.docx(.net --3 year) programmingAsp.docx(.net --3 year) programming
Asp.docx(.net --3 year) programming
Ankit Gupta
 
Cara membuka workbook yang terproteksi
Cara membuka workbook yang terproteksiCara membuka workbook yang terproteksi
Cara membuka workbook yang terproteksi
Irmaoly
 
Java script how to
Java script how toJava script how to
Java script how to
julian vega
 
Mvvmintroduction 130725124207-phpapp01
Mvvmintroduction 130725124207-phpapp01Mvvmintroduction 130725124207-phpapp01
Mvvmintroduction 130725124207-phpapp01
Nguyen Cuong
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
Nelson Glauber Leal
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
Nelson Glauber Leal
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
Shrijan Tiwari
 
Knockout vs. angular
Knockout vs. angularKnockout vs. angular
Knockout vs. angular
MaslowB
 
Demystifying cache in doctrine ORM
Demystifying cache in doctrine ORMDemystifying cache in doctrine ORM
Demystifying cache in doctrine ORM
Luís Cobucci
 
Web Scripting Project JavaScripts and HTML WebPage
Web Scripting Project JavaScripts and HTML WebPageWeb Scripting Project JavaScripts and HTML WebPage
Web Scripting Project JavaScripts and HTML WebPage
Sunny U Okoro
 

Viewers also liked (6)

Flash and Hardware
Flash and HardwareFlash and Hardware
Flash and Hardware
Kevin Hoyt
 
Ignite A Cigar
Ignite A CigarIgnite A Cigar
Ignite A Cigar
Kevin Hoyt
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt
 
Ignite a Cigar (Technical)
Ignite a Cigar (Technical)Ignite a Cigar (Technical)
Ignite a Cigar (Technical)
Kevin Hoyt
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
 
Flash and Hardware
Flash and HardwareFlash and Hardware
Flash and Hardware
Kevin Hoyt
 
Ignite A Cigar
Ignite A CigarIgnite A Cigar
Ignite A Cigar
Kevin Hoyt
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt
 
Ignite a Cigar (Technical)
Ignite a Cigar (Technical)Ignite a Cigar (Technical)
Ignite a Cigar (Technical)
Kevin Hoyt
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
 
Ad

Similar to Getting Started with JavaScript (20)

JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
gdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptxgdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
JavaScript_III.pptx
JavaScript_III.pptxJavaScript_III.pptx
JavaScript_III.pptx
rashmiisrani1
 
lect4
lect4lect4
lect4
tutorialsruby
 
lect4
lect4lect4
lect4
tutorialsruby
 
Client sidescripting javascript
Client sidescripting javascriptClient sidescripting javascript
Client sidescripting javascript
Selvin Josy Bai Somu
 
Lecture 10.pdf
Lecture 10.pdfLecture 10.pdf
Lecture 10.pdf
ssuser0890d1
 
Pawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptx
Pawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptxPawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptx
Pawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptx
ramtiwari7081
 
Pawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptx
Pawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptxPawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptx
Pawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptx
ramtiwari7081
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
Ajay Khatri
 
Java Script
Java ScriptJava Script
Java Script
Kalidass Balasubramaniam
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Dan Phiffer
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
Java Script basics and DOM
Java Script basics and DOMJava Script basics and DOM
Java Script basics and DOM
Sukrit Gupta
 
Presentation JavaScript Introduction Data Types Variables Control Structure
Presentation JavaScript Introduction  Data Types Variables Control StructurePresentation JavaScript Introduction  Data Types Variables Control Structure
Presentation JavaScript Introduction Data Types Variables Control Structure
SripathiRavi1
 
JavaScript Getting Started
JavaScript Getting StartedJavaScript Getting Started
JavaScript Getting Started
Hazem Hagrass
 
JavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascriptaJavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascripta
nehatanveer5765
 
Lecture 5 javascript
Lecture 5 javascriptLecture 5 javascript
Lecture 5 javascript
Mujtaba Haider
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
Lê Thưởng
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
gdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptxgdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
Pawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptx
Pawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptxPawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptx
Pawangvvhgvhg hbhvhhhhvhjjkvhvghvhgh.pptx
ramtiwari7081
 
Pawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptx
Pawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptxPawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptx
Pawanasfdcvgfgfxgndrfdrxjdrfmjfgtdtdt.pptx
ramtiwari7081
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
Ajay Khatri
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Dan Phiffer
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
Java Script
Java ScriptJava Script
Java Script
Sarvan15
 
Java Script basics and DOM
Java Script basics and DOMJava Script basics and DOM
Java Script basics and DOM
Sukrit Gupta
 
Presentation JavaScript Introduction Data Types Variables Control Structure
Presentation JavaScript Introduction  Data Types Variables Control StructurePresentation JavaScript Introduction  Data Types Variables Control Structure
Presentation JavaScript Introduction Data Types Variables Control Structure
SripathiRavi1
 
JavaScript Getting Started
JavaScript Getting StartedJavaScript Getting Started
JavaScript Getting Started
Hazem Hagrass
 
JavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascriptaJavaScript ppt for introduction of javascripta
JavaScript ppt for introduction of javascripta
nehatanveer5765
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
Lê Thưởng
 
Ad

Recently uploaded (20)

Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Ben Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding WorldBen Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding World
AWS Chicago
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdfEdge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Cisco ISE Performance, Scalability and Best Practices.pdf
Cisco ISE Performance, Scalability and Best Practices.pdfCisco ISE Performance, Scalability and Best Practices.pdf
Cisco ISE Performance, Scalability and Best Practices.pdf
superdpz
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
Edge AI and Vision Alliance
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportThe State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Ben Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding WorldBen Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding World
AWS Chicago
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdfEdge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Cisco ISE Performance, Scalability and Best Practices.pdf
Cisco ISE Performance, Scalability and Best Practices.pdfCisco ISE Performance, Scalability and Best Practices.pdf
Cisco ISE Performance, Scalability and Best Practices.pdf
superdpz
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
Edge AI and Vision Alliance
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportThe State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 

Getting Started with JavaScript

  • 1. Introduction to JavaScript Hands-on Getting Started with JavaScript Kevin Hoyt and Mihai Corlan | Adobe
  • 2. About Us Kevin Hoyt @krhoyt Adobe Evangelist Mihai Corlan @mcorlan Adobe Evangelist
  • 3. What is JavaScript 1. Prototype-based 2. Scripting language 3. Dynamic 4. Weakly typed 5. First-class functions 6. Multi-paradigm @krhoyt @mcorlan
  • 4. Adding JavaScript to a Page - Inline <script type="text/javascript"> document.writeln( "It works!" ); </script> @krhoyt @mcorlan
  • 5. Adding JavaScript to a Page - External <script src="myscript.js" type="text/javascript"> </script> document.writeln( "It works!" ); In your HTML file: In the "myscript.js" file: @krhoyt @mcorlan
  • 6. Variables var _myName = "Mihai"; var hisName = "Kevin"; Variables are defined using the special keyword "var" followed by a valid name. Valid names can be any combination of letters, "$" and "_". @krhoyt @mcorlan
  • 7. Variable Types var myVar; // undefined var myVar = null; // null var myVar = 3.14; // Number var myVar = "MAX"; // String var myVar = true; // Boolean var myVar = { // Object first: "Mihai", last: "Corlan" }; @krhoyt @mcorlan
  • 8. Arrays var simpleArray = [1, 2, 3, 4]; var complexArray = new Array(); complexArray.push( 1 ); complexArray.push( "Kevin" ); An array is an ordered list of variables. Values inside the array can be of any type. You can even mix the types for each value. @krhoyt @mcorlan
  • 9. Custom Data Types An object is a collection of properties assigned to a single variable. var myVar = { index: 0, name: "Mihai Corlan", isAdobe: true }; @krhoyt @mcorlan
  • 10. Control Structures - if ... else var color = "red"; if( color === "red" ) // === vs. == { document.body.style.backgroundColor = "red"; } else if( color === "blue" ) { document.body.style.backgroundColor = "blue"; } else { document.body.style.backgroundColor = "#CCFFFF"; } @krhoyt @mcorlan
  • 11. Control Structures - switch ... case var color = "red"; switch( color ) { case "red": document.writeln( "It is red." ); break; case "blue": document.writeln( "It is blue." ); break; default: document.writeln( "Huh?" ); break; } @krhoyt @mcorlan
  • 12. Control Structures - for var div; var numbers = [1, 2, 3, 4, 5, 6]; for( var n = 0; n < numbers.length; n++ ) { div = document.createElement( "div" ); div.innerHTML = numbers[n]; div.style.fontSize = numbers[n] + "em"; document.body.appendChild( div ); } @krhoyt @mcorlan
  • 13. Control Structures - while var current = 0; var limit = 5; while( current < limit ) { document.writeln( current ); current = current + 1; } @krhoyt @mcorlan
  • 14. Control Structures - do ... while var current = 0; var limit = 5; do { document.writeln( current ); current = current + 1; } while( current < limit ); @krhoyt @mcorlan
  • 15. Functions function sayHello() { document.writeln( "Hello World!" ); } sayHello(); A function is a block of code that will be executed when it is called. Functions allow you to reuse code that needs to be executed more than once, or in more than one place. @krhoyt @mcorlan
  • 16. Functions - Arguments and Return Values function addNumbers( value1, value2 ) { return value1 + value2; } var sum = addNumbers( 2, 2 ); document.writeln( sum ); @krhoyt @mcorlan
  • 17. Variable Scope var value = 0; function tellMe() { var value = 1; document.writeln( value ); } tellMe(); // Will be 1 document.writeln( value ); // Will be 0 JavaScript has one "global" scope. Each function also has its own scope. If you omit "var" then values default to the global scope. @krhoyt @mcorlan
  • 18. Handling Events document.images[0].addEventListener( "click", function() { alert( "I was clicked!" ); } ); document.addEventListener( "mousemove", doMouseMove ); Events are signals generated when specific actions occur. JavaScript is aware of these signals and can run scripts in reaction to them. @krhoyt @mcorlan
  • 19. Handling Events @krhoyt @mcorlan focus When a form element is selected blur When a form element is deselected change User updates a form element value click Mouse is clicked on an element mousedown The mouse is pressed mousemove Mouse is moved while pressed mouseup The mouse is released touchstart A touch is started touchmove A registred touch point has moved touchend A touch has ended And many more!
  • 20. Selectors Type: IMG, DIV, INPUT Attribute: INPUT[type="text"] Class: .green, INPUT.green ID: #username, #password Psuedo: DIV > p:first-child @krhoyt @mcorlan
  • 21. Selectors var cat = null; var cats = null; cat = document.querySelector( '#cat' ); cats = document.querySelectorAll( '.cat' ); for( var c = 0; c < cats.length; c++ ) { ... } @krhoyt @mcorlan
  • 23. Debugging for( var m = 0; m < 10; m++ ) { // Log value to developer tooling console.log( 'Number is: ' + m ); } // Stops execution // Shows some value alert( 'Done at: ' + m ); @krhoyt @mcorlan
  • 24. What is JavaScript 1. Prototype-based 2. Scripting language 3. Dynamic 4. Weakly typed 5. First-class functions 6. Multi-paradigm @krhoyt @mcorlan
  • 25. Introduction to JavaScript Hands-on Getting Started with JavaScript Kevin Hoyt and Mihai Corlan | Adobe