Scribd
Upload
6 views

JavaScript - Functions

The document discusses JavaScript and how it can be used to add interactivity to web pages. It covers basic JavaScript syntax, functions, events, and manipulating the DOM. Examples are provided to demonstrate how to add click handlers, change HTML, and respond to user input using JavaScript.

Uploaded by

umartanveer113311
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

JavaScript - Functions

The document discusses JavaScript and how it can be used to add interactivity to web pages. It covers basic JavaScript syntax, functions, events, and manipulating the DOM. Examples are provided to demonstrate how to add click handlers, change HTML, and respond to user input using JavaScript.

Uploaded by

umartanveer113311
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

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>
hello.html
<!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!');
}
hello.html
<!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>
hello.html
<!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>
counter.html
<!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>
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script>
function hello(){
document.querySelector('h1').innerHTML = 'Goodbye!'
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="hello()">Click Here!</button>
</body>
</html>
hello.html
<script>
function hello() {
if (document.querySelector('h1').innerHTML === 'Hello!') {
document.querySelector('h1').innerHTML = 'Goodbye!'
} else {
document.querySelector('h1').innerHTML = 'Hello!'
}
}
</script>
hello.html
<script>
function hello() {
let heading = document.querySelector('h1');
if (heading.innerHTML === 'Hello!') {
heading.innerHTML = 'Goodbye!'
} else {
heading.innerHTML = 'Hello!'
}
}
</script>
hello.html
<script>
function hello() {
const heading = document.querySelector('h1');
if (heading.innerHTML === 'Hello!') {
heading.innerHTML = 'Goodbye!'
} else {
heading.innerHTML = 'Hello!'
}
}
</script>
counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<script>
let counter = 0;
function count(){
counter++;
document.querySelector('h1').innerHTML = counter;
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick="count()">Count</button>
</body>
</html>
counter.html
<script>
let counter = 0;
function count(){
counter++;
document.querySelector('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
}
}
</script>
counter.html
<!DOCTYPE html>

<html lang="en">

<head>

<title>Counter</title>

<script>

let counter = 0;

function count(){

counter++;

document.querySelector('h1').innerHTML = counter;

if (counter % 10 === 0) {

alert(`Count is now ${counter}`) // template literal

document.querySelector('button').onclick = count;

</script>

</head>

<body>

<h1>0</h1>

<button>Count</button>

</body>

</html>
counter.html
<script>
let counter = 0;
function count(){
counter++;
document.querySelector('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').onclick = count;
});
</script>
counter.js
let counter = 0;
function count(){
counter++;
document.querySelector('h1').innerHTML = counter;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`) // template literal
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').onclick = count;
});
counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<script src="counter.js"></script>
</head>
<body>
<h1>0</h1>
<button>Count</button>
</body>
</html>
hello.html<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function() {
const name = document.querySelector('#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>
colors.html
<!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>
colors.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Change font color to red
document.querySelector('#red').onclick = function() {
document.querySelector('#hello').style.color = '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>
colors.html
<script>
document.addEventListener('DOMContentLoaded', function() {
// Change font color to red
document.querySelector('#red').onclick = function() {
document.querySelector('#hello').style.color = 'red';
}

// Change font color to blue


document.querySelector('#blue').onclick = function() {
document.querySelector('#hello').style.color = 'blue';
}

// Change font color to green


document.querySelector('#green').onclick = function() {
document.querySelector('#hello').style.color = 'green';
}
});
</script>
colors.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colors</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('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>
colors.html
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('button').forEach(function(button) {
button.onclick =function() {
document.querySelector('#hello').style.color = button.dataset.color;
}
});
});
</script>
Events
• onclick
• onmouseover
• onkeydown
• onkeyup
• onload
• onblur
• ...
querySelector

• document.querySelector('tag')
• document.querySelector('#id')
• document.querySelector('.class')
Q & A

You might also like