JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong...
Transcript of JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong...
![Page 1: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/1.jpg)
JavaScript IntroductionTopics discussed
• Scripts• Chrome Developer Tools• Firefox Developer Tools
1/17
![Page 2: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/4.jpg)
Chrome Dev ToolsWeb authoring & debugging tools
4/17
![Page 5: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/5.jpg)
Chrome Dev ToolsWeb authoring & debugging tools
5/17
![Page 6: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/6.jpg)
Chrome Dev ToolsWeb authoring & debugging tools
6/17
![Page 7: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/7.jpg)
Chrome Dev ToolsWeb authoring & debugging tools
7/17
![Page 8: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/8.jpg)
Chrome Dev ToolsWeb authoring & debugging tools
8/17
![Page 9: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/9.jpg)
ExampleButton press causes invocation JavaScript function
9/17
![Page 10: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/10.jpg)
ExampleJavaScript functions
10/17
![Page 11: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/11.jpg)
Static v DynamicJavaScript enabled page
11/17
![Page 12: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/12.jpg)
Firefox Dev ToolsWeb authoring & debugging tools
12/17
![Page 13: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/13.jpg)
Firefox Dev ToolsWeb authoring & debugging tools
13/17
![Page 14: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/14.jpg)
Firefox Dev ToolsWeb authoring & debugging tools
14/17
![Page 15: JavaScript IntroductionSummary • Scripts • How to load - in html or external files • Strong recommendation to use external files only • Number scripts • Minification - use](https://reader030.fdocuments.us/reader030/viewer/2022041021/5ed07fad3bf672044829d2a8/html5/thumbnails/15.jpg)
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