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
Chrome Dev ToolsWeb authoring & debugging tools
5/17
Chrome Dev ToolsWeb authoring & debugging tools
6/17
Chrome Dev ToolsWeb authoring & debugging tools
7/17
Chrome Dev ToolsWeb authoring & debugging tools
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
Firefox Dev ToolsWeb authoring & debugging tools
13/17
Firefox Dev ToolsWeb authoring & debugging tools
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