Scribd
Upload
4 views

JavaScript Language by VJTech Academy_removed (1)

The document provides comprehensive notes on JavaScript, focusing on event handling, form events, menus, and web page protection. It includes examples of creating status bars, banners, slideshows, and dynamic menus, along with their respective JavaScript code snippets. Additionally, it outlines the functionality and implementation of various web elements to enhance user interaction and experience on web pages.

Uploaded by

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

JavaScript Language by VJTech Academy_removed (1)

The document provides comprehensive notes on JavaScript, focusing on event handling, form events, menus, and web page protection. It includes examples of creating status bars, banners, slideshows, and dynamic menus, along with their respective JavaScript code snippets. Additionally, it outlines the functionality and implementation of various web elements to enhance user interaction and experience on web pages.

Uploaded by

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

VJ TECH ACADEMY – JAVASCRIPT NOTES

 Form Event [ EventHandling ] :

- In JavaScript, functions are normally not called directly from the top level of JavaScript
program.
- Functions are called in response to various user action, such as clicking a button, move
mouse over the elements, etc.

 Events
- JavaScript code is executed on web page thorugh event.
- Events means action performed by the user.
- JavaScript enabled web pages are event driven. Events are actions that occur on the
webpage.
- Events are signals generated when specific action occurs.
- Events that might occur are due to following reasons:
1) A document loading
2) The user clicking mouse button.
3) The browser screen changing size. etc.

 Form Events

Event Description
Occurs when a form is submitted, either by clicking a submit button
submit
or pressing Enter.
reset Occurs when a form is reset using a reset button.
Occurs when the value of a form element (input, select, etc.)
change
changes and loses focus.
input Occurs when the value of an input element changes.
Occurs when an element gains focus, such as when a user clicks or
focus
tabs into an input field.
Occurs when an element loses focus, such as when a user clicks
blur
outside an input field.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 13


VJ TECH ACADEMY – JAVASCRIPT NOTES

UNIT 6 – Menus, Navigation and Web-page Protection

6.1 Status bar – build a static message, changing the message using rollover,
moving the message along the status bar.
6.2 Banner – loading and displaying banner advertisement. Linking a banner
advertisement to URL.
6.3 Slide Show – Create a slide show
6.4 Menus – Creating a pulldown menu, dynamically changing a menu,
validating menu selection, Floating menu, folding, chain select menu, tab
menu, pop-up menu, sliding menu, highlighted menu, folding a tree menu,
context menu, scrollable menu, sidebar menu.
6.5 Protecting Web Page – Hiding your code, disabling the right mouse button,
JavaScript, concealing email address.
6.6 Frameworks of JavaScript and Its applications.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 2


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Status Bar :

- The JavaScript status bar is a thin horizontal bar at the bottom of the browser window that
can be used to display information to the user.
- It is typically used to display the status of a loading page, the filename of a linked file, or the
coordinates of the mouse cursor.
- The status
us bar is accessed through the window.status property.
- To set the text in the status bar, simply assign a string to the window.status property.
- For example, the following code will set the text in the status bar to “Done”.
window.status = "Done";

- However,
ever, it's important to note that modern web browsers have limited the ability to interact
with or modify the status bar for security and usability reasons.

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 3
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Examples :

1. Display/Creating Static Message :


- The content of the status bar is the value of the window object's status property.
- To display a message on the status bar, you'll need to assign the message to the status
property of the window object.
<html>
<head>
<script language="javascript" type="text/javascript">
function display() {
window.status = "Welcome to status bar, This is static message";
}
</script>
</head>
<body>
<input type="button" name="b1" value="Status Bar" onclick="display()" />
</body>
</html>

2. Changing The Message On Rollover :

<html>
<head>
<title>Changing Status Bar On Rollover</title>
</head>
<body>
<h1>Change status message using rollover</h1>
<a onmouseover="window.status='welcome to status bar..This is C Lang'">
<h2>C Language</h2>
</a>
<a onmouseover="window.status='welcome to status bar..This is C++ Lang'">
<h2>C++ Language</h2>
</a>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 4


VJ TECH ACADEMY – JAVASCRIPT NOTES

3. Moving The Message Along With The Status Bar :

