Scribd
Upload
82 views

Java Script

1. JavaScript is a case sensitive language. It allows adding comments using // for single line comments and /* */ for multi-line comments. 2. The language supports various data types like strings, integers, variables and uses operators like +, -, *, /, % for math operations. 3. JavaScript can manipulate HTML content using Document.write and access HTML elements using Document.getElementById. It also supports functions, objects, events, arrays and dates.

Uploaded by

Adnan Rai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
82 views

Java Script

1. JavaScript is a case sensitive language. It allows adding comments using // for single line comments and /* */ for multi-line comments. 2. The language supports various data types like strings, integers, variables and uses operators like +, -, *, /, % for math operations. 3. JavaScript can manipulate HTML content using Document.write and access HTML elements using Document.getElementById. It also supports functions, objects, events, arrays and dates.

Uploaded by

Adnan Rai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 53

JAVA SCRIPT

Message
It is case sensitive language.
alert('hello');
Display

document.write('we are learning javascript');


Documentation/Comments
// Coments
/*NS
*/
Display

document.write('we are learning javascript');


External File Support

1.Make new file


2.Write java code with ext js
3.Don’t need to write script tags in js files
4.<script scr = “ path of file ”>
DATA TYPES
String ‘shahwaiz’
Integer 6, 7, 9
Variable assign value, simple text
Space not allowed

name = ‘shahwaiz’;
document.write(name);
DATA TYPES
V1=3;
V2=4;
document.write(v1+v2);
alert(v1+v2);
USING HTML IN JAVA SCRIPT

Document.write(‘<h1>html</h1>in java script’);


Document.write(‘style=“background:red”java script’);
POP UP BOX

Prompt(‘Enter your name’,’name’);


name = Prompt(‘Enter your name’,’name’)
document.write(‘hello<h3>’+name+’</h3>welcome’);
MATH OPERATOR
+
-
*
/
%
=
++
--
IF-ELSE var1 = 3;
var2=4;
if(var==3){
alert(‘Display’);
}
!== -> type
===
LOGICAL OP

&&
||
!
FUNCTION
Function myFunction()
{
document.write(‘this is function’);
}
myFunction();
JAVASCRIPT OBJECTS
<!DOCTYPE html>
<html>
<body>
Real Life Objects, Properties, <p>Creating a JavaScript Variable.</p>
and Methods <p id="demo"></p>
<script>
A car has properties like weight
var car = "Fiat";
and color, and methods like start
document.getElementById("demo").innerHTML
and stop:
= car;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var car = {type:"Fiat", model:"500", color:"white"};
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>

<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>
ACCESSING OBJECT PROPERTIES
p id="demo"></p>

<script>
var person = {
objectName.propertyName firstName: "John",
Or lastName : "Doe",
objectName["propertyName"]
id : 5566
};
document.getElementById("demo").innerHTML
=
person.firstName + " " + person.lastName;
</script>
ACCESSING OBJECT METHODS
<p id="demo"></p>

<script>
var person = {
firstName: "John",
lastName : "Doe",
objectName.methodName() id : 5566,
or fullName : function() {
return this.firstName + " " + this.lastName;
name = person.fullName(); }
};

document.getElementById("demo").innerHTML =
person.fullName();
</script>
JAVASCRIPT EVENTS

• HTML events are "things" that happen to HTML elements.


• When JavaScript is used in HTML pages, JavaScript can "react" on these events.

• An HTML web page has finished loading


• An HTML input field was changed
• An HTML button was clicked
COMMON HTML EVENTS

onclick The user clicks an HTML element


onmouseover The user moves the mouse over an HTML element
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
SAMPLES
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

<button onclick="this.innerHTML = Date()">The time is?</button>

<button onclick="displayDate()">The time is?</button>


STRING

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
SPECIAL CHARACTERS

The backslash (\) escape character turns special characters into string characters:
\' ' Single quote
\" " Double quote
\\ \ Backslash
STR METHOD

