While using jQuery on jsFiddle is as easy as selecting its name using the dropdown menu, implementing the same library in the traditional website development process involves slightly more work. In short, the following processes must take place:
Just as one can link a CSS file using the <link> tag placed in the <head> section, JavaScript files can be connected to the HTML file using the <script> tag.
...
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript">
</script>
</head>
...Note that the jQuery official website provides a remotely-hosted version of the jQuery library. A separate file designed to house one's own JavaScript code must be created and linked as well.
While jsFiddle, as a sandbox code editor, launches all JavaScript code immediately upon clicking on "Run." When using jQuery in the traditional workflow, however, the programmer must manually set the JavaScript code to launch when the browser has finished loading.
$(document).ready(function(){
alert("Page finished loading!");
$("h1").slideDown("fast");
});Note that the JavaScript code is "wrapped" by an event handler that targets the HTML document itself. As the name suggests, the above snippet simply waits until the browser has finished loading, and launches the rest of the code.
With JavaScript, programmers found a way to develop more dynamic website experiences. Whether it be an infinite scrolling feature on Pinterest or Twitter's auto-refresh timeline, the feature where websites can load additional content without reloading the browser is called AJAX: Asynchrnous JavaScript and XML (XML is a technology closely related to HTML, designed for exchanging structured data). As a popular JavaScript technique, AJAX allows the browser to exchange data with the server without the user's explicit consent, and inject loaded data into select parts of the layout.
As AJAX allows the programmer to load data without the user's consent, a number of security features have been created in order to protect users. Dubbed "Same Origin Policy," this implementation forces the browsers to only load pages that exist on the same domain (ex. example.com), port, and protocol (ex. https). This policy, however, can be (and has been) relaxed once there is an explicit consent established between the user, the website code, and the data provider.
When using only HTML and CSS to build a multipage website, one faces a problem of redundancy: a specific code snippet may be repeated in multiple pages, and this can cause the website to be rather difficult to organize. In addition, the programmer may find oneself repeating a mistake or an error throughout the website as well.
As AJAX allows the browser to communicate with the server directly and inject content into the layout, the technique allows for modularization. Using AJAX, the programmer can identify common, shared elements in the website code and save them as separate modules that are loaded and injected as necessary using JavaScript. In addition to minimizing redundancy, this approach also allows the resultant website code to be much more readable and organized, especially if the website happens to be complex in structure.