P3 - Javascript and jQuery Fundementals

P3 – JavaScript and jQuery Fundamentals

In this blog entry I will be describing the purpose and function of JavaScript and jQuery. JavaScript contains many features of a programming language but it is actually a scripting language. JavaScript is interpreted by the browser and not executed by the server, it also doesn't require any packages in order to execute, as the browser provides everything it needs in order to execute. JQuery however, is a library of JavaScript routines which make it much easier to use JavaScript on a website. it is generally used to improve the interactivity and user friendliness of a website.

JavaScript

What is Javascript?

Javascript is a scripting language which is used to make webpages interactive, it is generally used in forms such as payments and voting polls. Most web browsers support Javascript and by default have JavaScript enabled, so anything within the website that is written in Javascript will run.

What is Java?

Java is a programming language which is used to create applications that can run without requiring an internet connection, or can be distributed to a network, amongst servers and clients. Java requires a compatibility package to be installed in order for its applications to run.

How is Javascript similar to Java?

Both languages make use of conditional statements. these are essentially pieces of code that execute if a certain criteria is met. For example, validation within a form is created by using IF statements, these IF statements may declare criteria such as a minimum required age. If a number entered is smaller than the minimum required age then it may stop the user from continuing typing within the form through the use of an ELSE statement.

 

How is Javascript different to Java?

Java is an Object Oriented Programming language, whereas Javascript is an Object Oriented Scripting language. Javascript is a scripting language, not a programming language because it is directly interpreted by a browser as opposed to being compiled. A scripting language is one in which the program reading it interprets exactly what is written.

Java based programs generally require a plugin and execute as compiled programs. Also Java creates applications that run in a virtual machine or browser, whereas JavaScript code only runs on a browser. An example of this is the game Runescape which is created from Java code. It can run on web browsers and in a virtual machine dedicated to Runescape solely

Another difference between Java and Javascript is that Java is required to be installed in order for Java applications to run, whereas Javascript requires no installations as it is included within most modern browsers. 

A final difference is that Javascript was developed specifically to improve website capabilities, whereas Java is a programming language used for general purposes programming such as building applications. Javascript is purposely limited for security reasons, as it is possible for malicious attackers to manipulate Javascript code to perform tasks such as wiping hard drives through the use of scripts. One of its security vulnerabilities is Cross-Site Scripting, where it is vulnerable to malicious attacks such as manipulating scripts, to turn them malicious, which will then be delivered to site visitors.

Features of Javascript

I will be covering a few features of JavaScript, the first of which is browser support. JavaScript does not require any plugins in order to display content, unlike Flash content which requires a Flash plugin in order to be displayed. All browsers provide integrated support for JavaScript and accept it as a scripting language.

Javascript is used to create forms as it allows for validation to be implemented into the form, which functions in the sense that if a user enters an invalid email address or age, then an alert box will appear, prompting them to try again. It can also be used to implement features such as displaying the date and time and even interacting with the user, as it can write messages which will appear on screen.

Javascript allows for the implementation of validation within forms. Validation is designed to make sure no mistakes are made when writing in a form. The biggest example of validation is websites that require a valid email address in order to sign up for that website. If the email address isn't valid then a prompt will appear, usually in the form of a message box, informing the site visitor that their email was invalid.

 

Javascript also improves interactivity within websites as it can be used to interact with users in ways such as displaying the current date and time, or writing messages to the user. It is even possible to develop a website that can have a genuine conversation with a site visitor. An example of this is CleverBot. CleverBot interacts with a site visitor based on their responses. In Javascript it is possible to recreate this through the use of conditional statements. Validation prompts also improve interactivity, because the website informs the site visitor of their mistake, as opposed to allowing an invalid form to process.

JQuery

JQuery is a lightweight JavaScript library. Its purpose is to make it much easier for JavaScript to be used within websites. JQuery takes a lot of common tasks that usually require many lines of JavaScript to perform and wraps them into methods that can be called with a single line of code, making jQuery very efficient for time as programmers can spend a lot less time writing code. The jQuery library contains HTML/DOM manipulation, CSS manipulation, HTML event methods, Effects and animations, AJAX and Utilities. JQuery is used by many of the biggest companies on the web including Google and Microsoft.

