Getting Started with JavaScript

Introduction to JavaScriptHands-on

Getting Started with JavaScript

Kevin Hoyt and Mihai Corlan | Adobe

About Us

Kevin Hoyt @krhoytAdobe Evangelist

Mihai Corlan@mcorlanAdobe Evangelist

What is JavaScript

1. Prototype-based2. Scripting language3. Dynamic4. Weakly typed5. First-class functions6. 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; // undefinedvar myVar = null; // nullvar myVar = 3.14; // Numbervar myVar = "MAX"; // Stringvar myVar = true; // Booleanvar 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 1document.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 selectedblur When a form element is deselectedchange User updates a form element valueclick Mouse is clicked on an elementmousedown The mouse is pressedmousemove Mouse is moved while pressedmouseup The mouse is releasedtouchstart A touch is startedtouchmove A registred touch point has movedtouchend 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 toolingconsole.log( 'Number is: ' + m );

}

// Stops execution// Shows some valuealert( 'Done at: ' + m );

@krhoyt @mcorlan

What is JavaScript

1. Prototype-based2. Scripting language3. Dynamic4. Weakly typed5. First-class functions6. Multi-paradigm

@krhoyt @mcorlan

Introduction to JavaScriptHands-on

Getting Started with JavaScript

Kevin Hoyt and Mihai Corlan | Adobe