Monday, 18 April 2016

P3 (5/6) : Describe the purpose and function of JavaScript and jQuery

P3: Describe the purpose and function of JavaScript and jQuery

Introduction

JavaScript is a scripting language that is normally used in the development of HTML and CSS websites. JavaScript contains many features of a programming languages but it is not a programming language because it doesn’t possess key attributes that most programming language possess. JavaScript is a client side and not server side. For this reason, this document is going to be set within the parameters of describing the purpose of JavaScript and its key features that makes it similar to programming language and exploring features that also makes it dissimilar to a programming language. The functions of JavaScript and JQuery as a development tool is also going to be explored in this document.

JavaScript

JavaScript can be described as a scripting language that is used for the sole purpose of making web pages interactive. JavaScript is an interpreted language for this reason, it runs on the client computer and you do not need an extended program in order to run it on your computer. (Tech, 2015) JavaScript is executed by web browsers and it is mainly used for interactivity and validation. JavaScript can change HTML content in the development of a site and one of the methods that it uses is through ‘getElementById()’. As well as changing HTML it can also change CSS styles. It is one of the primary ways that web developers use to validate data on webpages. For example, JavaScript is very likely to have been RUN when you don’t fill out mandatory text fields on an online form and an error message pops up. JavaScript is normally used by developers on occasion where they need the code to run after the page has loaded as JavaScript is a language that is supported by all browsers used by clients. Most interactive features of webpages such as slideshows are normally done by website developers using JavaScript. The reason why JavaScript is very popular is because of its functions that allows it to fit with the dynamic web era that we are currently in. This means that JavaScript is suitable for most sites nowadays that changes and adaption is a key aspect of the functionality of the site. For example, JavaScript is used to recognise if clients are visting the site on their phone or on a computer and then decides whether or not to change the way that the content renders to either a mobile platform version or computer version. (Wilde, 2013)

JavaScript features similar and dissimilar to programming language

Features of JavaScript that makes it similar and dissimilar to a programming language is going to be explained in the table below:
JavaScript features similar to programming language
JavaScript features dissimilar to programming language
Features such as the use of variables, conditional statement and event handlers is attributes that are normally affiliated with programming languages. This is a feature of JavaScript that makes it similar to programming languages such as Perl or C. Variables are containers for values which are norm in programming languages also conditional statements which allow different codes to run at the same time. Conditional statement is what allowed me to create validation if text boxes are not completed on a form before submission. (Wilde, 2013)
Features that make JavaScript dissimilar to programming languages is the fact that the variables that is declared with JavaScript are always made public, its features does not allow it to privatise variables as you can do with most programming languages. (Johann, 2014)
Another feature that JavaScript has in common with programming language is that it has datatype (arrays).
Another major reason why JavaScript is dissimilar to programming languages is because features that are non-existent such as algebraic data types and pattern matching that are also available with other standard programming language. (Johann, 2014)
Another reason why JavaScript is similar to a functional programing language is because functions are first class objects, there are closures and higher order of functions.

JQuery

