JAVA SCRIPT
Java script is used to create dynamic and interactive elements in
web applications
Javascript features:
All popular web browsers support JavaScript as they provide built-in execution
environments.
JavaScript is a lightweight, interpreted programming language.
JavaScript has no connectivity with Java programming language.
It is a case-sensitive language.
JavaScript is an object-oriented programming language
JavaScript is used to create interactive websites. It is mainly used for:
[Link]-side validation
[Link] drop-down menus
[Link] date and time
[Link] pop-up windows and dialog boxes
(alert dialog box, confirm dialog box and prompt dialog box)
<script> tag is required for java script code
type attribute : text/javascript is the content type that provides information to the
browser about the data.
document – predefined object
write - predefined function
Ways to add javascript code in html code:
[Link] the body tag of html
[Link] the head tag of html
[Link] .js file (external javaScript file)
<script type="text/javascript" src=“javascript filename"></script>
Comments:
//single line comments
/* …. */ multi line comments
JavaScript Variable
A JavaScript variable is a name of storage location
Syntax:
var variablename=value;
let variablename=value;
Datatypes:
[Link]
String
Number
Boolean
Undefined
Null
[Link]-primitive –Object, Array
JavaScript functions:
Syntax:
function functionname()
{
…
}
Types of variables:
[Link] variable
[Link] variable
Operators:
Arithmetic Operators
Comparison (Relational) Operators
Logical Operators
Assignment Operators
Conditional statements:
If
If else
Else if
switch
Looping statements:
for loop
while loop
do-while loop
for-in loop
JavaScript String object:
The JavaScript string is an object that represents a sequence of characters
There are 2 ways to create string in JavaScript
By string literal
By string object (using new keyword)
String methods:
charAt()
concat()
search()
replace()
substring()
toUpperCase()
JavaScript Date Object
Date Object is used to print Date on web page
Methods:
getDate();
getMonth()+1;
getFullYear();
getHours();
getMinutes() ;
getSeconds()
Browser Object Model(BOM)
The Browser Object Model (BOM) is used to interact with the browser.
[Link] object
[Link] object
[Link] object
[Link] object
[Link] object
[Link] object
[Link] object:
The window object represents a window in browser
alert() --displays the alert box containing message with ok button.
confirm()--displays the confirm dialog box containing message with ok and cancel button.
prompt()--displays a dialog box to get input from the user.
open() -- opens the new window.
close() -- closes the current window.
setTimeout() -- performs action after specified time.
2. History Object:
The history object represents an array of URLs visited by the user
forward() -- loads the next page.
back() -- loads the previous page.
go(number) -- loads the given page number.
3. Navigator Object:
navigator object that returns information of the browser
Properties:
onLine--returns true if browser is online otherwise false.
pdfViewerEnabled-- returns true if pdf files can be viewed in browser
cookieEnabled – returns true if cookies are enabled
language—language of the browser
4. Screen Object:
screen object holds information of browser screen
Properties:
height--It returns the total height of the screen.
width-- To get the total width of the screen.
availHeight--It gives the height of the screen without including the taskbar.
availWidth--It gives the width of the screen without including the taskbar.
colorDepth--It gives the depth of the color palette to display images.
pixelDepth--It is used to get the color resolution of the screen.
5. Location Object:
The location object contains information about the current URL.
Properties:
[Link] : returns the entire URL
[Link]: Returns the protocol, hostname and port number of a URL
[Link] Object(document object model(DOM))
The document object represents the whole html document.
By the help of document object, we can add dynamic content to our web page.
Methods:
write() -- writes the given string/variable value on the doucment.
getElementById() -- returns the element having the given id value.
getElementsByName() -- returns collection of all elements of particular document by name..
getElementsByTagName() -- returns all the elements having the given tag name.
getElementsByClassName() -- returns all the elements having the given class name.
innerHTML– used in the web pages to generate the dynamic html elements such as
registration form, feedback form, links etc.
innerText-- used to write the dynamic text on the html document
Form name attribute:
syntax : [Link];
JavaScript Form Validation:
JavaScript provides facility to validate the form on the client-side.
Validation is a process to authenticate user.
By JavaScript, we can validate name, password, email, date, mobile numbers and more fields.
JavaScript Event Handling:
Mouse events:
Event Event Handler Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse comes over element
Mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
Mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place
doubleclick ondblclick When the mouse is double clicked
Keyboard events:
Event Performed Event Handler Description
keypress onkeypress When the user presses the button on keypad.
Form events:
Event Event Handler Description
focus onfocus When the user focuses on an element
blur onblur When the focus is away from a form element
Window/Document events
Event Performed Event Handler Description
load onload When the browser finishes the loading of the page