JQuery is used to improve interactivity and user friendliness on a website, it allows for buttons to be animated with features such as a roll over effect in which the button will change colour when the mouse hovers over it. It can be used to animate any object within a website, with features such as hide and show effects, which can be implemented so when the user clicks on a box and it disappears, then clicks it again and it re-appears. There are many ways JQuery can be used to improve website interactivity.

 

Conclusion

In conclusion JavaScript provides browser support so it does not require plugins in order to display content, it can also be used on both the client and server side. Structures of webpages can be changed during runtime in terms of the client side. Whereas the server side uses JavaScript as an extension of the core language in order to perform tasks such as communicating with databases and file manipulations. JavaScript also provides support for objects and it contains a core set of language elements, making it versatile and popular amongst programmers. JQuery is a library of JavaScript routines which make it much easier to use JavaScript on a website. JQuery wraps common tasks into methods that can be called with a single line of code, making it very efficient for time. The JQuery library also contains many different features such as CSS manipulation and HTML event methods. Some of the biggest companies on the web use jQuery due to its functions and features as it provides a lot of efficiency

Sources:

https://www.techopedia.com/definition/3743/backdoor

https://www.webdesign.org/web-programming/javascript/4-powerful-features-of-javascript-programming-language.17008.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

http://www.w3schools.com/jquery/jquery_intro.asp

https://www.java.com/en/download/faq/java_javascript.xml

http://javascript.about.com/od/reference/p/javascript.htm

http://www.computerhope.com/issues/ch001591.htm

http://sislands.com/coin70/week1/javajs.htm

https://en.wikibooks.org/wiki/JavaScript/Control_structures

https://en.wikipedia.org/wiki/Scripting_language

https://www.cs.rit.edu/~afb/20012/cs1/slides/javacontrol-

http://www.veracode.com/security/javascript-security

http://searchsoa.techtarget.com/definition/Java

Assignment 3 - Design an E-Commerce Website

Assignment 3 - Designing an E-Commerce Website

Introduction

In this blog entry I will be describing the purpose of my website and its intended target audience. The name of my website is MondayNightWars. This website reflects back on wrestling in the 90s, when there were two huge promotions battling it out for ratings. Content within the website will include a list of the rosters at the time and will include information such as when they were inactive if they left a promotion, Bret Hart will appear in both rosters, as well as a few others as wrestlers at the time would jump between promotions. Statistics such as longest reigning champions will also be included as well as a reflection on the WWE's rise to power (WWF at the time) where a list of matches which shaped the era will be given so that fans can watch these matches. Each match will include a summary as to why it helped shape the era. A store page will also be included where fans of the era can purchase memorabilia such as old action figures and VCR tapes of famous payperviews and events during the Monday Night Wars. The target audience for my website is wrestling fanatics, as this website's purpose is to provide a background on the events that unfolded at the time. These wrestling fans can be of all ages, however most content will be more relevant towards adults who were either teens or young adults during the time of the Monday Night Wars.

Review of another website

The website I will be reviewing is a website called The People's Wrestling Website or TPWW for short. This website has a similar target demographic to mine in the sense that it is directed at adult fans of wrestling, this is evident as the website is full of text and not very many images. The website's core aim is to deliver news and results of wrestling matches within big promotions to its intended audience. Having read some of the content within the website, I feel that the website lacks user friendliness in the sense that the entire website is text based. The website attempts to interact with its audience with a 'Features' section that includes games such as 'Guess the Wrestler' and 'Guess the Themes', however these include no thumbnails and appear in a blog format once clicked on. I feel that the design is lazy and these features have been implemented simply to try to improve interactivity. The 'Wrestling Entrance Themes' page also suffers from a lazy design as it only includes ten or so classic themes and they don't even make much sense. Rob Van Dam's theme appears with the NWO and Balls Mahoney. None of these wrestlers even appeared in the same generation, so it makes absolutely no sense that these themes have been selected. There is no logical reason for these themes being selected, no specific time period that is focused on. It all seems really jumbled and the website as a whole is incredibly bland and basic. The website could improve by including images and having a home page where everything can be found and it looks more user friendly then what looks like a copy and pasted blog format. This website has a lot of potential but its design needs to improve, a lot of its content is fine but again it needs images to back it up.

 Website Link: http://www.tpww.net/

Site Map

