JavaScript

JavaScript
• Like PHP, JavaScript is a modern programming language
that is derived from the syntax at C.

• It has been around just about as long as PHP, also having

been invented in 1995.

• JavaScript, HTML, and CSS make up the three languages

defining most of the user experience on the web.
JavaScript
• To start writing JavaScript, open up a file with the .js file
extension.

• No need for any code delimiters like we had in PHP. Our

website will know that our file is JavaScript because we'll
explicitly tell it as much in an HTML tag.

• Unlike PHP which runs server-side, JavaScript applications run

client-side, on your own machine.
JavaScript
• Including JavaScript in your HTML

• Just like CSS with <style> tags, you can directly write your
JavaScript between <script> tags.

• Just like CSS with <link> tags, you can write your JavaScript in
separate files and link them in by using the src attribute of the
<script> tag.
JavaScript
• Including JavaScript in your HTML

• Just like CSS with <style> tags, you can directly write your
JavaScript between <script> tags.

• Just like CSS with <link> tags, you can write your JavaScript in
separate files and link them in by using the src attribute of the
<script> tag.
JavaScript
• Variables

• JavaScript variables are similar to PHP variables.

• No type specifier.
• When a local variable is first declared, preface with the var keyword.
JavaScript
• Variables

• JavaScript variables are similar to PHP variables.

• No type specifier.
• When a local variable is first declared, preface with the var keyword.

$x = 44;
JavaScript
• Variables

• JavaScript variables are similar to PHP variables.

• No type specifier.
• When a local variable is first declared, preface with the var keyword.

$x = 44;
JavaScript
• Variables

• JavaScript variables are similar to PHP variables.

• No type specifier.
• When a local variable is first declared, preface with the var keyword.

var x = 44;
JavaScript
• Conditionals

• All of the old favorites from C are still available for you to use.

if
JavaScript
• Conditionals

• All of the old favorites from C are still available for you to use.

if
else if
JavaScript
• Conditionals

• All of the old favorites from C are still available for you to use.

if
else if
else
JavaScript
• Conditionals

• All of the old favorites from C are still available for you to use.

if
else if
else
switch
JavaScript
• Conditionals

• All of the old favorites from C are still available for you to use.

if
else if
else
switch
?:
JavaScript
• Loops

• All of the old favorites from C are still available for you to use.
JavaScript
• Loops

• All of the old favorites from C are still available for you to use.

while
JavaScript
• Loops

• All of the old favorites from C are still available for you to use.

while
do-while
JavaScript
• Loops

• All of the old favorites from C are still available for you to use.

while
do-while
for
JavaScript
• Functions

• All functions are introduced with the function keyword.

• JavaScript functions, particularly those bound specifically to

HTML elements, can be anonymous—you don't have to give
them a name!
• We'll revisit anonymity a little later, and we'll revisit "binding to
HTML elements" in the video on the Document Object Model.
JavaScript
• Arrays

• Declaring an array is pretty straightforward.

JavaScript
• Arrays

• Declaring an array is pretty straightforward.

var nums = [1, 2, 3, 4, 5];

JavaScript
• Arrays

• Declaring an array is pretty straightforward.

var nums = [1, 2, 3, 4, 5];

var mixed = [1,
true,
3.333,
'five'];
JavaScript
• Objects

• JavaScript has the ability to behave as an object-oriented

programming language.

• An object is sort of analogous to a C structure.

JavaScript
• Objects

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.
 struct car
JavaScript {
int year;
• Objects char model[10];
}

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.
 struct car
JavaScript {
int year;
• Objects char model[10];
}

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.

struct car herbie;

 struct car
JavaScript {
int year;
• Objects char model[10];
}

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.

struct car herbie;

herbie.year = 1963;
herbie.model = "Beetle";
 struct car
JavaScript {
int year;
• Objects char model[10];
}

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.

struct car herbie;

year = 1963;
model = "Beetle";
 struct car
JavaScript {
int year;
• Objects char model[10];
}

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.

struct car herbie;

year = 1963;
model = "Beetle";
JavaScript
• Objects

• C structures contain a number of fields, which we might also

call properties.
• But the properties themselves can not ever stand on their own.

• Objects, meanwhile, have properties but also methods, or

functions that are inherent to the object, and mean nothing
outside of it.
• Thus, like properties can methods not ever stand on their own.
JavaScript
• Objects

function(object);
JavaScript
• Objects

function(object);
JavaScript
• Objects

object.function();
JavaScript
• Objects

• The fields and methods of an object are similar in spirit to the

