Scribd
Upload
2 views

Cheatsheet_CSS

The document contains various HTML and JavaScript examples demonstrating form creation, regular expressions, and user interaction through dropdowns, radio buttons, and image rollovers. It includes scripts for validating user input, computing averages, and creating dynamic content like slideshows and rotating banners. Additionally, it covers regular expressions for pattern matching and string manipulation in JavaScript.

Uploaded by

nehachavan5505
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Cheatsheet_CSS

The document contains various HTML and JavaScript examples demonstrating form creation, regular expressions, and user interaction through dropdowns, radio buttons, and image rollovers. It includes scripts for validating user input, computing averages, and creating dynamic content like slideshows and rotating banners. Additionally, it covers regular expressions for pattern matching and string manipulation in JavaScript.

Uploaded by

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

Pull-down Menu:<html><head><title>HTML Form</title><script language=”javascript” type=”text/javascript”>Function Quantifiers: The frequency or position of bracketed character sequences and single characters

nd single characters can be denoted by a special


getPage(choice){page=choice.options[choice.selectedIndex].value;if(page!=””){window.location=page;}}</script></head>< character. Each special character has a specific connotation. The +, *, ?, and $ flags all follow a character sequence.Expressio
body><form name=”myform” action=”” method=”post”> Select Your Favourite Website: <select name=”MenuChoice” n & Description:1) p+: It matches any string containing one or more p's.2) p*: It matches any string containing zero or more
onchange=”getPage(this)”><option value=”select any option”>Select</option><option value=”https://www.google.com”> p's.3) p?: It matches any string containing at most one p.(zero or one occurrences).4) p{N}: It matches any string containing a
Google</option><option value=”https://www.msbte.org.in”>MSBTE</option><option value=”https://www.yahoo.com”> sequence of N p's.5) p{N,M}: It matches any string containing a sequence of N or M p's.6)p{N, }:It matches any string conta
Yahoo</option></form></body></html> ining a sequence of at least N p's.7)p$:It matches any string with p at the end of it. Example:<html><body><button onclick=
"myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var str = "100, 1000 or 10000?"; var
HTML script to display structure:<html><head><style>table,tr,td{border:solid black 1px; border- patt1 = /\d{3,4}/g;var result = str.match(patt1); document.getElementById("demo").innerHTML = result;}</script></body>
collapse:collapse;}td{padding:10px;}</style></head><body><table><tbody><tr><td> Name: </td><td><input type=”text”
id=”name” required></td></tr><tr><td>Email:</td><td><input type=”email” id=”email” required></td></tr><tr><td>Pin Replace:<script>var myStr=‘I will fail’;var newStr=myStr.replace(fail,"pass");document.write(newStr);</script>
code:</td><td><input type=”number” id=”pin” required></td></tr><tr><td></td><td><button onclick=”submit()”>Submit
</button></td></tr></tbody></table></body><script> function submit(){ var name=document.getElementById(“name”)
.value; var email=document.getElementById(“email”).value; var pin=document.getElementById(“pin”).value; if(name
.length==0||email.length==0||pin.length==0){alert(“Please enter value in all fields.”)}else{var pinpattern=/^[4]{1}[0-
9]{5}$/;if(pinpattern.test(pin)){alert(“Perfect Pin code”);}else{alert(“Wrong Pin code”);}}}</script></html>

