66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Women4IT - JavaScript</title>
|
|
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<!-- Customise Bootstrap for practical grid layouts -->
|
|
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
|
<style>
|
|
.container { padding-top: 40px }
|
|
.js-box {
|
|
border:solid 1px yellow;
|
|
padding:20px;
|
|
background-color: lightyellow;
|
|
margin-bottom:20px;
|
|
font-size: larger;
|
|
}
|
|
.js-box p:last-child { margin-bottom: 0 }
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="container col-md-8 offset-md-2">
|
|
<h1><b>Exercise 4-1</b>: JavaScript Functions</h1>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!</p>
|
|
|
|
<div class="js-box">
|
|
|
|
<button onclick="sayHello()">Click to display greeting</button>
|
|
|
|
<button id="btnGreeting">Click to display greeting</button>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!</p>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- jQuery library -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<!-- Popper JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
|
<!-- Latest compiled JavaScript -->
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
document.getElementById("btnGreeting").addEventListener("click", sayHello);
|
|
function sayHello() {
|
|
window.alert("Welcome to my web page.");
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |