FYBSC IT Web Programming Unit III Core Javascript

Core JavaScript
(Properties and Methods)

JavaScript Arrays
• JavaScript arrays are used to store multiple values in a single variable.
• An array is a special variable, which can hold more than one value at a time.
• Example
▫ If you have a list of items (a list of car names, for example), storing the cars in single variables
could look like this:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
• However, what if you want to loop through the cars and find a specific one? And
what if you had not 3 cars, but 300?
• The solution is an array!
• An array can hold many values under a single name, and you can access the values by referring to
an index number.
var cars = [“Maruti", "Volvo", "BMW"];

JavaScript Arrays: Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Access the Elements of an Array
• You refer to an array element by referring to the
index number.
• This statement accesses the value of the first
element in cars:
var name = cars[0];
• This statement modifies the first element in
cars:
Cars[0] = "Opel";

Access the Elements of an Array
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

Arrays are Objects
• Arrays are a special type of objects.
• Arrays use numbers to access its "elements".
• In this example, person[0] returns John:
var person = ["John", "Doe", 46];
• Objects use names to access its "members".
• In this example, person.firstName returns
John
var person = {firstName:"John", lastName:"Doe", age:46};

Array Properties and Methods
• The length property of an array returns the
length of an array (the number of array
elements).
• Examples
var x = cars.length; // The length property returns
the number of elements
var y = cars.sort(); // The sort() method sorts
arrays

Length of An Array
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>The length property returns the length of an array.</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script>
</body>
</html>

Looping Array Elements
• The best way to loop through an array, is using a
"for" loop:
• Example
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}

Looping Array Elements
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += fruits[i] + "<br>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

JavaScript Booleans
• A JavaScript Boolean represents one of two
values: true or false.
• Boolean Values
▫ Very often, in programming, you will need a data
type that can only have one of two values, like
 YES / NO
 ON / OFF
 TRUE / FALSE
• For this, JavaScript has a Boolean data type. It
can only take the values true or false.

JavaScript Booleans
• The Boolean() Function
▫ You can use the Boolean() function to find out if
an expression (or a variable) is true:
• Example
Boolean(10 > 9)

JavaScript Booleans: CODE Example
<!DOCTYPE html>
<html>
<body>
<p>Display the value of Boolean(10 > 9):</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Boolean(10 > 9);
}
</script>
</body>
</html>

JavaScript Date Formats
• A JavaScript date can be written as a string:
Sun Feb 05 2017 20:32:29 GMT+0530 (India Standard Time)
• or as a number:
1486306949768
• Dates written as numbers, specifies the number of milliseconds
since January 1, 1970, 00:00:00.
• Displaying Dates
▫ Example
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>

JavaScript Date Methods
• Date methods let
you get and set date
values (years,
months, days, hours,
minutes, seconds,
milliseconds)
• Date Get Methods
• Get methods are
used for getting a
part of a date. Here
are the most
common
(alphabetically):
Method Description
getDate()
Get the day as a number (1-
31)
getDay()
Get the weekday as a
number (0-6)
getFullYear()
Get the four digit year
(yyyy)
getHours() Get the hour (0-23)
getMilliseconds()
Get the milliseconds (0-
999)
getMinutes() Get the minutes (0-59)
getMonth() Get the month (0-11)
getSeconds() Get the seconds (0-59)
getTime()
Get the time (milliseconds
since January 1, 1970)

<!DOCTYPE html>
<html>
<body>
<p>The getFullYear() method returns the full year of a date:</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>The internal clock in JavaScript starts at midnight January 1, 1970.</p>
<p>The getTime() function returns the number of milliseconds since then:</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>
</body>
</html>

