• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Getting Started with JavaScript
 

Getting Started with JavaScript

on

  • 465 views

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 ...

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

Statistics

Views

Total Views
465
Views on SlideShare
464
Embed Views
1

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 1

http://krhoyt.tumblr.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Getting Started with JavaScript Getting Started with JavaScript Presentation Transcript

    • Introduction to JavaScriptHands-onGetting Started with JavaScriptKevin Hoyt and Mihai Corlan | Adobe
    • About UsKevin Hoyt@krhoytAdobe EvangelistMihai Corlan@mcorlanAdobe Evangelist
    • What is JavaScript1. 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<scriptsrc="myscript.js"type="text/javascript"></script>document.writeln( "It works!" );In your HTML file:In the "myscript.js" file:@krhoyt @mcorlan
    • 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
    • Variable Typesvar myVar; // undefinedvar myVar = null; // nullvar myVar = 3.14; // Numbervar myVar = "MAX"; // Stringvar myVar = true; // Booleanvar myVar = { // Objectfirst: "Mihai",last: "Corlan"};@krhoyt @mcorlan
    • 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
    • Custom Data TypesAn object is a collection of properties assigned to asingle variable.var myVar = {index: 0,name: "Mihai Corlan",isAdobe: true};@krhoyt @mcorlan
    • 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
    • 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
    • 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
    • Control Structures - whilevar current = 0;var limit = 5;while( current < limit ){document.writeln( current );current = current + 1;}@krhoyt @mcorlan
    • Control Structures - do ... whilevar current = 0;var limit = 5;do {document.writeln( current );current = current + 1;} while( current < limit );@krhoyt @mcorlan
    • 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
    • Functions - Arguments and Return Valuesfunction addNumbers( value1, value2 ){return value1 + value2;}var sum = addNumbers( 2, 2 );document.writeln( sum );@krhoyt @mcorlan
    • 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
    • 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
    • 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!
    • SelectorsType: IMG, DIV, INPUTAttribute: INPUT[type="text"]Class: .green, INPUT.greenID: #username, #passwordPsuedo: DIV > p:first-child@krhoyt @mcorlan
    • Selectorsvar 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+
    • 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
    • What is JavaScript1. Prototype-based2. Scripting language3. Dynamic4. Weakly typed5. First-class functions6. Multi-paradigm@krhoyt @mcorlan
    • Introduction to JavaScriptHands-onGetting Started with JavaScriptKevin Hoyt and Mihai Corlan | Adobe