advertisement

Getting Started with JavaScript

44 %
56 %
advertisement
Information about Getting Started with JavaScript

Published on April 15, 2013

Author: khoyt

Source: slideshare.net

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
advertisement

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

#cat presentations

Add a comment

Related pages

Getting Started With JavaScript

Introduction to a series of tutorials on programming with JavaScript
Read more

JavaScript basics - Learn web development | MDN

JavaScript ("JS" for short) is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on ...
Read more

getting started with javascript - Stack Overflow

HI I am learning javascript since last few days, I read it as scripting language. I like to know how it differs from other scriptings. Where does it run ?I ...
Read more

Getting Started with Programming | Codecademy

Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends.
Read more

Getting Started with jQuery UI | jQuery Learning Center

link What is jQuery UI? jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly ...
Read more

Getting Started with Programming | Codecademy

Getting to know you ... Interactive JavaScript What is programming? ... Getting Started with Programming. What is your name?
Read more

Getting started · Bootstrap

Getting started. An overview of Bootstrap, how to download and use, basic templates and examples, and more.
Read more

Getting Started with jQuery Mobile | jQuery Learning Center

jQuery: The Write Less, Do More, JavaScript Library ... link Choose a Theme Swatch. jQuery Mobile has a robust theme framework that supports up to 26 sets ...
Read more

Get Started with ASP.NET | The ASP.NET Site

Get started with ASP.NET. Download the free .NET Framework and free Visual Studio Express to get started today.
Read more

NativeScript Getting Started Guide

NativeScript Getting Started Guide. ... JavaScript: You should know ... Continue to Chapter 1—Getting Up and Running. Improve this article.
Read more