A (gentle???) Introduction to JavaScript Jeremy Shafer Department of MIS Fox School of Business Temple University

Objects are described by their: Before we begin… Recall that the world around us is made up of things. We call those things: nouns, entities or … OBJECTS. Objects are described by their: properties and methods.

Let’s think of an example: a bedroom. If this is a representation of a bedroom, what would it’s properties (also called attributes) be? Would this room have any methods?

Our example extended: an apartment. This is an apartment. It has some properties that a room does not have. But … it also has two bedrooms contained in it. Apparently, this object holds (at least) two objects inside it.

Our example continued. This is one floor of an apartment building. If you look closely you will determine that it is really made up of individual apartments.

This is an apartment building. It is made up of floors. But wait there’s more… This is an apartment building. It is made up of floors.

What if we wanted to express this electronically? <apartment_building> <floor> <apartment> <bedroom></bedroom> </apartment> etc. etc. etc. </floor> <floor> etc. etc. etc. </floor> etc. etc. etc. </apartment_building>

<apartment id=“Apartment305”> <bedroom></bedroom> Finding a bed room If we wanted to find a room in our building, I suppose we could give directions: Go to the building. Go up the stairs, one floor at a time, count the floors until you get to 3. Now go down the hall, count the apartments one at a time, until you get to 5. Now find the first bedroom in the apartment. Congratulations. You found apartment 305, bedroom 1. You know what would make these instructions easier? An identifier. Go to the building. Go to apartment 305. enter bedroom 1. <apartment id=“Apartment305”> <bedroom></bedroom> </apartment>

Taking action on an object The prior slide illustrated a (completely imaginary) syntax for describing our apartment buildings objects as they are. But, what if we wanted to take action on those objects? What if, instead of an unchanging blueprint of our apartment building we wanted a working model of it? How would we, for example, lock a door? Still mostly imaginary syntax! Unlock the door to an apartment: building.getElementById(“Apartment305”).unlock(); Unlock the door to a room: var theApt = building.getElementById(“Apartment305”); //get the apartment var theRooms = theApt.getElementsByTagName(“bedroom”); //get all the // bedrooms in the apartment theRooms[“0”].unlock(); //unlock the first bedroom door

Thinking about it… Are all rooms the same? Are there other actions that we might want to take on a room? Since our model is electronic, we can change lots of things that may (or may not) make sense in the real world. How about this…. is this a room?

So... Here’s a big idea. Our HTML documents are really objects. They are composite objects made up of smaller objects. JavaScript is a powerful language, similar in syntax to PHP, that lets us manipulate those objects.

Some basic JavaScript Syntax We need some basic JavaScript syntax to get started. We’ll add more as time goes by. Syntax Comment <script></script> This is the script tag. For the most part, all our JavaScript goes in here. This is where our browser (FireFox, Chrome) expects it all to be. alert('some message here); Probably the easiest JavaScript command. This command will cause the browser to display a message box. It is not really used much in real life, but it is a helpful function for learning. onclick The onclick event - most HTML elements have the onclick attribute. We use this attribute to specify what happens when a HTML element is clicked. function() { } JavaScript uses a lot of functions. In JavaScript, functions can be named, or anonymous. For the most part, we will used anonymous functions. "use strict"; This is a direction we give to the browser, telling us how JavaScript should be evaluated. The "use strict" directive is recommended to any person learning JavaScript, and is generally preferred by professional coders. window.onload The onload event - this event will specify what should happen when the window is done being loaded. document.getElementById("some_id") The document object has a really handy method called getElementById. It will return a reference to one specific html tag. .innerHTML Most HTML tags hold some text. This text is referred to as the innerHTML of the tag. We can use this to reassign the contents of an individual tag and those changes take place immediately. There's no need to reload the entire page in order to see the change. .value HTML input tags can have a value. We can use the .value property to get and set the value of an HTML input tag.

Let’s play!