<html>
<head>
<script language="javascript" type="text/javascript">
var scrollpos = 0;
var maxscroll = 100;
var blanks = "";
function scrollText(text) {
window.setInterval(displayText(text), 500);
}
function displayText(text) {
window.status = blanks + text;
++scrollpos;
blanks += " ";
if (scrollpos > maxscroll) {
101 > 100;
scrollpos = 0;
blanks = "";
}
}
</script>
</head>
<body>
<input type="button" name="b1" value="Status Bar"
onclick="scrollText('Welcome to status bar')"/>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 5


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Banner :

- A rectangular area in webpage where images is placed for advertisement purpose is known
as Banner.
- Banner can be placed anywhere in the webpage, horizontally on top and bottom or vertically
at right and left side of the webpage.
- Too load and display the banner advertisement, we placed an image is advertisement of
particular advertiser.
- We can also provide the link to that image.
- When image is clicked it will go to the advertiser's website.
- Nearly all banner
nner advertisements are in a ffile
le format such as a GIF, JPG, TIFF,
T or other
common graphic file formats.
- Some are animated GIFs, which is a series of images contained in one file that rotate
automatically on the screen.

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 6
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Banner Creation Steps :

Step 1: Create your banner poster in any file format such as “JPG, JPEG, GIF, etc.

Step 2: Create an <img> element in your web page with the height and width necessary to
display the banner advertisement.

Step 3: Add JavaScript code if you want to change banner dynamic etc.

 Examples :
1. Simple Banner Example
<html>
<head>
<title>Banner Demo</title>
</head>
<body>
<center>
<h2>This Is A Banner</h2>
<img src="./Banner1.jpg" alt="Banner" width="70%" />
</center>
</body>
</html>

 Output :

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 7
VJ TECH ACADEMY – JAVASCRIPT NOTES

2. Linking a banner advertisement


vertisement URL.
<html>
<head>
<title>Banner Link</title>
</head>
<body>
<center>
<h2>Click On Banner To Visit</h2>
<a href="https://www.vjtechacademy.in">
<img src="./Banner1.jpg" alt="Banner" width="70%" />
</a>
</center>
</body>
</html>

 Output :

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 8
VJ TECH ACADEMY – JAVASCRIPT NOTES

3. To create a program contain multiple banners in one template (Array Of Banner )


<html>
<head>
<title>Array of Banners</title>
</head>
<body>
<img src="Banner1.jpg" width="50%" id="image1" />
<br /><br />
<button onclick="display()">Display Banners</button>
<script type="text/javascript">
var banner_array = new Array("banner1.png", "banner2.png", "banner3.png",
"banner4.png", "banner5.png", "banner6.png");
var timerID = null;
var i = 0;
function display() {
if (timerID == null) {
timerID = setInterval("display_banner()", 1000);
}
}
function display_banner() {
if (i < banner_array.length) {
document.getElementById("image1").src = banner_array[i];
i = i + 1;
} else {
clearInterval(timerID);
}
}
</script>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 9


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Explanation: Steps:
1. Create an array of banner images.
2. Create a variable timerID and initialize it to null.
3. Create a variable i and initialize it to 0.
4. Create a function display() to display the banner images.
5. Check if the timerID is null.
6. If the timerID is null, then set the timerID to setInterval() function.
7. Create a function display_banner() to display the banner images.
8. Check if the value of ‘i’ is less than the length of the banner_array.
9. If the value of i is less than the length of the banner_array, then set the src attribute of the
image to the banner_array[i].
10. Increment the value of i by 1.
11. Else, clear the timerID using clearInterval() function.

 Output: When the Display Banners button is clicked, the banner images are displayed
one after the other.

 Task For Students: Using given program add links to all separate banners.
Hint : add images inside the anchor tag and array of links, at iteration time change the “href” and
“src” of anchor and image.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 10


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Slide Show :
- A slideshow is similar in concept to a banner advertisement in that a slideshow rotates
multiple images on the web page. However, unlike a banner advertisement.
- A slideshow gives the visitor the ability to change the image that's displayed: the visitor can
click the Forward button to see the next image and the Back button to see the previous
image.
- Simple SlideShow Example

