SlideShare a Scribd company logo
JAVASCRIPT
DEVELOPMENT


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

slideshare.net/sydlawrence
DEBUGGING



                                                         SIT BACK /
                                                         SIT BACK
                                                         LISTEN UP
                                                         LISTEN UP

http://ker-.deviantart.com/art/Mario-World-HD-19771526
CONSOLE.LOG



                                                  SIT BACK /
                                                  SIT BACK
                                                  LISTEN UP
                                                  LISTEN UP

http://www.flickr.com/photos/stacker/111324504/
TYPES



                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

http://www.flickr.com/photos/stuartpilbrow/2938100285
NUMBERS



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/pinksherbet/236299644/
// force something into an integer
                                                <code/>
parseInt(val)
parseInt(3.4) = 3
parseInt(“hello”) = NaN

// a random number
Math.random() = {random number between 0 & 1}
10 * Math.random() = {random number between 0 & 10}

// find the max or min
Math.max(0.5,0.6,0.7,0.2) = 0.7
Math.min(0.5,0.6,0.7,0.2) = 0.2




                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

MORE INFO: http://sydl.me/hB5RJk
STRINGS



                                                   SIT BACK /
                                                   SIT BACK
                                                   LISTEN UP
                                                   LISTEN UP

http://www.flickr.com/photos/archer10/2481165571
// find the length of a string
                                          <code/>
“hello”.length = 5

// find a specific character
“hello”.charAt(1) = “e”

// string replace
“hello world”.replace(“hello”,””)

// string append
“hello” + “ “ + ”world” = “hello world”

// watch out for numbers!
“hello” + 23 = “hello23”




                                             SIT BACK /
                                             SIT BACK
                                             LISTEN UP
                                             LISTEN UP

MORE INFO: http://sydl.me/eZreGb
BOOLEANS



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/troyholden/4539140841/
// simple boolean
                                   <code/>
“a” == 4                  false

// AND
“a” == 4 && 5 == 5        false

// OR
“a” == 4 || 5 == 5        true

// NOT
!false                    true




                                      SIT BACK /
                                      SIT BACK
                                      LISTEN UP
                                      LISTEN UP

MORE INFO: http://sydl.me/f6I23b
FUNCTIONS



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/stefz/2159280574
// define
                                   <code/>
foo = function(bar) {
   alert(bar);
   return true;
}

// assign
test = foo;

// call
test(‘hello world’);
foo(‘hello world’);




                                      SIT BACK /
                                      SIT BACK
                                      LISTEN UP
                                      LISTEN UP

MORE INFO: http://sydl.me/f6I23b
OBJECTS



                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

http://www.flickr.com/photos/h_is_for_home/2203667311
// associative array
                                   <code/>
var assoc = {
  name: 'syd',
  email: 'syd@sydlawrence.com'
};

// object
var obj = {
  name: 'syd',
  email: 'syd@sydlawrence.com'
};

alert(obj.name);
alert(obj[‘name’]);




                                      SIT BACK /
                                      SIT BACK
                                      LISTEN UP
                                      LISTEN UP

MORE INFO: http://sydl.me/f6I23b
DOM
MANIPULATION



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/ecstaticist/2918198742
/*
                                                     <code/>
*    RETRIEVING ELEMENTS
*/

// get by id
el = document.getElementById(‘test’);

// uses CSS 3 selector syntax
els = document.querySelectorAll(‘.some_class’);

// body
document.body


/*
*   MODIFYING STYLE / CSS
*/
el.style.height = “20px”
el.style.display = “none”
el.style.marginLeft = “20px”       // notice the marginLeft NOT margin-left


                                                                   SIT BACK /
                                                                   SIT BACK
                                                                   LISTEN UP
                                                                   LISTEN UP

MORE INFO: http://sydl.me/eYAiXT
/*
                                                      <code/>
*    CREATING ELEMENTS
*/

var el = document.createElement(‘div’);

/*
*    ASSIGNING ATTRIBUTES
*/

el.setAttribute(“id”,”test”);
el.setAttribute(“class”,”test_class”);

/*
*    INSERTING HTML
*/

el.innerHTML = “Hello World”;



////////////////////////////////////
                                                         SIT BACK /
                                                         SIT BACK
                                                         LISTEN UP
                                                         LISTEN UP
<div id=”test” class=”test_class”>Hello World</div>
EVENTS



         SIT BACK /
         SIT BACK
         LISTEN UP
         LISTEN UP
WHEN...
DO...


                                                 SIT BACK /
                                                 SIT BACK
                                                 LISTEN UP
                                                 LISTEN UP

http://www.flickr.com/photos/monkeyc/121594837
<code/>

lights.addEventListener( ‘go_green’ ,
    function() {
      car.drive();
    }
)




                                        SIT BACK /
                                        SIT BACK
                                        LISTEN UP
                                        LISTEN UP

