02 JavaScript Syntax

JavaScript
Programming the WWW

Saturday, December 15, 12

Agenda

Key Concepts

Core Types

Syntax

The Global Object & Scope Chain

Function Objects


History
1995 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
Deﬁne and initialize a variable called ‘text’ with
the string “Hello World”

var text = “Hello World”;

console.log(text);


Hello JavaScript


console.log(text);

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


Hello JavaScript
Deﬁne and initialize a variable called ‘text’ with
the string “Hello World”


console.log(text);

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


Running JavaScript

Easy way: jsbin

Completely oﬄine using node.js

Using a simple HTML ﬁle


Demo
JavaScript Basic Syntax


JavaScript Core Types
Numbers

Strings

Booleans

null

undeﬁned

Objects


Numbers
JavaScript has only one number type called
number

number is a 64-bit ﬂoating point (double)

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

A special value NaN represents errors


Numeric Functions
Number(string)
converts string to number
returns NaN on error

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

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


Numeric Functions
x = 3;

y = Number(7);

z = Number(‘9’);

console.log(x + y + z);


Q&A
Numbers

Strings

Booleans

null

undeﬁned

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


Boolean Type
JavaScript 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


undeﬁned

Not even the nothing

JavaScript puts undeﬁned in anything that hasn't
yet been assigned a value


JavaScript False/True

These are all falsy:

false, null, undeﬁned

“” (the empty string)

0, NaN

Everything else is truthy


Objects
Everything else is an object

An object is a collection of key/value pairs.

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

Objects have no classes

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


Objects

name Ynon Perek
var me = {
name : 'Ynon Perek',
email : 'ynonperek@yahoo.com',
email ynonperek@yahoo.com web : 'http://ynonperek.com'
};

web http://ynonperek.com


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 Syntax
Identiﬁers

Reserved Words

Comments

Loops and Branches

Functions

Objects & Arrays


JavaScript Identiﬁers

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


Identiﬁer Examples

counter

ﬁle_name

function getName()

function Person()


JavaScript Reserved
Words
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while 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 & A
Identiﬁers

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:

do {

statement;
} while (expression);

Note the ending semicolon


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


Branches
Syntax:

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


Functions & Scope

var text = 'Hello Scope';
Outside all functions,
var sum = 0;
variables have the
“global” scope. for ( var i=0; i < 10; i++ ) {
sum += i;
}
Count how many
globals are on the right 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 Function
function 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 deﬁned
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 deﬁnition can appear “inside” another
function

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

It also keeps all variables alive


Functions & Scope
What 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 ﬁelds:

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


DOM
Scripting
Using JS To Manipulate the
web page

http://www.ﬂickr.com/photos/jram23/3088840966/


The DOM

Stands for Document
div HTML
Object Model

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


The DOM

Can use
getElementById
to find a specific var t = document.getElementById('text');

element t.innerHTML = "Hello World";

Can use
getElementsByTagNam
e to get all elements
with a specified name

DOM Agenda

jQuery Introduction

Handling Events

Writing a simple web
app


The Facts

Every browser is diﬀerent. 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 Basics
Wrap a normal DOM
$('p').html('hello jQUery'); element inside a jQuery
object

All operations on the
element are performed
by jQuery

Uniﬁed and cross
browser API

jQuery Basics: Selectors

Powerful element
selection and
manipulations $('p#text').html("Hello World");

Works “the same” for
all mobile & desktop
browsers Selector returning a
jQuery Object
An action to perform
on the object

jQuery Actions
$('div#foo').addClass('wide');
Each jQuery $('div#foo').removeClass('wide');
object
$('div#foo').css('background', 'red');
supports a
wide range of $('div#foo').hide();
functions to $('div#foo').show();

alter the
elements


jQuery Actions Example

Zebra stripe a table
using jQuery
$('table tr:nth-child(2n)').css('background', '#ccc');


jQuery Events

Deﬁne 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 Events
document.ready scroll

click select

hover submit

keypress Full list: http://
mousemove
api.jquery.com/
category/events/
resize


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

ynonperek@yahoo.com

ynonperek.com


02 JavaScript Syntax

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Plus de Ynon Perek

Plus de Ynon Perek (20)

Dernier

Dernier (20)

02 JavaScript Syntax