Regular Expression:A regular expression is a pattern of characters.It is very similar to a mathematical expression, except a
Frame Structure:Step 1) Create file frame1.html <html><body><h1 align=”center”>TYIF</h1></body></html> Step 2)
Create frame2.html <html><head><title>FRAME 2</title></head><body><h1>Operating System</h1><a href=”Ch1.html regular expression tells the browser how to manipulate text rather than numbers by using special symbols as operators.A
regular expression is written in two slashes(/…/)Ex.The expression /red/ can be checked against the string, “The signal is
”target=”c”><UL>Chapter 1</UL></a><br>><a href=”Ch2.html”target=”c”><UL>Chapter 2</UL></a></body></html>
red”. If the word “red” is in the string, the match is successful.Regular expressions can be written in two ways:a)RegExp
Step 3) Create frame3.html <html><body><h1>FRAME3</h1></body></html> Step 4) Create frame_target.html
Constructor:Syntax:new RegExp(“pattern”,”modifiers”)Ex.new RegExp(“abc”,”i”) b)Regular Expression Literals:
<html><head><title>Create a Frame</title></head><frameset rows=”30%,*”border=”1”><frame src=”frame1.html”
Syntax:/pattern/modifiersEx./abc/i. Methods:1)Search() method: str.search() method takes a regular expression/pattern as
name=”a”/><frameset cols=”50%,*”border=”1”><frame src=”frame2.html” name=”b”/><frame src=”frame3.html”
name=”c”/></frameset></frameset></html> argument and search for the specified regular expression in the string. This method returns the index where the match
found.Example:<html><body><script>function myFunction(){var str = "Good Morning!";var n = str.search(/Morning/i);
document.write(n + '<br>');var n = str.search(/Morning/);document.write(n);}myFunction();</script> </body></html>2)test()
method:searches string from text that matches RegExp,if it finds a match, it returns true, otherwise it returns false.Syntax:
RegExpObject.test(String);Ex:<script>var str=”Javascript is an interesting scripting language”;var re= new RegExp(“script”
,g”);var result=re.test(str);document.write(“Test 1-returened value:”+result);re=new RegExp(“nothing”, ”g”);var result=re
.test(str);document.write(“<br>Test 2-returned value:”+result);</script>Output:Test 1-returned value:true. Test 2-returned
value:false.3)exec() method:searches string from text that matches RegExp if it finds a match, it returns an array of results,
otherwise it returns null.Syntax:RegExpObject.exec(String);Ex.<script>var str=”Javascript is an interesting scripting langua
ge”;var re=new RegExp(“script”,”g”);var result=re.exec(str);document.write(“Test 1-returened value:”+result);re=new
Rotating Banner Ads. With URL links:STEPS:1)Load banner advertisement into an array.2)Determine whether the
RegExp(“pushing”, ”g”);var result=re.exec(str);document.write(“<br>Test 2-returned value:”+result);</script>Output:Test
browser supports the image object3)Display a banner advertisement4)Pause before displaying the next banner advertisement.
1-returned value:script. Test 2-returned value:null.
Ex. <html><head><title>Link Banner Ads</title><script language="Javascript" type="text/javascript">Banners = new
Array('1.jpg','2.jpg')BannerLink = new Array('google.com/', '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()"> <imgsrc="1.jpg"width="400" height="75"
name="RotateBanner" /> </a> </center> </body> </html> substring():1)It is used to extract the specified substring within a string.2)Its parameters are the start and end position of the
substring that we want to extract.3)This method cannot handle negative indexes.4)Syntax: str.substring(start, end);substr():1)
Write a Java script program which computes, the average marks of the following students then, this average is used to It is used to extract a part of the string.2) It takes parameters as starting index of the part which we want to extract and the
determine the corresponding grade: <html><head><title>Compute the average marks and grade</title></head><body> length till which we want to extract the string part.3) This method can handle negative indexes.4)Syntax: str.substr(start, len);
<script>var students = [['Summit', 80], ['Kalpesh', 77], ['Amit', 88], ['Tejas', 93],['Abhishek', 65]]; var Avgmarks = 0; for (var Example:<script>var a="Javascript";document.write("Using substring()="+a.substring(2,6));document.write("<br>Using
i=0; i < students.length; i++) { Avgmarks += students[i][1];}var avg = (Avgmarks/students.length); document.write("Average substr()="+a.substr(2,6));</script>Output:Using substring()=vasc.Using substr()=vascri
grade: " + (Avgmarks)/students.length); document.write("<br>"); if (avg < 60){document.write("Grade : E");}else if (avg <
70){document.write("Grade : D");} else if (avg < 80){ document.write("Grade : C");} else if (avg < 90){ document.write(" Floating menu: <html><title>Example</title><style> body{background-image: url('/pix/samples/bg1.gif');}main{margin-
Grade:B"); else if (avg<100){document.write("Grade:A");}</script></body></html>Output:Average grade: 80.6 Grade : B bottom:200%;} .floating-menu {font-family: sans-serif;background:yellowgreen;padding:5px;width:130px; z-index:100;
position:fixed;}.floating-menu a,.floating-menu h3{font-size: 0.9em;display:block;margin:0 0.5em; color: white;} </style>
<main><p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p><nav
class="floating-menu"><h3>Floating Menu</h3><a href="c_sub.txt">C</a><a href="C++_sub.txt">C++</a><a
href="java_sub.txt">Java</a><a href="python_sub.txt">Python</a></nav></main>

Create a slideshow with the group of three images, also simulate next and previous transition between slides in your
Java Script: <html><head><script>pics = new Array('1.jpg' , '2.jpg' , '3.jpg');count = 0;function slideshow(status){if (
document.images){count=count+status;if (count>(pics.length-1)){count=0;}if (count<0){count=pics.length-1;}document
.imag1.src = pics[count];}}</script></head><body><img src="1.jpg" width="200" name="img1"><br><input type="button"
value="Next" onclick="slideshow(1)"><input type="button" value="Back" onclick="slideshow(-1)"></body></html>

Write a HTML script which displays 2 radio buttons to the users for fruits and vegetables and 1 option list. When user Checkbox with dropdown list:<html><body><script type="text/javascript">function modifyList(x){with(document.forms.
select fruits radio button option list should present only fruits names to the user & when user select vegetable radio myform){if(x ==1){optionList[0].text="Green Tea";optionList[0].value=1;optionList[1].text="Milk Tea ";optionList[1].value
button option list should present only vegetable names to the user: <html><head><title>HTML =2;optionList[2].text="Black Tea";optionList[2].value=3;}if(x ==2){optionList[0].text="Capaccino";optionList[0].value=1;
Form</title><script>function updateList(ElementValue){with(document.forms.myform){if(ElementValue==1){optionList[0 optionList[1].text="Latte";optionList[1].value=2;optionList[2].text="Expression";optionList[2].value=3;}if(x ==3){
].text="Mango";optionList[0].value=1;optionList[1].text="Banana";optionList[1].value=2;optionList[2].text="Apple";option optionList[0].text="MAAZA";optionList[0].value=1;optionList[1].text="SPRITE";optionList[1].value=2;optionList[2].text=
List[2].value=3;}if(ElementValue==2){optionList[0].text="Potato";optionList[0].value=1;optionList[1].text="Cabbage";opti "COKA-COLA";optionList[2].value=3;}}}</script></head><body><form name="myform" action=" " method="post">
onList[1].value=2;optionList[2].text="Onion";optionList[2].value=3;}}}</script></head><body><form name="myform" <table><tr><td>Select Beverage: </td><td><input type="checkbox" name="grp1" value=1 checked="true"onclick=
action="" method="post"> <p><select name="optionList" size="2"><option value=1>Mango<option value=2>Banana< "modifyList(this.value)">TEA<input type="checkbox" name="grp1" value=2 onclick="modifyList(this.value)">COFFEE
option value=3>Apple</select> <br> <input type="radio" name="grp1" value=1 checked="true"onclick="updateList <input type="checkbox" name="grp1" value=3 onclick="modifyList(this.value)">SOFT DRINK</td></tr></table><select
(this.value)">Fruits <input type="radio" name="grp1" value=2onclick="updateList(this.value)">Vegetables <br> <input name="optionList" size="3"><option value=1>Kiwi<option value=1>Pine-Apple<option value=1>Apple</tr></table>
name="Reset" value="Reset" type="reset"> </p></form></body></html> </select></form></body></html>

Displays names of different brands of Laptop and an image by default as: When the mouse moves over the specific
brand name the script must display the image of Laptop in the adjacent box:<html><head><title>text rollovers </title>
Write a java script that displays textboxes for accepting name & email ID & a submit button. Write java script code <script>b=new Image;r=new Image;g=new Image;if(document.images){b.src='vv.png';r.src='hp.png';g.src='dell.png';}else{
such that when the user clicks on submit button (1) Name Validation (2) Email ID Validation: b.src='';r.src='';g.src='';document.clr='';}</script></head><body><table border="0" width="100%"><tbody><tr valign="top"
<html><head><title>Form Validation</title></head><body><form action = "/cgi-bin/test.cgi" name="myForm"onsubmit ><td><H2><ul><li><a onmouseover="document.clr.src='vv.png'"><b><u>Lenovo</u></b></a></li><li><a onmouseover=
="return(validate());"><table cellspacing="2"cellpadding="2"border="1"><tr><td align="right">Name</td><td><input "document.clr.src='hp.png'"><b><u>HP</u></b></a></li><li><a onmouseover="document.clr.src='dell.png'"><b><u>
type="text"name="Name"/></td></tr><tr><td align="right">EMail</td><td><input type="text"name="EMail" /></td> DELL</u></b></a> </li></ul></H2></td><td width="50%"><a><img height="200" src="vv.png" width=400" name="clr">
</tr><tr><td align="right"></td><td><input type="submit"value="Submit"/></td></tr></table></form></body> </a></td></tr></tbody></table></body></html>
</html><script type ="text/javascript"><!--//Form validation code will come here. function validate(){if( document.myForm
.Name.value==""){alert("Please provide your name!");document.myForm.Name.focus();return false;}if( document.myForm
.EMail.value ==""){alert("Please provide your Email!");document.myForm.EMail.focus();return false;}var emailID
=document.myForm.EMail.value;atpos=emailID.indexOf("@");dotpos=emailID.lastIndexOf(".");if(atpos<1||(dotpos-atpos<2
)){alert("Please enter correct email ID")document.myForm.EMail.focus();return false;}return(true);}//--></script>

