JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use

JavaScript IntroductionTopics discussed

• Scripts• Chrome Developer Tools• Firefox Developer Tools

1/17

Script TagsInserts program in html document

< script> < / script>

• Allows program in html• Bad idea to place JavaScript in html• Instead use source tags

<!DOCTYPE html><html>

<head></head><body>

...

...<script src="js/jquery−2.0.0.js"></script><script src="js/reportMap.js"></script>

</body>

2/17

Script TagsWhere to locate

<script></script>

• Script files may have big impact on page load• Place tags close as possible to bottom of body• Place css <link> high as possible in head• Reduce number of script files as much as possible• Minify script files in release versions

• Has big impact on load time

3/17

Chrome Dev ToolsWeb authoring & debugging tools

4/17


5/17


6/17


7/17


8/17

ExampleButton press causes invocation JavaScript function

9/17

ExampleJavaScript functions

10/17

Static v DynamicJavaScript enabled page

11/17

Firefox Dev ToolsWeb authoring & debugging tools

12/17


13/17


14/17

Summary

• Scripts• How to load - in html or external files• Strong recommendation to use external files only• Number scripts• Minification - use in production

• Developer tools• Chrome• Firefox• Regular use encouraged• May be somtimes advantageous to simultaneously use both

15/17

Documents

JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use