<html>
<head><title>SlideShow Example</title></head>
<body>
<center>
<img src="banner1.png" width="500" height="300" id="image1" />
<br /><br /><br /><br />
<input type="button" value="Previous" onclick="SlideShow(-1)" />
<input type="button" value="Next" onclick="SlideShow(1)" />
</center>
<script language="javascript" type="text/javascript">
var banner_array = new Array("banner1.png","banner2.png",
"banner3.png","banner4.png","banner5.png" );
var i = 0;
function SlideShow(status) {
i = i + status;
if (i < 0) {
i = banner_array.length - 1;
}
if (i > banner_array.length - 1) {
i = 0;
}
document.getElementById("image1").src = banner_array[i];
}
</script>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 11


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Output:

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 12
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Menus :
- A menu is a graphical user interface element that allows users to make selections from a list
of options. It's a common UI component in web forms and navigation systems.
- Creating A Simple Menu: The <select> tag in HTML is used to create a menu.
- It's typically accompanied by <option> elements to define the menu items.
- The user selects one option from the list.
<select id="myMenu">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

 Working Of JavaScript With Menu :


- JavaScript is often used to enhance the functionality of HTML menus. Here are key points:
 Accessing the Menu: You can access the menu using JavaScript by referencing its ID or
other attributes.
 Event Handling: JavaScript is used to handle user interactions with the menu, such as
when the user selects an option.
 Dynamically Populating Menus: JavaScript can dynamically populate menu options
based on data from APIs, databases, or user inputs. You can use the DOM (Document
Object Model) to add, remove, or modify options as needed.
 Validating User Selections: JavaScript can be employed to validate user selections in
the menu, ensuring that the selected value is appropriate before processing it further.
- JavaScript can be used to improve the user experience by adding interactivity, animations,
and conditional logic to menus. For example, you can show/hide menu options based on user
actions or provide feedback when a selection is made.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 13


VJ TECH ACADEMY – JAVASCRIPT NOTES

- Here, There are different types of menus are there that are given below :
 Pull-Down Menu :
- A "pull-down menu" typically refers to a dropdown menu or select menu in web
development.
- It is a common user interface element used for presenting a list of options from which users
can make a selection.
- Example :
<html>
<head>
<title>Pull Down Menu Example</title>
</head>
<body>
<center>
<h1>Pull-Down-Menu</h1>
<h1>Select Favorite Programming Language</h1>
<select id="select1" onchange="display(this.value)">
<option value="0">Select Language</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
<option value="JavaScript">JavaScript</option>
</select>
</center>
<script language="javascript" type="text/javascript">
function display(value) {
alert("You have selected " + value);
}
</script>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 14


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Output:

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 15
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Dynamic Menu Changing :


- Creating a dynamic menu that changes its options based on user input is a useful feature. In
this example, we'll create a dynamic menu that changes its content based on a user's
selection using the <select> tag.
<html>
<head>
<script language="javascript" type="text/javascript">
pop_array = new Array("C Lang", "Pascal", "Fortran");
oop_array = new Array("C++", "Java", "Python");
function display(m) {
var L1 = document.getElementById("lang");
var a = L1.options.length;
for (i = a; i >= 0; i--) {
L1.options.remove(i);
}
var b = document.getElementById("myselect").value;
if (b == "POP") {
for (i = 0; i < pop_array.length; i++) {
opt = document.createElement("option");
opt.value = pop_array[i];
opt.textContent = pop_array[i];
L1.appendChild(opt);
}
} else if (b == "OOP") {
for (i = 0; i < oop_array.length; i++) {
opt = document.createElement("option");
opt.value = oop_array[i];
opt.textContent = oop_array[i];
L1.appendChild(opt);
}
} else if (b == "category") {
opt = document.createElement("option");
opt.value = "Language";
opt.textContent = "Language";
L1.appendChild(opt);
}
}
</script>
</head>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 16


VJ TECH ACADEMY – JAVASCRIPT NOTES

<body>
<b>Select Programming Type </b>
<select id="myselect" onchange="display(this)">
<option value="category">Category</option>
<option value="POP">POP</option>
<option value="OOP">OOP</option>
</select>
<hr />
<b>Languages </b>
<select id="lang">
<option value="Language">Language</option>
</select>
</body>
</html>

 Output:

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 17


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Floating Menu :
- The JavaScript allows t create dynamic menus which move along with scrolling. Such
Floating menu will be always visible on the screen. They Appear to “float” on the top of the
page.
- In this example, we use a <select> element as the menu, and its options represent different
Programming Languages.
<html>
<head>
<script language="javascript" type="text/javascript">
function Display(m) {
var x = m.options[m.selectedIndex].value;
alert("You have selected language:" + x);
}
</script>
</head>
<body>
<form name="form1" style="position: fixed">
Select Your Favorite Language:
<select onchange="Display(this)" style="height: 25px; width: 160px">
<option value="C">C lang</option>
<option value="C++">C++ lang</option>
<option value="Java">Java lang</option>
<option value="Python">Python lang</option>
</select>
</form>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr /><h1>Part 1</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr /><h1>Part 2</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr /><h1>Part 3</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr /><h1>Part 4</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 18


