Scribd
Upload
6 views34 pages

02 03 Webapps p3 CSS Javascript

The document covers web fundamentals, focusing on CSS and JavaScript. It explains CSS concepts such as internal and external styles, selectors, and provides examples of styling HTML elements. Additionally, it discusses JavaScript as an interpreted programming language used for creating interactive web pages, including examples of functions for alerts and form validation.

Uploaded by

Oana Baraian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views34 pages

02 03 Webapps p3 CSS Javascript

The document covers web fundamentals, focusing on CSS and JavaScript. It explains CSS concepts such as internal and external styles, selectors, and provides examples of styling HTML elements. Additionally, it discusses JavaScript as an interpreted programming language used for creating interactive web pages, including examples of functions for alerts and form validation.

Uploaded by

Oana Baraian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Web fundamentals

Part 3

1
CSS

2
CSS

• CSS stands for Cascading Style Sheets


• Describes how the HTML should look

3
Internal CSS
<html>
<head>
<title>This is a web page</title>
<style>
body {background-color: grey; color: blue;}
h1 {text-decoration: underline;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

4
External CSS
<html>
<head>
<title>This is a web page</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

5
External CSS file

body {
font-family: Verdana;
background-color: red;
color: white;
}
h1 {
text-decoration: underline;
}

6
CSS element selector

p {
color: green;
}

7
CSS ID selector

#container1 {
text-align: center;
color: red;
}

<div id=“container1”>div content here…</div>

8
CSS class selector

.centered {
text-align: center;
color: red;
}

<div class=“centered”>div content here…</div>

9
CSS multiple classes

.centered {
text-align: center;
}
.red_text {
color: red;
}

<p class=“centered red_text”>A centered red


paragraph</p>

10
Practice with HTML and CSS

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

11
Homework

• Style the registration page using an external CSS file

12
Javascript

Chapter two 13
Javascript

• Interpreted programming language


• One of the core technologies of the web, along with HTML
and CSS
• Used to create interactive pages

14
Javascript – where?

• Inside the HTML, between <script></script> tags


In <head>
In <body>
• External file, referenced in the HTML source:
<script src="myScript.js"></script>

15
JS function

JS function that displays a window alert

function showAlert()
{
window.alert("This is a JavaScript alert!");
}

16
Use the function inside our HTML page

Using event attributes:


<button type="submit" onclick=“showAlert()">

onclick => tells what to be executed when a mouse click is


performed on the element

showAlert() => the name of the function to be executed when


the event is performed

17
JS between <script> tags

<!DOCTYPE html>
<head>
<script>
function showAlert() {
window.alert("This is a JavaScript alert!");
}
</script>
</head>
<body>
<div>
<button onclick="showAlert()">Click me!</button>
</div>
</body>
</html>

18
JS between <script> tags

<!DOCTYPE html>
<head>
<script src="js_alert.js"></script>
</head>
<body>
<div>
<button onclick="showAlert()">Click me!</button>
</div>
</body>
</html>

19
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

20
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

21
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

22
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

23
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

24
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

25
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}

26
JS function

JS function that validates a form element

function validateForm() { // JS function


var x, text; // define 2 variables
x = document.getElementById("firstName").value; // set a value to variable “x”

if (x == null || x == "") { // check value of “x”


text = "First name is mandatory!"; // set value of “text” variable
}

window.alert(text); // create a browser alert, displaying the value of “text”


}
Let’s find the bug in this script!

27
JS – inject HTML code

<div id=“errors”></div>

var errorsHtml = "Error text<br/>";


document.getElementById("errors").innerHTML = errorsHtml;

<div id=“errors”>Error text<br/></div>

var errorsText = "Error text";


document.getElementById("errors").innerText = errorsText;

<div id=“errors”>Error text</div>

28
JS – inject HTML code

<div id=“errors”></div>

var errorsHtml = "Error text<br/>";


document.getElementById("errors").innerHTML = errorsHtml;

<div id=“errors”>Error text<br/></div>

var errorsText = "Error text";


document.getElementById("errors").innerText = errorsText;

<div id=“errors”>Error text</div>

29
JS – inject HTML code

<div id=“errors”></div>

var errorsHtml = "Error text<br/>";


document.getElementById("errors").innerHTML = errorsHtml;

<div id=“errors”>Error text<br/></div>

var errorsText = "Error text";


document.getElementById("errors").innerText = errorsText;

<div id=“errors”>Error text</div>

30
JS – inject HTML code

<div id=“errors”></div>

var errorsHtml = "Error text<br/>";


document.getElementById("errors").innerHTML = errorsHtml;

<div id=“errors”>Error text<br/></div>

var errorsText = "Error text";


document.getElementById("errors").innerText = errorsText;

<div id=“errors”>Error text</div>

31
JS – append text

var errorsHtml = “Error text<br/>”;


errorsHtml += “Another error</br>”;

errorsHtml now has the value: “Error text<br/>Another error</br>”

32
Practice with Javascript

http://www.w3schools.com/js/default.asp

33
Homework

• Create a validation script for your registration form


• All text fields are mandatory
• Check each field by “id”
• Print an error in an error container for each field that was not
filled

• Output: one .html file, one .js file

34

You might also like