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

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

Web Design Competition There will be a competition for the best designed website!! Theme: “Your Hero” To enter: Simply upload your website into a folder named competition on your Public_html Have your theme picked for next week - bring content with you!

<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

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

Programming Basics With JavaScript

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

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

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 = 4 + 8.5; var b = a - x;

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

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

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 { }

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”)

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”;

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 1 statement 2 statement 3 all separated by ; for (setup var; condition; increase var){ // block of code to repeat } Keyword for

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