Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Started with JavaScript

554 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Getting Started with JavaScript

  1. 1. Introduction to JavaScriptHands-onGetting Started with JavaScriptKevin Hoyt and Mihai Corlan | Adobe
  2. 2. About UsKevin Hoyt@krhoytAdobe EvangelistMihai Corlan@mcorlanAdobe Evangelist
  3. 3. What is JavaScript1. Prototype-based2. Scripting language3. Dynamic4. Weakly typed5. First-class functions6. Multi-paradigm@krhoyt @mcorlan
  4. 4. Adding JavaScript to a Page - Inline<script type="text/javascript">document.writeln( "It works!" );</script>@krhoyt @mcorlan
  5. 5. Adding JavaScript to a Page - External<scriptsrc="myscript.js"type="text/javascript"></script>document.writeln( "It works!" );In your HTML file:In the "myscript.js" file:@krhoyt @mcorlan
  6. 6. Variablesvar _myName = "Mihai";var hisName = "Kevin";Variables are defined using the special keyword "var"followed by a valid name. Valid names can be anycombination of letters, "$" and "_".@krhoyt @mcorlan
  7. 7. Variable Typesvar myVar; // undefinedvar myVar = null; // nullvar myVar = 3.14; // Numbervar myVar = "MAX"; // Stringvar myVar = true; // Booleanvar myVar = { // Objectfirst: "Mihai",last: "Corlan"};@krhoyt @mcorlan
  8. 8. Arraysvar simpleArray = [1, 2, 3, 4];var complexArray = new Array();complexArray.push( 1 );complexArray.push( "Kevin" );An array is an ordered list of variables. Values insidethe array can be of any type. You can even mix thetypes for each value.@krhoyt @mcorlan
  9. 9. Custom Data TypesAn object is a collection of properties assigned to asingle variable.var myVar = {index: 0,name: "Mihai Corlan",isAdobe: true};@krhoyt @mcorlan
  10. 10. Control Structures - if ... elsevar 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. 11. Control Structures - switch ... casevar 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. 12. Control Structures - forvar 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. 13. Control Structures - whilevar current = 0;var limit = 5;while( current < limit ){document.writeln( current );current = current + 1;}@krhoyt @mcorlan
  14. 14. Control Structures - do ... whilevar current = 0;var limit = 5;do {document.writeln( current );current = current + 1;} while( current < limit );@krhoyt @mcorlan
  15. 15. Functionsfunction sayHello(){document.writeln( "Hello World!" );}sayHello();A function is a block of code that will be executedwhen it is called. Functions allow you to reuse codethat needs to be executed more than once, or in morethan one place.@krhoyt @mcorlan
  16. 16. Functions - Arguments and Return Valuesfunction addNumbers( value1, value2 ){return value1 + value2;}var sum = addNumbers( 2, 2 );document.writeln( sum );@krhoyt @mcorlan
  17. 17. Variable Scopevar value = 0;function tellMe() {var value = 1;document.writeln( value );}tellMe(); // Will be 1document.writeln( value ); // Will be 0JavaScript has one "global" scope. Each functionalso has its own scope. If you omit "var" then valuesdefault to the global scope.@krhoyt @mcorlan
  18. 18. Handling Eventsdocument.images[0].addEventListener("click",function() { alert( "I was clicked!" ); });document.addEventListener("mousemove",doMouseMove);Events are signals generated when specific actionsoccur. JavaScript is aware of these signals and canrun scripts in reaction to them.@krhoyt @mcorlan
  19. 19. Handling Events@krhoyt @mcorlanfocus 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 endedAnd many more!
  20. 20. SelectorsType: IMG, DIV, INPUTAttribute: INPUT[type="text"]Class: .green, INPUT.greenID: #username, #passwordPsuedo: DIV > p:first-child@krhoyt @mcorlan
  21. 21. Selectorsvar cat = null;var cats = null;cat = document.querySelector( #cat );cats = document.querySelectorAll( .cat );for( var c = 0; c < cats.length; c++ ){...}@krhoyt @mcorlan
  22. 22. Debugging@krhoyt @mcorlan+
  23. 23. Debuggingfor( 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
  24. 24. What is JavaScript1. Prototype-based2. Scripting language3. Dynamic4. Weakly typed5. First-class functions6. Multi-paradigm@krhoyt @mcorlan
  25. 25. Introduction to JavaScriptHands-onGetting Started with JavaScriptKevin Hoyt and Mihai Corlan | Adobe

×