MORE INFO: http://sydl.me/gnb8R5
document.onload = function() {
                                                <code/>
   /* this is run when the page loads */
}

element.onhover = function() {
   /* when a mouse goes over an element */
}

element.onhover ‘same’ as
      element.addEventListener(‘hover’)

// standard ones you will probably use at some point
onclick
onmouseover
onmousedown
onmouseup
onfocus
onblur
onmouseout

                                                       SIT BACK /
                                                       SIT BACK
                                                       LISTEN UP
                                                       LISTEN UP

MORE INFO: http://sydl.me/gnb8R5
BROWSER
SUPPORT


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/annagaycoan/3750144703/
// Scott Andrew                                     <code/>
function addEvent(elm, evType, fn, useCapture) {

 if (elm.addEventListener) {

 
 elm.addEventListener(evType, fn, useCapture);

 
 return true;

 }

 else if (elm.attachEvent) {

 
 var r = elm.attachEvent('on' + evType, fn);

 
 return r;

 }

 else {

 
 elm['on' + evType] = fn;

 }
}




                                                       SIT BACK /
                                                       SIT BACK
                                                       LISTEN UP
                                                       LISTEN UP

MORE INFO: http://sydl.me/eTCe2k
CREATE YOUR
OWN EVENTS


                                                     SIT BACK /
                                                      SIT BACK
                                                     LISTENUP
                                                      LISTEN UP



http://www.flickr.com/photos/stuartbryant/79949949
<code/>


el.dispatch("my_event");




                     SIT BACK /
                     SIT BACK
                     LISTEN UP
                     LISTEN UP
A LITTLE
TASK DUE
TODAY
(TOTALLY OPTIONAL)




For this 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
<script type="text/javascript">
                                                        <code/>
document.body.onload = function() {
  var el = document.getElementById('hover_image');
  el.onmouseover = function(){
     el.src = "http://farm3.static.flickr.com/2181/2358714455_34201aaf45_m.jpg";
  }
  el.onmouseout = function(){
     el.src = "http://farm4.static.flickr.com/3154/2922782847_71be5cf3b7_m.jpg";
  };

}

</script>

<img
     src="http://farm4.static.flickr.com/3154/2922782847_71be5cf3b7_m.jpg"
     alt="Hover over me :)"
     id ="hover_image"
/>




                                                                      SIT BACK /
                                                                      SIT BACK
                                                                      LISTEN UP
                                                                      LISTEN UP

MORE INFO: http://sydl.me/hB5H2s
HOW DID
YOU DO?


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/annagaycoan/3750144703/
A LITTLE
TASK DUE
IN A FORTNIGHT
(OPTIONAL BUT STRONGLY ADVISED)

