Fed Doc

1.
HTML,CSS
HTML:
HTML stands for Hypertext Markup Language. It is a markup language used to create web pages
and other types of digital documents that can be viewed in web browsers.
HTML consists of a series of elements, which are surrounded by angle brackets and specify the
structure and content of the document. For example, the <p> element is used to indicate a
paragraph, while the <img> element is used to insert an image.
Open tag Close tag Description Example

<p> </p> This tag allows you to create paragraphs My name is Fred.
<h1> </h1> This is the largest heading Heading 1
<h2> </h2> This is second biggest heading Heading 2
<h3> </h3> This is the next heading Heading 3
<h4> </h4> This is another heading Heading 4
<h5> </h5> This is the second smallest heading Heading 5
<h6> </h6> This is the smallest heading Heading 6
<hr > n/a This is a horizontal line.

<b> </b> This makes text bold Bold text
<i> </i> This makes text italic Italic text
1
CSS:
Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can
control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can
control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!
The word cascading means that a style applied to a parent element will also apply to all children
elements within the parent. So, if you set the color of the body text to "blue", all headings,
paragraphs, and other text elements within the body will also get the same color (unless you
specify something else)!
Using CSS:
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this
tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for
you to try it yourself.
Basic CSS Attributes and Their Usage

Basic Selectors
article All article elements
.product Elements with the product class
2
#products The element with the ID of products
a[href=“…”] Anchors with the given href
a[href*=“google”] Anchors whose href contains google
a[href^=“https”] Anchors whose href starts with https
a[href$=“.com”] Anchors whose href ends with .com
Relational Selectors
#products p All p elements inside #products
#products > p All p elements, direct children of the id
#products + p The p element immediately after id
#products ~ p All p elements after #products (siblings)
Pseudo-class Selectors
article :first-child The first child of article elements
article :first-of-type The first occurrence of elements
article p:first-of-type The first p element inside article
article :last-child
article :last-of-type
article :nth-child(odd)
article :nth-child(even)
Pseudo-element Selectors
p::first-letter The first letter of every p element
p::first-line The first line of every p element
::selection Any selected element
p::before To insert content before the content of p element
p::after To insert content after the content of p elements
Colors
#fcba03 Hexadecimal value
rgb(252, 186, 3) RGB value
rgba(252, 186, 3, 0.5) Semi-transparent RGB value
hsl(44, 98%, 50%) HSL value
hsla(44, 98%, 50%, 0.5) Semi-transparent HSL value
Gradients
3
background: linear-gradient(blue, yellow);
background: linear-gradient(to bottom right, blue, yellow);
background: linear-gradient(45deg, blue, yellow);
background: linear-gradient(45deg, blue, yellow 30%);
background: radial-gradient(white, yellow);
background: radial-gradient(circle, white, yellow);
background: radial-gradient(circle at top left, white, yellow);
Borders
border: 10px solid blue;
border-width: 10px 20px 30px 40px; /* top right bottom left */
border-radius: 5px;
border-radius: 100%; /* full circle */
Shadows
box-shadow: 10px 10px;
box-shadow: 10px 10px grey;
box-shadow: 10px 10px 5px grey;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
Advanced CSS Attributes
Box Model
padding : 1 px 20px;
padding-top: 30px;
margin: 1p 2p 3px 4px;
margin-top: 5px;
border: 1px solid black;
border-top: px solid black;
Sizing Elements
width: 5 rem;
height: 20%;
box-sizing : border-box; To prevent paddings/borders from increasing the size of the
visible box.
Overflowing
4
overflow: hidden; Hides the overflown content
overflow: scroll; Always shows scroll bars
overflow: auto; Shows scroll bars only if content overflows
Positioning
position: static; The default value
position: relative; To place relative to element’s normal position
position: absolute; To position relative to the element’s parent
position: fixed; To position relative to the viewport
z-index: 1; To change the stacking order of an element
Floating
float: left;
float: right;
clear: both;
FlexBox
Container Properties
display: flex; To enable the flex layout on a container
flex-direction: column; Direction (row, column)
justify-content: center; To align items along the main axis
align-items: center; To align items along the cross axis
flex-wrap: wrap; To enable wrapping
align-content: center; To align flex lines along the cross axis
Item Properties
align-self: center; To overwrite the alignment
flex-basis: 10rem; The initial size of an item
flex-grow: 1; The growth factor
flex-shrink: 0; The shrink factor
flex: 0 1 10rem; Shorthand (grow shrink basis)
Grid
Defining a Grid
display: grid;
grid-template-rows: repeat(3, 100px);
5
grid-template-columns: repeat(2, 100px);
grid-template: repeat(3, 100px) / repeat(2, 100px);
grid-template-areas:
“header header”
“sidebar main”
“footer footer”;
Gap
row-gap: 10px;
column-gap: 20px;
gap: 10px 20px; Shorthand (row column)
Alignment
justify-items: center; Align items horizontally within their cell
align-items: center; Align the items vertically within their cell
justify-content: center; Align grid horizontally within its container
align-content: center; Align grid vertically within its container
Placing Items
grid-column: 2;
grid-column: 1 / 3;
grid-column: 1 / -1;
grid-column: 1 / span 2;
grid-row: 2 / 4;
grid-area: header;
Hiding elements
display: none; Hides the element
visibility: hidden; Hides the element but keeps the reserved space
6
2. VARIABLES IN JS
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that
allows you to build interactivity into otherwise static HTML pages.
In JavaScript, variables are used to store data or values that can be used and manipulated within a
program. A variable is declared using the var, let, or const keyword, followed by the variable
name.
An example of a variable declaration using the var keyword:
var message = "Hello, world!";
In this example, the variable name is message, and the value stored in the variable is the string
"Hello, world!".
In addition to var, there are two other keywords for declaring variables: let and const. let is used
for variables that are expected to change their value during program execution, while const is
used for variables that are expected to remain constant.
An example of a variable declaration using let:
let a = 0;
In this example, the variable name is a, and the value stored in the variable is the number 0.
An example of a variable declaration using const:
const PI = 3.14159;
In this example, the variable name is PI, and the value stored in the variable is the number
3.14159.
7
3. CONTROL STRUCTURES IN JS
if/else statements: Allows you to execute code based on a condition. If the condition is true, the
code inside the if block is executed, otherwise the code inside the else block is executed.
Example:
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}
switch statements: A switch statement allows you to execute different blocks of code based on
different cases. If none of the cases match, the code inside the default block is executed.
Example:
switch (expression) {
case value1:
// code to be executed if expression matches value1
break;
case value2:
// code to be executed if expression matches value2
break;
default:
// code to be executed if none of the cases match
break; }
8
for loops: A for loop allows you to execute a block of code a fixed number of times. The number
of times the loop is executed is determined by the value of a counter variable.
Example:
for (let i = 0; i < 10; i++) {
// code to be executed in each iteration of the loop
}
while loops: A while loop allows you to execute a block of code while a condition is true.
Example:
while (condition) {
// code to be executed while condition is true
}
do-while loops: A do-while loop is similar to a while loop, but the code is executed at least once
before the condition is checked.
Example:
do {
// code to be executed at least once
} while (condition);
break and continue statements: These statements allow you to modify the flow of execution in
a loop. A break statement is used to exit a loop, while a continue statement is used to skip an
iteration of the loop.
Example:
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // exits the loop when i is 5
}
if (i === 3) {
continue; // skips iteration when i is 3
}
// code to be executed in each iteration of the loop
}
9
React JS
4. FUNCTIONS IN JS
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Example
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
JavaScript Function Syntax:
A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as
variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function parameters are listed inside the parentheses () in the function definition.Function
arguments are the values received by the function when it is invoked.Inside the function, the
arguments (the parameters) behave as local variables.
Function Invocation The code inside the function will execute when "something" invokes
(calls) the function:When an event occurs (when a user clicks a button)When it is invoked
(called) from JavaScript code
Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop executing.If the function was
invoked from a statement, JavaScript will "return" to execute the code after the invoking
statement.Functions often compute a return value. The return value is "returned" back to the
"caller":
10
Example
Calculate the product of two numbers, and return the result:
let x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
The result in x will be:
12
An example of how to define a function in JavaScript:
function addNumbers(a, b) {
return a + b;
}
In this example, addNumbers is the name of the function, and a and b are parameters that the
function takes as input. The return statement specifies the output of the function. In this case, the
function returns the sum of a and b.
To call a function in JavaScript, you simply need to use its name followed by parentheses and
any required arguments:
let result = addNumbers(2, 3);console.log(result); // Output: 5
This example calls the addNumbers function with the arguments 2 and 3, and stores the result in
the variable result. The console.log() statement then outputs the result, which is 5.
Anonymous Function
It is a function that does not have any name associated with it. Normally we use the function
keyword before the function name to define a function in JavaScript, however, in anonymous
functions in JavaScript, we use only the function keyword without the function name
11
5. LISTS AND STRINGS IN JS
LISTS:
In JavaScript, lists are typically implemented as arrays, which are a type of object that can store
an ordered collection of values. Arrays can be used to store any type of value, including
numbers, strings, and even other arrays.
Here's an example of how to define an array in JavaScript:
let numbers = [1, 2, 3, 4, 5];
In this example, numbers is an array containing the numbers 1 through 5. You can access
individual elements of the array using square brackets:
let firstNumber = numbers[0];
let secondNumber = numbers[1];
console.log(firstNumber); // Output: 1
console.log(secondNumber); // Output: 2
In this example, firstNumber and secondNumber are variables that store the first and second
elements of the numbers array, respectively.
JavaScript provides a number of built-in methods for working with arrays. Here are some of the
most common array operations in JavaScript:
Adding elements to an array:
numbers.push(6); // Adds the value 6 to the end of the array
numbers.unshift(0); // Adds the value 0 to the beginning of the array
Removing elements from an array:
numbers.pop(); // Removes the last element of the array and returns its value
numbers.shift(); // Removes the first element of the array and returns its value
Accessing a subset of an array:
let subset = numbers.slice(2, 4); // Returns a new array containing the elements at index 2 and 3
numbers.reverse(); // Reverses the order of the elements in the array
Sorting the elements of an array:
numbers.sort(); // Sorts the elements of the array in ascending order
Accessing the list:
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
12
}
Even or Odd in a list using map function in js:
let numbers = [1, 2, 3, 4, 5];
let even = numbers.map(function(number) {
return number % 2 === 0;
});
console.log(even);
Even or Odd in a list using filter function in js
let numbers = [1, 2, 3, 4, 5];
let even = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(even);
STRINGS IN JS:
In JavaScript, a string is a sequence of characters enclosed in single quotes ('...') or double quotes
("..."). Here are some examples of strings:
let message = 'Hello, world!';
let name = "Alice";
let greeting = "Hello, " + name;
We can access individual characters in a string using bracket notation:
let firstCharacter = message[0]; // 'H'
let fifthCharacter = message[4]; // 'o'
We can also use various string methods to manipulate strings. Here are some examples:
let upperCaseMessage = message.toUpperCase(); // 'HELLO, WORLD!'
let lowerCaseMessage = message.toLowerCase(); // 'hello, world!'
let messageLength = message.length; // 13
let firstIndex = message.indexOf('o'); // 4
let lastIndex = message.lastIndexOf('o'); // 8
let substring = message.substring(0, 5); // 'Hello'
13
let splitString = message.split(','); // ['Hello', ' world!']
In the examples above, the toUpperCase() and toLowerCase() methods return a new string with
all characters in uppercase or lowercase, respectively. The length property returns the number of
characters in the string. The indexOf() and lastIndexOf() methods return the index of the first or
last occurrence of a character or substring in the string, respectively. The substring() method
returns a substring of the string, given a starting index and an ending index. The split() method
splits the string into an array of substrings, given a separator character or string.
14
6. CLASSES & OBJECTS IN JS
CLASSES & OBJECTS IN JS:
In JavaScript, classes are a way to define object blueprints, which encapsulate data and behavior.
A class defines a set of properties and methods that are common to a set of objects.
example of a class definition in JavaScript:
• Use the keyword class to create a class.
• Always add a method named constructor():
Syntax
class ClassName {
constructor() { ... }
}
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
In this example, the Person class has two properties (name and age) and one method (sayHello).
The constructor method is a special method that is called when a new object is created from the
class. It takes in the name and age parameters and sets them as properties of the new object.
The sayHello method uses template literals (denoted by backticks) to generate a string that
includes the name and age properties of the object.
15
Objects in js:
In JavaScript, objects are king. If we understand objects, we understand JavaScript.
In JavaScript, almost "everything" is an object.
Booleans can be objects (if defined with the new keyword)
Numbers can be objects (if defined with the new keyword)
Strings can be objects (if defined with the new keyword)
Dates are always objects
Maths are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are always objects
To create a new object from a class, you use the new keyword:
let person1 = new Person('Alice', 30);
let person2 = new Person('Bob', 25);
person1.sayHello(); // logs "Hello, my name is Alice and I'm 30 years old."
person2.sayHello(); // logs "Hello, my name is Bob and I'm 25 years old."
In this example, person1 and person2 are both instances of the Person class. They have their own
name and age properties, which were set when the objects were created using the new keyword.
Classes in JavaScript are a powerful tool for organizing code and creating reusable object
blueprints. They are used extensively in modern JavaScript programming, especially in
frameworks and libraries such as React and Angular.
16
7. DOM MANIPULATION USING JS
With the HTML DOM, JavaScript can access and change all the elements of an HTML
document.The HTML DOM (Document Object Model)When a web page is loaded, the browser
creates a Document Object Model of the page.The HTML DOM model is constructed as a tree
of Objects:
The HTML DOM Tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The W3C DOM standard is separated into 3 different parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for HTML. It defines:
17
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML
elements. In JavaScript, the Document Object Model (DOM) is a programming interface for
HTML and XML documents. It provides a way for JavaScript code to access and manipulate the
content and structure of web pages. The DOM represents an HTML or XML document as a tree-
like structure of objects, where each object represents a node in the document. The root node of
the tree is called the document node, and the child nodes of the document node represent the
HTML elements in the document.
Here's an example of how to access an HTML element in the DOM using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="my-heading">Hello, world!</h1>
<p>This is a paragraph.</p>
<script>
let heading = document.getElementById("my-heading");
console.log(heading.innerHTML); // logs "Hello, world!"
</script>
</body>
</html>
In this example, we have an HTML document with a heading element (<h1>) and a paragraph
element (<p>). The heading element has an id attribute of "my-heading"..The JavaScript code in
the script element uses the getElementById method of the document object to retrieve the
heading element by its ID. It then uses the innerHTML property of the heading element to access
its content and logs it to the console.
48

Fed Doc

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fed Doc

Uploaded by

Copyright:

Available Formats

1.

Open tag Close tag Description Example

<h6> </h6> This is the smallest heading Heading 6

<hr > n/a This is a horizontal line.

Basic CSS Attributes and Their Usage

An example of a variable declaration using let:

You might also like