Scribd
Upload
4 views

About JavaScript

JavaScript is a lightweight, open-source programming language primarily used for client-side validations in HTML and web development, first developed by Netscape in 1995. It allows for increased interactivity, immediate feedback, and richer interfaces on web pages through various features like functions, events, and data types. Best practices for JavaScript include avoiding global variables, declaring local variables, and minimizing DOM access.

Uploaded by

Chaluvadi Laxman
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
4 views

About JavaScript

JavaScript is a lightweight, open-source programming language primarily used for client-side validations in HTML and web development, first developed by Netscape in 1995. It allows for increased interactivity, immediate feedback, and richer interfaces on web pages through various features like functions, events, and data types. Best practices for JavaScript include avoiding global variables, declaring local variables, and minimizing DOM access.

Uploaded by

Chaluvadi Laxman
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 16

Copyright © 2013 Tech Mahindra. All rights reserved.

1
JavaScript

Copyright © 2013 Tech Mahindra. All rights reserved. 2


What is JavaScript?

•JavaScript is a programming language for HTML and Web.

 JavaScript performs Client side Validations.


 JavaScript is light weight programming language.
 Easy to learn.
 It is open source and cross Platform.

• Developed by Netscape in 1995.

•JavaScript can be placed in the <body> or <head> of the HTML.

Copyright © 2013 Tech Mahindra. All rights reserved. 3


Advantages of JavaScript
 Less server interaction − You can validate user input before sending the
page off to the server. This saves server traffic, which means less load on
your server. .

 Increased interactivity − You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.

 Richer interfaces − You can use JavaScript to include such items as drag-
and-drop components and sliders to give a Rich Interface to your site visitors.

 Immediate feedback to the visitors − They don't have to wait for a page
reload to see if they have forgotten to enter something.

Copyright © 2013 Tech Mahindra. All rights reserved. 4


Implementing JavaScript in HTML

 You can place any number of scripts in an HTML document.


 Scripts can be placed in the <body>, or in the <head> section of an HTML
page, or in both.
 JavaScript in <head>
<head>
<script>
Function myFunction() {
}
</script>
</head>

Copyright © 2013 Tech Mahindra. All rights reserved. 5


JavaScript Syntax
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Statements</h1>

<p>Statements are separated by semicolons.</p>

<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

Copyright © 2013 Tech Mahindra. All rights reserved. 6


DataTypes

JavaScript supports following data types.


String
Boolean
Number
Array
Object

Declaring variables in javascript

var length = 16; // Number


var lastName = "Johnson"; // String
Var cars = ["Saab", "Volvo", "BMW"]; //Array
var x = {firstName:"John", lastName:"Doe"}; //object

Copyright © 2013 Tech Mahindra. All rights reserved. 7


JavaScript Functions

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).

Syntax:
function name(parameter1, parameter2, parameter3) {
code to be executed
}
Example:

<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

Copyright © 2013 Tech Mahindra. All rights reserved. 8


JavaScript Scope

In JavaScript, scope is the set of variables, objects, and functions you have
access to.

Local variables
Global Variables

Local Variable:
Variables declared within a JavaScript function, become LOCAL to the function.

Example :

In below Example carName cannot be accessed outside of myfunction.


function myFunction() {
var carName = "Volvo";
}

Copyright © 2013 Tech Mahindra. All rights reserved. 9


JavaScript Scope

Global Variable :

A variable declared outside a function, becomes GLOBAL.

Example :

var carName = " Volvo";

// code here can use carName

function myFunction() {

// code here can use carName

Copyright © 2013 Tech Mahindra. All rights reserved. 10


JavaScript Events

 By using JavaScript Events , we can make changes to HTML .


 Most common JavaScript Events
onclick - the user clicks an html element.
onchange – An HTML element has been changed.
onmouseover – the user moves the mouse over an HTML element
onmouseout – the user moves the mouse out of an html element.
onload – the browser has finished loading the page.
onkeydown – user has pushed a keyboard key.

Copyright © 2013 Tech Mahindra. All rights reserved. 11


Java script string Methods

 Length : The length property returns the length of a string:


 Indexof : The indexOf() method returns the index of (the position of)
the first occurrence of a specified text in a string:
 search : The search() method searches a string for a specified value and
returns the position of the match:
 slice : slice() extracts a part of a string and returns the extracted part in a new
string.
 replace: The replace() method replaces a specified value with another value
in a string.
 substring : substring() is similar to slice() but will not accepts negative
indexes.
 Uppercase: A string is converted to upper case with toUpperCase():
 Concat: used to concat two or more strings.

Copyright © 2013 Tech Mahindra. All rights reserved. 12


Java script Arrays

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


Syntax:
<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
note : The first line (in the script) creates an array named cars

Alternate :
var cars = [
"Saab",
"Volvo",
"BMW"
];
Copyright © 2013 Tech Mahindra. All rights reserved. 13
JavaScript Array Methods

 The strength of JavaScript arrays lies in the array methods


 toString :The JavaScript method toString() converts an array to a string
of (comma separated) array values.
 join : The join() method also joins all array elements into a string.
 pop : The pop() method removes the last element from an array.
 push : The push() method adds a new element to an array (at the end).
 shift : The shift() method removes the first array element and "shifts" all
other elements to a lower index.
 unshift: The unshift() method adds a new element to an array (at the
beginning), and "unshifts" older elements.
 sort : The sort() method sorts an array alphabetically.
 reverse :The reverse() method reverses the elements in an array.

Copyright © 2013 Tech Mahindra. All rights reserved. 14


JavaScript Best practices

 Avoid Global Variables :


 Always Declare Local Variables
 Declarations on Top
 Initialize Variables
 Don't Use new Object()
 End Your Switches with Defaults
 Add your scripts at bottom of the <body>
 Avoid Using eval()
 Reduce Activity in Loops
 Avoid Unnecessary Variables
 Reduce DOM Access

Copyright © 2013 Tech Mahindra. All rights reserved. 15


Thank You

Copyright © 2013 Tech Mahindra. All rights reserved. 16

You might also like