Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014

Project 1a Due now!

Project 2 TBA, will be posted this week. Uses CSS and Bootstrap Due by 10:30am, 9/23 (in two weeks)

Lab 3 goals Actually cover the languages! The relationships between HTML, CSS, and JS HTML syntax and terminology CSS syntax and terminology JS syntax and terminology

Relationship Between the Languages HTML defines the structure of the document CSS defines the way it should be displayed JS defines how the document should change once its loaded

Some general rules Document is read by the browser in order: HTML > CSS > JS Nothing changes after load without JS

HTML HyperText Mark-up Language (HTML) Uses a Document Object Model (DOM) Consists of a series of hierarchical elements

HTML syntax

HTML syntax Element

HTML syntax Opening tag Closing tag

HTML syntax Opening tag Closing tag inner HTML

HTML syntax Opening tag Closing tag Attribute name Attribute value

HTML syntax Opening tag Closing tag Attribute

HTML syntax Opening tag Closing tag Attribute Child Element

CSS Cascading Style Sheets (CSS) Introduced to make styling HTML easier Uses a series of selectors that declare different styling properties for HTML elements Styles will cascade on each other to produce the most complete style

CSS syntax.target { color: #ff0000 } SelectorProperty Value Declaration

CSS Selectors Element Selector Class Selector Id Selector

Element Selector p { color: red; } Text that is red. Text that is not red.

.Class Selector.redText { color: red; }.blackText { color: black; } Text that is red. Text that is black. Text that is red.

#id Selector #theRedOne { color: red; } Text that is black. Text that is red. Text that is black.

Combined Selectors.redText { color: red; } p.redText { font-size: 50%; } 100% Red Text. 50% Red Text 100% Normal Text.

Defining CSS External Styles Internal Styles Inline Styles cascade in this order

External Styles CSS file locationCSS parsing information child of HTML element

Internal styles.myClass { background-color: #cccccc; } child of HTML element everything in here is interpreted as CSS

Inline styles can be defined for any element style attribute everything between “ ” interpreted as CSS

JS Syntax var myNumber = 5; var myString = “hi”; variable declaration Name Value this is a string this is a number

JS Syntax function showInput1 (form) { alert(form.input1.value); return false; } function declaration nameparameter(s) function body return statement function call

JS Syntax var form1 = document.forms[“form1”]; var alsoForm1 = document.forms.form1; form1 == alsoForm1; //results in true. “has a” relationship

JS Scoping var myInt = 5; function doSomething(myString) { alert(myInt + myString); } function doSomethingElse() { var myOtherInt = 7; alert(myOtherInt + myString); } global variable local variable error parameter valid

JS-DOM interaction function doSomething() { alert(“clicked”); } event handlerevent

JS-DOM interaction function doSomething() { document.getElementById(“target”); } DOM reference

Defining JS External Script Internal Script

External Script JS file location JS parsing information child of HTML or element(s)

External Script function doSomething() { alert(“reached”); } child of HTML or element(s) everything in here is interpreted as JS

Project 1 grades will be back by next class Assignment will be posted later this week