I am away next week, so this time you have a fortnight
For this week’s lecture I want you to all have attempted to create an HTML page with an
image.
Create a custom event
Create a button which when clicked dispatches the custom event
Listen out for the custom event, and 1 second after the event, manipulate the image in
some way.
                                                                                          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 (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
 
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 (7)

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 (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
 
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

Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
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.
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
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
 
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
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
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
 
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.
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
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
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 

Recently uploaded (20)

Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
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
 
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
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
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
 
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
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
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
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 

Javascript Development

  • 1. JAVASCRIPT DEVELOPMENT DMD12 BSc 17th February 2011 Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UP slideshare.net/sydlawrence
  • 2. DEBUGGING SIT BACK / SIT BACK LISTEN UP LISTEN UP http://ker-.deviantart.com/art/Mario-World-HD-19771526
  • 3. CONSOLE.LOG SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/stacker/111324504/
  • 4. TYPES SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/stuartpilbrow/2938100285
  • 5. NUMBERS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/pinksherbet/236299644/
  • 6. // force something into an integer <code/> parseInt(val) parseInt(3.4) = 3 parseInt(“hello”) = NaN // a random number Math.random() = {random number between 0 & 1} 10 * Math.random() = {random number between 0 & 10} // find the max or min Math.max(0.5,0.6,0.7,0.2) = 0.7 Math.min(0.5,0.6,0.7,0.2) = 0.2 SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/hB5RJk
  • 7. STRINGS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/archer10/2481165571
  • 8. // find the length of a string <code/> “hello”.length = 5 // find a specific character “hello”.charAt(1) = “e” // string replace “hello world”.replace(“hello”,””) // string append “hello” + “ “ + ”world” = “hello world” // watch out for numbers! “hello” + 23 = “hello23” SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/eZreGb
  • 9. BOOLEANS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/troyholden/4539140841/
  • 10. // simple boolean <code/> “a” == 4 false // AND “a” == 4 && 5 == 5 false // OR “a” == 4 || 5 == 5 true // NOT !false true SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/f6I23b
  • 11. FUNCTIONS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/stefz/2159280574
  • 12. // define <code/> foo = function(bar) {    alert(bar); return true; } // assign test = foo; // call test(‘hello world’); foo(‘hello world’); SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/f6I23b
  • 13. OBJECTS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/h_is_for_home/2203667311
  • 14. // associative array <code/> var assoc = {   name: 'syd',   email: 'syd@sydlawrence.com' }; // object var obj = {   name: 'syd',   email: 'syd@sydlawrence.com' }; alert(obj.name); alert(obj[‘name’]); SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/f6I23b
  • 15. DOM MANIPULATION SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/ecstaticist/2918198742
  • 16. /* <code/> * RETRIEVING ELEMENTS */ // get by id el = document.getElementById(‘test’); // uses CSS 3 selector syntax els = document.querySelectorAll(‘.some_class’); // body document.body /* * MODIFYING STYLE / CSS */ el.style.height = “20px” el.style.display = “none” el.style.marginLeft = “20px” // notice the marginLeft NOT margin-left SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/eYAiXT
  • 17. /* <code/> * CREATING ELEMENTS */ var el = document.createElement(‘div’); /* * ASSIGNING ATTRIBUTES */ el.setAttribute(“id”,”test”); el.setAttribute(“class”,”test_class”); /* * INSERTING HTML */ el.innerHTML = “Hello World”; //////////////////////////////////// SIT BACK / SIT BACK LISTEN UP LISTEN UP <div id=”test” class=”test_class”>Hello World</div>
  • 18. EVENTS SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 19. WHEN... DO... SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/monkeyc/121594837
  • 20. <code/> lights.addEventListener( ‘go_green’ , function() { car.drive(); } ) SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/gnb8R5
  • 21. document.onload = function() { <code/> /* this is run when the page loads */ } element.onhover = function() { /* when a mouse goes over an element */ } element.onhover ‘same’ as element.addEventListener(‘hover’) // standard ones you will probably use at some point onclick onmouseover onmousedown onmouseup onfocus onblur onmouseout SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/gnb8R5
  • 22. BROWSER SUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
  • 23. // Scott Andrew <code/> function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/eTCe2k
  • 24. CREATE YOUR OWN EVENTS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/stuartbryant/79949949
  • 25. <code/> el.dispatch("my_event"); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 26. A LITTLE TASK DUE TODAY (TOTALLY OPTIONAL) For this 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
  • 27. <script type="text/javascript"> <code/> document.body.onload = function() { var el = document.getElementById('hover_image'); el.onmouseover = function(){ el.src = "http://farm3.static.flickr.com/2181/2358714455_34201aaf45_m.jpg"; } el.onmouseout = function(){ el.src = "http://farm4.static.flickr.com/3154/2922782847_71be5cf3b7_m.jpg"; }; } </script> <img src="http://farm4.static.flickr.com/3154/2922782847_71be5cf3b7_m.jpg" alt="Hover over me :)" id ="hover_image" /> SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/hB5H2s
  • 28. HOW DID YOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
  • 29. A LITTLE TASK DUE IN A FORTNIGHT (OPTIONAL BUT STRONGLY ADVISED) I am away next week, so this time you have a fortnight For this week’s lecture I want you to all have attempted to create an HTML page with an image. Create a custom event Create a button which when clicked dispatches the custom event Listen out for the custom event, and 1 second after the event, manipulate the image in some way. SIT BACK / SIT BACK LISTEN UP LISTEN UP You may choose how the image changes

Editor's Notes

  1. \n
  2. Do it...\nIf you come across a bug....\nFind out what is causing it\nFind out why\nTest with debug code\n
  3. Chrome developer tools\nFirefox firebug\nInternet explorer, developer toolbar.... Forget it\nSafari developer tools\n
  4. As with all languages there are different &amp;#x2018;types&amp;#x2019; of variables\n
  5. 1, 2, 3\n
  6. \n
  7. &amp;#x201C;hello&amp;#x201D;, &amp;#x201C;test&amp;#x201D;, &amp;#x201C;this is a test&amp;#x201D;\n
  8. \n
  9. true, false\n
  10. \n
  11. methods\n
  12. functions are variables also\n
  13. as you may have noticed on last weeks slides, associative arrays are now objects also\n
  14. Arrays are now objects also, such as associative arrays\n
  15. Document Object Model (HTML etc etc)\n
  16. \n
  17. \n
  18. JavaScript is event driven...\n
  19. When the light goes green...\nDrive the car\n
  20. THIS DOES NOT WORK IN &lt; IE 9\nJust like in actionscript\n
  21. This works in all browsers, however it replaces the function each time..\n
  22. Different browsers have different capabilities, so we often have to implement &amp;#x2018;fixes&amp;#x2019; to get it to do something. Such as events\n
  23. This works cross browser\n
  24. Different browsers have different capabilities, so we often have to have to check which way to do something. Such as events\n
  25. This works cross browser\n
  26. Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
  27. This works cross browser\n
  28. How did you do?\n
  29. \n