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

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

22. Debugging
@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