1. Web Programming and Design
MPT Senior Cycle
Tutor: Tamara
Week 3

2. Plan for the next 4 weeks:
Introduction to HTML tags, creating our template file
Introduction to CSS and style
Introduction to JavaScript
More advanced JavaScript
Portfolio Site

3. Web Design Competition
There will be a competition for the best designed website!!
To enter: Simply upload your website into a folder named “competition” on your Public_html

4. <tagname>Some Content in here….</tagname>
HTML Reminder
HTML stands for Hyper Text Markup Language
HTML allows us to describe and define the structure of our website using markup
All the elements in a web page are represented in tags <tag>
Example of HTML elements include: headings, paragraphs, images, videos
Nearly all HTML tags come in pairs with an start and end tag <tag> </tag>
The Browser will not display these tags, instead it will use the tags to render the web page
<tagname>Some Content in here….</tagname>
Defines the type of element
The stuff that gets displayed
Close off the element

5. h1 {color: blue;} What is CSS? Selector (HTML tag) Property Value
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen
It allows us to change the style or appearance of our web page
CSS contains a selector and property, value pair
The selector is the HTML tag you would like to style
h1 {color: blue;}
In this example, all the h1 tags in the HTML document will be changed to blue
Selector (HTML tag)
Property
Value

6. Static vs Dynamic
So far we have made webpages using HTML and styled those pages using CSS
But these pages are static, as the user cannot interact with them
We want to make our websites more Dynamic, so that the user can interact with our webpage

7. Programming Basics With JavaScript

8. Where to write our JavaScript
Just like CSS, we can write our JavaScript code in more than one place.
We can write our JavaScript code in our HTML file, as long as it is contained within <script></script> tags
We can also write our code into a separate file with a .js file extension and link it to our HTML in the head

9. Strings: “Hello MPT Class”
Data Types
In all programming languages, knowing the data type is very important
If you know the data type, you will be able to perform the correct “Operation”
There are loads of data types!
The most common are numbers, strings, booleans, arrays, objects
The ones we will look at today are:
Numbers: 1, 2, 3, 4.5, 6.2, 9.3
Strings: “Hello MPT Class”
Booleans: True, False

10. var x = 1; Variables Always finish the line with a ;
We can assign a variable to hold a data type value
We must be careful with our variable names:
Use a meaningful name for your variable, and each variable should have a unique name
Never start your variable name with a capital letter, number, or symbol
Do not use keywords, or special reserved words for your variable name
JavaScript is case sensitive so pay special attention to capital letters and spellings
How we create a variable:
var x = 1;
Always finish the line with a ;
We use the keyword var to tell JavaScript we are making a variable
Next we make a name for our variable
Then we use = to assign a value
Then we give a value

11. var x; x = 1; var a = 4 + 8.5; var b = a - x; Variables
You can also declare your variable and assign a value to the variable later on in your code
Or your variable can be the value of an expression
var x;
x = 1;
Note: we did not use the word var again. We only need to use var once when declaring a variable
Always finish every line with a ;
var a = ;
var b = a - x;

12. Operations Operator Description + Addition - Subtraction *
We can perform an operation on these Data Types, just like in arithmetic
Operator + - * / % ++ --
Description
Addition
Subtraction
Multiplication
Division
Modulus
Increment
Decrement
Remainder

13. Operations Operator Description == equal to ===
We can also perform comparison operations
Operator ==
=== !=
!==
>
<
>=
<=
Description
equal to
equal value and equal type
not equal
not equal value or not equal type
greater than
less than
greater than or equal to
less than or equal to

14. Operations Operator Description && logical and || logical or
We can also use logical operators
Operator
&& ||
Description
logical and
logical or

15. Functions
In every programming language, there are predefined functions we can use, and we can write our own functions
A predefined function we will use is alert();
alert(); will create an alert box to the website and print a string.
But what if we only wanted this alert to happen when the user presses a button?