• Date methods let
you get and set date
values (years,
months, days, hours,
minutes, seconds,
milliseconds)
• Date Set Methods
• Set methods are
used for setting a
part of a date. Here
are the most
common
(alphabetically):
Date Set Methods
Method Description
setDate()
Set the day as a number
(1-31)
setFullYear()
Set the year (optionally
month and day)
setHours() Set the hour (0-23)
setMilliseconds()
Set the milliseconds (0-
999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime()
Set the time
(milliseconds since
January 1, 1970)

The setDate() Method
setDate() sets the day of the month (1-31):
<!DOCTYPE html>
<html>
<body>
<p>The setDate() method sets the date of a month.</p>
<p id="demo"></p>
<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

The setDate() Method
The setDate() method can also be used to add days to a date:
<!DOCTYPE html>
<html>
<body>
<p>The setDate() method can be used to add days to a date.</p>
<p id="demo"></p>
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

JavaScript Math Object
• The JavaScript Math object allows you to
perform mathematical tasks on numbers.
• Example
Math.PI;
• Math.round()
▫ Math.round(x) returns the value of x rounded to
its nearest integer:
• Example
Math.round(4.7); // returns 5
Math.round(4.4); // returns 4

Math Properties (Constants)
• JavaScript provides 8 mathematical constants
that can be accessed with the Math object:
• Example
 Math.E // returns Euler's number
 Math.PI // returns PI
 Math.SQRT2 // returns the square root of 2
 Math.SQRT1_2 // returns the square root of ½
 Math.LN2 // returns the natural logarithm of 2
 Math.LN10 // returns the natural logarithm of 10
 Math.LOG2E // returns base 2 logarithm of E
 Math.LOG10E // returns base 10 logarithm of E

JavaScript Math Object Method:
Round()
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.round()</h1>
<p>Math.round(x) returns the value of x rounded down to its nearest integer:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.round(4.4);
</script>
</body>
</html>

JavaScript Math Object: pow()
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.pow()</h1>
<p>Math.pow(x,y) returns the value of x to the power of y:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.pow(8,2);
</script>
</body>
</html>

JavaScript Math Object: sqrt()
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.sqrt()</h1>
<p>Math.sqrt(x) returns the square root of x:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.sqrt(64);
</script>
</body>
</html>

JavaScript Math Object: abs()
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.abs()</h1>
<p>Math.abs(x) returns the absolute (positive) value of x:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.abs(-4.4);
</script>
</body>
</html>

Math Object Methods
Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
asin(x) Returns the arcsine of x, in radians
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y, x) Returns the arctangent of the quotient of its arguments
ceil(x) Returns the value of x rounded up to its nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of E
x
floor(x) Returns the value of x rounded down to its nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x, y, z, ..., n) Returns the number with the highest value
min(x, y, z, ..., n) Returns the number with the lowest value
pow(x, y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Returns the value of x rounded to its nearest integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle

Number Methods and Properties
Property Description
MAX_VALUE Returns the largest number possible in JavaScript
MIN_VALUE Returns the smallest number possible in JavaScript
NEGATIVE_INFI
NITY
Represents negative infinity (returned on overflow)
NaN Represents a "Not-a-Number" value
POSITIVE_INFIN
ITY
Represents infinity (returned on overflow)

Number Properties
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number.MAX_VALUE;
</script>
</body>
</html>

Number Methods
• The toString() Method
▫ toString() returns a number as a string.
• The toExponential() Method
▫ toExponential() returns a string, with a number rounded
and written using exponential notation.
• The toFixed() Method
▫ toFixed() returns a string, with the number written with a
specified number of decimals:
• The toPrecision() Method
▫ toPrecision() returns a string, with a number written
with a specified length:
• The valueOf() Method
▫ valueOf() returns a number as a number.

The toFixed() Method
<!DOCTYPE html>
<html>
<body>
<p>The toFixed() method rounds a number to a given number of digits.</p>
<p>For working with money, toFixed(2) is perfect.</p>
<p id="demo"></p>
<script>
var x = 9.656;
x.toFixed(0) + "<br>" +
x.toFixed(6);
</script>
</body>
</html>

Converting Variables to Numbers
• There are 3 JavaScript methods that can be used to
convert variables to numbers:
▫ The Number() method
▫ The parseInt() method
▫ The parseFloat() method
• These methods are not number methods,
but global JavaScript methods.
Method Description
Number() Returns a number, converted from its argument.
parseFloat() Parses its argument and returns a floating point number
parseInt() Parses its argument and returns an integer

The parseInt() Method
parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is
returned:
<!DOCTYPE html>
<html>
<body>
<p>The global JavaScript function parseInt() converts strings to numbers:</p>
<p id="demo"></p>
<script>
parseInt("10") + "<br>" +
parseInt("10.33") + "<br>" +
parseInt("10 6") + "<br>" +
parseInt("10 years") + "<br>" +
parseInt("years 10");
</script>
</body>
</html>

JavaScript Regular Expressions
• A regular expression is a sequence of characters that
forms a search pattern.
• When you search for data in a text, you can use this
search pattern to describe what you are searching
for.
• A regular expression can be a single character, or a
more complicated pattern.
• Regular expressions can be used to perform all types
of text search and text replace operations.
• Syntax
/pattern/modifiers;

Using String Methods
With a Regular Expression
• In JavaScript, regular expressions are often used
with the two string methods: search() and
replace().
• The search() method uses an expression to
search for a match, and returns the position of
the match.
• The replace() method returns a modified
string where the pattern is replaced.

Use String replace() With a Regular
Expression
<!DOCTYPE html>
<html>
<body>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

FYBSC IT Web Programming Unit III Core Javascript

More Related Content

What's hot (20)

Similar to FYBSC IT Web Programming Unit III Core Javascript (20)

More from Arti Parab Academics (20)

Recently uploaded (20)

FYBSC IT Web Programming Unit III Core Javascript