technology3-javascript-basics

43
WOODIWISS.ME Freelance Web Developer & Lecturer in the Winchester, Hampshire area. Javascript The Basics

description

 

Transcript of technology3-javascript-basics

Page 1: technology3-javascript-basics

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

JavascriptThe Basics

Page 2: technology3-javascript-basics

WOODIWISS.ME

• What is JavaScript

• JavaScript in a Browser

• Variables

• Statements

• Comments

• Data Types

• Functions

• Scope

What’s covered

Page 3: technology3-javascript-basics

WOODIWISS.ME

What is JavaScript

• Lightweight Scripting Language.

• Interpreted.

• Object Orientated.

• Prototype-based.

Page 4: technology3-javascript-basics

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

Easy to pick up. difficult to master.

Page 5: technology3-javascript-basics

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

Page 6: technology3-javascript-basics

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

• European Computer Manufacturers Association.

Page 7: technology3-javascript-basics

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

• European Computer Manufacturers Association.

• Non-profit Standards Organisation.

Page 8: technology3-javascript-basics

WOODIWISS.MEWOODIWISS.ME

ECMAWhat/Who is ECMA?

• European Computer Manufacturers Association.

• Non-profit Standards Organisation.

• Introducing ECMAScript!

Page 9: technology3-javascript-basics

WOODIWISS.MEWOODIWISS.ME

ECMAScript

JavaScript.js ActionScript.as

ECMAScript.esLanguage

Dialects

Page 10: technology3-javascript-basics

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

So what can javascript do?

Page 11: technology3-javascript-basics

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.

Page 12: technology3-javascript-basics

WOODIWISS.ME

Create Hybrid Apps

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

• TideSDK - Windows, OSX, Linux.

• Icenieum - Windows, Web, iOS.

• Chrome Apps.

Page 13: technology3-javascript-basics

WOODIWISS.ME

Server Side

• Nodejs

• Among others…

Page 14: technology3-javascript-basics

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.

Page 15: technology3-javascript-basics

WOODIWISS.ME

In the Browser

• Lets look at some Developer tools.

• Firefox - Firebug.

• Chrome - Web Developer Tools.

• Internet Explorer - Developer ToolBar.

• Opera - Dragonfly.

Page 16: technology3-javascript-basics

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.

Page 17: technology3-javascript-basics

WOODIWISS.ME

Statements

• The end of a command.

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

Page 18: technology3-javascript-basics

WOODIWISS.ME

Comments

• Helpful notes.

• Good for debugging.

• Working with others.

• Don’t overuse.

Page 19: technology3-javascript-basics

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.

Page 20: technology3-javascript-basics

WOODIWISS.ME

Functions

Page 21: technology3-javascript-basics

WOODIWISS.ME

Calling / InvokingLine 12

Page 22: technology3-javascript-basics

WOODIWISS.ME

Page 23: technology3-javascript-basics

WOODIWISS.ME

Page 24: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Page 25: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Page 26: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

Page 27: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

Page 28: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

1

Page 29: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

1

Page 30: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

1

Page 31: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

11

Page 32: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

Page 33: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

Page 34: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

10

Page 35: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

10

Page 36: technology3-javascript-basics

WOODIWISS.ME

Define with arguments.

Call with arguments.

11 1

1010

Page 37: technology3-javascript-basics

WOODIWISS.ME

Scope

Page 38: technology3-javascript-basics

WOODIWISS.ME

Page 39: technology3-javascript-basics

WOODIWISS.ME

Page 40: technology3-javascript-basics

WOODIWISS.ME

Page 41: technology3-javascript-basics

WOODIWISS.ME

Page 42: technology3-javascript-basics

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

Page 43: technology3-javascript-basics

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

Questions?