Introduction to javascript
1 like774 views
The document serves as an introduction to JavaScript, discussing fundamental concepts such as variables, event listeners, functions, arrays, and debugging techniques. It also highlights common mistakes and provides examples of object-oriented programming, including the use of prototypes and callbacks. Additionally, there is a task for audience engagement that encourages creating an interactive HTML page with image hover effects.
![// 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');](https://image.slidesharecdn.com/introductiontojavascript-110208175800-phpapp02/85/Introduction-to-javascript-11-320.jpg)
![// 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](https://image.slidesharecdn.com/introductiontojavascript-110208175800-phpapp02/85/Introduction-to-javascript-12-320.jpg)
Introduction to javascript
- 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: '[email protected]' }; // object var obj = { name: 'syd', email: '[email protected]' }; // 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 = "[email protected]"; 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 = "[email protected]"; 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
Editor's Notes
- #2: \n
- #3: Javascript is not like java\n@adactio once said &#x201C;Java is to Javascript as Ham is to Hamster&#x201D;\n
- #4: HTML is the building blocks that websites are made\nThey are &#x2018;elements&#x2019; of a web page\n
- #5: CSS is the styling, the decorations of the website.\n
- #6: 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
- #7: BBC uses it over their site... but just as an example\nhome page, boxes minimise, move, add etc. etc.\n
- #8: All over\nLogin box\nTop tweets\nTrending topics ticker\nThe list goes on\n
- #9: I am so pleased I can use this slide again :)\n\nAs you guessed it most modern sites use javascript\n
- #10: \n
- #11: Include the javascript file in your html file\n
- #12: \n
- #13: \n
- #14: Chrome Inspector or firefbug, or something similar... use it!\n
- #15: There are various common mistakes made\n
- #16: Adding an extra comma in an object\nremembering document.onready\nif (window.console)\ncamelCase styling\n
- #17: Classes are functions too...\n
- #18: \n
- #19: \n
- #20: The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it.\n
- #21: Adding extra functions on to the class\n
- #22: You can pass functions to other functions to act as callbacks.\n
- #23: Passing a one time callback method\n
- #24: Passing a defined callback method\n
- #25: Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
- #26: Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n