![Page 1: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/1.jpg)
Lab 3: Language Structures
User Interface Lab: GUI LabSep. 9th, 2014
![Page 2: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/2.jpg)
Project 1a
• Due now!
![Page 3: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/3.jpg)
Project 2
• TBA, will be posted this week.
• Uses CSS and Bootstrap
• Due by 10:30am, 9/23 (in two weeks)
![Page 4: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/4.jpg)
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
![Page 5: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/5.jpg)
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
![Page 6: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/6.jpg)
Some general rules
• Document is read by the browser in order: HTML > CSS > JS
• Nothing changes after load without JS
![Page 7: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/7.jpg)
HTML
• HyperText Mark-up Language (HTML)• Uses a Document Object Model (DOM)• Consists of a series of hierarchical elements
![Page 8: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/8.jpg)
HTML syntax
<div> </div>
![Page 9: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/9.jpg)
HTML syntax
<div> </div>
Element
![Page 10: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/10.jpg)
HTML syntax
<div> </div>
Opening tag Closing tag
![Page 11: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/11.jpg)
HTML syntax
<div> </div>
Opening tag Closing tag
inner HTML
![Page 12: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/12.jpg)
HTML syntax
<div class=“container”>
</div>
Opening tag
Closing tag
Attribute name
Attribute value
![Page 13: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/13.jpg)
HTML syntax
<div class=“container” id=“target”>
</div>
Opening tag
Closing tag
Attribute Attribute
![Page 14: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/14.jpg)
HTML syntax
<div class=“container” id=“target”><div class=“row”></div>
</div>
Opening tag
Closing tag
Attribute Attribute
Child Element
![Page 15: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/15.jpg)
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
![Page 16: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/16.jpg)
CSS syntax
.target { color: #ff0000 }
Selector Property Value
Declaration
![Page 17: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/17.jpg)
CSS Selectors
• Element Selector• Class Selector• Id Selector
![Page 18: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/18.jpg)
Element Selector
p {color: red;
}
<div><p>
Text that is red.</p>
</div><div>
Text that is not red.</div>
![Page 19: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/19.jpg)
.Class Selector
.redText {color: red;
}
.blackText {color: black;
}
<div class=“redText”>Text that is red.
</div><div class=“blackText”>
Text that is black.</div><div class=“redText”>
Text that is red.</div>
![Page 20: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/20.jpg)
#id Selector
#theRedOne {color: red;
}
<div>Text that is black.
</div><div id=“theRedOne”>
Text that is red.</div><div>
Text that is black.</div>
![Page 21: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/21.jpg)
Combined Selectors
.redText {color: red;
}
p.redText {font-size: 50%;
}
<div class=“redText”>100% Red Text.
</div><p class=“redText”>
50% Red Text</p><p>
100% Normal Text.</p>
![Page 22: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/22.jpg)
Defining CSS
• External Styles• Internal Styles• Inline Styles
cascade in this order
![Page 23: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/23.jpg)
External Styles
<head>
<link href=“main.css” rel=“stylesheet” type=“text/css/”>
</head>
CSS file location CSS parsing information
child of HTML <head> element
![Page 24: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/24.jpg)
Internal styles
<head><style>
.myClass {background-color: #cccccc;
}</style>
</head>
child of HTML <head> element
everything in here is
interpretedas CSS
![Page 25: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/25.jpg)
Inline styles
<div id=“mySpecialCase” style=“color: #ffcc99;”>
can be defined for any element
style attribute
everything between “ ”interpreted as CSS
![Page 26: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/26.jpg)
JS Syntax
var myNumber = 5;var myString = “hi”;
variabledeclaration
Name Value
this is a stringthis is a number
![Page 27: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/27.jpg)
JS Syntax
function showInput1 (form) {alert(form.input1.value);return false;
}
functiondeclaration name parameter(s)
functionbody
return statementfunction call
![Page 28: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/28.jpg)
JS Syntax
var form1 = document.forms[“form1”];var alsoForm1 = document.forms.form1;form1 == alsoForm1; //results in true.
“has a”relationship
![Page 29: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/29.jpg)
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
![Page 30: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/30.jpg)
JS-DOM interaction
<button id=“target” onclick=“doSomething()”>
function doSomething() {alert(“clicked”);
}
event handlerevent
![Page 31: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/31.jpg)
JS-DOM interaction
<button id=“target” onclick=“doSomething()”>
function doSomething() {
document.getElementById(“target”);} DOM reference
![Page 32: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/32.jpg)
Defining JS
• External Script• Internal Script
![Page 33: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/33.jpg)
External Script
<body>
<script src=“main.js” type=“text/javascript”></script>
</body>JS file location JS parsing
information
child of HTML <body> or <head> element(s)
![Page 34: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/34.jpg)
External Script
<body><script>
function doSomething() {alert(“reached”);
}</script>
</body>
child of HTML <body> or <head> element(s)
everything in here is
interpretedas JS
![Page 35: Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9 th, 2014](https://reader037.vdocuments.net/reader037/viewer/2022110403/56649e7e5503460f94b810f7/html5/thumbnails/35.jpg)
• Project 1 grades will be back by next class• Assignment will be posted later this week