Syntax:: Javascript Code

Java script
• JavaScript is a lightweight, interpreted programming language.

• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform
Syntax:
<script..>
javaScript code
</script>
The script tag takes two important attributes −
1] Language
2] Type
<script language = "javaScript" type = "text/javaScript">
JavaScript code
</script>
<script type = "text/javaScript">

JavaScript code
</script>
Your First JavaScript Code
<html>
<body>
<script language = "javascript" type = "text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
JavaScript Data types & Variables
• Numbers eg. 123, 120.50 etc.
• Strings of text e.g. "This text string" etc.
• Boolean e.g. true or false.
<script type = "text/javascript">
var name = “Deep";

var money;
money = 2000.50;
</script>
Operators:
<script type="text/javascript">
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
document.write("a / b = ");
document.write("a % b = ");
document.write("a + b + c = ");
Conditional Statements-
i) if
ii) else
iii) else if
iv) switch
Loop-
i) for
ii) while
iii) do-while
<html>
<body>

</script>
<p>Set the variable to different value and then try...</p>
</body> </html>
Functions in JavaScript-
function functionname (parameter1, para2…..)
{
// function body
}
Ex:
function showMessage ()
{
alert(‘hello everyone!’)
}
Local variables: A variable declared inside a function is only visible
inside that function.
<script>
function showMessage()
{
message = "Hello, I'm JavaScript!"; // local variable
alert( message );
}
showMessage(); // Hello, I'm JavaScript!
alert( message ); // <-- Error! The variable is local to the function
</script>
Global variables: Variables declared outside of any function ,such as the
outer, username in the code above are called global.
<script>
userName = 'John';
function showMessage()
{
message = 'Hello, ' + userName;
alert(message);
}
showMessage(); // Hello, John
</script>
The return Statement
If you want to return a value from a function.
return value;
Note: This statement should be the last statement in a function.

<html> <head> <script type = "text/javascript">
function concatenate(first, last)
{ var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatenate(‘Aman', 'Ali');
document.write (result );
}
</script> </head> <body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
<p>Use different parameters inside the function and then try...</p> </body></html>
The Function() Constructor
var variablename = new Function(Arg1,Arg2…, “Function body");
</script>
<html>
<head>
<form>
</form>
var func = function(x,y)
{
return x*y
};
function secondFunction()
{
var result;
result = func(10,20);
document.write ( result );
}
function hypotenuse(a, b)
{ function square(x)
{ return x*x; }
return Math.sqrt(square(a) + square(b));
}
function secondFunction() {
var result;
result = hypotenuse(1,2);
document.write ( result );}
<p>Click the following button to call the function</p>
<form>
</form>
</body></html>
console.log() function: used to print any kind of variables defined
before in it or to just print any message that needs to be displayed to the
user.
Syntax : console.log(a);
1] Passing a number as an argument:
<script>
var a =2;
console.log(a);
</script>
2] Passing a string as an argument:
<script>
var str =“hello there”;
console.log(str);
</script>
3] Passing a char as an argument:
<script>
var ch =‘2’;
console.log(ch);
</script>
4] Passing a message as an argument:
console.log(“Hello my dear student”);
5] Passing a function as an argument:
<script>
function func(){return(5*5);}
console.log(func());
</script>
Program to generate one-time password (OTP)
<script>
// Function to generate OTP
function generateOTP() {
// Declare a digits variable
// which stores all digits
var digits = '0123456789';
var OTP = ‘ ’;
for (var i = 0; i < 4; i++ ) {
OTP += digits[Math.floor(Math.random() * 10)]; }
return OTP; }
document.write("OTP of 4 digits: ")
document.write( generateOTP() );
</script>
Generates alphanumeric OTP of lenght 6:
<script>
function generateOTP() {
var string =
'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXY
Z';
var OTP = ‘ ';
var len = string.length;
for (var i = 0; i < 6; i++ ) {
OTP += string[Math.floor(Math.random() * len)]; }
return OTP; }
document.write("OTP of 6 lenght: ")
document.write( generateOTP() );
</script>
Event? JavaScript's interaction with HTML is handled through events that occur
when the user or the browser manipulates a page.
• When the page loads, it is called an event.
• When the user clicks a button, that click too is an event.
onclick Event Type- This is the most frequently used event type which occurs
when a user clicks the left button of his mouse.
function sayHello()
{ alert("Hello World")}
</script></head> <body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body></html>
onsubmit Event Type- onsubmit is an event that occurs when you try to submit a
form. You can put your form validation against this event type.
validate() function returns true, the form will be submitted, otherwise it will not
submit the data.
function validation() {
all validation goes here
.........
return either true or false
} </script>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
<input type = "submit" value = "Submit" />
</form></body></html>
onmouseover and onmouseout-
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
JavaScript - Errors & Exceptions Handling
1) Syntax Errors/parsing errors-occur at compile time

