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

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

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

Documents

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