BTEC Assignment Brief

Qualification

BTEC National Level 3 Extended Diploma

Unit number and title

Learning aim(s)

Unit 20 Client-side Scripting

(For NQF

only)

Assignment title
Assessor

Website production - Assignment 1

Lila White
Wee Beginning 12 September 2016

Issue date

7 October 2016 TurnitIn Submission - Please produce

one document in Word which includes all of your work for
this assignment.
Hand in deadline

PLEASE DO NOT EMBED WORD DOCUMENTS INTO

THIS SHEET.

You are web developer for a medium sized business and

your company has an apprenticeship scheme for junior
web developers.
Vocational Scenario or
Context

Your manager has asked you to prepare some training

materials for the next apprentices starting fairly shortly.
You are going to deliver some training to on the
fundamentals of Cascading Style Sheets and Scripting
Languages.
CSS and the box model How does it all work?

Task 1

Checklist of evidence
required

Your first training session will include an information

leaflet that will demonstrate the fundamentals of
cascading style sheets. In this information leaflet you will
need to consider how CSS code can be linked to an
HTML file and how the box model works with CSS and
the related selectors and how they are used.
Hand in:
An information leaflet/flyer (You may produce two leaflets
if necessary)

Criteria covered by this task:

Unit/Criteria

To achieve the criteria you must show that you are able to:

reference
Unit 20: P1
Unit 20: P2

Explain how HTML files access CSS

Explain the features of the box model for CSS
CSS and the box model How does it all work?
Your report will inform your trainee about the
fundamentals of a scripting language.
Describe how you can implement a contact form or
catalogue into a website. Discuss the main features of the
particular scripting language that you use in web
development (JavaScript) and provide screen shots of
some of the code and the actual web page in your report.
In your report provide a section that Assesses Different
Implementation styles for CSS, this should be detailed so
that the trainee can use this as a guide. Use illustrations
and diagrams to support your guide.

Task 2

In your report add another section which addresses how

script languages improve the functionality of web pages.
Here you should focus on how scripting works in a frontend context, how it is commonly used on the web;
analytics, client-side calculation, etc.
Finally finish your report by adding a section which
explores, in depth, how web pages that use scripts are
implemented in different browsers. Here you should
include specific examples to help with your detailed
explanation.
Report

Checklist of evidence
required
Criteria covered by this task:
Unit/Criteri
To achieve the criteria you must show that you are able to:
a reference

P3
M1
M2
D1

Explain the fundamentals of a scripting language.

Assess different implementation styles of CSS.
Discuss how a scripting language can improve functionality.
Explore how web pages using scripts are implemented in different
browsers.

Sources of information
to support you with
this Assignment

Harvard Referencing In-text citation and full bibliography.

Other assessment
materials attached to
this Assignment Brief

N/A

FOR NQF LEVEL 2 ONLY: If you have not achieved the Level 2 criteria, your work
will be assessed to determine if the following Level 1 criteria have been met.
Criterion
To achieve the criteria you must show that you are able to:
Unit
reference

HTML & CSS

