Post on 29-Dec-2015
Lab 3: Language Structures
User Interface Lab: GUI LabSep. 9th, 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
<div> </div>
HTML syntax
<div> </div>
Element
HTML syntax
<div> </div>
Opening tag Closing tag
HTML syntax
<div> </div>
Opening tag Closing tag
inner HTML
HTML syntax
<div class=“container”>
</div>
Opening tag
Closing tag
Attribute name
Attribute value
HTML syntax
<div class=“container” id=“target”>
</div>
Opening tag
Closing tag
Attribute Attribute
HTML syntax
<div class=“container” id=“target”><div class=“row”></div>
</div>
Opening tag
Closing tag
Attribute 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 }
Selector Property Value
Declaration
CSS Selectors
• Element Selector• Class Selector• Id Selector
Element Selector
p {color: red;
}
<div><p>
Text that is red.</p>
</div><div>
Text that is not red.</div>
.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>
#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>
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>
Defining CSS
• External Styles• Internal Styles• Inline Styles
cascade in this order
External Styles
<head>
<link href=“main.css” rel=“stylesheet” type=“text/css/”>
</head>
CSS file location CSS parsing information
child of HTML <head> element
Internal styles
<head><style>
.myClass {background-color: #cccccc;
}</style>
</head>
child of HTML <head> element
everything in here is
interpretedas CSS
Inline styles
<div id=“mySpecialCase” style=“color: #ffcc99;”>
can be defined for any element
style attribute
everything between “ ”interpreted as CSS
JS Syntax
var myNumber = 5;var myString = “hi”;
variabledeclaration
Name Value
this is a stringthis is a number
JS Syntax
function showInput1 (form) {alert(form.input1.value);return false;
}
functiondeclaration name parameter(s)
functionbody
return statementfunction 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
<button id=“target” onclick=“doSomething()”>
function doSomething() {alert(“clicked”);
}
event handlerevent
JS-DOM interaction
<button id=“target” onclick=“doSomething()”>
function doSomething() {
document.getElementById(“target”);} DOM reference
Defining JS
• External Script• Internal Script
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)
External Script
<body><script>
function doSomething() {alert(“reached”);
}</script>
</body>
child of HTML <body> or <head> element(s)
everything in here is
interpretedas JS
• Project 1 grades will be back by next class• Assignment will be posted later this week