FYBSC IT Web Programming Unit III Javascript

 A script is a small piece of program that can add interactivity to
your website.
 For example, a script could generate a pop-up alert box message,
or provide a dropdown menu.
 This script could be written using Javascript orVBScript.
 You can write various small functions, called event handlers
using any of the scripting language and then you can trigger those
functions using HTML attributes.
 Now a days only Javascript and associated frameworks are being
used by most of the web developers, VBScript is not even
supported by various major browsers.
 You can keep Javascript code in a separate file and then include it
whereever it's needed,
 or you can define functionality inside HTML document itself. Let's
see both the cases one by one with suitable examples.

 The <script> tag is used to define a client-side script (JavaScript).
 The <script> element either contains scripting statements, or it
points to an external script file through the src attribute.
 Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
 To select an HTML element, JavaScript very often use the
document.getElementById(id) method.
 This JavaScript example writes "Hello JavaScript!" into an HTML
element with id="demo"

 Client Side
 Server Side
 Internal
 External

 Client Side
 Scripts that execute in client side. In context of
websites, it is scripts that execute in the browser of
the user.
 Eg: Javascript,VB etc.
 Server Side
 Scripts that execute in the Server. In context of
website, it is scripts that execute on application
servers.
 Eg: PHP, Python, Ruby etc

 Client-Side JavaScript (CSJS)
 It is JavaScript that enables the enables web
pages on browsers to run active online content.
 Server-Side JavaScript (SSJS)
 It is JavaScript that enables back-end access to
databases, file systems, and servers.

 You can write your script code directly into
your HTML document.
 Usually we keep script code in header
of the document using <script> tag,
otherwise there is no restriction and you
can put your source code anywhere in the
document but inside <script> tag.

<!DOCTYPE html>
<html>
<head>
<title>Javascript Internal Script</title>
<script type="text/javascript">
function Hello()
{
alert("Hello, World");
}
</script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me"
/>
</body>
</html>

 If you are going to define a functionality
which will be used in various HTML
documents then it's better to keep that
functionality in a separate Javascript file
and then include that file in your HTML
documents.
 A Javascript file will have extension as .js and
it will be included in HTML files using <script>
tag.

 Consider we define a small function using
Javascript in script.js which has following
code:
function Hello()
{
alert("Hello,World");
}

 Now let's make use of the above external Javascript file in
our following HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="/html/script.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok"
value="Click Me" />
</body> </html>

 In JavaScript, almost "everything" is an object.
 Booleans can be objects (if defined with the new keyword)
 Numbers can be objects (if defined with the new keyword)
 Strings can be objects (if defined with the new keyword)
 Dates are always objects
 Maths are always objects
 Regular expressions are always objects
 Arrays are always objects
 Functions are always objects
 Objects are always objects
All JavaScript values, except primitives, are objects.

 A primitive value is a value that has no properties or methods.
 A primitive data type is data that has a primitive value.
 JavaScript defines 5 types of primitive data types:
 string
 number
 boolean
 null
 undefined
 Primitive values are immutable (they are hardcoded and therefore cannot be
changed).
 if x = 3.14, you can change the value of x. But you cannot change the value of
3.14.

 JavaScriptArithmetic Operators.
 JavaScriptAssignment Operators.
 JavaScript String Operators.
 Comparison Operators.
 Conditional (Ternary) Operator.
 LogicalOperators.

 Arithmetic operators are used to perform
arithmetic on numbers:
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
 Arithmetic operators are
used to perform arithmetic
on numbers:
var x = 5;
var y = 2;
var z = x * y;

<!DOCTYPE html>
<html>
<body>
<p>A typical arithmetic operation takes two numbers (or expressions) and
produces a new number.</p>
<p id="demo"></p>
<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

 The basic assignment
operator is equal ( = ),
which assigns the value of
its right operand to its left
operand.That is, x = y
assigns the value of y to x
.
 var x = 10;
x += 5;
 var x = 10;
x -= 5;
 var x = 10;
x *= 5;
 var x = 10;
