Join Kevin Hoyt and Mihai Corlan, Adobe Evangelists, as they help you move beyond static HTML to embrace the world of interactive content with JavaScript. Bring your laptop for a hands-on, gentle introduction to JavaScript. Intended for designers, you will:
- Learn the basics of this elegant and powerful programming language
- Explore language constructs such as evaluating values, loops, and code reuse
- Learn to take control of the browser to dynamically create content, validate forms, and manage mouse - and touch -based interactions
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!
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