Lecture # 16
CSC483 Topics in CS-II
Credit Hours: 3(3, 0)
Course Instructor: SAIF ULLAH IJAZ
Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad
JavaScript
Server
Client
JavaScript
<script>
</script>
<script>
alert('Hello, world!');
</script>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
alert('Hello, World!')
</script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
Functions
function hello() {
alert('Hello, world!');
}
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
function hello(){
alert('Hello, World!')
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button>Click Here!</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
function hello(){
alert('Hello, World!')
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="hello()">Click Here!</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<script>
let counter = 0;
function count(){
counter++;
alert(counter)
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="count()">Count</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
function hello(){
[Link]('h1').innerHTML = 'Goodbye!'
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="hello()">Click Here!</button>
</body>
</html>
[Link]
<script>
function hello() {
if ([Link]('h1').innerHTML === 'Hello!') {
[Link]('h1').innerHTML = 'Goodbye!'
} else {
[Link]('h1').innerHTML = 'Hello!'
}
}
</script>
[Link]
<script>
function hello() {
let heading = [Link]('h1');
if ([Link] === 'Hello!') {
[Link] = 'Goodbye!'
} else {
[Link] = 'Hello!'
}
}
</script>
[Link]
<script>
function hello() {
const heading = [Link]('h1');
if ([Link] === 'Hello!') {
[Link] = 'Goodbye!'
} else {
[Link] = 'Hello!'
}
}
</script>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<script>
let counter = 0;
function count(){
counter++;
[Link]('h1').innerHTML = counter;
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick="count()">Count</button>
</body>
</html>
[Link]
<script>
let counter = 0;
function count(){
counter++;
[Link]('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
}
}
</script>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<script>
let counter = 0;
function count(){
counter++;
[Link]('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
[Link]('button').onclick = count;
</script>
</head>
<body>
<h1>0</h1>
<button>Count</button>
</body>
</html>
[Link]
<script>
let counter = 0;
function count(){
counter++;
[Link]('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
}
}
[Link]('DOMContentLoaded', function() {
[Link]('button').onclick = count;
});
</script>
[Link]
let counter = 0;
function count(){
counter++;
[Link]('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
}
}
[Link]('DOMContentLoaded', function() {
[Link]('button').onclick = count;
});
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<script src="[Link]"></script>
</head>
<body>
<h1>0</h1>
<button>Count</button>
</body>
</html>
[Link]<script>
[Link]('DOMContentLoaded', function() {
[Link]('form').onsubmit = function() {
const name = [Link]('#name').value;
alert(`Hello, ${name}!`)
};
});
</script>
</head>
<body>
<h1>Hello!</h1>
<form>
<input autofocus type="text" id="name" placeholder="Name">
<input type="submit">
</form>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
</head>
<body>
<h1 id="hello">Hello!</h1>
<button>Red</button>
<button>Blue</button>
<button>Green</button>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
<script>
[Link]('DOMContentLoaded', function() {
// Change font color to red
[Link]('#red').onclick = function() {
[Link]('#hello').[Link] = 'red';
}
});
</script>
</head>
<body>
<h1 id="hello">Hello!</h1>
<button id="red">Red</button>
<button id="blue">Blue</button>
<button id="green">Green</button>
</body>
</html>
[Link]
<script>
[Link]('DOMContentLoaded', function() {
// Change font color to red
[Link]('#red').onclick = function() {
[Link]('#hello').[Link] = 'red';
}
// Change font color to blue
[Link]('#blue').onclick = function() {
[Link]('#hello').[Link] = 'blue';
}
// Change font color to green
[Link]('#green').onclick = function() {
[Link]('#hello').[Link] = 'green';
}
});
</script>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
<script>
[Link]('DOMContentLoaded', function() {
[Link]('button').
});
</script>
</head>
<body>
<h1 id="hello">Hello!</h1>
<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<button data-color="green">Green</button>
</body>
</html>
[Link]
<script>
[Link]('DOMContentLoaded', function() {
[Link]('button').forEach(function(button) {
[Link] =function() {
[Link]('#hello').[Link] = [Link];
}
});
});
</script>
Events
• onclick
• onmouseover
• onkeydown
• onkeyup
• onload
• onblur
• ...
querySelector
• [Link]('tag')
• [Link]('#id')
• [Link]('.class')
Q & A