Lesson 3: The Difference Between Internal, External, and Inline Scripting
Posted by in jQueryIn the following tutorial, we’ll run through the different ways you can have your jQuery code.
Video highlights
[0:34] Similarities with CSS
[1:03] Internal scripting (often better for development)
[2:10] External scripting (best for production)
[4:23] Inline scripting (don’t do this!)
[7:49] The ideal setup
[8:51] Recommended site for learning CSS: w3schools.com
Source code
Here’s the internal example from the tutorial. Note that all our own jQuery code is in the <head> of the HTML document (lines 11-19).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Test</title>
<script type="text/javascript" src="javascripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("I'm working!");
});
</script>
</head>
<body>
<p>Look at me. I'm learning jQuery.</p>
</body>
</html>
Now here’s the external example from the tutorial. First we have index.html, which calls both the jQuery core file (line 9), and our newly-created custom.js file (line 10) from the <head>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>jQuery Test</title> <script type="text/javascript" src="javascripts/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="javascripts/custom.js"></script> </head> <body> <p>Look at me. I'm learning jQuery.</p> </body> </html>
And here’s the code we have housed in the custom.js file:
$(document).ready(function(){
alert("I'm working!");
});
As for the inline example, I’m not even going to provide the code here since it has no practical use 
Any questions? Let me know in the comments.