The indexOf() method returns the index of (the position of)


the first occurrence of a specified text in a string:
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
The lastIndexOf() method returns the index of
the last occurrence of a specified text in a string:
Both methods accept a second parameter as the starting
position for the search:
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);
The search() method searches a string for a specified value
and returns the position of the match:
EXTRACTING STRING PARTS

• slice(start, end)
• substring(start, end)
• substr(start, length)
REPLACING STRING CONTENT
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
By default, the replace() function is case sensitive. Writing MICROSOFT
(with upper-case) will not work:
o replace case insensitive, use a regular expression with an /i flag
(insensitive):
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3Schools");
To replace all matches, use a regular expression with
a /g flag (global match):
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3Schools");
JAVASCRIPT NUMBERS

JavaScript has only one type of number. Numbers can be written with or without decimals.
If you add two numbers, the result will be a number:
If you add two strings, the result will be a string concatenation:
If you add a number and a string, the result will be a string concatenation:
If you add a string and a number, the result will be a string concatenation:
JAVASCRIPT MATH OBJECT
The JavaScript Math object allows you to perform mathematical tasks on
numbers.
Math.PI;            // returns 3.141592653589793
Math.round(4.7);    // returns 5
Math.round(4.4);    // returns 4
Math.pow(8, 2);      // returns 64
Math.sqrt(64);      // returns 8
Math.abs(-4.7);     // returns 4.7
Math.ceil(4.4);     // returns 5
Math.floor(4.7);    // returns 4
JAVASCRIPT MATH OBJECT

Math.min(0, 150, 30, 20, -8, -200);  // returns -200


Math.random();     // returns a random number
JAVASCRIPT MATH OBJECT

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 1/2
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 DATES

var d = new Date();
document.getElementById("demo").innerHTML = d;
• Years
• Months
• Days
• Hours
• Seconds
• Milliseconds
JAVASCRIPT GET DATE METHODS
Method Description
getFullYear() Get the year as a four digit number (yyyy)
getMonth() Get the month as a number (0-11)
getDate() Get the day as a number (1-31)
getHours() Get the hour (0-23)
getMinutes() Get the minute (0-59)
getSeconds() Get the second (0-59)
getMilliseconds() Get the millisecond (0-999)
getTime() Get the time (milliseconds since January 1, 1970)
getDay() Get the weekday as a number (0-6)
JAVASCRIPT SET DATE 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)
<script>
var d = new Date();
d.setFullYear(2024);
document.getElementById("demo").innerHTML = d;
</script>
JAVASCRIPT ARRAYS

JavaScript arrays are used to store multiple values in a single variable.


var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");
cars[0] = "Opel";
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
ACCESS THE FULL ARRAY

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
REVERSING AN ARRAY

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits 
fruits.reverse();         // Reverses the order of the elements
TRY IT YOURSELF (STRING)

charAt() Returns the character at the specified index


(position)
charCodeAt() Returns the Unicode of the character at the
specified index
concat() Joins two or more strings, and returns a new
joined strings
endsWith() Checks whether a string ends with specified
string/characters
fromCharCode() Converts Unicode values to characters
includes() Checks whether a string contains the specified string/characters

indexOf() Returns the position of the first found occurrence of a specified value in a string

lastIndexOf() Returns the position of the last found occurrence of a specified value in a string

localeCompare() Compares two strings in the current locale


match() Searches a string for a match against a regular expression, and returns the matches

repeat() Returns a new string with a specified number of copies of an existing string

replace() Searches a string for a specified value, or a regular expression, and returns a new string where the specified
values are replaced

search() Searches a string for a specified value, or regular expression, and returns the position of the match

slice() Extracts a part of a string and returns a new string

split() Splits a string into an array of substrings


startsWith() Checks whether a string begins with specified characters

substr() Extracts the characters from a string, beginning at a specified start position, and through the specified number
of character
substring() Extracts the characters from a string, between two specified indices

toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale

toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale

toLowerCase() Converts a string to lowercase letters

toString() Returns the value of a String object

toUpperCase() Converts a string to uppercase letters

trim() Removes whitespace from both ends of a string

valueOf() Returns the primitive value of a String object


MATH
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
acosh(x) Returns the hyperbolic arccosine of x
asin(x) Returns the arcsine of x, in radians
asinh(x) Returns the hyperbolic arcsine of x
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

atanh(x) Returns the hyperbolic arctangent of x


cbrt(x) Returns the cubic root of x
ceil(x) Returns x, rounded upwards to the nearest integer

cos(x) Returns the cosine of x (x is in radians)


cosh(x) Returns the hyperbolic cosine of x
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the 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) Rounds x to the nearest integer
sin(x) Returns the sine of x (x is in radians)
sinh(x) Returns the hyperbolic sine of x
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
tanh(x) Returns the hyperbolic tangent of a number
trunc(x) Returns the integer part of a number (x)
ARRAY METHODS
concat() Joins two or more arrays, and returns a copy of the joined arrays
copyWithin() Copies array elements within the array, to and from specified positions
entries() Returns a key/value pair Array Iteration Object
every() Checks if every element in an array pass a test
fill() Fill the elements in an array with a static value
filter() Creates a new array with every element in an array that pass a test
find() Returns the value of the first element in an array that pass a test
findIndex() Returns the index of the first element in an array that pass a test
forEach() Calls a function for each array element
from() Creates an array from an object
includes() Check if an array contains the specified element
indexOf() Search the array for an element and returns its position
join() Joins all elements of an array into a string
keys() Returns a Array Iteration Object, containing the keys of the original array
lastIndexOf() Search the array for an element, starting at the end, and returns its position
map() Creates a new array with the result of calling a function for each array element
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reduce() Reduce the values of an array to a single value (going left-to-right)
reduceRight() Reduce the values of an array to a single value (going right-to-left)
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
some() Checks if any of the elements in an array pass a test
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
EXERCISE AND SOLUTION
1. Write a javascript program to display the current day and time in the following format.
Sample output : today is : tuesday. 
Current time is : 10 PM : 30 : 38

Solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript current day and time</title>
</head>
<body></body>
</html>
var today = new Date();
var day = today.getDay();
var daylist = ["Sunday","Monday","Tuesday","Wednesday
","Thursday","Friday","Saturday"];
document.write("Today is : " + daylist[day] + "."); if (hour===0 && prepand===' AM ')
var hour = today.getHours(); {
var minute = today.getMinutes(); if (minute===0 && second===0)
var second = today.getSeconds(); {
var prepand = (hour >= 12)? " PM ":" AM "; hour=12;
hour = (hour >= 12)? hour - 12: hour; prepand=' Midnight';
if (hour===0 && prepand===' PM ') }
{ else
if (minute===0 && second===0) {
{ hour=12;
hour=12; prepand=' AM';
prepand=' Noon'; }
} }
else Document.write("Current Time : "+hour + prepand
{ + " : " + minute + " : " + second);
hour=12;
prepand=' PM';
}
}
2. WRITE A JAVASCRIPT PROGRAM TO PRINT THE CONTENTS OF THE
CURRENT WINDOW

function print_current_page()
{
window.print();
}
2. Write a JavaScript program to print the contents of the current
window
function print_current_page()
{
window.print();
}
3. Write a JavaScript program to get the website URL (loading page)
Document.write(document.URL);
PRACTICE QUESTIONS

1. Write a JavaScript program to compare two objects to determine if the first one contains equivalent
property values to the second one
2. Write a JavaScript function to  get the number of occurrences of each letter in specified string.
3. Write a JavaScript program to find duplicate values in a JavaScript array.
4. Write a JavaScript program to set the background color of a paragraph
5. Write a JavaScript function to add rows to a table.

You might also like