JavaScript code that is embedded with an
HTML document is referred to as
inline JavaScript. On the other hand, the HTML document may refer to a separate file that contains the JavaScript program, in which case it is referred to as
external JavaScript.
Demonstration of inline and external JavaScript
Both, inline and external JavaScript resources require a
<script> element. The resource is found externally when the
<script> tag has a
src attribute.
The following (functional) HTML and JavaScript snippets try to demonstrate this.
Inline Javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Use inline javascript</title>
<script type="text/javascript">
function definedInline() {
alert('This function was defined inline');
}
</script>
</head>
<body onLoad='definedInline()'>
</body>
</html>
External Javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Use externally defined javascript</title>
<script type='text/javascript' src='external.js'></script>
</head>
<body onLoad='definedExternally()'>
</body>
</html>
Note: although the tag's content is empty, it cannot be closed with a »self closing script tag« (<script…/>).
The content of external.js might be:
function definedExternally() {
alert('This function was defined externally');
}