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

2. Project 1a Due now!

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

4. 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

5. 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

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

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

8. HTML syntax

9. HTML syntax Element

10. HTML syntax Opening tag Closing tag

11. HTML syntax Opening tag Closing tag inner HTML

12. HTML syntax Opening tag Closing tag Attribute name Attribute value

13. HTML syntax Opening tag Closing tag Attribute

14. HTML syntax Opening tag Closing tag Attribute Child Element

15. 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

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

17. CSS Selectors Element Selector Class Selector Id Selector

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

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

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

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

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

23. External Styles CSS file locationCSS parsing information child of HTML element

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

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

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

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

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

29. 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

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

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

32. Defining JS External Script Internal Script

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

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

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