VJ TECH ACADEMY – JAVASCRIPT NOTES

- In This Example, CSS is used to position the <select> element. By setting its position
property to "fixed", And optional CSS is adjusting the top and left values, the menu remains
fixed at the top of the page.

 Output:

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 19
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Validating Menu :
- Validating a menu selection is important to ensure that the user's choice is appropriate and
matches the expected values. This validation process helps maintain data integrity and
prevents errors in the application. Here's how you can validate a menu selection:

- Data validation: When the user makes a selection from a menu, especially in forms, it's
essential to validate the selected value. Ensure that the selected option is within the expected
range of values and matches the pr
predefined
edefined options. This step prevents unexpected or
malicious data from being submitted.
- Error Handling: If the selected value does not match any of the predefined options,
appropriate error handling mechanisms should be in place. This can include displaying
displayin an
error message to the user, highlighting the menu with a different color, or preventing form
submission until a valid selection is made.
- Server-Side Validation: While client
client-side
side validation is useful for enhancing user experience,
always perform validation
tion on the server
server-side as well. Client-side
side validation can be bypassed,
so server-side
side validation acts as a safety net to ensure data integrity and security.

Without selecting any language that time…

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 20
VJ TECH ACADEMY – JAVASCRIPT NOTES

<!-- Menu Selection Validation -->


<html>
<head>
<title>Menu Validation</title>
</head>
<body>
<form name="MyForm">
<label for="language">Select Your Favorite Language </label><br />
<select name="language" id="language" style="width: 150px">
<option value="none">Select</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JSP">JSP</option>
<option value="PERL">PERL</option>
<option value="HTML">HTML</option></select
><br /><br />
<input type="button" value="Submit" onclick="validate()" />
</form>
<script lang="javascript" type="text/javascript">
function validate() {
var language = document.MyForm.language;
if (language.value == "none") {
alert("You must select a language");
} else {
alert("You selected: " + language.value);
}
}
</script>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 21


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Chain Select Menu :


- Chain select menu is a kind of menu in which there are more than one set of menu and
options selected from the first pull-down menu determines the options for second pull-down
menu and options of second pull-down menu determines the options of next pull-down menu
if it needed.
- Code :
<html>
<head>
<title>Chain Menu</title>
</head>
<body>
<select id="country" onchange="loadCities(this.value)">
<option selected disabled>Select Country</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
--------------------
<select id="city">
<option selected disabled>Select City</option>
</select>

<script language="javascript" type="text/javascript">


var citiesByState = {
india: ["Delhi", "Mumbai", "Kolkata", "Chennai"],
usa: ["New York", "Los Angeles", "Chicago", "Houston"],
};
function loadCities(country) {
var city = document.getElementById("city");
city.innerHTML = "";

if (country === "Select Country") {


var option = document.createElement("option");
option.text = "Select City";
option.value = "Select City";
city.appendChild(option);
} else {
var cities = citiesByState[country];
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 22


VJ TECH ACADEMY – JAVASCRIPT NOTES

option.text = cities[i];
option.value = cities[i];
city.appendChild(option);
}
}
}
</script>
</body>
</html>

- Chained select menus create a hierarchical relationship between options. The selection made
in the first menu (the "parent" menu) determines the available choices in the subsequent
menus (the "child" menus). This dependency ensures that users choose valid combinations of
options.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 23


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Tab Menu :
- A tab menu is a common user interface component used to organize content into different
sections or categories, often found in web applications and websites.
- It allows users to switch between sections of content by clicking on tabs.
- Code For Tab Menu :
<html >
<head>
<title>Tab Menu Example</title>
</head>
<body>
<div class="tab" style="margin: 10px 0">
<button onclick="displayData(event, 'Java')"> Java </button>
<button onclick="displayData(event, 'Python')"> Python </button>
<button onclick="displayData(event, 'C++')">C++</button>
<button onclick="displayData(event, 'PHP')">PHP</button>
</div>
<div id="display_content" style="height: 300px; width: 400px; border: 1px
solid; padding: 10px" ></div>

