Scribd
Upload
15 views

css unit 4

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views

css unit 4

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

Q Javascript URL

-->
A URL(Uniform Resource Locator) is the address of a unique resource on the
internet.
It is one of the key mechanism used by the browsers to retrieve published
resources, such as HTML pages, CSS documents, images and so on.
Ex:
https://google.com
https://coke.com

Q Opening a window
-->
- The open() method of window object is used to open a new window and loads the
document specified by a given URL.
MyWindow = window.open()
- The open() method returns a reference to the new window, which is assigned to the
MyWindow variable. You then use this reference any time that you want to do
something with the window while your JavaScript runs.
- A window has many properties, such as its width, height. You set these attributes
when you create the window by passing them as parameters to the open() method:
• The first parameter is the full or relative URL of the web page that will appear
in the new window.
• The second parameter is the name that you assign to the window.
• The third parameter is a string that contains the style of the window.
We want to open a new window that has a height and a width of 250 pixels and
displays an advertisement that is an image. All other styles are turned off.
Syntax:
MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0,
location=0, menubar=0, directories=0, resizable=0, height=250, width=250')
Example:
<html >
<head>
<title>Open New Window</title>
<script >
function OpenNewWindow() {
MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0,
location=0, menubar=0, directories=0, resizable=0, height=250, width=250')
}
</script>
</head>
<body>
<form action=" " method="post">
<INPUT name="OpenWindow" value="Open Window" type="button"
onclick="OpenNewWindow()"/>
</form>
</body>
</html>

Q Focus on window.
-->
Javascript can be used to set focus on newly opened window.
Giving focus means making active on browser.
Usually last opened window as focus.
By using focus() method a window can be set in active mode.

Syntax:
windowname.focus();
windowname: specify object named used to create window.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Focus on Window</title>
</head>
<body>
<script>
function openw(){
var a=window.open("https:\\google.com","google",400,300);
a.focus();
}
</script>
<input type="button" onclick="openw()" value="Open Window">
</body>
</html>

