These are the lecture slides used in the Introduction to Javascript lecture as part of the DMD12 BSc course at Winchester University. You can find all sample code: https://gist.github.com/817379

1. INTRODUCTION
TO JAVASCRIPT
DMD12 BSc
10th February 2011
Syd Lawrence SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
slideshare.net/sydlawrence

2. WHAT
IS IT?
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/steve_chilton/1517222734

3. HTML
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/oskay/265899865/

4. CSS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/creepstreeps/81346047/

5. JAVASCRIPT
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/veggiefrog/2573076568/

6. SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

7. SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/executionsinfo/4573848874/

8. SYDLAWRENCE.COM
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
Victorian Times

9. HOW?
https://gist.github.com/817379
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/9550033@N04/4298402206

10. <script
type=”text/javascript”
src=”script.js”>
</script>
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

11. // standard variables
var foo = “bar”;
// when the window is ready (event listener)
document.onready = function(event) {
/* do something */
}
// define a method
function foo(bar) {
alert(bar);
}
// boolean expressions
if (foo == "bar") {
/* do something */
}
// array
var arr = ['a','b','c','d'];
// retrieving an element by id i.e. <div SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
id='element'></div>
var el = document.getElementById('element');

12. // associative array
var assoc = {
name: 'syd',
email: 'syd@sydlawrence.com'
};
// object
var obj = {
name: 'syd',
email: 'syd@sydlawrence.com'
};
// for loops
for (i in assoc) {
/* do something with assoc[i]; */
console.log(assoc[i]);
}
// retrieving an element by css selectors i.e. <div class='element'></div>
var el = document.querySelector('.element');
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

13. DEBUGGING
// similar to actionscript's trace method
console.log(obj);
// try catch
try {
/* do something */
}
catch(e) {
/* an exception has been caught */
}
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

14. COMMON
MISTAKES
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/plucker/17269246/

15. // THIS WILL THROW AN ERROR IN INTERNET EXPLORER
var obj = {
a:‘a’,
b:’b’, // remove the final ,
}
make sure the element has loaded before you try to
manipulate it.
Not all browsers have console.log
style.camelCase
el.style.backgroundColor = ‘#00ff00’;
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

16. CLASSES ARE
FUNCTIONS TOO
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/jiuck/4365662437/

17. function Person() {
this.first_name = "Syd";
this.last_name = "Lawrence";
this.email = "syd@sydlawrence.com";
this.fullName = function() {
return this.first_name + " " + this.last_name;
}
}
var person = new Person();
// this will return "Syd Lawrence";
var full_name = person.fullName();
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

18. function Person() {
this.first_name = "Syd";
this.last_name = "Lawrence";
this.email = "syd@sydlawrence.com";
this.fullName = function() {
return this.first_name + " " + this.last_name;
}
}
var person = new Person();
var person2 = new Person();
// rename the first person
person.first_name = "Bob";
// this will return "Bob Lawrence";
person.fullName();
// this will return "Syd Lawrence";
person2.fullName();
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

19. PROTOTYPE
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/hugo90/4070460675/

20. //First, create the custom object "circle"
function circle(){
}
circle.prototype.pi=3.14159;
// create the object method
circle.prototype.alertpi = function(){
alert(this.pi);
}
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

21. CALLBACKS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/splorp/64027565

22. function Object() {
this.runMethod = function(fn) {
var data = "hi";
fn(data);
}
}
var object = new Object();
object.runMethod(function(data) {
alert(data);
});
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

23. function Object() {
this.runMethod = function(fn) {
var data = "world";
fn(data);
}
}
var object = new Object();
function alertData(data) {
alert(data);
}
object.runMethod(alertData);
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

24. WANT TO
KNOW MORE
http://www.javascriptkit.com
http://dailyjs.com/
Books
Simply Javascript: Everyting You Need To Learn Javascript From Scratch
SIT BACK /
SIT BACK
The JavaScript Anthology LISTEN UP
LISTEN UP
Buils Your Own Ajax Web Applications

25. A LITTLE
TASK DUE
17th FEB 2011
(TOTALLY OPTIONAL)
For next week’s lecture I want you to all have attempted to create an HTML page with
an image.
When you hover over the image, the image changes in some way.
When you move your mouse away it goes back to how it was.
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
You may choose how the image changes