</script>
For example, the following line causes a syntax error because it is

missing a closing parenthesis.
2) Runtime Errors/exceptions, occur during execution (after
compilation/interpretation)

</script>
For example, the following line causes a runtime error because here
the syntax is correct, but at runtime, it is trying to call a method that
does not exist.
3) Logical Errors -try...catch...finally
try {
// Code to run
[break;]
}
catch ( e ) {
// Code to run if an exception occurs
[break;]
}
[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
</script>
<html> <head><script type = "text/javascript">
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );}
catch ( e ) {
alert("Error: " + e.description ); }}
</script></head> <body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
<html><head> <script type = "text/javascript">
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a ); }
catch ( e ) {
alert("Error: " + e.description ); }
finally {
alert("Finally block will always execute!"}}
</script> </head><body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form></body></html>
Array
Declaration of an Array-basically two ways to declare an array.
1] var house = [ ];
2] var house = new Array( );
Initialization of an Array-
1] var house = [‘1BHK’, ‘2BHK’, ‘3BHK’ ];
house[0] = 1BHK;
house[1] = 2BHK;
2] var house = new Array(10,20,30) ;

JavaScript Basic Array Methods
1) Array.push() -Adding Element at the end of an Array.
var number_arr = [10,20,30,40,50];
number_arr.push(60);
2) Array.unshift() - Adding elements at the front of an Array.

Array.unshift(item1,item2…)
var number_arr=[20,30,40];
Number_arr.unshift(10,20);
3) Array.pop() : Removing elements from the end of an array.

It is used to remove array elements from the end of an array.
4) Array.shift() : Removing elements at the beginning of an array

5] Array.splice() : Insertion and Removal in between an Array.
Array.splice(start, deletecount, item1, item2)
var number arr = [20,30,40,50,60];
//splice()
//deletes 3 element starting from 1
//number array contain[20,60]
Number_arr.splice(1,3);
concat() Javascript array concat() method returns a new array comprised of
this array joined with two or more arrays.
every() Returns true if every element in this array satisfies the provided testing
function.
filter() Creates a new array with all of the elements of this array for which the
provided filtering function returns true.
forEach() Calls a function for each element in the array.
indexOf() Returns the first (least) index of an element within the array equal to the
specified value, or -1 if none is found.
Join() Joins all elements of an array into a string.
map() Creates a new array with the results of calling a provided function on
every element in this array.
lastIndexOf() Returns the last (greatest) index of an element within the array equal to
the specified value, or -1 if none is found.
Document Object Model
• The document object represents the whole html document.
• When html document is loaded in the browser, it becomes a
document object.
• It is the root element that represents the html document.
• It has properties and methods.
• By the help of document object, we can add dynamic content
to our web page.
NOTE - It is the object of window. So
window.document as same as document
Properties of document object
Methods of document object
Method Description
write("string") writes the given string on the doucment.
writes the given string on the doucment

writeln("string")
with newline character at the end.
returns the element having the given id

