Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

CSS JavaScript A

Uploaded by

oniegothatheus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

CSS JavaScript A

Uploaded by

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

---

CSS (Cascading Style Sheets) and JavaScript are both essential for creating modern,
interactive web pages, but they serve different purposes. CSS is used for styling and
layout, while JavaScript is a programming language that adds interactivity and
dynamic behavior.

---

CSS (Cascading Style Sheets)

CSS focuses on the appearance of a website. It allows developers to control how


HTML elements are displayed across various devices.

1. CSS Syntax

Selector: Specifies the HTML elements to be styled.

Declaration Block: Includes one or more declarations, each comprising a property and
its value.

selector {
property: value;
}

Example:

p{
color: blue;
font-size: 16px;
}

This changes the color and font size of all <p> (paragraph) elements.

2. CSS Selectors

Selectors specify which elements are affected by the styles:

Type Selector: Targets all elements of a given type.

h1 { color: red; }

Targets all <h1> tags.

Class Selector: Targets elements with a specified class.

.intro { color: green; }


ID Selector: Targets a specific element by ID.

#header { background-color: yellow; }

Universal Selector: Applies styles to all elements.

* { margin: 0; padding: 0; }

Descendant Selector: Targets elements within a parent element.

div p { color: gray; }

3. CSS Properties

Some common CSS properties include:

Text Styling:

color: Specifies text color.

font-size: Sets font size.

text-align: Aligns text.

Box Model: Every HTML element is considered a rectangular box, consisting of:

Margins (space outside the element),

Borders (surround the element),

Padding (space inside the element),

Content (inside the padding).

Example:

div {
margin: 20px;
padding: 10px;
border: 2px solid black;
width: 200px;
height: 150px;
}

Backgrounds:
background-color: Sets background color.

background-image: Adds a background image.

Positioning:

static: Default.

relative: Relative to its normal position.

absolute: Positioned relative to the nearest ancestor.

fixed: Relative to the browser window.

Example:

.box {
position: relative;
top: 50px;
left: 100px;
}

Flexbox Layout: Aligns elements along a row or column.

display: flex: Defines a flex container.

justify-content: Aligns items along the main axis.

align-items: Aligns items along the cross axis.

4. Media Queries

Media queries make websites responsive by applying styles based on the device
characteristics, such as screen width.

Example:

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}
---

JavaScript

JavaScript is a programming language that controls the behavior of web pages,


allowing for dynamic content updates, interactivity, and more.

1. JavaScript Basics

JavaScript can be added directly in HTML using the <script> tag or linked externally.

Example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function showMessage() {
alert("Hello, world!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click me</button>
</body>
</html>

2. Variables and Data Types

Variables hold data, which can be changed during script execution.

let name = "John"; // String


let age = 30; // Number
let isStudent = true; // Boolean

3. Functions

Functions are reusable blocks of code that perform specific tasks.

function greet(name) {
console.log("Hello, " + name);
}
greet("Alice");

4. DOM Manipulation

JavaScript interacts with the DOM (Document Object Model) to change the structure,
content, or style dynamically.
Example:

<p id="demo">This is a paragraph.</p>


<button onclick="changeText()">Change Text</button>

<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
}
</script>

5. Events

JavaScript responds to user actions, known as events. You can attach an event listener
to an element.

document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

6. Conditional Statements

JavaScript executes code based on conditions.

let age = 18;


if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are not an adult.");
}

7. Loops

Loops repeatedly execute blocks of code.

For Loop:

for (let i = 0; i < 5; i++) {


console.log(i);
}

While Loop:

let i = 0;
while (i < 5) {
console.log(i);
i++;
}
8. Arrays

Arrays store multiple values in a single variable.

let fruits = ["Apple", "Banana", "Orange"];


console.log(fruits[0]); // "Apple"

9. Objects

Objects store key-value pairs, which represent properties of an entity.

let person = {
firstName: "John",
lastName: "Doe",
age: 25
};
console.log(person.firstName); // "John"

10. JavaScript in Practice

JavaScript can be combined with CSS for interactivity, such as form validation:

<!DOCTYPE html>
<html>
<head>
<style>
.error { color: red; }
</style>
<script>
function validateForm() {
let name = document.getElementById("name").value;
if (name === "") {
document.getElementById("error").innerHTML = "Name cannot be empty!";
return false;
} else {
document.getElementById("error").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name">
<span id="error" class="error"></span>
<input type="submit" value="Submit">
</form>
</body>
</html>
---

CSS provides the visual structure, while JavaScript brings the web page to life by
adding dynamic interactions. Together, they form the core of modern web
development.

You might also like