Page 159 - CITS - Computer Software Application -TT

COMPUTER SOFTWARE APPLICATION - CITS

function checkCookie() {
let user = getCookie(“username”);
if (user != “”) {
alert(“Welcome again “ + user);
} else {

user = prompt(“Please enter your name:”, “”);
if (user != “” && user != null) {
setCookie(“username”, user, 365);
}
}

}
The example above runs the checkCookie() function when the page loads

Cascaded Style Sheets

It seems there might be a slight confusion in your question. Cascading Style Sheets (CSS) and JavaScript are
two distinct technologies used in web development, each with its own purpose. CSS is used for styling and layout,
while JavaScript is a scripting language used for enhancing interactivity and manipulating the behavior of web
pages. However, it’s common for JavaScript to interact with and manipulate CSS to achieve dynamic effects on
a webpage.
Here’s a brief overview of how JavaScript can be used with CSS in web development:
1 DOM Manipulation
• JavaScript can manipulate the Document Object Model (DOM), which represents the structure of a
webpage. Through the DOM, you can dynamically change the styles of HTML elements.
// Example: Change the color of a paragraph using JavaScript var paragraph = document.
getElementById(“myParagraph”); paragraph.style.color = “blue”;

2 Event Handling:
• JavaScript is often used to handle events such as clicks, mouseovers, or keyboard inputs. These events
can trigger changes in CSS styles.

// Example: Change the background color on button click var button = document.getElementById(“myButton”);
button.addEventListener(“click”, function() { document.body.style.backgroundColor = “yellow”; });
3 Animations and Transitions:

• JavaScript can be used to create animations and transitions by dynamically modifying CSS properties over
time.
// Example: Create a simple fade-in effect var element = document.getElementById(“fadeInElement”);
element.style.opacity = 0; function fadeIn() { var opacity = 0; var interval = setInterval(function() { if (opacity
>= 1) { clearInterval(interval); } else { opacity += 0.1; element.style.opacity = opacity; } }, 100); } fadeIn();

4 CSS Class Manipulation:
• JavaScript can add, remove, or toggle CSS classes dynamically, allowing for more organized and modular
styling.
// Example: Toggle a class on button click var button = document.getElementById(“myButton”); var element
= document.getElementById(“myElement”); button.addEventListener(“click”, function() { element.classList.
toggle(“highlight”); });

In summary, while CSS and JavaScript serve different purposes, JavaScript is commonly used to dynamically
interact with and modify CSS styles to create more interactive and responsive web pages.

146

CITS : IT&ITES - Computer Software Application - Lesson 37 - 46