x /= 5;
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
&= x &= y x = x & y
^= x ^= y x = x ^ y
|= x |= y x = x | y
**= x **= y x = x ** y

<!DOCTYPE html>
<html>
<body>
<h1>The /= Operator</h1>
<p id="demo"></p>
<script>
var x = 10;
x /= 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

 JavaScript strings are used for storing and
manipulating text.
 A JavaScript string simply stores a series of
characters like "John Doe".
 A string can be any text inside quotes.You
can use single or double quotes.
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + answer2 + answer3;
</script>
</body>
</html>

 charAt();
 concat();
 indexOF();
 lastIndexOf();
 match();
 replace();
 search();
 slice();
 split();
 substr();
 subString();
 toString();
 toUpperCase();
 valueOf();

 Finding a String in a String
 The indexOf() method returns the index of (the position of) the first occurrence of a specified text in
a string:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Please locate where 'locate' occurs!.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = document.getElementById("p1").innerHTML;
var pos = str.indexOf("locate");
document.getElementById("demo").innerHTML = pos;
}
</script>
</body>
</html>

 Searching for a String in a String
 The search() method searches a string for a specified value and returns the position of the match:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Please locate where 'locate' occurs!.</p>
<p id="demo"></p>
<script>
var str = document.getElementById("p1").innerHTML;
var pos = str.search("locate");
document.getElementById("demo").innerHTML = pos;
}
</script>
</body>
</html>

 Extracting String Parts
 There are 3 methods for extracting a part of a string:
▪ slice(start, end)
▪ substring(start, end)
▪ substr(start, length)
<!DOCTYPE html>
<html>
<body>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13);
</script>
</body>
</html>

 String Length
 The lengthproperty returns the length of a string:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>

 Comparison
and Logical
operators are
used to test
for true or
false.
 Comparison
operators are
used in logical
statements to
determine
equality or
difference
between
variables or
values.
Given that x = 5, the table below explains the comparison operators:

<!DOCTYPE html>
<html>
<body>
<script>
var a=10;
var b=20;
var linebreak="<br />";
document.write("a==b:");
result=(a==b);
document.write(result);
document.write(linebreak);
document.write("a > b:");
result=(a>b);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<script>
var a=true;
var b=false;
var linebreak="<br />";
document.write("a && b:");
result=(a && b);
document.write(linebreak);
document.write("a || b:");
result=(a || b);
</script>
</body>
</html>

 Conditional operator assigns a value to a
variable based on some condition.
 Syntax
 variablename = (condition) ? value1:value2
 Example
 var voteable = (age < 18) ? "Too young":"Old
enough";

<!DOCTYPE html>
<html>
<body>
<p>Input your age and click the button:</p>
<input id="age" value="18" />
<p id="demo"></p>
<script>
var age, voteable;
age = document.getElementById("age").value;
voteable = (age < 18) ? "Too young":"Old enough";
document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>
</body>
</html>

 If the operator appears before the variable, the
value is modified before the expression is
evaluated.
 If the operator appears after the variable, the
value is modified after the expression is
evaluated.
 In other words, given j = ++k;, the value of j is the
original value of k plus one;
 given j = k++;, the value of j is the original value
of k, which is incremented after its value is
assigned to j.

<!DOCTYPE html>
<html>
<body>
<p>If the operator appears before the variable, the value is modified before the expression is evaluated. <br>
If the operator appears after the variable, the value is modified after the expression is evaluated.
</p>
<p id="Incrementbefore"></p>
<p id="Incrementafter"></p>
<script>
var j = 3;
var k = 10;
j=++k;
document.getElementById("Incrementbefore").innerHTML = j;
var j = 3;
var k = 10;
j=k++;
document.getElementById("Incrementafter").innerHTML = j;
</script>
</body>
</html>

 As logical expressions are evaluated left to right,
they are tested for possible "short-circuit"
evaluation using the following rules:
 false && (anything) is short-circuit evaluated to false.
 true. || (anything) is short-circuit evaluated to true.
 Short-circuit evaluation says, the second argument is