ofStyle
JavaScript
CSS The
stands basics
for Cascading
Sheets. CSS is used to define styles for your
web pages, including the design, layout and variations in display for different
devices
screen
The
basicand
things
that sizes.
you must have knowledge on are: the syntax, variables,
CSS is properties,
linked to html
in threemethods,
different ways,
the main
being creating a link to
objects,
functions,
constants
and events.
an external style sheet within the html known as external CSS. Both the link
to the style sheet and the syntax that you need to use within the style sheet are
Syntax
shown below.
Case sensitivity
It is important to make sure that you have the correct capitalisation when coding
in JavaScript as the language is case sensitive and having a line of code that
requires a capital letter or vice versa can cause the code to not work properly or
at all.
CSS can also be used within the html document in the form of inline meaning
Comments
that it is all on one line within the style tag. As shown below:
Comments in can be used in two ways, a one-line comment which is declared by
using
two forward
(//)be
as implemented
shown below.into html is in the form of
The third
way thatslashes
CSS can
internal, using a similar format as is used in an external style sheet however
The
way
is a multi-line
which
declared
by beginning the
the other
CSS is
defined
by usingcomment
the style tag.
Asisshown
below:
comment with a forward slash along with an asterisk (/*) and ending the
comment with an asterisk followed by a forward clash (*/) as shown below.

Variables
There are two ways to declare variables in JavaScript; the correct syntax for the
first method is to declare the variable using the var keyword
by the
The followed
Box Model
name of the variable and ending the line
a semicolon
thenison
a lineto the left of
Anwith
image
of the boxand
model
shown
below assigning the values by stating the
followed
bybox
an equals
thisvariable
text. In name
the center
of the
you have the
sign and then the value which can be either
a
string,
numerical
value
or
boolean,
content which determines the height
and width
if the value is a string you enclose the string
either
single
quote
marks
or
double
that the image or text will be, outside of that you
quote marks and if the value is a number
or apadding,
booleanwhich
then you
dont
use quote
have
is the
spacing
between the
marks, the statement is then ended withcontent
a semicolon
as
shown
below.
and the next layer which is the border,
which can have a variety of different colours,
border widths and styles e.g. solid, dotted etc.
After the border you have the margin which
determines the position of the element on the
page. The different selectors that are used are:
width, height, padding, border and margin. You
would use the box model to style a section of text
to your liking.

The second method of declaring variables is to declare it all on one line,

beginning with the var keyword and then the name of the variable which is then
followed by an equals sign which then leads on to the value that is going to be
stored in the variable, which can be either a string, numerical value or boolean, if
the value is a string you enclose the string either single quote marks or double
quote marks and if the value is a number or a boolean then you dont use quote
marks, the statement is then ended with a semicolon as shown below.

Objects & Properties

There are two ways to declare objects, these being to declare the object all on
one line or have it separated onto multiple lines so that it is easier to read,
similarly to variables you begin with the var keyword and then the name of the
object, followed by an equals sign which then leads on to an opening brace ({)
which is where you then state the properties of that object, by naming each
property and then setting the value of each property with a colon followed by the
value, then separating each property with a comma and closing the object with a
closing brace (}) and ending the statement with a
semicolon as shown below.

Functions
There are two ways to declare functions, these being to declare the function all
on one line or have it separated onto multiple lines so that it is easier to read. You
begin with the function keyword then provide a name and then an opening
bracket to define the parameters that the function will accepted that are
separated using a comma and then close the parameter section with a closing

bracket and open the code that is to be ran when the function has been called
with an opening brace ({) and then close off that section of code with a closing
brace (}) followed by a semi colon. In the example below when the function is
called and has the correct parameters entered it will execute the code shown
below where it can then be printed for the user to see.

Methods
There
are
two ways to declare methods, these being to declare the method all on one line
or have it separated onto multiple lines so that it is easier to read. You begin with
the name of the of the property, followed by a colon and then the function
keyword and an opening and closing bracket and then an opening brace ({) to
begin the code that will be run when the method is called and end that section of
code with a closing brace (}). In the example below when the FullName property
of the object Matthew is called then the function is executed where it can then be
printed for the user to see.

Constants
There is only one way to declare a constant, that is to use the const keyword
followed by the name of the constant and then an equal sign after which you
assign the value of that constant and end the statement with a semicolon as
shown below.

Events
There is only one way to declare an event, that is to use a built-in html event
followed by an equals sign and then quotation marks which contain the code for
what you want to happen when that event is triggered. In the example below,
when the cursor has gone over the title element the content within the note
element is changed to the output of the test function.

Variables
A variable is a value that is stored with a name associated with it, unlike a
constant the value that is assigned to a variable can be changed, hence the
name variable.

Objects
An object in JavaScript is any value that is not a string, number or boolean.

Properties
Properties in JavaScript are different characteristics of objects that have values
assigned to them.

Functions
Functions in JavaScript allow sections of code to be predefined elsewhere in the
above code so that the function can be used multiple times later in the code
whenever it is called.

Methods
Methods in JavaScript are functions that are defined as properties of objects,
when you call a method you are accessing the object and requesting the function
under one of the properties to be performed.

Constants
Constants in JavaScript are like variables as you can assign any one of the
following value types: string, number or boolean. However, constants are not
able to be modified later in the code whereas variable can be modified.

Events
Events are triggered when the user or the browser makes a change to the page
that has an event relating to it, when these events are triggered, JavaScript code
can be executed, an example of which would be modifying an element when it is
clicked on.

JavaScript Contact Form

Below you can see a simple JavaScript contact form. This form allows you to
enter the title of multiple CDs and give them a rating from bad to excellent as well
as add a short review. It does this by having a template of the form for the
JavaScript to refer to and manipulate. The JavaScript clones the initial template
when the button to add more fields is clicked. The submit button will use the post
method to email the form via a PhP, or Perl script.
The HTML for the form is:
The

JavaScript for the form is:

The
browser
output for
this form is:

Different CSS Implementations

Width
The width CSS property allows you to specify the width of a html element. An
example of the width property along with the in-browser output is shown below.
The width property is usually set using a value in pixels (px) or as a percentage

(%), when the percentage value is used then the element will be whatever the
percentage value of the container element that it is set to.

Height
The height CSS property allows you to specify the height of a html element. An
example of the height property along with the in-browser output is shown below.
The height property is usually set using a value in pixels (px) or as a percentage
(%), when the percentage value is used then the element will be whatever the
percentage value of the container element that it is set to.

Background Color
The background-color CSS property allows you to specify the background color
of a html element. An example of the background color property along with the inbrowser output is shown below. The background color can be any color as it
supports predefined colors such as: blue, black, white, red etc. as well as the
hexadecimal color selection, rgb color selection and hsl color selection.

Color
The color CSS property allows you to specify the color of the text in a html
element. An example of the color property along with the in-browser output is
shown below. The color can be any color as it supports predefined colors such
as: blue, black, white, red etc. as well as the hexadecimal color selection, rgb
color selection and hsl color selection.

Font
Family
The font-family CSS property allows you to specify the font of the text in a html
element. An example of the font-family property along with the in-browser output
is shown below. The font-family can be any of the predefined web safe fonts or
custom fonts that are linked as a stylesheet.

Border
The border CSS property allows
you to specify the border of a html element. An example of the border property
along with the in-browser output is shown below. The border can be any color as
it supports predefined colors such as: blue, black, white, red etc. as well as the
hexadecimal color selection, rgb color selection and hsl color selection. A few of
the different border styles are: solid, dotted, dashed, double, inset and outset.

Padding
The padding CSS property allows you to specify the amount of space that there
is between the contents of a html element and the border of the element. An
example of the padding property along with the in-browser output is shown
below.

Margins
The margin CSS property allows you to specify the amount of space that there is
between html elements. An example of the margin property along with the inbrowser output is shown below.

Opacity
The opacity CSS property allows you to specify the transparency of html
elements. An example of the opacity property along with the in-browser output is
shown below. There are two ways of adjusting the opacity of a html element,
using either the opacity property or the by using the rgba property when setting
the color or background color of an element. You would use the rgba property
instead of the opacity property when you dont want the child elements to be
affected.

Outline
The outline CSS property allows you to specify add an outline to html elements.
An example of the outline property along with the in-browser output is shown
below. The outline property supports the same styles as the border property,
those being: solid, dotted, dashed, double, inset and outset.

How scripting languages can be used to

improve the functionality of websites

Scripting languages can be used to improve the functionality of websites

drastically. Examples of different things that you can create with scripting
languages to improve functionality are: alerts, page redirects, cookies, data
validation and form handling.

Alerts
Alerts are a popup than notify a user of anything that the web developer wants
then to know, examples of this are: if a user filled in a contact form and pressed
the submit button then an alert notifying them that the message was sent or
failed to send may pop-up, another example could be if a user had entered the
wrong details when attempting to login to an account on that website then an
alert may pop-up to notify that they entered the wrong details. Alerts are useful
and improve functionality by giving a web developer the ability to tell a user
something in relation to their site when the alert is triggered.

Page redirects
Page redirects allow web developers to redirect the users of their website to a
different page, or the same page once the redirect is triggered. Examples of
when page redirects can be used are: when clicking a social media link, when
completing a form and upon submission you may be redirected to a confirmation
of submission page as well as when logging into an account on a website you
would be redirected from the login page to either a home page or your user page.

Cookies
Cookies are text files that contain small bits of information relating to your
browsing session, preferences, etc. They are stored on your computer and allow
web developers to tailor their website to their users. Examples of how cookies
can be used are: storing your name so that when you return to the site you may
have a pop-up that greets you with your name, storing user preferences such as
having certain things enabled or disabled like notifications so that you do not
have to keep enabling or disabling them every time you visit that site and another
thing that cookies can be used for is tracking your search history on that site
which can allow companies that sell different products to suggest other products
that have a similar description to the products that you have searched for or
bought so that it is easier for you to find other things you may be interested in.

Data validation
Data validation is used by web developers to restrict what can be entered and
accepted by the server, examples of which are: making sure that certain fields in
a form contain the correct information i.e. that the email address that is entered

into an email address field contains an at symbol (@) or that the phone number
that is entered into a phone number field only contains numbers and has a
maximum and minimum number of digits, another example would be to tell a
user that one or more of the required fields have not been filled in. By adding
data validation, it allows web developers to cut down on spam or fake email
requests which ultimately results in a faster response to legitimate user
submissions as there will be less fake requests to process.

Form handling
Form handling is process of accessing the data that has been entered a form and
assessing it to determine if it matches the requirements of that form, if it does
then the form data may be sent via email or stored on the website server. Form
handling improves functionality as it allows the web developer to check the data
that has been entered into the form and use it to trigger certain things, i.e. email
the form.

How webpages that use scripts are implemented in

different browsers
Different webpages can use different scripts for different browsers by using
feature detection, the reason why web developers use feature detection is due to
different browsers displaying elements differently due to each browser having its

own rendering engine as well as having a few different tags as well as different
features, this can lead to certain things not displaying correctly or functioning
properly, if at all. Web developers can check the features of the browser that the
user is using and specify what code should be executed depending on the
browser that matches the feature that you choose to detect, an example of this is
shown below:

References
http://www.w3schools.com/
http://www.opentechguides.com/how-to/article/javascript/99/browser-detect.html
http://www.quirksmode.org/dom/domform.html