This image represents my site map, there are a total of seven including the home page. Extra pages will appear under certain categories to fit more information on each page. For example the Rosters page will have multiple extra pages to fit all of the wrestlers plus basic stats such as height and hometown. The store page has two sub pages connected to it as this is the e-commerce section of the website. These extra pages are necesarry for carrying out transactions from the online store to the customers.

Cacoo Pages

The following images are my designs for each of my core webpages, they currently lack colour as I am still not sure of the official colour design, however the pages themselves are pretty much what I am aiming to create.

The image above shows the design for the Home page, it contains five buttons on the navigation bar and a further two buttons within the body of the page which takes user's to that organisations respective statistics pages. The footer contains hyperlinks to each page, both the header and footer will stay consistent throughout all the pages of the website.



The image above shows the design for the WCW statistics page. This page will contain images of each championship belt of which once clicked on a list will appear of all of the wrestlers who have won that championship, when they first won it and how many times they have won the championship.

The image above shows the design for the WCW statistics page. This page will contain images of each championship belt of which once clicked on a list will appear of all of the wrestlers who have won that championship, when they first won it and how many times they have won the championship. The King of the Ring will be included.

The image above shows the design for the Rise to Power page. This page will contain thumbails of important events of which once clipped will play video clips associated with these events. Each event will contain information providing a background on its significance in the history of the WWF's rise to power. The information will be in text based format and will appear next to its respective thumbnail.

The image above shows the design for the WWF statistics page. This page will contain images of each championship belt of which once clicked on a list will appear of all of the wrestlers who have won that championship, when they first won it and how many times they have won the championship. The King of the Ring will be included.

The image above shows the design for the Must See page. This page will contain thumbnails of matches of which once clicked will take the user to a link so they can watch these matches online. Each match will also contain a description as to why it is must see and a brief background on the story leading up to the match.

The image above shows the design for the Store page. This page will contain thumbnails of stock that is for sale on the website, as well as buttons underneath each image so each item will appear in a cart. The cart can be clicked on, where another window will open containing the list of items added to the cart by the user. A checkout button also appears on the page which will take the user to the cart page first to check over their order. The cart page will also contain a Checkout button, of which once clicked will prompt to the user to enter their billing information and address so that they can process their order and their items can be delivered to them.

Colour Palette

Colour 1 - 121/0/0

HEX - 850000

Colour 2 - 0/0/0

HEX - 000000

Colour 3 - 255/14/35
HEX - FF0E24


Colour 4 - 255/189/5
HEX - FF8D95


Colour 5 - 0/0/0
HEX - 000000

Google Fonts

<link href='https://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
font-family: 'Russo One', sans-serif;

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
font-family: 'Orbitron', sans-serif;

Logo

This is the logo for my website, it is made up of WCW and WWF's base colours and it contains ring ropes underneath the letters. The logo stands for MondayNightWars, I felt that the colours chosen were necesarry as both promotions used black and red in their respective logos. The orange has been used to make sure the WWF colour scheme does not dominate the website.

P2

HTML CODE

<!DOCTYPE html>

<html>

<head>
    <title>The Box Model</title>
    <!-- The title of the webpage -->
    <link rel="stylesheet" type-"text/css" href="Style.css">
    <!-- The reference to the style sheet --> 
   
</head>

<body>

<div id = "container"
<!-- Declaring the id of the container to be edited in style sheet -->
     <div id = "header"</div>
<!-- Declaring the id of the header to be edited in style sheet -->
        <div id ="header"<h1>The Box Model</h1></div>
        <div id ="box1">Box Within A box
<!-- Declaring the id of the box to be edited in style sheet -->
       
<!--Div tags declare objects displayed on the page, which can then be edited using the style sheet. -->
</body>
</html>

CSS CODE

body{

   
    background:black;
    /*The background of the page*/
}

 

#header{

   
    text-align: center;
    font-size: 50px;
}
    /*The Title above the box*/

#container{

   
    margin:auto;
    background:white;
    width:620px;
    height:600px;
   
}
    /*The outer box where the smaller box with content will be stored*/

#box1{

    float:left;
    width:300px;
    height:300px;
    background:red;
    padding:20px;
    margin:150px;
    border:dotted;

}

    /*The content of the page within the box, within the container/*

/*Padding is the gap within the box of content to keep the inner text from reaching the edges of the box*/

/*The margin is the gap between the boxes within the webpage*/