JavaScript Tools and Implementation

Charles Russell

Bennu Bird Media

What do to buy

● Good News! You need nothing that you don't already have. If own or have access to a computer.● Requirement 1 a text editor● Requirement 2 a browser

Text Editors For Windows

● NotePad● Comes with windows but has very severe limitations

● Notepad ++ is a much better option ● Crimson Editor● Komodo Edit● UltraEdit( Commercial )

Text Editors for Mac

● Textwrangler ● Sublime Text (commercial )● TextMate ( now open source)● Coda ( Commercial )● BBEdit (Commercial )

Text Editors for Linux

● Nano● Vi/Vim● Emacs● Gedit● Kate● Tea

Graphical Editors

● Dreamweaver● Bluefish● Kompozer● Coffecup

Integrated Development Environments

● NetBeans● Eclipse

● Aptana● Visual Studio● Komodo IDE

Devel Tools in your browser

● Microsoft F12 Developer Tools● Chrome Developer Tools● Firefox

● Web Console● Firebug (Add on)

● Opera Dragonfly

Cool But How Do I Get This On My Web Page?

● First our action hero the script tag <script>● Attributes

– src Tells us where to find files– type

● text/javascript or application/● application/javascript

Split Personality

● The Script tag is used in two ways● Load an External File (preferred)

– <script src=“js/my.js“ type=“text/javascript“ ></script>● Embedded Script (questionable)

– <script type=“text/javascript“>alert('Halo Welt');</script>

● May be place in either the head or body of your HTML Document● Commonly seen in the head but page load performance can

be improved by placement just before closing the body.

What not to do

● Inline script● <button onclick=“alert('I did a bad thing')>Please Don't

use me</button>● Think about using this through out your site, if you

decide to make a change you will have to find every instance on every page● Please be kind to the next guy and avoid this.

Next Variables