executed or evaluated only if the first argument does
not suffice to determine the value of the expression:
 when the first argument of the AND (&&) function
evaluates to false, the overall value must be false;
 and when the first argument of the OR (||) function
evaluates to true, the overall value must be true.

<!DOCTYPE html>
<html>
<body>
<p>Short Circuit Operators in JavaScript:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML = Boolean(10 < 9 && 5>4);
document.getElementById("demo2").innerHTML = Boolean(10 > 9 || 5<4);;
}
</script>
</body>
</html>

 delete
The delete operator is used to delete an object, an
object's property or a specified element in an array,
returning true if the operation is possible, and false if not.
With the defined object 'fruit' below, the following delete
operations are possible:
 fruit = new Object;
fruit.name = 'apple';
fruit.color = 'green';
fruit.size = 'large';
delete fruit.size;

 new
 The new operator can be used to create an instance of a user-defined
object type or of one of the built-in object types that has a
constructor function.
 To create a user-defined object type you must first define it by writing
a function that specifies its name, properties and methods.
 For example, the following function creates an object for books with
properties for title, category and author:
Code:
function book(title, category, author)
{
this.title = title
this.category = category
this.author = author
}
mybook = new book("TheThing", "horror", "John Lynch")

 this
 The keyword this is used to refer to the current object. In a method, it usually refers to the
calling object.
 The keyword this is used as the parameter of the DescribeAge function to refer to whichever
object is calling it, as seen in the final bit of code which creates a specific instance of the Car
object whose Description property will now contain the string "Old-fashioned":
Code:
function describeAge(obj)
{
if(obj.year < 1996)
return "Old-fashioned"
else
return "Good-as-new"
}
function car(make, year, description)
{this.make = make, this.year = year, this.description = describeAge(this)}
myCar = new car("Ford", "1993", describeAge(this))

 Void
The void operator evaluates an expression without
returning a value. Although the use of brackets after it
is optional, it is good style to use them.
 The following example creates a hyperlink on the
word "green" which, when clicked, changes the
background color to light green:
Code:
 <a
href="javascript:void(document.bgColor='lightgreen')">green</a>

 When the break statement is used with a
switch statement, it breaks out of the switch
block.
 This will stop the execution of more
execution of code and/or case testing inside
the block.
 When the break statement is used in a loop,
it breaks the loop and continues executing
the code after the loop (if any).

<!DOCTYPE html>
<html>
<body>
<p>A loop with a break.</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

 The continue statement breaks one iteration
(in the loop), if a specified condition occurs,
and continues with the next iteration in the
loop.
 This example skips the value of 3:
 Example
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
}

<!DOCTYPE html>
<html>
<body>
<p>A loop which will skip the step where i = 3.</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
}
</script>
</body>
</html>

 JavaScript comments can be used to explain
JavaScript code, and to make it more readable.
 JavaScript comments can also be used to
prevent execution, when testing alternative
code.
 Single line comments start with //.
 Any text between // and the end of the line will
be ignored by JavaScript (will not be executed).
 Multi-line comments start with /* and end
with */.
 Any text between /* and */ will be ignored by
JavaScript.

<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p><strong>Note:</strong>The comments are not executed.</p>
</body>
</html>

 do...while Statement (JavaScript) Executes
a statement block once, and then repeats
execution of the loop until a condition
expression evaluates to false.
 This loop will always be executed at least
once, even if the condition is false, because
the code block is executed before the
condition is tested

 The while loop loops through a block of code as long as a
specified condition is true.
 Syntax
while (condition) {
code block to be executed
}
 Example
 In the following example, the code in the loop will run, over and
over again, as long as a variable (i) is less than 10:
while (i < 10) {
text += "The number is " + i;
i++;
}

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript while</h1>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through a block of code as long as i is
less than 5.</p>
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 5);
}
</script>
</body>
</html>

 Loops can execute a block of code a number of times.
 Loops are handy, if you want to run the same code over
and over again, each time with a different value.
 Instead of writing:
text += cars[0] + "<br>";
 You can write:
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Loops</h1>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
</script>
</body>
</html>

 The for/in statement loops through the properties of an object.
 The block of code inside the loop will be executed once for each