Write and explain a string functions for converting string to number and number to string:To covert string to number
we can use parseInt() which converts a string number to a integer number. Similarly we can use parseFloat(), number() for
converting string to number.Eg:var a=prompt('Enter a number');var b=parseInt(prompt('Enter a number'));document.write(
typeof a+"<br>");document.write(typeof b);To convert form number to string we can use toString() Eg:<html><body><p>
toString() returns a number as a string:</p><script>let num=12;let text= num.toString();document.write(num);</script>

First character of a string is uppercase or not: <html><body><script>function upper_case(str){ regexp = /^[A-Z]/; if


(regexp.test(str)){ document.write("String's first character is uppercase");} else{ document.write("String's first character is
not uppercase"); }}upper_case('Abcd');</script></body></html>

Function to merge two array & removes all duplicate values: <html><body><script>function merge_array(array1,array2)
{var result_array = []; var arr = array1.concat(array2); var len = arr.length; var assoc={};while(len--){ var item = arr[len];
if(!assoc[item]){ result_array.unshift(item); assoc[item] = true;}} return result_array; }var array1 = [1, 2, 3,4,7,9];var array2=
[2,30,1,40,9];document.write(merge_array(array1, array2));</script></body></html>Output:3,4,7,2,30,1,40,9
Folding tree menu:<html><head><style>ul,#myUL{list-style-type: none;}.caret::before{content: "\25B6";color:black; Cookie, Need, Characteristics of persistent cookies: Cookies are small text files that websites use to store information on a
display: inline-block; margin-right: 6px;}.caret-down::before{-ms-transform: rotate(90deg); -webkit-transform:rotate(90deg); user's computer or device. Cookies can be used for a variety of purposes, such as remembering a user's preferences, tracking
transform: rotate(90deg);}.nested{display: none;}.active { display: block;}</style></head><body><h2>Folding Tree Menu their behavior on a website, and enabling personalized advertising. There are two main types of cookies: session cookies and
</h2><p>A tree menu represents a hierarchical view of information, where each item can have a number of subitems.</p> persistent cookies. Need: Cookies are built specifically for web browsers to track, personalize and save information about
<p>Click on the arrow(s) to open or close the tree branches.</p><ul id="myUL"><li><span class="caret">India</span> <ul each user's session. A “session” is the word used to define the amount of time you spend on a site. Cookies are created to
class="nested"> <li>Karnataka</li><li>Tamilnaadu</li> <li><span class="caret">Maharashtra</span> <ul class="nested"> identify you when you visit a new website. Characteristics of persistent cookies: Persistent cookies can be used to store
<li>Mumbai</li><li>Pune</li><li><span class="caret">Navi Mumbai</span><ul class="nested"><li>Nerul</li><li>Vashi< information that needs to be accessed across multiple browsing sessions, such as login credentials and language preferences.
/li><li>Panvel</li></ul></li></ul></li></ul></li></ul> <script>var toggler = document.getElementsByClassName("caret"); Persistent cookies can be used to track a user's behavior on a website over time, which can be used to personalize the user's
var i;for (i = 0; i < toggler.length; i++){toggler[i] .addEventListener("click", function(){ this.parentElement.querySelector(" experience.Persistent cookies can be used to remember a user's preferences, such as their preferred layout or font size.
.nested").classList.toggle("active");this.classList .toggle("caret-down");});}</script></body></html> Storing Cookies:The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks
like this. document.cookie = "key1 = value1;key2 = value2;expires = date"; Here the expires attribute is optional. If you
provide this attribute with a valid date or time, then the cookie will expire on a given date or time and thereafter, the cookies'
value will not be accessible.Ex:<html><head><script type="text/javascript"><!-- function WriteCookie(){if(document
.myform.customer.value == "" ){alert("Enter some value!");return;}cookievalue = escape(document.myform.customer.value)
+ "; document.cookie="name=" + cookievalue; document.write ("Setting Cookies:"+"name="+ cookievalue );} //--></script>
</head><body><form name="myform" action="">Enter name: <input type= "text" name = "customer"/><input type = "butt
open() method: The open() method of window object is used to open a new window and loads the document specified by a on" value="Set Cookie" onclick="WriteCookie();"/></form></body></html>Reading Cookies:Reading a cookie is just as
given URL. MyWindow = window.open() The open() method returns a reference to the new window, which is assigned to the simple as writing one, because the value of the document.cookie object is the cookie. So you can use this string whenever
MyWindow variable. You then use this reference any time that you want to do something with the window while your you want to access the cookie. The document.cookie string will keep a list of name=value pairs separated by semicolons,
JavaScript runs. A window has many properties, such as its width, height, content, and name—to mention a few. You set these where name is the name of a cookie and value is its string value.Ex.<html><head> <script type = "text/javascript"><!—
attributes when you create the window by passing them as parameters to the open() method:1)The first parameter is the full function ReadCookie(){var allcookies=document.cookie; document.write ("All Cookies:"+ allcookies); cookiearray =
or relative URL of the web page that will appear in the new window.2)The second parameter is the name that you assign to allcookies.split(';'); for(var i=0; i<cookiearray.length; i++){name = cookiearray[i].split('=')[0];value = cookiearray[i].split('=')
the window.3)The third parameter is a string that contains the style of the window. We want to open a new window that has a [1];document.write ("Key is:"+ name +"and Value is:"+value);}} //--></script></head><body><form name = "myform"
height and a width of 250 pixels and displays an advertisement that is an image. All other styles are turned off. Syntax: action = ""><p> click the following button and see the result:</p><input type = "button" value = "Get Cookie" onclick
MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0, location=0, menubar=0, directories=0, ="ReadCookie()"/></form></body></html>
resizable=0, height=250, width=250') Ex:<html><head><title>Open New Window</title><script>function OpenNew
Window(){MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0,location=0,menubar=0, direct
ories=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>
Open new window when the user will clicks on the button: <html><body><button onclick="openWin()">Open "New
Window"</button><script>var myWindow;function openWin() {myWindow = window.open("", "myWindow", "width=
400,height=400"); myWindow.document.write("<p>Hello Everyone.Welcome to new window.</p>"); }</script></body> Frameworks of JavaScript: 1)ReactJs: React is based on a reusable component. Simply put, these are code blocks that can
be classified as either classes or functions. Each component represents a specific part of a page, such as a logo, a button, or an
input box. The parameters they use are called props, which stands for properties. Applications: React is a JavaScript library
developed by Facebook which, among other things, was used to build Instagram.com.2) Angular: Google operates this
framework and is designed to use it to develop a Single Page Application (SPA). This development framework is known
primarily because it gives developers the best conditions to combine JavaScript with HTML and CSS. Google operates this
framework and is designed to use it to develop a Single Page Application (SPA). This development framework is known
primarily because it gives developers the best conditions to combine JavaScript with HTML and CSS. Applications:
Microsoft Office ,Gmail, Forbes, PayPal, Grasshopper, Samsung, Delta.3) Node.js: Node.js is an open-source, server-side
Display dropdown list containing options such as Red, Green, Blue and Yellow. Write a JavaScript program such that platform built on the Google Chrome JavaScript Engine. Node.js is an asynchronous, single-threaded, non-blocking I/O
when the user selects any options. It will change the background colour of webpage: <html><body><label for="color"> model that makes it lightweight and efficient. Applications: Paypal, LinkedIn, Yahoo, Mozilla, Netflix, Uber, Groupon,
Choose a Background Color:</label><select name="color"id="color"class="color" onchange="changeColor()"><option val GoDaddy, eBay
ue="red">Red</option><option value="green">Green</option><option value="blue">Blue</option><option value="yellow
">Yellow</option></select><script type="text/javascript">function changeColor(){var color=document.getElementById(" Remove the duplicate element from an array:<script>let arr = ["scale", "happy", "strength", "peace", "happy", "happy"];
color").value;switch(color){case"green":document.body.style.backgroundColor="green";break;case"red":document.body.styl function removeDuplicates(arr){let unique=[]; for(i = 0; i < arr.length; i++){if(unique.indexOf(arr[i]) === -1){
e.backgroundColor="red";break;case"blue":document.body.style.backgroundColor="blue";break;case"yellow":document.bod unique.push(arr[i]);}}return unique;} document.write(removeDuplicates(arr));</script>
y.style.backgroundColor="yellow";break;default:document.body.style.backgroundColor="white";break;}}</script></body>

