Scribd
Upload
82 views

CSS 22519 Master Notes

Uploaded by

Srushti Jadhav
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
82 views

CSS 22519 Master Notes

Uploaded by

Srushti Jadhav
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/ 11

Client-Side Scripting 22519

CSS – 22519 VIMP Questions


1. Basis HTML Syntax for Javascript

<!DOCTYPE html>
<html>
<head>
<title>HTML in Script Tag</title>
</head>
<body>
<script>
document.write('<h1>This is HTML content inside a script tag</h1>');
document.write('<p>You can add any HTML here.</p>');
</script>
</body>
</html>

2. prompt(), alert() and confirm() method in Javascript.

prompt() Method:

The prompt() method displays a dialog box with a message, an input field for the user to enter
data, and buttons to submit or cancel. It returns the text entered by the user as a string, or null
if the user cancels the dialog.

• message (optional): A string that specifies the message to be displayed in the dialog
box.
• default (optional): A string that specifies the default value displayed in the input field.

let result = prompt(message, default);

alert() Method:
The alert() method displays an alert dialog box with a message and an OK button. It is
commonly used to display informational messages or to alert users of errors.

• message: A string that specifies the message to be displayed in the alert dialog box.

alert("Welcome to our website!");

confirm() Method:

The confirm() method displays a confirmation dialog box with a message, OK, and Cancel
buttons. It returns true if the user clicks OK and false if the user clicks Cancel.

• message: A string that specifies the message to be displayed in the confirmation


dialog box.

V2V EdTech LLP


Client-Side Scripting 22519

let result = confirm("Are you sure you want to delete this item?");
if (result) {
console.log("Item deleted.");
} else {
console.log("Deletion cancelled.");
}

3. Table Tag Syntax

Explanation of attributes used:

• border: Specifies the border width around the table cells. It can be set to 1 for a visible
border or 0 for no border.
• cellpadding: Specifies the padding (space) between the cell content and cell borders.
• cellspacing: Specifies the spacing between cells.
•

<table>: Defines the beginning and end of the table.

<thead>: (Optional) Groups the header rows in the table.

<tbody>: (Optional) Groups the body rows in the table.

<tr>: Defines a row in the table.


<th>: Defines a header cell in a table row. It's typically used within <thead> but can also be
used in <tbody> or <tfoot>.
<td>: Defines a data cell in a table row.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Table Example</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<caption>Monthly Expenses</caption>
<thead>
<tr>
<th>Category</th>
<th>Amount ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Food</td>
<td>200</td>

V2V EdTech LLP


Client-Side Scripting 22519

</tr>
<tr>
<td>Transportation</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>

4. Frame Tag Syntax


• src: Specifies the URL of the document to be displayed in the frame.
• name: Specifies the name of the frame. This is used as the target for links and form
submissions.
• scrolling: Specifies whether the frame should have scrollbars. Possible values are yes,
no, or auto.
• frameborder: Specifies whether the frame should have a border. Possible values are 1
(with border) or 0 (without border).
• marginwidth: Specifies the width of the frame's margin in pixels.
• marginheight: Specifies the height of the frame's margin in pixels.
• noresize: Specifies that the frame cannot be resized by the user.
• longdesc: Specifies a URL where a long description of the frame's content can be
found.
• framespacing: Specifies the space between frames in pixels.
• allow: Specifies which permissions are granted to the frame when using the allow
attribute in iframes.
• sandbox: Specifies a set of extra restrictions for the content in the frame.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Frameset Example</title>
</head>
<body>
<frameset cols="25%,*,25%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
<frame src="sidebar.html" name="sidebar">
</frameset>
</body>
</html>

5. Regular Expressions

V2V EdTech LLP


Client-Side Scripting 22519

Regular expressions (regex) in JavaScript are used for pattern matching within strings. They
allow you to search for and manipulate text based on specific criteria. A regular expression is
a pattern of characters.The pattern is used for searching and replacing characters in strings.
The RegExp Object is a regular expression with added Properties and Methods.
Creating Regular Expressions: You can create a regular expression in JavaScript using the
RegExp constructor or by using a regex literal.

// Using RegExp constructor


let regex1 = new RegExp('pattern');

// Using regex literal


