1 of 15

CodeFez presents

1.3.4 HTML, CSS and JavaScript

Lesson 2: JavaScript

2 of 15

Objectives

Understand the role of Javascript on the WWW
Be familiar with Javascript scripting and its similarity to other programming/scripting languages
edit a basic javascript script to achieve a task.

3 of 15

JavaScript (not Java)

Javascript is a scripting language that uses all of the same programming constructs that we are familiar with in other programming languages.

It is a simple language that can be used to add programming functions to a web page. This is especially useful with interactive elements on a page.

4 of 15

Add JS to HTML in 2 ways

inline

This is possible but it will confuse you more right now!

Body

Script is added in the body with <script> tags

External file Link

A JS file is linked to the HTML file in the header

Methods

5 of 15

JS Script in the Body

�</head>�<body>� <script language =”JavaScript”>

// code can go here

</script>

</body>�</html>

6 of 15

JS linked externally

<html>�<head>�

</body>�</html>

7 of 15

Use of IDs in tags

In HTML tags we can assign IDs so that JS can refer to specific

parts of a webpage. �Look at the example here of how IDs are used for input and output to the page.

8 of 15

Example JavaScript Validation of Input

See on W3Schools

9 of 15

Example fairground height calc

This code states whether a person is too short to ride on a fairground rollercoaster if their height is below 5 feet.

It must convert the person’s height from centimetres first.

10 of 15

Task 1

Take a look at the previous slide again and see if you can edit this to work out a person’s BMI based on appropriate inputs.

The app should output the BMI and the correct output. Eg.

A BMI of 25.0 or more is overweight, while the healthy range is 18.5 to 24.9. A BMI of lower than 18.5 is considered underweight.

EXT�How can you use CSS to style the app?

11 of 15

Task 2

In this task, I am giving you tasks that would be similar to the kind of task you may be expected to know in a exam situation. I have put together a template for you to work with. you will work on a page for a petshop. That asks for a pet's birth year. and returns how old the pet is based on the current year.

This JavaScript snippet of code gets current year:

var currentYear = new Date().getFullYear(); //gets the year value

template and instructions here: Pet Shop Task | AppFlowy