Q Window position:
-->
A new window is displayed on the screen at location specified by user.
User sets the top and left attributes.
This attributes are used inside window.open() method.
Top is used to specify the distance in number of pixels from top of the screen.
Left is used to specify the distance in number of pixels from left of the screen.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Window Position</title>
</head>
<body>
<script>
function openw(){
var a=window.open("https:\\
google.com","google","top=250,left=400,width=200,height=200");
}
</script>
<input type="button" onclick="openw()" value="Positioned Window">
</body>
</html>

Q Changing the Contents of a Window.


-->
We can change the content of the window by calling the open() method using the same
window name each time.
Here the window name remain same but the content changes.
Only one object of window is created and it remains open, the content changes.
<!DOCTYPE html>
<html>
<head>
<title>Changing window Content</title>
</head>
<body>
<script>
function openw(s){
a = window.open(s,"web","width=300,height=300");
}
</script>
<input type="button" onclick="openw('https://cnn.com')" value="Website 1(CNN)">
<input type="button" onclick="openw('https://coke.com')" value="Website
2(Coke)">
</body>
</html>

Q Close a window
-->
close() function is used to close a window.
Syntax:
windowname.close;
Windowname= Name of window to be closed.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Closing a window</title>
</head>
<body>
<script>
var a=window.open("https://coke.com","ck","width=400,height=500");
function clo(){
a.close();
}
</script>
<input type="button" onclick="clo()" value= "Closing Window">
</body>
</html>

Q Scrolling a webpage
-->
To Scroll a webpage, scrollTo() method of window object is used.
This method can scroll horizontally or vertically.
It ignores current position of scrollbar.
Syntax: windows.scrollTo(x,y);
x: the coordinate to scroll along x-axis(horizontally).
y: the coordinate to scroll along y-axis(vertically).

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Scrolling a webpage</title>
<style>
body{
height:5000px;
width:5000px;
}
</style>
</head>
<body>
<script>
function scrollh(){
window.scrollTo(500,0);
}
function scrollv(){
window.scrollTo(0,500);
}
</script>
<input type="button" value="Scroll Horizontally" onclick="scrollh()"><br><br>
<input type="button" value="Scroll Vertically" onclick="scrollv()">
</body>
</html>

Q Multiples windows at once.


-->
- Creation of multiple windows is possible by creating and opening windows in a
loop using window.open() method.
- Set proper dimensions for window, so that newly created windows don't appear on
top of each other.
<!DOCTYPE html>
<html>
<head>
<title>Multiple windows</title>
</head>
<body>
<script>
function openwin(){
for(i=0;i<250;i+=50){
var x=i+50;
var y=i+50;
a=
window.open("",'M'+i,"top="+x+",left="+y+",width=200,height=200");
}
}
</script>
<input type="button" value="Open Windows" onclick="openwin()">
</body>
</html>

Q Creating a web page in new window.


-->
- The HTML document can be created by using document.write() method.
- We have to write content of webpage with the help of html elements such as
<head>, <body>,<title>, <h1> and so on.
Syntax:
windowname.document.writeln("<html content>");

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Webpage in New Window</title>
</head>
<body>
<script>
function openwin(){
var n = window.open("", "ns", "width=400,height=400");
n.document.open();
n.document.writeln("<html>");
n.document.writeln("<head>");
n.document.writeln("<title>Webpage in New Window</title>");
n.document.writeln("</head>");
n.document.writeln("<body>");
n.document.writeln("<h1>This is a new window</h1>");
n.document.writeln("<p>This is a new window</p>");
n.document.writeln("</body>");
n.document.writeln("</html>");
n.document.close();
n.focus();
}
</script>
Click the button to view the new webpage.
<input type="button" value="Open New Webpage" onclick="openwin()">
</body>
</html>

Q Javascript in URL
- Javascript code can be included on the client side in a URL by following way:
javascript pseudo-protocol specifier.
- "javascript" prefix in a url tells the browser to execute code as javascript
rather than attempt to navigate to it as a web address.
- The special protocol type specifies that the body of URL is arbitrary javascript
code to be interpreted by javascript interpreter.
Ex: javascript:alert(1)
- If the javascript code in URL contains multiple statements, then each statement
should be separated by semicolons.
Ex: javascript:var t = new Date(); "The time is: "+t;
- Most web browsers don't allow javascript code in url due to security reasons.

Q Javascript Timers
-->
The window object allows the execution of code at specified time intervals.
These time intervals are called timing events.
The two methods supported for handling timing events are:
- setTimeout()
- setInterval()

setTimeout()
- The setTimeout() method executes a block of code after the specified time.
- The method executes the code only once.
- The setTimeout() method returns an interval ID, which is a positive integer.
Syntax:
setTimeout(function, milliseconds);
function- a function containing a block of code.
milliseconds- the time after which the function is executed.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>SetTimeout() </title>
</head>
<body>
<script>
function greet(){
document.write("Hello World");
}
setTimeout(greet,3000);
document.write("This will be executed first");
</script>
</body>
</html>

setInterval()
- This method is used to execute a function at a regular interval.
- It executes function after every given time interval.
Syntax:
setTimeout(function, milliseconds);
function- a function containing a block of code.
milliseconds- length of interval between each execution.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>SetInterval() </title>
</head>
<body>
<script>
function greet(){
document.write("Hello World");
}
setInterval(greet,3000);
document.write("This will be executed first");
</script>
</body>
</html>

clearTimeout()
- This method is used to clear the timeout set in script.
Syntax:
clearTimeout(obj)
obj: It is timer object.

Ex:
<!DOCTYPE html>
<html>
<head>
<title> clearTimeout() </title>
</head>
<body>
<script>
function greet(){
document.write("Hello World");
}
function star(){
setTimeout(greet,3000);}
function stop(){
clearTimeout(obj);}
</script>
<input type="button" value="Starting Timeout" onclick="star()">
<input type="button" value="Stoping Timeout" onclick="stop()">
</body>
</html>

clearInterval()
- This method is used to clear the Interval set in script.
Syntax:
clearInterval(obj)
obj: It is timer object.

Ex:
<!DOCTYPE html>
<html>
<head>
<title> clearInterval() </title>
</head>
<body>
<script>
function greet(){
document.getElementById("sd").innerHTML+="Hello World<br>";
}
function star(){
obj= setInterval(greet,300);}
function stop(){
clearInterval(obj);}
</script>
<input type="button" value="Starting Interval" onclick="star()">
<input type="button" value="Stoping Interval" onclick="stop()">
<p id="sd"></p>
</body>
</html>

Q Describe the navigator object in JavaScript. Describe the methods of navigator


object which is used to display browser name and version.
-->

 Navigator object is a representation of user’s browser.


 Navigator is an object of window.
 Methods of navigator object- Only one method is supported by Navigator Object.

i) javaEnabled()- returns true if the browser has java enabled.


