�ݺ�ߣ

Program 6:
<html>
<head>
<script>
function validate() {
var name =
document.forms.RegForm.Name.value;
var email =
document.forms.RegForm.EMail.value;
var phone =
document.forms.RegForm.Telephone.value;
var what =
document.forms.RegForm.Subject.value;
var password =
document.forms.RegForm.Password.value;
var address =
document.forms.RegForm.Address.value;
var regEmail=/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g;
//Javascript reGex for Email Validation.
var regPhone=/^d{10}$/; // Javascript reGex for
Phone Number validation.
var regName = /d+$/g; // Javascript reGex for Name
validation
if (name == "" || regName.test(name)) {
window.alert("Please enter your name properly.");
name.focus();
return false;
}

if (address == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email == "" || !regEmail.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (password == "") {
alert("Please enter your password");
password.focus();
return false;
}
if(password.length <6){
alert("Password should be atleast 6 character long");
password.focus();
return false;
}
if (phone == "" || !regPhone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (what.selectedIndex == -1) {

alert("Please enter your course.");
what.focus();
return false;
}
alert("You are valid user");
return true;
}
</script>
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" onsubmit="return validate()" method="post">
<p>Name: <input type="text" size="65" name="Name" /></p>

<br />
<p>Address: <input type="text" size="65" name="Address" />
</p>
<br />
<p>E-mail Address: <input type="text" size="65" name="EMail" /></p>
<br />
<p>Password: <input type="text" size="65" name="Password" /></p>
<br />
<p>Telephone: <input type="text" size="65" name="Telephone" /></p>
<br />
<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
</select>
</p>

<br />
<br />
<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
<p>
<input type="submit" value="send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
</body>
</html>
Description 6:
Regular expressions are patterns used to match character combinations in
strings. In JavaScript, regular expressions are also objects. These patterns are used
with the exec() and test() methods of RegExp, and with
the match(), matchAll(), replace(), replaceAll(), search(), and split() methods
of String. This chapter describes JavaScript regular expressions.
A regular expression pattern is composed of simple characters, such as /abc/,
or a combination of simple and special characters, such as /ab*c/ or /Chapter
(d+).d*/. The last example includes parentheses, which are used as a memory
device. The match made with this part of the pattern is remembered for later use, as
described in Using groups.

function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]]/g, "$&"); // $& means the whole
matched string
}

Description 7a:
Javascript getElementById description:
The Document method getElementById() returns an Element object representing the
element whose id property matches the specified string. Since element IDs are
required to be unique if specified, they're a useful way to get access to a specific
element quickly.
If you need to get access to an element which doesn't have an ID, you can
use querySelector() to find the element using any selector.
Syntax
getElementById(id)
Parameters
id

The ID of the element to locate. The ID is case-sensitive string which is unique
within the document; only one element may have any given ID.
Return value
An Element object describing the DOM element object matching the specified ID,
or null if no matching element was found in the document.
Examples
HTML
<html lang="en">
<head>
<title>getElementById example</title>
</head>
<body>
<p id="para">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
JavaScript
function changeColor(newColor) {
const elem = document.getElementById('para');
elem.style.color = newColor;
}

Description: 7b:
A function is a set of statements that take inputs, do some specific computation,
and produce output. The idea is to put some commonly or repeatedly done tasks
together and make a function so that instead of writing the same code again and
again for different inputs, we can call that function.
Example: A basic javascript function, here we create a function that divides the 1st
element by the second element.
A function definition is sometimes also termed a function declaration or function
statement. Below are the rules for creating a function in JavaScript:
 Every function should begin with the keyword function followed by,
 A user-defined function name that should be unique,
 A list of parameters enclosed within parentheses and separated by
commas,
 A list of statements composing the body of the function enclosed within
curly braces {}.
Example:
function calcAddition(number1, number2)
{
return number1 + number2;
}
console.log(calcAddition(6,9));
Program 8a:
The onclick event executes a certain functionality when a button is clicked. This
could be when a user submits a form, when you change certain content on the web
page, and other things like that.
Syntax:
<element onclick="functionToExecute()">Click</element>
Example
<button onclick="functionToExecute()">Click</button>

<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor('blue')" class="blue">Blue</button>
<button onclick="changeColor('green')" class="green">Green</button>
<button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>
addEventListener
It is possible to add event listener to element in Javascript. addEventListener
function will take two arguments, namely type of event and name of the function.
Example:
element.addEventListener("type-of-event", functionToExecute)
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
Program 8b:
Math class in Javascript
Math is a built-in object that has properties and methods for mathematical
constants and functions. It's not a function object. Math works with the Number
type. It doesn't work with BigInt.
Math is not a constructor. All properties and methods of Math are static. You refer to
the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is
the method's argument. Constants are defined with the full precision of real
numbers in JavaScript.
Math.floor()