<script type="text/javascript" lang="javascript">


// create array for content
var content = {
Java: "You have selected Java",
Python: "You have selected Python",
"C++": "You have selected C++",
PHP: "You have selected PHP"
};

// function for display content


function displayData(evt, lang) {
document.getElementById("display_content").innerHTML = "";
// display content from array by lang key
document.getElementById("display_content").innerHTML = content[lang];
}
</script>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 24


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Output:

 Pop-Up Menu :
- A pop-up menu, also known as a context menu or right-click menu, is a menu that appears
when a user interacts with a specific element, typically by right-clicking it.
- Pop-up menus provide context-specific options and actions based on the user's interaction
with the element.
- Typical Use Cases: Pop-up menus are commonly used in applications for performing actions
on items in a list, table rows, or any interactive elements. They offer a convenient and
unobtrusive way to access actions.
- Creating Pop-Up Menus: Pop-up menus can be created using a combination of HTML, CSS,
and JavaScript. The HTML structure includes the menu items, CSS styles control its
appearance, and JavaScript handles event listeners and interactions.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 25


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Sliding Menu :
- A sliding menu is a user interface component that typically slides into view from the side of
the screen or another hidden location to provide navigation options or additional content..
- Sliding menus are often used in responsive web design, especially for mobile devices, to
save screen space and create an intuitive user experience
experience.
- JavaScript is used to add interactivity. Event listeners are applied to the trigger elements, and
the menu's display is controlled by toggling CSS classes or directly manipulating styles.
- Example :

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 26
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Folding Tree Menu :


- It’s a classic menu used in desktop applications, this menu helps to navigate file folders.
- This tree consists
sists of one or more closed folders each of which appears alongside the folder’s
name.
- Creating a folding tree menu with a select tag is a common web design technique for
organizing and navigating hierarchical data.

 Folding Tree Menu :


- Sometimes theree is limited space on the web page for displaying all the menu options.
- Then in such a case, only limited menu options are displayed and remaining options can be
accessed by scrolling left or right.

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 27
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Side Bar Menu :


- This side bar menu displays a menu on the side of the web page. Options
ptions on this menu can
be linked to other web pages or to other menu options.
- In Some Side bar menu contains tree menu in that way visitor can move cursor on main
menu then submenu will be displayed.
- Side bar help us to improve user friendly ui actions.

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 28
VJ TECH ACADEMY – JAVASCRIPT NOTES

 Protecting Web-Page :
- Protecting a web page is crucial for maintaining the security and integrity of your website,
its data, and user interactions.
- Way To Protect Your Web-Pages
1. Hiding Your Code
 Use External JavaScript, CSS files.
 Disabling Right (mouse) Click button.
2. User Email Concealing

 Hiding Your Code :


- It’s an important thing in web development, because every in a browser have option to see
our source code with the help of “right click” operation.
- User can see our code easily and they can copy our code, algorithm, and our implemented
logics.
- That’s why hiding of code is very important in web page, so we need to take proper action
on this point so that hacker can’t see our code.
- With the help of JavaScript we can protects that types of actions, with the help of “Disabling
the Right Mouse Button (right click)”.
- Following example shows you how to disable the visitor’s right mouse button while the
browser displays our web page.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 29


VJ TECH ACADEMY – JAVASCRIPT NOTES

- Code :
<html>
<head>
<title>Protecting Web Page</title>
<script language="javascript" type="text/javascript">
function display() {
document.addEventListener("contextmenu", function (e) {
alert("Right-click is disabled on this page to protect the content.");
e.preventDefault();
});
}
</script>
</head>
<body>
<input type="button" value="Protect Web Page" onclick="display()" />
</body>
</html>

 Hiding Your 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 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.
- Syntax :
<script src="sample.js"></script>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 30


VJ TECH ACADEMY – JAVASCRIPT NOTES

 E-mail Concealing Address In JavaScript :


- Concealing email address means hide email address.
- If we are working with email address and we don't want to show email address to user then
we can hide the email address by using JavaScript code.
- Concealing or obfuscating your email address in JavaScript is a common practice to prevent
email-harvesting
harvesting bots from scraping your email address from your webpage's source code.
- Email-harvesting
harvesting bots often search websites for em
email
ail addresses to use for spam
s or other
malicious purposes.
- Email Obfuscation: In this method, you can display your email address on your webpage in a
way that is not easily recognizable by emai
email-harvesting
harvesting bots, but still understandable by
human visitors. You'll use JavaScript to dynamically construct the email address when the
page is loaded.
- Example :

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 31
VJ TECH ACADEMY – JAVASCRIPT NOTES

