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

Viewers also liked

Similar to Getting Started with JavaScript

Recently uploaded

Getting Started with JavaScript