Returns the largest integer less than or equal to x.
Eg:
function random(min, max) {
const num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
}
random(1, 10);
Program 9a:
<html>
<head>
<title>Welcome To Login Form</title>
<script>
function login()
{
var uname = document.getElementById("email").value;
var pwd = document.getElementById("pwd1").value;
var filter = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g;
if(uname =='' || !filter.test(uname))
{
alert("please enter valid email id.");
}
else if(pwd=='')
{
alert("enter the password");
}
else if(pwd.length < 6 || pwd.length > 6)
{
alert("Password min and max length is 6.");
}

else
{
alert('Thank You for Login & Welcome to our Website');
}
}
function clearFunc()
{
document.getElementById("email").value="";
document.getElementById("pwd1").value="";
}
</script>
</head>
<body>
<h2>Welcome To My Account Login</h2>
<div align="center">
<label>Enter User Name :</label>
<input type="text" placeholder="Enter user name here" id="email" />
</div>
<label>Enter Password :</label>
<input type="password" placeholder="Enter Password here" id="pwd1" />
</div>
<input type="submit" value="Reset" onclick="clearFunc()" class="btn" />
<input type="submit" value="Login" onClick="login()" />
</div>
</body>

</html>
Description:
Regular expressions are patterns used to match character combinations in strings. In
JavaScript, regular expressions are also objects. These patterns are used with
the exec() and test() methods of RegExp, and with
the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String. This chapter
describes JavaScript regular expressions.
Regular expression literals provide compilation of the regular expression when the script is
loaded. If the regular expression remains constant, using this can improve performance.
Method Description
exec()
Executes a search for a match in a string. It returns an array of information or null on
a mismatch.
test() Tests for a match in a string. It returns true or false.
match()
Returns an array containing all of the matches, including capturing groups, or null if
no match is found.
matchAll() Returns an iterator containing all of the matches, including capturing groups.
search()
Tests for a match in a string. It returns the index of the match, or -1 if the search
fails.
replace()
Executes a search for a match in a string, and replaces the matched substring with a
replacement substring.
replaceAll()
Executes a search for all matches in a string, and replaces the matched substrings
with a replacement substring.
split()
Uses a regular expression or a fixed string to break a string into an array of
substrings.
Program 9b:
The window object represents an open window in a browser. If a document contain
frames (<iframe> tags), the browser creates one window object for the HTML document, and
one additional window object for each frame.
Method Description
addEventListener() Attaches an event handler to the window
alert() Displays an alert box with a message and an OK
button
close() Closes the current window

confirm() Displays a dialog box with a message and an OK
and a Cancel button
focus() Sets focus to the current window
moveBy() Moves a window relative to its current position
moveTo() Moves a window to the specified position
open() Opens a new browser window
print() Prints the content of the current window
prompt() Displays a dialog box that prompts the visitor for
input
resizeBy() Resizes the window by the specified pixels
resizeTo() Resizes the window to the specified width and
height
scrollBy() Scrolls the document by the specified number of
pixels
scrollTo() Scrolls the document to the specified coordinates
setInterval() Calls a function or evaluates an expression at
specified intervals (in milliseconds)
setTimeout() Calls a function or evaluates an expression after
a specified number of milliseconds
stop() Stops the window from loading
Program 10a:
innerHTML property:
The innerHTML property can be used to write the dynamic html on the html
document. To set the value of innerHTML property, you use this syntax:
element.innerHTML = newHTML; The setting will replace the existing content of an
element with the new content.
It is used mostly in the web pages to generate the dynamic html such as registration
form, comment form, links etc.

Eg:
<script type="text/javascript" >
function showcommentform() {
var data="Name:<input type='text' name='name'><br>Comment:<br><textarea r
ows='5' cols='80'></textarea>
<br><input type='submit' value='Post Comment'>";
document.getElementById('mylocation').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
Program 10b:
The date picker in HTML is used to create an interactive input (a dropdown) which
is used to select a date instead of typing it manually. The date picker in HTML is
created using the <input> element of type=”date”, this creates an input field in the
HTML document, which allows us to type the date manually and it will validate the
input or we can enter using the date picker interface.
Note 1: Using the <input type=”date”> will only select a date, month, and year, but
if we want to enter the time also then we can use <input type=”datetime-local”> this
will allow us to select the time also.
Note 2: The displayed date format in the date picker dropdown depends on the
browser of the user, but the value is always formatted like yyyy-mm-dd format.

Program 10c:
The MouseEvent interface represents events that occur due to the user interacting with
a pointing device (such as a mouse). Common events using this interface
include click, dblclick, mouseup, mousedown.
MouseEvent derives from UIEvent, which in turn derives from Event. Though
the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of
a MouseEvent object should be done using the MouseEvent() constructor.
Program 11:

�ݺ�ߣ

WD programs descriptions.docx

More Related Content

WD programs descriptions.docx