technology3-javascript-basics

Preview:

DESCRIPTION

 

Citation preview

WOODIWISS.MEFreelance Web Developer & Lecturer in the Winchester, Hampshire area.

JavascriptThe Basics

WOODIWISS.ME

• What is JavaScript

• JavaScript in a Browser

• Variables

• Statements

• Comments

• Data Types

• Functions

• Scope

What’s covered

WOODIWISS.ME

What is JavaScript

• Lightweight Scripting Language.

• Interpreted.

• Object Orientated.

• Prototype-based.

WOODIWISS.MEFreelance Web Developer & Lecturer in the Winchester, Hampshire area.

Easy to pick up. difficult to master.

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

• European Computer Manufacturers Association.

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

• European Computer Manufacturers Association.

• Non-profit Standards Organisation.

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

• European Computer Manufacturers Association.

• Non-profit Standards Organisation.

• Introducing ECMAScript!

WOODIWISS.MEWOODIWISS.ME

ECMAScript

JavaScript.js ActionScript.as

ECMAScript.esLanguage

Dialects

WOODIWISS.MEFreelance Web Developer & Lecturer in the Winchester, Hampshire area.

So what can javascript do?

WOODIWISS.ME

Hardware Programming

• Arduino via NodeJS framework.

• Tessel - micro-controller that runs JavaScript.

• Uniduino - gives you the power to connect the Unity game engine to Arduino.

• Control peripherals e.g. GamePads.

WOODIWISS.ME

Create Hybrid Apps

• PhoneGap - iOS, Android, Blackberry, Windows Phone & more.

• TideSDK - Windows, OSX, Linux.

• Icenieum - Windows, Web, iOS.

• Chrome Apps.

WOODIWISS.ME

Server Side

• Nodejs

• Among others…

WOODIWISS.ME

Client Side• Vanilla JavaScript in a browser.

• jQuery - simplify client side scripting.

• Zepto - Lightweight jQuery alternative.

• Three.js - 3D graphics on the web.

• AngularJS - SPA framework.

• jQuery Mobile - Touch optimised.

WOODIWISS.ME

In the Browser

• Lets look at some Developer tools.

• Firefox - Firebug.

• Chrome - Web Developer Tools.

• Internet Explorer - Developer ToolBar.

• Opera - Dragonfly.

WOODIWISS.ME

Variables

• Used to store data.

• Single line style.

• Multiline.

• Typically must begin with a letter ( $ and _ are valid )

• Case sensitive.

• Over-writable - dynamic.

WOODIWISS.ME

Statements

• The end of a command.

• Tells the interpreter (browser) that your intention is finished.

WOODIWISS.ME

Comments

• Helpful notes.

• Good for debugging.

• Working with others.

• Don’t overuse.

WOODIWISS.ME

Data Types• Primary

• String

• Number

• Boolean

• Composite

• Object

• Array

• Special

• Null

• Undefined

!

• “Hello” - “” - “1984” - “TRUE”

• 19 - 19.333

• true - false

!

• var car = { myCar: “Saturn", getCar: CarTypes("Honda"), special: Sales };

• var coffees = ["French Roast", "Colombian", "Kona"];

• Special

• null, 0, false.

• undefined value.

WOODIWISS.ME

Functions

WOODIWISS.ME

Calling / InvokingLine 12

WOODIWISS.ME

WOODIWISS.ME

WOODIWISS.ME

Define with arguments.

WOODIWISS.ME

Define with arguments.

WOODIWISS.ME

Define with arguments.

Call with arguments.

WOODIWISS.ME

Define with arguments.

Call with arguments.

WOODIWISS.ME

Define with arguments.

Call with arguments.

1

WOODIWISS.ME

Define with arguments.

Call with arguments.

1

WOODIWISS.ME

Define with arguments.

Call with arguments.

1

WOODIWISS.ME

Define with arguments.

Call with arguments.

11

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

10

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

10

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

1010

WOODIWISS.ME

Scope

WOODIWISS.ME

WOODIWISS.ME

WOODIWISS.ME

WOODIWISS.ME

WOODIWISS.ME

Links / Research• https://developer.mozilla.org/en-US/docs/Web/JavaScript

• https://developer.mozilla.org/en/learn/javascript

• http://www.creativebloq.com/web-design/things-you-didnt-know-javascript-could-do-6122835

• http://tessel.io/

• http://www.uniduino.com/

• https://wiki.mozilla.org/GamepadAPI

• http://www.tidesdk.org/

• http://www.icenium.com/?utm_source=html5weekly&utm_medium=banner&utm_campaign=html5weeklynewsletter&utm_content=link1

• http://developer.chrome.com/apps/about_apps.html

• http://nodejs.org/

• http://en.wikipedia.org/wiki/List_of_JavaScript_libraries

• http://mothereff.in/js-variables

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals

WOODIWISS.MEFreelance Web Developer & Lecturer in the Winchester, Hampshire area.

Questions?

Recommended