SlideShare a Scribd company logo
INTRODUCTION
TO JAVASCRIPT


DMD12 BSc
10th February 2011
Syd Lawrence                 SIT BACK /
                             SIT BACK
                             LISTEN UP
                             LISTEN UP

slideshare.net/sydlawrence
WHAT
IS IT?


                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

http://www.flickr.com/photos/steve_chilton/1517222734
HTML



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/oskay/265899865/
CSS



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/creepstreeps/81346047/
JAVASCRIPT



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

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

http://www.flickr.com/photos/executionsinfo/4573848874/
SYDLAWRENCE.COM



                  SIT BACK /
                  SIT BACK
                  LISTEN UP
                  LISTEN UP

Victorian Times
HOW?
https://gist.github.com/817379




                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/9550033@N04/4298402206
<script
    type=”text/javascript”
    src=”script.js”>
</script>


                        SIT BACK /
                        SIT BACK
                        LISTEN UP
                        LISTEN UP
// 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');
// 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
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
COMMON
MISTAKES


                                                 SIT BACK /
                                                 SIT BACK
                                                 LISTEN UP
                                                 LISTEN UP

http://www.flickr.com/photos/plucker/17269246/
// 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
CLASSES ARE
FUNCTIONS TOO



                                                 SIT BACK /
                                                 SIT BACK
                                                 LISTEN UP
                                                 LISTEN UP

http://www.flickr.com/photos/jiuck/4365662437/
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
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
PROTOTYPE



                                                  SIT BACK /
                                                  SIT BACK
                                                  LISTEN UP
                                                  LISTEN UP

http://www.flickr.com/photos/hugo90/4070460675/
//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
CALLBACKS



                                               SIT BACK /
                                               SIT BACK
                                               LISTEN UP
                                               LISTEN UP

http://www.flickr.com/photos/splorp/64027565
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
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
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
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

More Related Content

More from Syd Lawrence

High Performance PhoneGap Apps
High Performance PhoneGap AppsHigh Performance PhoneGap Apps
High Performance PhoneGap Apps
Syd Lawrence
 
Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014
Syd Lawrence
 
Mobile Apps with Web Tech
Mobile Apps with Web TechMobile Apps with Web Tech
Mobile Apps with Web Tech
Syd Lawrence
 
It's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you thinkIt's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you think
Syd Lawrence
 
Rewriting The History Books
Rewriting The History BooksRewriting The History Books
Rewriting The History Books
Syd Lawrence
 
Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)
Syd Lawrence
 
Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
Syd Lawrence
 
Mobile web app development
Mobile web app developmentMobile web app development
Mobile web app development
Syd Lawrence
 
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Syd Lawrence
 

More from Syd Lawrence (9)

High Performance PhoneGap Apps
High Performance PhoneGap AppsHigh Performance PhoneGap Apps
High Performance PhoneGap Apps
 
Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014
 
Mobile Apps with Web Tech
Mobile Apps with Web TechMobile Apps with Web Tech
Mobile Apps with Web Tech
 
It's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you thinkIt's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you think
 
Rewriting The History Books
Rewriting The History BooksRewriting The History Books
Rewriting The History Books
 
Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)
 
Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
 
Mobile web app development
Mobile web app developmentMobile web app development
Mobile web app development
 
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
 

Recently uploaded

Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Zilliz
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 

Recently uploaded (20)

Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 

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: '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

Editor's Notes

  1. \n
  2. Javascript is not like java\n@adactio once said &amp;#x201C;Java is to Javascript as Ham is to Hamster&amp;#x201D;\n
  3. HTML is the building blocks that websites are made\nThey are &amp;#x2018;elements&amp;#x2019; of a web page\n
  4. CSS is the styling, the decorations of the website.\n
  5. 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
  6. BBC uses it over their site... but just as an example\nhome page, boxes minimise, move, add etc. etc.\n
  7. All over\nLogin box\nTop tweets\nTrending topics ticker\nThe list goes on\n
  8. I am so pleased I can use this slide again :)\n\nAs you guessed it most modern sites use javascript\n
  9. \n
  10. Include the javascript file in your html file\n
  11. \n
  12. \n
  13. Chrome Inspector or firefbug, or something similar... use it!\n
  14. There are various common mistakes made\n
  15. Adding an extra comma in an object\nremembering document.onready\nif (window.console)\ncamelCase styling\n
  16. Classes are functions too...\n
  17. \n
  18. \n
  19. The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it.\n
  20. Adding extra functions on to the class\n
  21. You can pass functions to other functions to act as callbacks.\n
  22. Passing a one time callback method\n
  23. Passing a defined callback method\n
  24. Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
  25. Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n