02 JavaScript Syntax

JavaScriptProgramming the WWW

Saturday, December 15, 12

Agenda

Key Concepts

Core Types

Syntax

The Global Object & Scope Chain

Function Objects


History1995 Brendan Eich started developing a new language for Netscape Navigator 2.0

Original name was LiveScript

Announced on Dec 1995 as JavaScript

1996 Microsoft responded with JScript


JavaScript Key Ideas

Interpreter based (no compilation)

Loosely typed language

Objects are just hash tables


Hello JavaScript

var text = “Hello World”;

console.log(text);

Define and initialize a variable called ‘text’ with the string “Hello World”


Hello JavaScript


console.log(text);

Call the log function from the console object on the variable ‘text’


Hello JavaScript


console.log(text);

Call the log function from the console object on the variable ‘text’

Define and initialize a variable called ‘text’ with the string “Hello World”


Running JavaScript

Easy way: jsbin

Completely offline using node.js

Using a simple HTML file


DemoJavaScript Basic Syntax


JavaScript Core TypesNumbers

Strings

Booleans

null

undefined

Objects


Numbers

JavaScript has only one number type called number

number is a 64-bit floating point (double)

Same arithmetical problems double have (0.1+0.2 !=0.3)

A special value NaN represents errors


Numeric FunctionsNumber(string)

converts string to number returns NaN on error

parseInt(string, radix)converts string to numbertries its best (so '7hello' is OK)

Math.random()returns a random between 0 and 1


Numeric Functionsx = 3;

y = Number(7);

z = Number(‘9’);

console.log(x + y + z);


Q & ANumbers

Strings

Booleans

null

undefined

Objects


Strings

Strings are unicode 16-bit chars (like in Java).

No char class. Characters are strings of length 1

Strings are immutable (like in Java)

Both Single and Double quotes make a string


String Examples'hello'.length === 5

String(10).length === 2

'hello'.indexOf('l') === 2

'hello'.lastIndexOf('l')=== 3

'hello'.toUpperCase() === 'HELLO'


Lab

http://ynonperek.com/javascript-exer.html

Exercises 1-5




Q & ANumbers

Strings

Booleans

null

undefined

Objects


Boolean TypeJavaScript supports ‘true’ and ‘false’ as boolean values

Boolean(value) is a function returning the truthness of a value

returns false if value is falsy, and true if value is truthy

!!value has the same meaning


null

represents the "nothing" of JavaScript

usually used to mark errors

JavaScript will not give null to a variable. It's always the result of an assignment performed on purpose


undefined

Not even the nothing

JavaScript puts undefined in anything that hasn't yet been assigned a value


JavaScript False/True

These are all falsy:

false, null, undefined

“” (the empty string)

0, NaN

Everything else is truthy


ObjectsEverything else is an object

An object is a collection of key/value pairs.

Objects are fully dynamic, so new methods and fields can be added at runtime

Objects have no classes

Each object has a prototype. We'll talk about that later.


Objects

var me = { name : 'Ynon Perek', email : '[email protected]', web : 'http://ynonperek.com'};

name Ynon Perek

email [email protected]

web http://ynonperek.com


mailto:[email protected]


http://ynonperek.com

http://ynonperek.com

Q & ANumbers

Strings

Booleans

null

undefined

Objects


Exercise

Write a JS program that randomizes 3 numbers from 1 to 100, and prints their sum total

Write a JS function that takes two values and returns their sum. If it got only one, it should return that number


JavaScript SyntaxIdentifiers

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays


JavaScript Identifiers

Starts with a letter, an _, or a $

Followed by letters, digits, _ or $


Naming Conventions

variable names are lowercased

multiple words are separated by _ in variable names

multiple words are camel cased in function names

A constructor function starts with a captial


Identifier Examples

counter

file_name

function getName()

function Person()


JavaScript Reserved Wordsabstract

boolean break bytecase catch char class const continuedebugger default delete do doubleelse enum export extendsfalse final finally float for functiongotoif implements import in instanceof int interfacelongnative new nullpackage private protected publicreturnshort static super switch synchronizedthis throw throws transient true try typeofvar volatile voidwhile with


JavaScript Comments

// this is a valid line comment in Javascript

/**

* Java style multi line comments work well also

* they are recommended for commenting on functions

*/


Syntax Q & AIdentifiers

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays


Loop Controls

JavaScript has:

while and do-while loops

for loops

for-in loops


While Loop

Syntax:

while (expression) {

statement;}


Do-while Loop

Syntax:

Note the ending semicolon

do {

statement;} while (expression);


For Loop

Syntax:

for ( initialize; test; increment) { statement;

}


For Example

var sum = 0;

for ( var i=0; i < 10; ++i ) {

sum += i;}console.log(sum);

For-in loop

allows iterating through all the properties of an object

Be careful with this one - it yields wrong results when combined with inheritance


BranchesSyntax:

if ( expression ) {}

