Client-Side Web Development - An Overview

GD 2017/18 - Apresentação e Regras de Avaliação 1Carlos J. Costa (ISEG)
Client-Side Web Development
An Overview
Carlos J. Costa, Ph.D.

Carlos J. Costa (ISEG) - 2018
HTML, CSS & Javascript

HTML

Hypertext Markup Language,

Standard language used to access and show
Web Pages

HTML code is interpreted by a browser that
shows results to users

HTML language is composed of tags and text

How to write...

Start with
<!DOCTYPE html>
Do not forget
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
What Program should I use?

HTML
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
Page Content
</body>
</html>

Improving

Elements

Hyperlinks

Images

...

Forms
Example
<form method="post" action="test.php">
<p> ----- Register -----</p>
<p>
<input type"text" name="name" size="15" maxlenght="15">
<input type"text" name="name" size="15" maxlenght="15">
</p>
<p><input type"text" name="name" size="40" maxlenght="40"></p>
<p><input type"text" name="name" size="40" maxlenght="40"></p>
<input type="submit" value="Register">
</form>

HTML Attribute:

Id - This attribute assigns a name to an
element. This name must be unique in a
document.

Class - This attribute assigns a class name
or set of class names to an element.

Style - This attribute specifies style
information for the current element.

<P id="myparagraph">paragraph.</P>

CSS

Cascade Style Sheet

Customize webpage presentation

Definition of rules

Rules may be:
− head
− inline
− separated file

If used a separated file, this file may be shared by several
HTML pages

CSS

Define rule:
element {
atribute1:value1;
atribute2: value2;
...}

Example :
H1{
font-size: 36
}

CSS

Inline
<p style="color:blue;margin-left:20px;">This paragraph.</p>

CSS

In the head
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

CSS

In a separated file:
<head>
<link rel="stylesheet" type="text/css" href="formatos.css">
</head>

Javascript

JavaScript (often shortened to JS) is a language that has the following characteristics:
− lightweight,
− interpreted,
− object-oriented with first-class functions,
− prototype-based,
− dynamic
− multi-paradigm (and supports object-oriented, imperative, and functional
programming styles).

Most known as the scripting language for Web pages, but used in many non-browser
environments as well such as:

Javascript
• Create web page
– In the Body
• Execute code <script>...</script>
• Call Function
– In the head
• Functions are declared <script>...</script>
– Separated File
• Functions are declared

<!DOCTYPE html>
<head>
<script>
function teste(){
alert("Hello!");
}
</script>
</head>
<body>
<button onclick="teste()">show</button>
<img style="position:absolute; top:50px; left:100px;" src="boneco.jpg"/>
</body>
</html>
Javascript

<!DOCTYPE html>
<head>
<script>
function teste(){
var a=document.getElementById("b1").style.top;
alert(a);
}
</script>
</head>
<body>
<button onclick="teste()">show</button>
<img id="b1"style="position:absolute;top:50px;left:100px;"src="boneco.jpg"/>
</body>
</html>
Javascript

Javascript
• Print the current date in a div called
“b2”
document.getElementById("b2").innerHTML =
Date();
• Convert the text content into a integer
content.
var a=parseInt(b);
• What is the operator to concatenate?
+

<!DOCTYPE html>
<head>
<script>
function teste(){
document.getElementById("b2").innerHTML = Date();
}
</script>
</head>
<body>
<button onclick="teste()">print date</button>
<div id="b2">...</div>
</body>
</html>
Javascript

<!DOCTYPE html>
<head>
<script>
function teste(){
var a=parseInt(a)+10;
if (a>500){a=500};
document.getElementById("b1").style.top=a+"px";
}
</script>
</head>
<body>
<button onclick="teste()">moving</button>
<img id="b1" style="position:absolute; top:50px; left:100px;"
src="boneco.jpg" />
</body>
</html>
Javascript

Javascript
Stop if reach 300 px from the top

Javascript
<!DOCTYPE html>
<head>
<script>
function teste(){
var a=parseInt(a)+10;
document.getElementById("b1").style.top=a+"px";
}
</script>
</head>
<body>
<button onclick="teste()">moving</button>
<img id="b1" style="position:absolute; top:50px; left:100px;"
src="boneco.jpg" />
</body>
</html>

Javascript

Web development

Users?

Bibliography

http://www.w3.org/TR/html401/struct/global.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript

http://www.w3schools.com

Costa, C. J. (2007). Desenvolvimento para web. ITML
press

Client-Side Web Development - An Overview

More Related Content

What's hot

Similar to Client-Side Web Development - An Overview

More from Carlos J. Costa

Recently uploaded

Client-Side Web Development - An Overview