- Code :

<html>
<head>
<title>Email Concealing Example</title>
</head>
<body>
<p>Enter your email address:</p>
<input type="email" id="tf1" placeholder="Enter Your Email Address" />
<input type="button" onclick="display()" value="Submit" />
<p id="demo"></p>
<script language="javascript" type="text/javascript">
function display() {
var splitted, part1, part2, avg, result;
email = document.getElementById("tf1").value;
//[email protected]
if (email == "") {
alert("Please Enter Email Address!");
return;
}
splitted = email.split("@");

part1 = splitted[0]; //vjtechacademy


part2 = splitted[1]; //gmail.com

xyz = part1.substring(0, part1.length / 2);


result = xyz + "****@" + part2;
alert("Your Hide Email Address: " + result);
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 32


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Frameworks of JavaScript :
- JavaScript frameworks are pre-built libraries or collections of tools and functions that
simplify and accelerate web application development.
- They provide a structured and organized way to build interactive, efficient, and scalable web
applications.

 What Are JavaScript Frameworks?


- JavaScript frameworks are sets of pre-written code libraries and tools that help developers
efficiently build web applications.
- They provide a foundation for web development by offering a structured and reusable
architecture.

 Key Advantages :
- Productivity: Frameworks simplify common tasks, such as DOM manipulation, data
handling, and routing, allowing developers to work more efficiently.
- Consistency: Frameworks encourage consistent coding practices and enforce design patterns,
leading to maintainable and readable code.
- Scalability: They are designed to help applications grow, enabling developers to add features
and scale without compromising performance.

 Types Of JavaScript Frameworks :


 Front-End Frameworks: These focus on the user interface and client-side development,
enhancing interactivity and user experience. Popular front-end frameworks include React,
Angular, and Vue.js.
 Back-End Frameworks: These focus on server-side development, handling tasks like
routing, authentication, and database interactions. Common back-end frameworks include
Express.js (for Node.js), Ruby on Rails, and Django (for Python).

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 33


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Full-Stack Frameworks: These combine both front-end and back-end frameworks into a
cohesive solution. Examples include Meteor and Next.JS.

 JavaScript Popular Frameworks :


- React: A front-end library developed by Facebook, known for building user interfaces with a
component-based architecture.
- Angular: A comprehensive front-end framework maintained by Google, providing a full
suite of tools for building complex web applications.
- Vue.js: A progressive front-end framework that is approachable and adaptable for projects of
all sizes.
- Node.js: While not a traditional framework, Node.js is a runtime environment that allows
server-side JavaScript development.
- Express.js: A minimalist back-end framework built on Node.js, suitable for creating web
APIs and applications.
- Django: A high-level back-end framework for Python, featuring an integrated and pragmatic
approach to web development.

 Community And Eco-System:


- JavaScript frameworks typically have active communities that contribute to their
development and provide a wealth of resources, plugins, and libraries.
- This strong ecosystem simplifies finding solutions to common challenges.

JavaScript Notes ( VJTech Academy, contact us: +91-9730087674 ) Page 34


VJ TECH ACADEMY – JAVASCRIPT NOTES

 Applications Of JavaScript Frameworks :


- Front-End Development: Front
Front-end
end frameworks, including Angular, React, and Vue.js, are
commonly employed for creating visually appealing and responsive web applications. They
simplify tasks like DOM manipulation, state management, and handling user interactions.
- Back-End Development: While JavaScript is primarily a client
client-side
side language, it's also used
for back-end
end development with the help of frameworks like Node.js and Express.js. These
frameworks facilitate server-side
side scripting, API development, and real
real-time
time applications.
a
- Real-Time Applications: JavaScript frameworks, particularly Node.js, are well-suited
well for
building real-time
time applications, including chat applications, online gaming platforms, and
collaborative tools. They leverage WebSockets and event
event-driven architecture
rchitecture for instant data
updates.
- Mobile App Development: Frameworks like React Native and NativeScript allow developers
to use JavaScript to build cross--platform
platform mobile applications. These frameworks enable code
reuse across different platforms, reduci
reducing development time and effort.

JavaScript Notes ( VJTech Academy, contact us: +91


+91-9730087674 ) Page 35

You might also like