let regex2 = /pattern/;

Matching: You can use the test() method to check if a string matches a regex pattern, or
match() method to extract matches.

let str = "Hello World";


let regex = /Hello/;

// Test if a string matches


console.log(regex.test(str)); // Output: true

// Extract matches
console.log(str.match(regex)); // Output: ["Hello"]

Modifiers: You can add modifiers to a regex pattern to change its behavior, like case-
insensitive matching or global matching.

• i: Perform case-insensitive matching.


• g: Perform a global match.
• m: Perform multiline matching.

let regex = /hello/i; // Case-insensitive matching


console.log(str.match(regex)); // Output: ["Hello", "hello"]

Character Classes: Character classes match any one of a set of characters. For example, \d
matches any digit character.

• \d: Matches any digit character.


• \w: Matches any word character (alphanumeric characters plus underscore).
• \s: Matches any whitespace character.

let regex = /\d+/; // Match one or more digits

let str = "I have 3 apples";


console.log(str.match(regex)); // Output: ["3"]

V2V EdTech LLP


Client-Side Scripting 22519

Quantifiers: Quantifiers specify how many instances of a character, group, or character class
must be present in the input for a match to be found.

• *: Matches the preceding character 0 or more times.


• +: Matches the preceding character 1 or more times.
• ?: Matches the preceding character 0 or 1 time.
• {n}: Matches exactly n occurrences.
• {n,}: Matches n or more occurrences.
• {n,m}: Matches at least n and at most m occurrences.

let regex = /\d{2,4}/; // Match between 2 to 4 digits

let str = "My ID is 12345";


console.log(str.match(regex)); // Output: ["1234"]

Anchors: Anchors specify the position in the input string where a match must occur.

• ^: Matches the beginning of the string.


• $: Matches the end of the string.

let regex = /^Hello/; // Match "Hello" at the beginning of the string

let str = "Hello World!";


console.log(regex.test(str)); // Output: true

6. Cookies

A cookie is an amount of information that persists between a server-side and a client-side.


Cookies originally designed for server-side programming. A web browser stores this
information at the time of browsing. A cookie contains the information as a string generally in
the form of a name-value pair separated by semi-colons. It maintains the state of a user and
remembers the user's information among all the web pages.

Types of Cookies:

1. Session Cookies - These cookies are stored temporarily and are deleted when the browser
session ends. They are typically used to maintain session state, such as keeping a user logged
in while navigating between pages of a website. Session cookies are primarily used for
session management and do not contain any personally identifiable information.
2. Persistent Cookies - Unlike session cookies, persistent cookies are stored on the user's
device even after the browser session ends. They have an expiration date set in the future.

V2V EdTech LLP


Client-Side Scripting 22519

Persistent cookies are often used for purposes such as remembering user preferences, tracking
user behaviour for analytics, and delivering personalized content.

<html>
<head>
<script>
function writeCookie()
{
var d=new Date();
d.setTime(d.getTime()+(1000*60*60*24));
with(document.myform)
{
document.cookie="Name=" + person.value + ";expires="
+d.toGMTString();
}
}
function readCookie()
{
if(document.cookie=="") //document.cookie.length==0
document.write("cookies not found");
else
document.write(document.cookie);
}
</script>
</head>
<body>
<form name="myform" action="">
Enter your name:
<input type="text" name="person"><br>
<input type="Reset" value="Set C" type="button"
onclick="writeCookie()">
<input type="Reset" value="Get C" type="button"
onclick="readCookie()">
</form>
</body>
</html>

7. Protecting your Webpage

Hiding Your Code

• A sophisticated visitor can access the cache and thereby gain access to the web page
source code.

• However, you can place obstacles in the way of a potential peeker. First, you can
disable use of the right mouse button on your site so the visitor can't access the View
Source menu option on the context menu. This hide both your HTML code and your
JavaScript from the visitor. Nevertheless, the visitor can still use the View menu's

V2V EdTech LLP


Client-Side Scripting 22519

Source option to display your source code. In addition, you can store your JavaScript
on your web server instead of building it into your web page. The browser calls the
JavaScript from the web server when it is needed by your web page.

• Using this method, the JavaScript isn't visible to the visitor, even if the visitor views
the source code for the web page.
Disabling the Right Mouse Button

