INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
Code Placement
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
Where To Place the Code
• Now that you are going to start to write
your own functions, it is easier to separate
code from content
• JavaScript code can be placed in the
body, head, or in an external file
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
In the head
• When JavaScript functions are declared
in the head section they are separated
from the content
• Use the script tag
• Have access to all of the document
information (ids, classes, etc.)
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
Code can be placed in the <head>
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
In an External File
• When JavaScript functions are in a
separate file it is possible to reuse the
code in multiple files
• Don’t use the script tag
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
In an External File
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
Debugging Your Code
• As your code becomes more complex,
make sure that you are using your
debugger
• The console is your friend!!
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
CodePen
• If you work on your code on an online
editor (e.g. CodePen) the software lets
you separate HTML, CSS, and JavaScript
without any links
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
Review
• JavaScript can appear in the head or
body of your code
• Code can also be placed in an external js
file
• Personally, development done in head
and moved to external after testing
INTERACTIVITY
02.02 Code Placement WITH JAVASCRIPT
Acknowledgements/Contributions
These slides are Copyright 2015- Colleen van Lent as part of
http://www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the attribution
requirements of the license. If you make a change, feel free to add
your name and organization to the list of contributors on this page as
you republish the materials.
Initial Development: Colleen van Lent , University of Michigan School of
Information