On the other hand, JQuery is simply a library where pre-coded JavaScript are stored as open-source for developers that want to use them. JQuery is a library of JavaScript that is very popular due to the fact that it is easy to use and powerful. The main purpose of JQuery is so web developers can easily apply common JavaScripts to their websites during implementation without consuming time. JQuery functions are important as a development tool for website developers because it allows to apply JavaScript to their work without having to deal with debugging common errors. Also with JavaScript code in JQuery they are normally effective and short which helps with the implementation process of the JavaScript. (Wilde, 2013) Overall, JQuery is a development tool that most advanced website developers use due to the fewer lines code. For example, the following evidences using JQuery or JavaScript to change the background colour of a body tag: - As you can see it will be quicker to use JQuery rather than JavaScript.
jQuery
$ (‘body’) .css (‘background’, ‘#ccc’);
JavaScript
Function changeBachground(color) {
        Document.body.style.background = color;
}
Onload=”changeBackground (‘red’);”



Bibliography


Johann, 2014. stack. [Online]
Available at:
http://stackoverflow.com/questions/3962604/is-JavaScript-a-functional-programming-language
[Accessed 18 04 2016].
Tech, 2015. abouttech. [Online]
Available at:
http://JavaScript.about.com/od/reference/p/JavaScript.htm
[Accessed 18 04 2016].
Wilde, B., 2013. Udemy. [Online]
Available at:
https://blog.udemy.com/jquery-vs-JavaScript/
[Accessed 18 04 2016].





M2 (4/6) Produce a blog entry that describes the main design tools that you have used


M2: Describe the main design tools that you have used in the creation of website

Introduction


In the creation of my website I used a wide range of tools and every tool that I used was very important in order successfully create my website. For this reason, this document is going to be set within the parameters of going through the tools that I used and describing the purpose of them and how and where it was useful in the development of the website. The tools that are going to be explained include: QSEE Superlite, Colour Pallete, Fonts, Wireframe and the graphic programme Adobe Illustrator.

QSEE Superlite


QSEE superlite can defined as a software application that is packaged with sub-tools that help with the design and analysis of computer type systems that are being developed or enhanced. It includes range of ‘defacto’ standard models that are used in many different industries as tools essential in the creation of systems. The support techniques provided in QSEE Superlite includes entity-relationship diagram, decision tree and flow charts. The support technique that I used from QSEE Superlite was a decision tree. The purpose of the decision tree was to help with the creation of a site map. This site map is what allowed me to know the navigation within my webpage was going to be. The site map was very important to the success of the website because it is what allowed me to know the type of content that was going to in each webpage, the amount of webpages and the links between the webpages. (Stafford 2015)    

Colour Pallete


The colour pallete tool that was used in the creation of the website was Adobe Kuler. The purpose of Adobe Kuler is to help you find the perfect combination of colours. It allows you to try and create and save colour schemes that has been created within the colour scheme. (Wikipedia 2015) The purpose of using Adobe Kuler as a tool in the creation of my website is to find out the colour scheme that I was going to use throughout my whole site. Also using Adobe Kuler as a tool helped me with defining colours when I was developing the CSS for each webpage as the software application gives you the CSS reference for each colour. A major advantage that Adobe Kuler brought to me is that it allowed to experiment with colour themes that I was a bit sceptic with. I decided to change my colour scheme because when I created it in Adobe Kuler I saw that contrast was low between the original colour scheme that I wanted to use. For this reason, I decided to use highly contrasting colour that was evident in Adobe Kuler which was red, black and white throughout the website.

Fonts


The tool that I used to pick the font that I wanted to use in my website was Google Web Fonts. Google Web Fonts are fonts that are released uder open source licences thus, why they are allowed to be used for non-commercial and commercial assignments. The reason why I used Google Web Fonts is because it gave me access to a wide range of fonts and at the same time preview the fonts in different sizes and font-weight. The major advantage that I gained from using the font developer is that it offered the CSS coding for each font which was needed for the text content on website. Also Google fonts makes it easy to integrate fonts with Javascript and CSS as the scripting for the font is available for copying and pasting directly into the HTML source code for the site or the style sheet.

Cacoo Wireframe


Wireframe in terms of website creating is setting out the layout of context and the structure of the site that is to be created. Cacoo is a tool that can be used to make diagram, wireframes and network charts. The advantage that Cacoo brought to me in the design stage of my website was that it had standard website layout templates and this made it easy for me develop my designs as I knew the standard webpage structure that my site had to follow.

Graphic Programme


The graphic programme that was used as a tool in the creation of my website was Adobe Illustrator. This tool is a vector based graphic software application. The purpose of this software tool is to create vector based graphics that are normally used as logo or printed as hardcopy on materials. I used Adobe Illustrator to create the logo that is present on every page on the site. The reason why Adobe Illustrator is important as a tool used for reating the logo is becuause it is vector based which means that scaling the logo wouldn’t affect the quality of the image as it would be rasterized images. This is essential as on webpages users might decided to zoom in and if the logo starts to pixelate as the client users zoom into the webpage it will have a detrimental effect on the professionalism of the overall website.