getElementById()
value.
returns all the elements having the given
getElementsByName()
name value.
getElementsByTagName()
tag name.
getElementsByClassName()
class name.
Accessing field value by document object
• In this example, we are going to get the value of input text by user. Here, we are
using document.form1.name.value to get the value of name field.
• Here, document is the root element that represents the html document.
• form1 is the name of the form.
• name is the attribute name of the input text.
• value is the property, that returns the value of the input text.
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name); } </script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/> </form>
Javascript - document.getElementById() method
• The document.getElementById() method returns the element of
specified id.
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
document.getElementsByName() method
The document.getElementsByName() method returns all the element of specified
name.
Syntax- document.getElementsByName("name")
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
} </script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totalelements()" value="Total Genders">
</form>
document.getElementsByTagName() method
• The document.getElementsByTagName() method returns all the element of
specified tag name.
document.getElementsByTagName("name")
function countpara(){
var totalpara=document.getElementsByTagName("p");
alert("total p tags are: "+totalpara.length); }
</script>
<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by
getElementByTagName() method.</p>
<p>Let's see the simple example</p>
<button onclick="countpara()">count paragraph</button>
Javascript - innerHTML
The innerHTML property can be used to write the dynamic html on the html
document.
<html><body>
<script type="text/javascript" >
function showcommentform() {
var data="Name:<br><input type='text' name='name'><br>Comment:<br><textarea
rows='5' cols='50'></textarea><br><input type='submit' value='comment'>";
document.getElementById('mylocation').innerHTML=data; } </script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
</body></html>
Show/Hide Comment Form Example using innerHTML
<script>
var flag=true;
function commentform(){
var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/><br/>
Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/>
<textarea rows='5' cols='70'></textarea><br><input type='submit' value='Post Comment'/></form>";
if(flag){
document.getElementById("mylocation").innerHTML=cform;
flag=false;
}else{
document.getElementById("mylocation").innerHTML="";
flag=true; } }
<button onclick="commentform()">Comment</button>
<div id="mylocation"></div> </body> </html>
innerText
• The innerText property can be used to write the dynamic text on the
html document. Here, text will not be interpreted as html text but a
normal text.
• It is used mostly in the web pages to generate the dynamic content
such as writing the validation message, password strength etc.
<html><body><script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>5){
msg="good";
}
else{
msg="poor"; }
document.getElementById('mylocation').innerText=msg; }
</script>
<form name="myForm">
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>
</form> </body></html>
<html><body><script>-VALIDATION
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
} } </script> <body>
<form name="myform" method="post" action="http://www.google.com/javascriptpages/valid.jsp"
onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register"> </form> </body></html>
Retype Password Validation
<html><head> <script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;}
else{
alert("password must be same!");
return false;}}
</script></head><body>
<form name="f1" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
email validation
We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate the email id
such as:
• email id must contain the @ and . character
• There must be at least one character before and after the @.
• There must be at least two characters after . (dot).
<script>
function validateemail() {
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
} }
</script>
<body>
<form name="myform" method="post" action="http://www.google.com/javascriptpages/valid.jsp"
onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register"> </form> </body>
JavaScript this keyword
The this keyword is a reference variable that refers to the current object.
<script>
var address=
{
company:"Javascript",
city:"Noida",
state:"UP",
fullAddress:function()
{
return this.company+" "+this.city+" "+this.state;
} };
var fetch=address.fullAddress();
document.writeln(fetch);
</script>
Global Context
In global context, variables are declared outside the function. Here, this
keyword refers to the window object.
<script>
var website=“yahoo";
function web()
{
document.write(this.website);
}
web();
</script>
The call() and apply() method
<script>
var emp_address = {
fullAddress: function() {
return this.company + " " + this.city+" "+this.state;
}
}
var address = {
company:"Javascript",
city:"Noida",
state:"UP", }
document.writeln(emp_address.fullAddress.call(address));
</script>

Syntax:: Javascript Code

Uploaded by

Copyright:

Available Formats

Syntax:: Javascript Code

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Syntax:: Javascript Code

Uploaded by

Copyright:

Available Formats

Java script

• JavaScript is a lightweight, interpreted programming language.

<script type = "text/javaScript">

<script type = "text/javascript">

var name = “Deep";

Note: This statement should be the last statement in a function.

For example, the following line causes a syntax error because it is

2] var house = new Array(10,20,30) ;

2) Array.unshift() - Adding elements at the front of an Array.

3) Array.pop() : Removing elements from the end of an array.

4) Array.shift() : Removing elements at the beginning of an array

write("string") writes the given string on the doucment.

writes the given string on the doucment

returns the element having the given id

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.