Getting Started with JavaScript

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

Getting Started with JavaScript

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Getting Started with JavaScript (20)

Recently uploaded (20)

Getting Started with JavaScript