property.
 JavaScript supports different kinds of loops:
 for - loops through a block of code a number of times
 for/in - loops through the properties of an object
 Syntax
 for (var in object) {
code block to be executed
}

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through the properties of an object.</p>
<p id="demo"></p>
<script>
var person = {fname:"Arti", lname:"Gavas", city:"Airoli"};
var text = "";
var x;
for (x in person) {
text += person[x] + " ";
}
}
</script>
</body>
</html>

 Like the program itself, a function is composed of a
sequence of statements called the function body.
 Values can be passed to a function, and the function
will return a value.
 In JavaScript, functions are class objects, because
they can have properties and methods just like any
other object.
 A JavaScript function is a block of code designed to
perform a particular task.
 A JavaScript function is executed when "something"
invokes it (calls it).

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>This example calls a function which performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

 Conditional statements are used to perform different
actions based on different conditions.
 In JavaScript we have the following conditional
statements:
 Use if to specify a block of code to be executed, if a
specified condition is true
 Use else to specify a block of code to be executed, if the
same condition is false
 Use else if to specify a new condition to test, if the first
condition is false
 Use switch to specify many alternative blocks of code
to be executed

 Use the if statement to specify a block of
JavaScript code to be executed if a condition
is true.
 Syntax
 if (condition) {
block of code to be executed if the condition
is true
}

<!DOCTYPE html>
<html>
<body>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>

 The switch statement evaluates an
expression.
 The value of the expression is then compared
with the values of each case in the structure.
 If there is a match, the associated block of
code is executed.
 The switch statement is often used together
with a break or a default keyword (or both).

<!DOCTYPE html>
<html>
<body>
<p>Write Banana, Orange or Apple in the input field and click the
button.</p>
<p>The switch statement will execute a block of code based on
your input.</p>
<input id="myInput" type="text">
<p id="demo"></p>
<script>
var text;
var fruits =
document.getElementById("myInput").value;
switch(fruits) {
case "Banana":
text = "Banana is good!";
break;
case "Orange":
text = "I am not a fan of orange.";
break;
case "Apple":
text = "How you like them apples?";
break;
default:
text = "I have never heard of that
fruit...";
}
document.getElementById("demo").inner
HTML = text;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>Click the button to display what day it is today.</p>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day = "Unknown Day";
}
document.getElementById("demo"
).innerHTML = "Today is " + day;
}
</script>
</body>
</html>

 import.The import statement is used to
import functions, objects or primitives that
have been exported from an external module,
another script, etc.
 Note:This feature is not implemented in any
browsers natively at this time.
 It is implemented in many transpilers, such as
theTraceur Compiler, Babel, Rollup or
Webpack

 Label statement provides an identifier for a
statement that lets you refer to it using a
break or continue statement.
 Syntax
label :Statements
 label : Any JavaScript identifier that is not a reserved word.
 statements : Group of statements. "Break" can be used
with any labeled statement, and "continue" can be used with
looping labeled statements.

<!DOCTYPE html>
<html>
<body>
<h1>The Label Statement</h1>
<script>
labelmark:
for(x=0; x<6; x++)
{
var newParagraph1 = document.createElement("p");
if(x==3)
{
break labelmark; // see the output using continue statement
}
var newText1 = document.createTextNode("The value of x is : " +x);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
}
var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("The last value of x is : " +x);
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);
</script>
</body>
</html>

 The return statement stops the execution of
a function and returns a value from that
function.
 Example
 Return the value of PI:
return Math.PI;
}
 The result will be:
▪ 3.141592653589793

<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which returns the value of PI:</p>
<p id="demo"></p>
<script>
return Math.PI;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>

FYBSC IT Web Programming Unit III Javascript

FYBSC IT Web Programming Unit III Javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to FYBSC IT Web Programming Unit III Javascript

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

More from Arti Parab Academics

More from Arti Parab Academics (20)

Recently uploaded

Recently uploaded (20)

FYBSC IT Web Programming Unit III Javascript