Scribd
Upload
5 views76 pages

Box Model, Positioning CSS and Javascript by Aryan

Contains CSS concepts

Uploaded by

shubhi poddar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views76 pages

Box Model, Positioning CSS and Javascript by Aryan

Contains CSS concepts

Uploaded by

shubhi poddar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 76

LOVE BABBAR WEB DEV

BOX MODEL

Block-Inline
Relative Position

Absolute Position
Fixed Vs Sticky Position
JAVASCRIPT
Client-side scripting refers to the use of scripts, typically
written in languages like JavaScript, HTML, and CSS, that run
on the user's web browser rather than on the web server. This
allows web pages to respond to user actions, update content
dynamically, validate forms, and enhance user interaction
without the need for a full page reload. Here are some key
aspects of client-side scripting:

### Key Languages and Technologies


1. **JavaScript**: The primary language for client-side
scripting. It can manipulate the Document Object Model
(DOM), handle events, and perform asynchronous operations
using AJAX.
2. **HTML**: The standard markup language for creating web
pages. It defines the structure and content of the web pages.
3. **CSS**: Used for describing the presentation and styling of
the HTML elements.

### Common Uses


1. **Form Validation**: Validating user input on the client-
side before it is sent to the server. This can improve user
experience by providing immediate feedback.
2. **Dynamic Content**: Loading new content or updating
parts of the web page without refreshing the entire page. This
is often done using AJAX.
3. **User Interface Enhancements**: Creating interactive and
responsive user interfaces, such as dropdown menus, sliders,
modal windows, and animations.
4. **Event Handling**: Responding to user actions like clicks,
mouse movements, and keystrokes.

### Advantages
1. **Reduced Server Load**: By handling some of the
processing on the client-side, the load on the server is
reduced.
2. **Improved User Experience**: Provides faster interactions
and more dynamic web pages.
3. **Offline Capabilities**: With technologies like Progressive
Web Apps (PWAs), parts of the application can work offline.

### Disadvantages
1. **Security Risks**: Client-side code is visible and can be
manipulated by users, making it less secure.
2. **Browser Compatibility**: Different browsers may
interpret scripts differently, leading to inconsistencies.
3. **Performance Issues**: Heavy client-side processing can
slow down the user's browser, especially on less powerful
devices.

### Examples
1. **AJAX (Asynchronous JavaScript and XML)**: Allows web
pages to be updated asynchronously by exchanging small
amounts of data with the server behind the scenes.
2. **DOM Manipulation**: Using JavaScript to dynamically
change the structure, style, and content of the document.
3. **Frameworks and Libraries**: Tools like React, Angular,
and Vue.js help manage the complexity of client-side scripting
and provide structured ways to build large-scale applications.

### Basic Example


Here is a simple example of client-side scripting using
JavaScript to validate a form:

```html
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<h2>JavaScript Form Validation Example</h2>


<form name="myForm" action="/submit_form"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>
```
In this example, the `validateForm` function checks if the
name field is empty. If it is, it displays an alert and prevents
the form from being submitted.

Client-side scripting is essential for creating modern,


interactive, and user-friendly web applications.
Linking To index.js
Variable:

The let keyword was introduced in ES6 (2015)

Variables declared with let have Block Scope

Variables declared with let must be Declared before use

Variables declared with let cannot be Redeclared in the same scope


Can Only Be Used Within A Function Block:
Using Let:
Can’t Be Redefined Within A Block :

Possibly value can be changed:


Let supports dynamic typed language:
Can’t Be Redeclared:

Difference:

Naming Conventions:
Data Types:
OPERATORS:
LOOSE EQUALITY : Different Datatype and same value
STRICT EQUALITY : Same Datatype And Same Value
Short circuiting :

7 is regarded as true value .


CONDITIONALS:
LOOPS :
While Loop:
STRINGS:

name is not cut .


Name string is called template string because of ` ` . These Are
Backticks.
OPERATIONS:

CONCATENATION:
Using Backticks:

Length :

Uppercase:

Substring:
Ending Index Is Exclusive.
SPLIT() METHOD:

Backslash Is Itself a special character which tells the interpreter


that the next word to a backslash is normal character.
In This The ‘\’ first back slash says don’t give the real power to
the next word or character like here it is another back slash so it
is treated as normal character or string.
JOIN METHOD:
FUNCTIONS:
Arrow Function:

ARRAYSAND OBJECTS:
Actual Data Gets Stored on the heap , the variable is just a
reference to the data.
Adding Function To Object:
SHALLOW COPY :
ARRAYS:
Built in methods:
Slice method:

Last index is excluded.


Splice Method:

Map:
Filter Method:
To Filter string values just write ‘string’ in place of ‘number’.
Reduce Method:

If acc is already initialized with y then curr point to a . But If acc


isn’t initialized then acc points to ‘a’ and curr points to ‘b’
automatically.

Acc value is initialized to 0.


Dry run of above code:
Sort():

FOR EACH:
SUM USING ARRAY FUNCTION:
Common In-Built Objects:

JS DOM:
BOM:

Browser object helps to manipulate the browser attributes


except the HTML part.
Access HTML:
Fetching Element Id:
Fetching element by Classname:

Element By Tagname:
Query Selector:
Query Selector Gets The First Element only that is found.
Query SelectorAll():
UPDATING HTML EXISTING ELEMENT:
Button had a p tag , with inner.Html We Can get the inner tags
of the element.
Same As UI display .

Text Content Provides The As It Is Code Text .


Adding Element :

CreateElement:
Removing Element:

You might also like