• We use appName to display browser name. appName is a property of navigator.
• appName property returns browser name.
• We use appVersion to display browser version. appVersion is a property of
navigator.
• appVersion property returns browser version.
• Example:-
<html>
<body>
<script>
document.write(“Browser name: “+navigator.appName); document.write(“Browser
Version: “+navigator.appVersion);
</script>
</body>
</html>

Window Object Properties


-->
Property Description
Document It returns the document object for the window (DOM).
Closed It returns the Boolean value indicating whether a window has been
closed or not.
History It returns the history object for the window.
Length It returns the number of frames in a window.
Location It returns the location object for the window.
Name It sets or returns the name of a window.
Navigator It returns the navigator object for the window.
Parent It returns the parent window of the current window.
Screen It returns the screen object for the window.
screenX It returns the X coordinate of the window relative to the screen.
screenY It returns the Y coordinate of the window relative to the screen.
Self It returns the current window.
Status It sets the text in the status bar of a window.
Top It returns the topmost browser window that contains frames.

Browser location and history


-->
Location object
1. The location object is part of window object and is accessed through the
window.location property.
2. In JavaScript, the window.location object represents the current URL of the
browser window. It provides properties and methods to manipulate the URL.
3. The location object is automatically created by the JavaScript run-time engine
and contains information about the current URL.
Syntax:window.location(url);
window.location.href: Returns the complete URL of the current page.
window.location.pathname: Returns the path and filename of the current
page.
window.location.protocol: Returns the protocol of a url.
window.location.port: Returns the port number the server uses for
URL.
window.location.assign(url): Loads the specified URL.
window.location.reload(forceReload): Reloads the current page.
Example:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<hr>Pathname: " + location.pathname);
</script>
</body>
</html>

History object
1. The history object is part of the Window object and is accessed through the
window.history property.
2. The history object contains the URLs visited by the user within a browser
window.
3. The window .history object can be written without the window prefix.
4. The history object is created by the javascript runtime engine and consists of
an array of URLs. These URLs are URLs the user has visited within a browser window.
5. To protect the privacy of the users, there are limitations to how JavaScript can
access the object.
history.length – Returns the number of URLs in the history list.
history.current - It returns the current document url.
history.next - Returns the url of next document in history object.
history.previous - Returns the url of last document in the history object.
history.back() – same as clicking back in the browser.
history.forward() – same as clicking forward in the browser.
Example:
history.html
<!DOCTYPE html>
<html>
<head>
<title>History Object Example</title>
</head>
<body>
<h1>Home Page</h1>
<a href="history1.html">Go to Page 1</a>
<br><br>
<script>
document.write("History Length: " + history.length + "<br>");
document.write("<button onclick='history.back()'>Back</button> ");
document.write("<button onclick='history.forward()'>Forward</button>");
</script>
</body>
</html>

history1.html
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>Page 1</h1>
<a href="history2.html">Go to Page 2</a>
<br><br>
<script>
document.write("History Length: " + history.length + "<br>");
document.write("<button onclick='history.back()'>Back</button> ");
document.write("<button onclick='history.forward()'>Forward</button>");
</script>
</body>
</html>

You might also like