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
What is CSS? 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
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
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
Syntax Is the rules or structure to how we write our code or scripts Think back to our HTML and CSS examples, and the rules with how these are written Just like HTML and CSS, JavaScript has its own Syntax <tagname>some Content in here.</tagname> tagname {property: value;}
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
Data Types Numbers: can be whole numbers or real numbers Strings: Are anything contained within or Hello MPT 3 3.5 We are on Week 3 3 3.5 Be Careful! Strings are always contained in double quotes. A number in double quotes is considered a String
Variables 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
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 Note: we did not use the word var again. We only need to use var once when declaring a variable var x; x = 1; var a = 4 + 8.5; var b = a - x; Always finish every line with a ;
Operations We can perform an operation on these Data Types, just like in arithmetic Operator + - * / % ++ -- Description Addition Subtraction Multiplication Division Modulus Increment Decrement Remainder
Operations 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
Operations We can also use logical operators Operator && Description logical and logical or
Examples What is the datatype of z? What is the value of z?
Examples What is the datatype of newstring? What is the value of newstring? What is the datatype of repeatstring? What is the value of repeatstring?
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?
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
Calling a Function 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
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" on these events. Event onchange onclick onmouseover onmouseout onkeydown onload Description An HTML element has been changed The user clicks an HTML element The user moves the mouse over an HTML element The user moves the mouse away from an HTML element The user pushes a keyboard key The browser has finished loading the page
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 { }
Remember we have to call our function to trigger the block of code. We do this by writing the function name just like below: Pay careful attention to the argument name and the string Tamara, what do you think will happen?
JavaScript can change our webpage layout
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
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 ) Defines the type of element
JavaScript DOM 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 ;
Important Links Data types and operators: https://www.w3schools.com/js/js_operators.asp JavaScript DOM https://www.w3schools.com/js/js_htmldom.asp