4.1.javascript Introduction

www.SalmanAdeeb.wixsite.com/DAE-CIT-books www.facebook.
com/Gctpak
CIT-303 Web development with Java Instructor Name: Ms. saba
Chp.04 JavaScript
4.1.Javascript Introduction:
The development of JavaScript began in 1995 at Netscape Communications, the
makers of the Netscape browser. The first version of this language was actually
named Mocha in May 1995, renamed to LiveScript in September 1995, and
again renamed to JavaScript in December 1995.
Javascript definition:
JavaScript is a programming language for the web. It is supported by most web

browsers including Chrome, Firefox, Safari, internet Explorer, Edge, Opera, etc.
Most mobile browsers for smart phones support JavaScript too.
It is primarily used to enhance web pages to provide for a more user friendly
experience. These include dynamically updating web pages, user interface
enhancements such as menus and dialog boxes, animations, 2D and 3D
graphics, interactive maps, video players, and more. This mode of JavaScript
usage in the web browser is also referred to as client-side javascript
Javascript syntax:
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
var x, y; // How to declare variables

x = 5; y = 6; // How to assign values
z = x + y; // How to compute values
In HTML, JavaScript code must be inserted between <script> and </script> tags.
Example 1:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Example 2:
<!DOCTYPE html>
<html>
www.youtube.com/AdeebTechnologyLab www.facebook.com/Adeeb.Technology.Lab
www.SalmanAdeeb.wixsite.com/DAE-CIT-books www.facebook.com/Gctpak
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
What can JavaScript do?
1-JavaScript Can Change HTML Content:
One of many JavaScript HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo") and
changes the element content (innerHTML) to "Hello JavaScript":
document.getElementById("demo").innerHTML = "Hello JavaScript";
Example:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML

= "Hello JavaScript!"'>Click Me!</button>
</body></html>
2-JavaScript Can Change HTML Attribute Values:

In this example JavaScript changes the value of the src (source) attribute of an
<img> tag:
<!DOCTYPE html>
<html>
<body>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an
image.</p>
<button
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on
the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off
the light</button>
</body>
</html>
Turn on the light Turn off the light
3-JavaScript Can Hide HTML Elements:
Hiding HTML elements can be done by changing the display style:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do? </h2>
<p id="demo">JavaScript can hide HTML elements. </p>
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
</body>
</html>
4-JavaScript Can Show HTML Elements:

Showing hidden HTML elements can also be done by changing the display style:
<!DOCTYPE html>
<html>
<body>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>
</body>
</html>
5-JavaScript Can Change HTML Styles (CSS):
Changing the style of an HTML element, is a variant of changing an HTML
attribute:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>
</body>
</html>
4.2.JavaScript Hide & Show Elements

JS Hide Elements:
There are three methods to Hide elements :
 Hiding Elements Using Element Id
 Hiding Elements Using Tag Name
 Hiding Elements Using class
1-To hide an element with a specified id, use a hash tag (#) in front of the id
name.
<button onclick="w3.hide('#London')">Hide</button>
2-To hide all elements with a specified tag name, use the tag name (without <
and >) as the selector.
<button onclick="w3.hide('h2')">Hide</button>
3-To hide all elements with a specified class name, use a period (.) in front of
the class name.
<button onclick="w3.hide('.city')">Hide</button>
JS Show Elements:
There are three methods to show elements :
 showing Elements Using Element Id
 showing Elements Using Tag Name
 showing Elements Using class
1-To show an element with a specified id, use a hash tag (#) in front of the id
name.
<button onclick="w3.show('#London')">Show</button>
2-To show all elements with a specified tag name, use the tag name (without <
and >) as the selector.
<button onclick="w3.show('h2')">Show</button>
3-To show all elements with a specified class name, use a period (.) in front of
the class name.
<button onclick="w3.show('.city')">Show</button>
Example:
<!DOCTYPE html>
<html>
<title>W3.JS</title>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<h2>Testing W3.JS in HTML</h2>
<p>Click the buttons to hide or show all elements with class="city".</p>
<p>
<button onclick="w3.hide('.city')">Hide</button>
<button onclick="w3.show('.city')">Show</button>
</p>
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
4.3.Definition of JQuery:
JQuery is a JavaScript library that allows web developers to add extra functionality
to their websites. It is open source and provided for free under the MIT license.
In recent years, JQuery has become the most popular JavaScript library used
in web development.
To implement JQuery, a web developer simply needs to reference the JQuery
JavaScript file within the HTML of a webpage.
jQuery is a fast, small, and feature-rich JavaScript library.
a webpage may load the JQuery library using the following line within the <head>
section of the HTML:
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
4.4.JQuery Selectors:
jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors allow you to select and manipulate HTML element(s).jQuery

selectors are used to "find" (or select) HTML elements based on their name, id,
classes, types, attributes, values of attributes and much more.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector

The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific
element.
An id should be unique within a page, so you should use the #id selector when
you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id
of the HTML element:
$("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:
Example
$("#test").hide();
});
});
The .class Selector

The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the
name of the class:
$(".test")
When a user clicks on a button, the elements with class="test" will be hidden:
Example
$(".test").hide();
});
});
Some more selectors are :
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to
"_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT
equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of

type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
4.5. Apply validation on HTML form by using Javascript:
In this example, we are going to validate the name and password. The name can’t be empty
and password can’t be less than 6 characters long.
Here, we are validating the form on form submit. The user will not be forwarded to the next
page until given values are correct.
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()"
>
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
JavaScript Retype Password Validation

<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">

Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>

4.1.javascript Introduction

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

4.1.javascript Introduction

Uploaded by

Copyright:

Available Formats

www.SalmanAdeeb.wixsite.com/DAE-CIT-books www.facebook.

JavaScript is a programming language for the web. It is supported by most web

var x, y; // How to declare variables

1-JavaScript Can Change HTML Content:

One of many JavaScript HTML methods is getElementById().

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML

2-JavaScript Can Change HTML Attribute Values:

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

Turn on the light Turn off the light

<h2>What Can JavaScript Do? </h2>

<p id="demo">JavaScript can hide HTML elements. </p>

4-JavaScript Can Show HTML Elements:

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

4.2.JavaScript Hide & Show Elements

jQuery selectors allow you to select and manipulate HTML element(s).jQuery

The element Selector

You can select all <p> elements on a page like this:

When a user clicks on a button, all <p> elements will be hidden:

The #id Selector

The .class Selector

Some more selectors are :

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("[href]") Selects all elements with an href attribute

$(":button") Selects all <button> elements and <input> elements of

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

JavaScript Retype Password Validation

<form name="f1" action="register.jsp" onsubmit="return matchpass()">

You might also like