Introduction:
In this document I will be describing the language JavaScript, its purpose, how it functions, why it was created and its implementation with HTML and CSS. I will also describe the complementary library known as JQuery, which is one of the biggest and most used JavaScript libraries.
JavaScript:
JavaScript is a scripting language used for web development and web production, JavaScript was created in order to add interactivity to websites. An example of the interactivity it wanted to achieve are things like drop-down boxes, animated tabs, etc. Things commonly found in software applications like Microsoft Office and the web browser Google Chrome itself. Below is an image of a typical student-based website known as Moodle; which is used for our studies and includes a database of resources and course information. JavaScript allows that drop-down box seen in the image to work, since with CSS this would not be at all possible. JavaScript has now become so well known that almost all websites and browsers use JavaScript to run
Javascript is not a programming language and is not able to do complex algorithms and calculations and is mostly used for displaying interactive shapes and forms. JavaScript has been around for a long time and within that time there has been a lot of libraries created to make coding in JavaScript easier the most famous and most used of which is JQuery.
It is now the most accepted principle that websites should use JavaScript or they are not considered professional in any respect. If web developers want to get work, they will have to implement all three languages (HTML, CSS and JavaScript) in their websites. Javascript was created to standardize web development and to work with web developers to create a globalized standard of how web pages should look and how they should work. It was also advanced in 2005 with the community effort of Jesse James Garrett and others to make it so that data can be loaded in the background, which meant avoiding the need of fill page reloads.
JavaScript is now a global standard, mostly for the usefulness of its joint server-side and client-side possibilities, which can relieve stress off the server and run scripts on the client’s computer. Which intern makes webpages load faster, and webpages a lot more efficient.
JQuery
JQuery is a library of JavaScript code that is used to shorten the amount of time to code in JavaScript. It is literally just a text file filled to the brim with different JavaScript functions and code, instead of typing up the lengthy amount of code to open up a drop down box you can just call a function from JQuery. The reason this was created was to improve web-development times.
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
The code to create this function is worth a few pages and is a lot more difficult to write than to just call the function that is already in the JQuery library. As you can see from the source code below you can save a huge amount of space when using JQuery, and to make your own code a lot neater. It’s also a lot easier and saves a lot of time in development.
var accordion = $.widget( "ui.accordion", {
version: "1.11.4",
options: {
active: 0,
animate: {},
collapsible: false,
event: "click",
header: "> li > :first-child,> :not(li):even",
heightStyle: "auto",
icons: {
activeHeader: "ui-icon-triangle-1-s",
header: "ui-icon-triangle-1-e"
},
// callbacks
activate: null,
beforeActivate: null
},
hideProps: {
borderTopWidth: "hide",
borderBottomWidth: "hide",
paddingTop: "hide",
paddingBottom: "hide",
height: "hide"
},
showProps: {
borderTopWidth: "show",
borderBottomWidth: "show",
paddingTop: "show",
paddingBottom: "show",
height: "show"
},
_create: function() {
var options = this.options;
this.prevShow = this.prevHide = $();
this.element.addClass( "ui-accordion ui-widget ui-helper-reset" )
// ARIA
.attr( "role", "tablist" );
// don't allow collapsible: false and active: false / null
if ( !options.collapsible && (options.active === false || options.active == null) ) {
options.active = 0;
}
this._processPanels();
// handle negative values
if ( options.active < 0 ) {
options.active += this.headers.length;
}
this._refresh();
},
Sources:
https://jqueryui.com, 01/05/2015, used in page 2 for the source code.
https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript, 01/05/2015, used in page 1 for describing the reason JavaScript was created.
No comments:
Post a Comment