Overview :
Client Side Scripting
Language (22519)
Unit 1 :
Basics of JavaScript
Programming
(12 M)
P R O G R A M : IN F O R M ATI O N T E C H N O L O G Y ( N B A
A C C R E D ITED )
: V
N A M E O F FA C U LTY: M S . E M A I L :
y o g it a . k h a n d a g a le@v p t . e d u . in
Basics of JavaScript
Programming
1.1 Features of JavaScript
1.2 Object Name, Property, Method, Dot Syntax, Main Event
1.3 Values and Variables
1.4 Operators and Expressions
1.5 if statement , if…else. If…elseif, Nested if
1.6 switch… case statement
1.7 Loop statement
1.8 Querying and setting properties and Deleting properties,
Property Getters and Setters
Main Event
An event is an action performed by user or web browser.
In order to make a web pages more interactive, the script needs
to be access the contents of the document and know when the
user is interacting with it.
Events may occur due to: 1) a document loading
2) user clicking on mouse button
3) browser screen changing size
Here are some examples of HTML events:
•An HTML web page has finished loading
•An HTML input field was changed
•An HTML button was clicked
Event Handling
Event handlers can be used to handle, and verify, user input, user
actions, and browser actions:
Event Description
Things that should be done every time a page loads.
onchange An HTML element has been changed
Things that should be done when the page is closed.
onclick The user clicks an HTML element
Action that should be performed when a user clicks a button.
onmouseover The user moves the mouse over an HTML element
Content that should be verified when a user inputs data.
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
Example : Input (user clicking on
button)
<html>
<head>
<script type="text/javascript">
function msg()
{
alert("Hello IF5I students");
}
</script>
</head>
<body>
<center>
<p><h1>Welcome to Client-side scripting</h1></p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Example : Output
after clicking on click button
after clicking on OK button in alert
Objects
• Native Objects/ Built-in Objects
are those objects supplied by JavaScript.
Examples of these are Math, Date, String, Number, Array,
Image, etc.
• Host Objects
are objects that are supplied to JavaScript by the browser
environment. Examples of these are window, document,
forms, etc.
• User-Defined Objects
are those that are defined by you, the programmer.
Math Properties
Math: Math Properties
Math Property Description
SQRT2 Returns square root of 2.
PI Returns Π value.
E Returns Euler's Constant.
LN2 Returns natural logarithm of 2.
LN10 Returns natural logarithm of 10.
LOG2E Returns base 2 logarithm of E.
LOG10E Returns 10 logarithm of E.
Example : Math
<html>
<head>
<title>JavaScript Math Object Properties</title>
</head> E Value is :2.718281828459045
<body> OUTPUT LN10 Value
<script type="text/javascript"> is :2.302585092994046
var value1 = Math.E; PI Value is :3.141592653589793
document.write("E Value is :" + value1 + "<br>");
var value3 = Math.LN10;
document.write("LN10 Value is :" + value3 + "<br>");
var value4 = Math.PI;
document.write("PI Value is :" + value4 + "<br>");
</script> </body>
</html>
Math Properties
Math: Methods
Methods Description
abs() Returns the absolute value of a number.
acos() Returns the arccosine (in radians) of a number.
ceil() Returns the smallest integer greater than or equal to a number.
cos() Returns cosine of a number.
floor() Returns the largest integer less than or equal to a number.
log() Returns the natural logarithm (base E) of a number.
max() Returns the largest of zero or more numbers.
min() Returns the smallest of zero or more numbers.
pow() Returns base to the exponent power, that is base exponent.
Example : Math
<html>
<head>
<title>JavaScript Math Object Methods</title>
</head>
<body>
<script type="text/javascript">
var value = Math.abs(-20);
document.write("ABS Value : " + value +"<br>");
var value = Math.tan(5);
document.write("TAN Value : " + value +"<br>");
</script>
</body> ABS Value : 20
OUTPUT
</html> TAN Value : -3.380515006246586
Date
•Date is a data type.
•Date object manipulates date and time.
•Date() constructor takes no arguments.
•Date object allows you to get and set the year, month, day, hour, minute,
second and millisecond fields.
•Syntax:
var variable_name = new Date();
Example:
var current_date = new Date();
Date
Methods Description
Date() Returns current date and time.
getDate() Returns the day of the month.
getDay() Returns the day of the week.
getFullYear() Returns the year.
getHours() Returns the hour.
getMinutes() Returns the minutes.
getSeconds() Returns the seconds.
getMilliseconds() Returns the milliseconds.
getTime() Returns the number of milliseconds since January 1, 1970 at 12:00 AM.
Date
Methods Description
getTimezoneOffset() Returns the timezone offset in minutes for the current locale.
getMonth() Returns the month.
setDate() Sets the day of the month.
setFullYear() Sets the full year.
setHours() Sets the hours.
setMinutes() Sets the minutes.
setSeconds() Sets the seconds.
setMilliseconds() Sets the milliseconds.
setTime() Sets the number of milliseconds since January 1, 1970 at 12:00 AM.
Date
Methods Description
setMonth() Sets the month.
toDateString() Returns the date portion of the Date as a human-readable string.
toLocaleString() Returns the Date object as a string.
toGMTString() Returns the Date object as a string in GMT timezone.
valueOf() Returns the primitive value of a Date object.
Example : Date Date Methods
Locale String: 7/3/2020, 5:23:19 PM
<html> Hours: 17
OUTPUT Day: 5
<body>
Month: 6
<h2>Date Methods</h2> FullYear: 2020
<script type="text/javascript"> Minutes: 23
var d = new Date();
document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");
document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>Day:</b> " + d.getDay()+"<br>");
document.write("<b>Month:</b> " + d.getMonth()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>
</body>
</html>
String
•String objects are used to work with text.
•It works with a series of characters.
Syntax:
var variable_name = new String(string);
Example:
var s = new String(string);
Properties:
Properties Description
length It returns the length of the string.
constructor It returns the reference to the String function that created the
object.
String: Methods
Methods Description
charAt() It returns the character at the specified index.
charCodeAt() It returns the ASCII code of the character at the specified position.
concat() It combines the text of two strings and returns a new string.
indexOf() It returns the index within the calling String object.
match() It is used to match a regular expression against a string.
replace() It is used to replace the matched substring with a new substring.
search() It executes the search for a match between a regular expression.
slice() It extracts a session of a string and returns a new string.
split() It splits a string object into an array of strings by separating the
string into the substrings.
toLowerCase() It returns the calling string value converted lower case.
toUpperCase() Returns the calling string value converted to uppercase.
Example : String
<html>
<body>
<script type="text/javascript">
var str = "A JavaScript";
document.write("<b>Char At:</b> " + str.charAt(4)+"<br>");
document.write("<b>CharCode At:</b> " + str.charCodeAt(0)+"<br>");
document.write("<b>Index of:</b> " + str.indexOf(“p")+"<br>");
document.write("<b>Lower Case:</b> " + str.toLowerCase()+"<br>");
document.write("<b>Upper Case:</b> " + str.toUpperCase()+"<br>");
</script>
Char At: v
</body> CharCode At: 65
</html> OUTPUT Index of: 10
Lower Case: a javascript
Upper Case: A JAVASCRIPT
Window
The window object represents a window in browser.
An object of window is created automatically by the browser.
Window is the object of browser, it is not the object of javascript.
Method Description
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.
Example : window
<script type="text/javascript">
function msg()
{
var a= window.prompt("Who are you?");
window.alert("I am "+a);
}
</script>
<input type="button" value="click" onclick="msg()">
window: output
getElementById() Method
The getElementById() method returns the elements that has given ID
which is passed to the function.
This function is widely used in web designing to change the value of
any particular element or get a particular element.
Syntax: document. getElementById(element_id) ;
Parameter: This function accepts single parameter element_id which
is used to hold the ID of element.
Return Value: It returns the object of given ID. If no element exists
with given ID then it returns null.
getElementById() Method
<html>
<body>
<p id="demo">Click the button to change the color of this paragraph.</p>
<button onclick="myFunction()">change color</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.style.color = "red";
}
</script>
OUTPUT
</body>
</html>
Quiz Time !
Q1. An ______ is an action performed by user or web browser.
Ans : Event
Q2. ________ are objects that are supplied to JavaScript by the
browser environment.
Ans: Host Objects
Q3. An object of window is created automatically by the browser.
(True/False)
Ans : True
Quiz
https://forms.office.com/Pages/ResponsePage.aspx?
id=QEUap70T20yz690UXwrJwIuVSIKHZ3RDo4EeJ2CYjgFUNF
hUSThNTjJRUjYxMlhWVFEwTTc5T0JXWC4u