<firstname@domain>: <html><head> <script>function myemail(){ var s1 = document.getElementById("first").value; var


s2 = document.getElementById("domain").value; var s3=s1+"@"+s2; document.getElementById("email").innerHTML =
s3;}</script></head><body><p>First Name:<input id="first"></p><p>Domain Name: <input id="domain"></p><button
onclick="myemail()">create email id</button><br> Email ID is<p id="email"> </p></body></html>

Link banner advertisement to URL: The banner advertisement is the hallmark of every commercial web page. It is
typically positioned near the top of the web page, and its purpose is to get the visitor's attention by doing all sorts of clever
things. To get additional information, the visitor is expected to click the banner so that a new web page opens. You can link a
banner advertisement to a web page by inserting a hyperlink into your web page that calls a JavaScript function rather than
the URL of a web page. The JavaScript then determines the URL that is associated with the current banner and loads the web
page that is associated with the URL.Example:<html><head><title>Link Banner Ads</title><script language="Javascript"
Rollover means a webpage changes when the user moves his or her mouse over an object on the page. It is often used in type="text/javascript">Banners = new Array('1.jpg','2.jpg','3.jpg')BannerLink = new Array('google.com/','vpt.edu.in/', 'msbte.
advertising. There are two ways to create rollover, using plain HTML or using a mixture of JavaScript and HTML. We will org.in/');CurrentBanner = 0;NumOfBanners = Banners.length;function LinkBanner(){document.location.href ="http://www."
demonstrate the creation of rollovers using both methods. The keyword that is used to create rollover is the <onmouseover> + BannerLink[CurrentBanner];}function DisplayBanners(){if(document.images) {CurrentBanner++;if (CurrentBanner ==
event.Ex. we want to create a rollover text that appears in a text area. The text “What is rollover?” appears when the user NumOfBanners){CurrentBanner = 0}document.RotateBanner.src= Banners[CurrentBanner]setTimeout("DisplayBanners()",
place his or her mouse over the text area and the rollover text changes to “Rollover means a webpage changes when the user 1000)}}</script></head><body onload="DisplayBanners()"><center><a href="javascript: LinkBanner()"><img src="1.jpg"
moves his or her mouse over an object on the page” when the user moves his or her mouse away from the text area.Code: width="400" height="75" name="RotateBanner" /></a></center></body></html>
(TEXT Rollover)<body><textarea rows="2" cols="50" name="rollovertext" onmouseover="this.value='Rollover means a
webpage changes when the user moves his or her mouse over an object on the page'" onmouseout="this.value='What is Display current date in DD/MM/YYYY format: <script>var d=new Date(); var currentDate=d.getDate()+'/'+(d.getMonth
Rollover?'"></textarea></body> (IMAGE Rollover)<body><img src="blue.png" name="image1" onmouseover="this.src ()+1)+'/'+d.getFullYear(); document.write(currentDate);</script>
='car.jpg'"onmouseout="this.src='blue.png'"></body>

Form Events:1)onfocus:When the user focuses on an element 2)onsubmit:When the user submits the form 3)onblur: When
the focus is away from a form element (The onblur event occurs when an object loses focus.) 4)onchange: When the user
modifies or changes the value of a form element.5)keydown:The event occurs when the user is pressing a key.6)keypress: Navigator object and method of navigator object which is used to display browser name and version:Navigator object
The event occurs when the user presses a key.7)keyup:The event occurs when the user releases a key.8)onclick: Fires on a is a representation of user’s browser.Navigator is an object of window. Methods - Only one method is supported by
mouse click on the element.9)ondblclick: Fires on a mouse double-click on the element.10)onmousedown: Fires when a Navigator Object.i) javaEnabled()- returns true if the browser has java enabled.•We use appName to display browser name.
mouse button is pressed down on an element. 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:<script>document.write(“
Browser name:“+navigator.appName);document.write(“Browser Version: “+navigator.appVersion);</script>
Crawling Status bar Message:<html><head><title>Scrolling Text</title><script language="JavaScript">var scrollPos =
0;var maxScroll = 100;var blanks = "";function scrollText(text, milliseconds){window.setInterval("displayText('"+text+"')",
milliseconds);}function displayText(text){window.defaultStatus = blanks+text;++scrollPos;blanks += " ";if(scrollPos > for-in loop: Syntax: For(x in object){//code to be executed}For-in loop is used to loop through the properties of an
maxScroll){scrollPos = 0;blanks = "";}}</script></head><body onload="scrollText(‘Welcome to the Mystic World of object.In syntax, variable represents the property name, and object is the object being iterated.It's handy for tasks like
JavaScript".’, 300)"><p>Watch the text scroll at the bottom of this window!</p></body></html> accessing or manipulating object properties.Example: <script>var car={Brand:‘Toyota’,Model:‘Camry’,Year:2022};
For(key in car){document.write(‘${key}: ${car[key]}’);}</script>

Protecting Web Page: As already we have seen security concerns of javascript & we are aware that anyone with a little
computer knowledge can use a few mouse clicks to display your HTML code, including your javascript code on the screen.
Although you cannot entirely prevent visitors to view our web page, but can take a few steps to stop all but the best computer
wizards from gaining access to your javascript.Ways of protecting:1)Hiding your source code.2)Disabling the right MouseB
utton.3)Hiding javascript.4)Concealing e-mail address.Hiding Javascript:You can hide your JavaScript from a visitor by stor
ing it in an external file on your web server. The external file should have the .js file extension. The browser then calls the ext
ernal file 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. CODE:webpage.html
<html><head><script src="mycode.js" languages="javascript" type="text/javascript"></script> <body><h3> Right Click on
screen, Context Menu is disabled</h3></body></html> mycode.js window.onload=function(){ document.addEventListener
("contextmenu", function(e){e.preventDefault();}, false);}

5 elements of array in sorted order:<script>var arr1 = [ “Red”, “red”, “Blue”, “Green”];document.write(“Before sorting
arra1=” + arr1);document.write(“<br>After sorting arra1=” + arr1.sort());</script>

You might also like