16. Functions A function is a block of code
This block of code is only triggered when we “Call” our function
Like Variables, we can give it a name that we have come up with
The function name must be meaningful
It should never start with a capital letter, number, or symbol
Function names should be unique
Be careful of spelling and capital letters

17. Calling a Function <button> is a new HTML tag
We can call a JavaScript Function :
When an event occurs (when a user clicks a button)
When it is called from JavaScript code
Automatically
To call a function we simply write the function name followed by ( )
This is an example of a button event calling a function:
<button> is a new HTML tag
Onclick is the event which happens when the user clicks the button
Call to function

18. JavaScript Events
HTML events are "things" that happen to HTML elements. Events can be caused by the user or by the browser. JavaScript can "react" to these events.
Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page

19. function myFunction(argument){ Code goes here…….. }
Function Syntax
function myFunction(argument){
Code goes here…….. }
We have to use the special keyword function
Using arguments is optional
All code needs to be contained in { }

20. What will we use JavaScript to do?
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page

21. document.getElementById(“idName”)
JavaScript DOM
To make these changes we use the Document Object Model
This allows us to select HTML tags by their id or class name
document.getElementById(“idName”)
document.getElementsByClassName(“className”)

22. JavaScript DOM document.getElementById("myH1").style.color = "red";
We can use the DOM model to change style and change the content within HTML tags
We can also add HTML to the inside of HTMl tags
document.getElementById("myH1").style.color = "red";
document.getElementById(“myH1”).innerHTML = “New Heading”;

23. JavaScript Scope
In JavaScript (and all programming languages) where we create or declare our variable determines its scope
Scope means how visible or accessible the variable is to other functions etc
There are two types of scope:
Global
Local

24. Local Variables
Variables declared within a JavaScript function, become LOCAL to the function
Local variables have local scope: They can only be accessed within the function
For Example:

25. Global Variables
A variable declared outside a function, becomes GLOBAL
A global variable has global scope: All scripts and functions on a web page can access it

26. JavaScript Conditional
Sometimes we want to do different actions for different decisions
We can use conditional statements in our code to make these decisions
In JavaScript we have the following conditional statements:
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false

28. var myArray = [item1, item2, item3, etc];
What is an Array?
Arrays are a way of grouping variables with the same data type together
It allows us to save multiple values under one variable name
Similar to a list
It saves us a lot of lines of code!
We separate each value using a comma ,
var myArray = [item1, item2, item3, etc];
We make an array just like how we make variables
We use the [ ] to tell javascript this is an array

29. var myStrArray = [“HTML”, “CSS”, “JavaScript”];
Array Indexing
Once you have created an array, how to access or use one of the values?
We do this by array indexing - by writing the variable name and then index number in [ ]
TO NOTE: Array indices always start at 0
For example
var myStrArray = [“HTML”, “CSS”, “JavaScript”];
alert(myStrArray[0]);
alert(myStrArray[1]);
alert(myStrArray[2]);

30. var myStrArray = [“HTML”, “CSS”, “JavaScript”];
Array Indexing
With array indexing we can:
Make a variable = the array index
And replace the value at a certain index
var myStrArray = [“HTML”, “CSS”, “JavaScript”];
var myStr = myStrArray[0];
alert(myStr);
myStrArray[1] = “StyleSheet”;
alert(myStrArray[1]);
Assigning new value
Replacing value

31. JavaScript loops
JavaScript loops are handy as they let us repeat the same block of code several times
Loops are used a lot with arrays
There are two types of loop
For loop
While loop
We will focus mainly on the for loop

32. JavaScript for loop syntax
To create a for loop we must use the keyword for
Then we setup three statements within ( ) before describing the block of code we want to repeat
Statement statement statement all separated by ;
for (setup var; condition; increase var){
// block of code to repeat }
Keyword for

33. Important Links https://www.w3schools.com/js/js_operators.asp
Data types and operators:
JavaScript DOM