idea of an associative array, with which we're familiar from
PHP.
JavaScript
• Objects

• The fields and methods of an object are similar in spirit to the

idea of an associative array, with which we're familiar from
PHP.

var herbie = {year : 1963, model: 'Beetle'};

JavaScript
• Loops (redux)

• How do we iterate across all of the key-value pairs of an object

(or indeed, all of the elements of an array)?
JavaScript
• Loops (redux)

• How do we iterate across all of the key-value pairs of an object

(or indeed, all of the elements of an array)?

foreach($array as $key)
{
// use $key in here as a stand-in for $array[$i]
}
JavaScript
• Loops (redux)

• How do we iterate across all of the key-value pairs of an object

(or indeed, all of the elements of an array)?

foreach($array as $key)
{
// use $key in here as a stand-in for $array[$i]
}
JavaScript
• Loops (redux)

• How do we iterate across all of the key-value pairs of an object

(or indeed, all of the elements of an array)?

for (var key in object)

{
// use object[key] in here
}
JavaScript
• Loops (redux)

• How do we iterate across all of the key-value pairs of an object

(or indeed, all of the elements of an array)?

for (var key of object)

{
// use key in here
}
 var wkArray = ['Monday,
JavaScript 'Tuesday',
'Wednesday',
'Thursday',
• Loops (redux) 'Friday',
'Saturday',
'Sunday'];
 var wkArray = ['Monday,
JavaScript 'Tuesday',
'Wednesday',
'Thursday',
• Loops (redux) 'Friday',
'Saturday',
'Sunday'];

for (var day in wkArray)

{
console.log(day);
}
 var wkArray = ['Monday,
JavaScript 'Tuesday',
'Wednesday',
'Thursday',
• Loops (redux) 'Friday',
'Saturday',
'Sunday'];

for (var day of wkArray)

{
console.log(day);
}
JavaScript
• Printing and variable interpolation

console.log(wkArray[day] . ' is day number '

. (day + 1) . ' of the week!');
JavaScript
• Printing and variable interpolation

console.log(wkArray[day] + ' is day number '

+ (day + 1) + ' of the week!');
JavaScript
• Printing and variable interpolation

console.log(wkArray[day] + ' is day number '

+ (day + 1) + ' of the week!');
JavaScript
• Printing and variable interpolation

console.log(wkArray[day] + ' is day number '

+ (parseInt(day) + 1) +
' of the week!');
JavaScript
• Functions (redux)

• Arrays are a special case of an object (in fact, everything in

JavaScript is a special case of an object), and has numerous
methods that can applied to them:
• array.size(), array.pop(), array.push(x),
array.shift();

• There is also a method for arrays called map(), which can be

used to apply a function to all elements of an array.
• A great situation to use an anonymous function
JavaScript
• Functions (redux)

var nums = [1, 2, 3, 4, 5];

JavaScript
• Functions (redux)

var nums = [1, 2, 3, 4, 5];

nums = nums.map(function(num) {
return num * 2;
});
JavaScript
• Functions (redux)

var nums = [1, 2, 3, 4, 5];

nums = nums.map(function(num) {
return num * 2;
});
JavaScript
• Functions (redux)

var nums = [2, 4, 6, 8, 10];

nums = nums.map(function(num) {
return num * 2;
});
JavaScript
• Events

• An event in HTML and JavaScript is a response to user

interaction with the web page.
• A user clicks a button, a page has finished loading, a user has
hovered over a portion of the page, the user typed in an input field.

• JavaScript has support for event handlers, which are callback

functions that respond to HTML events.
• Many HTML elements have support for events as an attribute.
JavaScript
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<button onclick="">Button 1</button>
<button onclick="">Button 2</button>
</body>
</html>
JavaScript
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<button onclick="">Button 1</button>
<button onclick="">Button 2</button>
</body>
</html>
JavaScript
• Events

• We can write a generic event handler in JavaScript, creating an

event object, that will tell us which of these two buttons was
clicked.
JavaScript
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<button onclick="alertName(event)">Button 1</button>
<button onclick="alertName(event)">Button 2</button>
</body>
</html>
JavaScript

function alertName(event)
{
var trigger = event.srcElement;
alert('You clicked on ' + trigger.innerHTML);
}
JavaScript

function alertName(event)
{
var trigger = event.srcElement;
alert('You clicked on ' + trigger.innerHTML);
}
JavaScript

function alertName(event)
{
var trigger = event.srcElement;
alert('You clicked on ' + trigger.innerHTML);
}