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
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
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
Notas del editor
\n
Javascript is not like java\n@adactio once said &#x201C;Java is to Javascript as Ham is to Hamster&#x201D;\n
HTML is the building blocks that websites are made\nThey are &#x2018;elements&#x2019; of a web page\n
CSS is the styling, the decorations of the website.\n
So, we have a house. We have our HTML building blocks, and we have paint on the walls, and our sites are looking gooood :)\nWhy do we need javascript?\nThink of javascript as the electricity of the house. It makes things inside your house do stuff.\n
BBC uses it over their site... but just as an example\nhome page, boxes minimise, move, add etc. etc.\n
All over\nLogin box\nTop tweets\nTrending topics ticker\nThe list goes on\n
I am so pleased I can use this slide again :)\n\nAs you guessed it most modern sites use javascript\n
\n
Include the javascript file in your html file\n
\n
\n
Chrome Inspector or firefbug, or something similar... use it!\n
There are various common mistakes made\n
Adding an extra comma in an object\nremembering document.onready\nif (window.console)\ncamelCase styling\n
Classes are functions too...\n
\n
\n
The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it.\n
Adding extra functions on to the class\n
You can pass functions to other functions to act as callbacks.\n
Passing a one time callback method\n
Passing a defined callback method\n
Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n