The preventDefault() method cancels the event if it is cancelable, meaning that the default
action that belongs to the event will not occur.
For example, this can be useful when:

• Clicking on a "Submit" button, prevent it from submitting a form

• Clicking on a link, prevent the link from following the URL

<html>
<head>
<script>
window.onload = function(){
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
}, false);}
</script>
</head>
<body>
<h3>Right click on screen,Context Menu is disabled</h3>
</body>
</html>

Hiding Javascript

You can hide your JavaScript from a visitor by storing it in an external file on your web
server. The external file should have the .js file extension. The browser then calls the external
fi le whenever the browser encounters a JavaScript element in the web page. If you look at
the source code for the web page, you'll see reference to the external .js file, but you won't see
the source code for the JavaScript.

<html>
<head>
<script src="mycode.js" languages="javascript" type="text/javascript">
</script>
</head>
<body>
<h3> Right Click on screen, Context Menu is disabled</h3>
</body>
</html>

V2V EdTech LLP


Client-Side Scripting 22519

Concealing Your E-mail Address

• While e-mail addresses are commodities, it's likely that we ourselves are the culprits
who invited spammers to steal our e-mail addresses.

• Here's what happens: Some spammers create programs called bots that surf the

• Net looking for e-mail addresses that are embedded into web pages, such as those
placed there by developers to enable visitors to contact them. The bots then strip these
e-mail addresses from the web page and store them for use in a spam attack.

• To conceal an e-mail address, you need to create strings that contain part of the

• e-mail address and then build a JavaScript that assembles those strings into the e-mail
address, which is then written to the web page.

<html >
<head>
<title>Conceal Email Address</title>
<script>

function CreateEmailAddress()
{
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
var s = '?subject=Customer Inquiry'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b;
}

</script>
</head>
<body>
<input type="button" value="send" onclick="CreateEmailAddress()">
</body>
</html>

8. Rollover in Javascript.
Though HTML can be used to create rollovers, it can only perform simple actions. If you
wish to create more powerful rollovers, you need to use JavaScript. To create rollovers in

V2V EdTech LLP


Client-Side Scripting 22519

JavaScript, we need to create a JavaScript function and trigger them on onmouseover and
onmouseout.

<html>
<head>
<title>text rollovers</title>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr valign="top">
<td width="50%">
<a><img height="500" src="blue.png" width="900"
name="clr"></a>
</td>
<td>
<a onmouseover="document.clr.src='blue.png' ">
<b>
<u> Blue Color</u>
</b>
</a>
<br>
<a onmouseover="document.clr.src='red.png' ">
<b>
<u> Red Color</u>
</b>
</a>
<br>
<a onmouseover="document.clr.src='green.png' ">
<b>
<u> Green Color</u>
</b>
</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>

9. Banner with URL

<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners = new Array('1.jpg','2.jpg','3.jpg')

V2V EdTech LLP


Client-Side Scripting 22519

BannerLink = new Array(


'google.com/','vpt.edu.in/', 'msbte.org.in/');
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner()
{
document.location.href ="http://www." +
BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner]
setTimeout("DisplayBanners()",1000)
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<a href="javascript: LinkBanner()"><img src="1.jpg" width="400"
height="75" name="RotateBanner" /></a>
</center>
</body>
</html>

10. Slideshow

<html>
<title>slideshow</title>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3">
<img class="mySlides" src="y.jpg" style="width:50%">
<img class="mySlides" src="yy.jpg" style="width:50%">
<img class="mySlides" src="yyy.jpg" style="width:50%">
<img class="mySlides" src="yyyy.jpg" style="width:50%">

<button class="aa" onclick="plusDivs(-1)">&#10094;Back</button>


<button class="bb" onclick="plusDivs(1)">&#10095;Forward</button>
</div>

<script>
var slideIndex = 1;

V2V EdTech LLP


Client-Side Scripting 22519

showDivs(slideIndex);

function plusDivs(n)
{
showDivs(slideIndex += n);
}

function showDivs(n)
{
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length)
{
slideIndex = 1
}

if (n < 1)
{
slideIndex = x.length
}
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>

V2V EdTech LLP

You might also like