Upload
kevin-hoyt
View
352
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
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