Web Programming A different world! Three main languages/tools No Java HTML HyperText Markup Language CSS Cascading Style Sheets JavaScript Is NOT Java!! (only looks similar)

Getting Started We won’t need Eclipse “Compilation” happens when we open an HTML file in a web browser HTML data/files are the basis of any webpage Can be used to import more code such as CSS, JavaScript, images HTML files end in “.html” CSS files end in “.css” JavaScript files end in “.js”

Getting Started To make a basic webpage, open a “.html” file (e.g. “HelloWorld.html”) in any text editor (e.g. Eclipse or Notepad++) Make some changes to the file, save it. Open the file with a web browser Right click -> “Open with” -> [Your web browser of choice] To see future changes, you need to ”refresh” the page

HTML Not a programing language, but is a “markup” language Think of it as an encoding of shapes, styles, formatting Used to format a document with complicated pieces, but using only text Most recognizable feature: the opening and closing “tags” <div> … </div> <p> … </p> <table> … </table> Many more

HTML Similar to blocks of code, HTML tags denote “blocks” of content Example: We can enter plain text into an HTML file and it will be displayed in the browser “Hello, World!” We can also enclose the text in meaningful tags Paragraph tags: <p> and </p> Div tags: <div> and </div> Bold font tags: <strong> and </strong> Italics tags: <i> and </i>

HTML Notice: the browser rarely complains about bad/wrong/invalid code If detected, it usually has some default behavior that is up to who ever wrote the browser E.g. try using the <strong> tag without closing it

HTML Layout Certain tags impose structure on the document by default Paragraph tags will be put on separate lines inside their container Strong tags will not be put on separate lines Forced line break: <br> Makes a single break between the elements on the page Does not need a closing tag Lists: <ul></ul> for unorderd (bullets) and <ol></ol> for ordered (numbers) For each item, nest it inside <li></li> tags (stands for list item) For the sake of discussion, we generally abbreviate the tag name as just “br”, “ul”, “li”, etc.

Tags with attributes Some tags need extra data to function properly E.g. adding a link to another web page: the “a” (anchor) tag <a href=“http://www.google.com”>CLICK HERE</a> The URL above will not be visible, but will be encoded into the link “under” the text Note the space after the tag name (“a”) and the attribute name (“href”) Note that the attribute is assigned (“=”) the value in quotes (“http://www.google.com”) (Any tag can have any attribute, but as we have seen, they’re not always needed)

Other Useful Tags Comments: <!-- … --> Head tag: head Only block-comments Head tag: head Used to import other needed files (CSS, JavaScript) Generally does not contain content Body tag: body Used to contain most of the page’s content Heading tags: h1, h2, h3, h4 Span tags: span Image tags: img Needs a “src” attribute to say where to find the image Table tags: table A bit more complex, but very useful Html tag: html Not usually needed, but is usually included by convention or standard practices

Complex Layout Recall, we can nest tags So you can set up much more interesting layouts than standard “top to bottom”

Style Tags Denoted by <style> … </style> Usually put in the header Uses “selectors” to style different elements https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors Can pull the style code into its own files and import the whole files <link rel=“stylesheet” href=“mystyles.css”>

More complex Element Attributes Id field id=“someIdName” Should be something unique To select by id, use “#someIdName” Class field class=“className” Primarily used to group conceptually similar elements for styling purposes To select by class, use “.className”

Examles .myClass #someID div.anotherClass Selects all elements with class=“myClass” #someID Selects the single element with id=“someID” div.anotherClass Selects all divs with class=“anotherClass”

Combinator Selectors Child selector A > B Selects all B elements which are directly contained in A elements div > p matches <div> <p> Text </p> </div> But not <span> </span>

Combinator Selectors Descendant selector: A B Matches any “B” tag any level descended from an “A” tag Matches both of the previous examples

Event Listeners Simple first example: “onclick” The value of the attribute needs to be Javascript But wtf is JavaScript  “Hello world” of event listeners: Add to an element: onclick=“alert(‘here’);” Try clicking the element

JavaScript What is it? How to use it in a webpage Mozilla overview A programming language Mainly used to run “on top of” a web page, or other interface How to use it in a webpage Write it in <script> tags, similar to syles Write in a .js file and import it Mozilla overview https://developer.mozilla.org/en- US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

JavaScript Main idea: all your JavaScript “runs” as soon as it is loaded into the page. To take advantage of this, you will commonly use that time to define functions and objects to use later, during the lifetime of the webpage Example tasks: Set up ”handler” functions to process data from a form Set up handler functions to change the style of some elements

JavaScript Similarities with Java Differences from Java Syntax Differences from Java No strong, static, types! Does not need “classes” Different modes of standard input/output First-class functions Much more of a “script” than a Java program “Quick and dirty” design

JavaSCript JavaScript has access to the current web page and all of its structure! We can use it to adjust the UI to be responsive! This is what distinguishes “static” web pages from “dynamic” ones Important HTML elements: <input> for text input <checkbox> for toggles <button> and <submit> for buttons