Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript More advanced JavaScript Combining HTML, CSS and JavaScript to make a portfolio site
Web Design Competition There will be a competition for the best designed website!! Theme is: "Scientific Exploration, the new pioneers into the unknown lands of scientific discovery and innovation. Engineering that will excite and enhance our lives." To enter: Simply upload your website into a folder named competition on your Public_html
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
CSS Reminder 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
What is JavaScript JavaScript allows us to make our webpage dynamic i.e the user can interact with our webpage JavaScript is a scripting language We can use the DOM model to change classes, structure, style, content, and even create games etc. Data Types Variables Functions Variable Scope DOM Model If - else conditionals
JavaScript Arrays
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
Array value types You can have arrays of any data type var mynumarray = [1, 2, 3.2, 6.5, 9]; var mystrarray = [ HTML, CSS, JavaScript ];
Making variables for each student name vs making an array to hold all student names
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]);
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
Array Methods JavaScript has lots of built in functions/methods that we can use on our Arrays Examples include: myarray.pop(); //removes the last item from the array myarray.length; //returns the length of the array myarray.push( newvalue ); //pushes a new value to the end of an array myarray.sort(); //sorts the array alphabetically or numerically There are loads more methods we can use! These are some of the most common
JavaScript for/while loops
If I wanted to alert every name in my array, I would have to write 31 lines of repetitive code Perhaps there is a way of achieving the same result in less code
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
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
Reduced 31 lines of code down to 3! For loop break down: Statement 1: first we make a variable called i which will be used to iterate or repeat our code. Statement 2: Is our condition which we check to see if it is true or false. If it is true we run the block of code. If it is false, we ignore the block of code. Statement 3: is how we increase our variable i value so that we can repeat the code the correct amount of times. If we did not increase value, we would have an infinite loop To note: calling the variable i is common convention it stands for index or iterations
To Note: look how we can use the variable i to get the correct index from our array For loop logic: The first time the for loop is called we create a variable called i that = 0 Then we check if i is less than mptstudents.length or is 0 less than 31 This condition is true, so we increase the variable i by one and we alert the text. Note how we can now use the variable i to get the correct index from our array Once we have finished the block of code, we check if i is less than mptstudents.length or is 1 < 31 It is true again! So we increase the value of i by 1 and repeat the block of code Now we check if 2 < 31... and we repeat these steps until this is false i.e 31 < 31
Important Links JavaScript Array: https://www.w3schools.com/js/js_arrays.asp JavaScript for loops: https://www.w3schools.com/js/js_loop_for.asp