else if ( something_else ) {}

else {}


Exercise

Write a JS that randomizes 3 number and prints the largest one

Write a JS that prints the square-sum of all the numbers divisible by 7 in range 1..100 (1^2 + 7^2 + 14^2 + ...)



Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays


Functions & Scope

Outside all functions, variables have the “global” scope.

Count how many globals are on the right

var text = 'Hello Scope'; var sum = 0; for ( var i=0; i < 10; i++ ) { sum += i; } console.log( sum );

Functions & Scope

A function is an object that is callable (meaning we can apply it to arguments)

In JavaScript, we have two ways to declare a function. Either as a named function or an anonymous function

A function can return a value by using the return keyword


Creating A Functionfunction foo(x, y) { return x + y;}

var bar = function(x, y) { return x + y;};


Functions & Scope

Inside a function, a variable can be scoped with the keyword var

Using strict mode, all variables must be defined var

This helps prevent bugs because we are less likely to mess with outside code


Functions & Scope

Best Practices:

Write all code inside a function block

Use only one var statement at the beginning of that function


Functions & Scope

A function definition can appear “inside” another function

This is called a “closure”, and then the inner function has access to all variables defined by the outer “closing” function

It also keeps all variables alive


Functions & ScopeWhat is printed ? Why ?

function Counter(max) { var val = 0; return function() { return (val < max) ? val++ : false; };}

var c = Counter(10);

while (c()) { console.log(c()); }

Functions Q & A


Objects

An object is a collection of key/value pairs

Objects are instantiated using the object literal

Properties stored in objects are fetched using the square bracket notation or the dot notation


Objects

var pos = { x : 50; y : 10 };

pos.move = function(dx, dy) {

this.x += dx;

this.y += dy;};


Objects Exercise

Create a person object with three fields:

name: your name

favorite_color: your favorite color

hello: a function that prints out your name and favorite color


The this Keyword

Inside a function, a special keyword named ‘this’ is used to determine the function calling context

When a function was called as a method, this refers to the calling object

Otherwise, this refers to the global object


Arrays

Arrays represent ordered data in JavaScript

Arrays are normal objects, so they can have attributes other than their indexes

Arrays have some array related functions we can use


Arrays

var arr = [];

arr.push(1, 2, 3); // add data

arr.pop(); // returns 3

arr[0] = 5; // changes array

console.log(arr[2]); // value at



Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays


DOM ScriptingUsing JS To Manipulate the web page

http://www.flickr.com/photos/jram23/3088840966/




The DOM

Stands for Document Object Model

Every HTML element has a JS object “bound” to it in a special bond HTMLDivElement

HTMLdiv

JS


The DOM

Can use getElementByIdto find a specific element

Can use getElementsByTagName to get all elements with a specified name



var t = document.getElementById('text');

t.innerHTML = "Hello World";

DOM Agenda

jQuery Introduction

Handling Events

Writing a simple web app


The Facts

Every browser is different. Really.

W3 Standard

Webkit

Mozilla

Microsoft


Ajax Libraries

Developer tools that wrap common functionality and create a standard

Many options to choose from. We’ll use jQuery


jQuery BasicsWrap a normal DOM element inside a jQuery object

All operations on the element are performed by jQuery

Unified and cross browser API



$('p').html('hello jQUery');

jQuery Basics: Selectors

Powerful element selection and manipulations

Works “the same” for all mobile & desktop browsers



$('p#text').html("Hello World");

Selector returning a jQuery Object

An action to perform on the object

jQuery Actions

Each jQuery object supports a wide range of functions to alter the elements

$('div#foo').addClass('wide');$('div#foo').removeClass('wide');

$('div#foo').css('background', 'red');

$('div#foo').hide();$('div#foo').show();


jQuery Actions Example

Zebra stripe a table using jQuery

$('table tr:nth-child(2n)').css('background', '#ccc');


jQuery Events

Define what to do when something happens

in jQuery, “bind” a function to an event

After the bind, every time the the event happens your callback is called, with the object as the “this” argument


jQuery Eventsdocument.ready

click

hover

keypress

mousemove

resize

scroll

select

submit

Full list: http://api.jquery.com/category/events/


http://api.jquery.com/category/events/






jQuery Demo

Build a red spotter game

Game should present the user with 4 colored squares, only one is red

User should click on the red square


jQuery API

Other useful methods:

attr - change an attribute value

css - change a style attribute

html - change innerHTML content

data - store arbitrary data inside an element


jQuery Lab

Write a web application that splits the screen into four sections. Each click on a section should display a sentence inside the clicked section

Write a web app to convert time units. User should enter time in seconds, minutes or hours, and convert to all the others

Use HTML5 Boilerplate and jQuery


Q & A


Thank You

Ynon Perek

[email protected]

ynonperek.com




http://www.ynonperek.com

http://www.ynonperek.com

02 JavaScript Syntax

Technology

Transcript of 02 JavaScript Syntax