Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
0 views

TechnoJavaScript

Brief introduction to Java Script.

Uploaded by

hrikroy201001001129
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

TechnoJavaScript

Brief introduction to Java Script.

Uploaded by

hrikroy201001001129
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

TECHNO INDIA UNIVERSITY

WEST BENGAL

JavaScript

1
TECHNO INDIA UNIVERSITY
WEST BENGAL

• JavaScript is used to create client-side dynamic pages.

• JavaScript is an object-based scripting language which is lightweight and


cross-platform.

• JavaScript is not a compiled language, but it is a translated language. The


JavaScript Translator (embedded in the browser) is responsible for
translating the JavaScript code for the web browser.

NOTES:
• JavaScript was initially created to “make web pages alive”.
• The programs in this language are called scripts. They can be written right
in a web page’s HTML and run automatically as the page loads.
• Scripts are provided and executed as plain text. They don’t need special
preparation or compilation to run.
• In this aspect, JavaScript is very different from another language called2Java.
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript

JavaScript (js) is a light-weight object-oriented programming language


which is used by several websites for scripting the webpages. It is an
interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. With
JavaScript, users can build modern web applications to interact directly
without reloading the page every time.

3
TECHNO INDIA UNIVERSITY
WEST BENGAL

Features of JavaScript:

• All popular web browsers support JavaScript as they provide built-in


execution environments.
• JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
• JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
• It provides good control to the users over the web browsers.

4
TECHNO INDIA UNIVERSITY
WEST BENGAL

Application of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:

• Client-side validation,

• Dynamic drop-down menus,

• Displaying date and time,

• Displaying pop-up windows and dialog boxes (like an alert dialog


box, confirm dialog box and prompt dialog box),

• Displaying clocks etc.


5
TECHNO INDIA UNIVERSITY
WEST BENGAL

Example:

<html>
<body>
<h2>Hello BCS3B Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript by JavaScript");
</script>
</body>
</html>

6
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Example

Javascript example is easy to code. JavaScript provides 3 places to put the


JavaScript code: within body tag, within head tag and external JavaScript file.

<script type="text/javascript">
document.write("JavaScript is a simple language for javatpoint learners");
</script>

• The script tag specifies that we are using JavaScript.

• The text/javascript is the content type that provides information to the


browser about the data.

• The document.write() function is used to display dynamic content through


JavaScript. 7
TECHNO INDIA UNIVERSITY
WEST BENGAL

3 Places to put JavaScript code


• Between the body tag of html
• Between the head tag of html
• In .js file (external javaScript)

1) JavaScript Example : code between the body tag


In the above example, we have displayed the dynamic content using
JavaScript. Let’s see the simple example of JavaScript that displays alert
dialog box.

<script type="text/javascript">
alert("Hello Javatpoint");
</script>
8
TECHNO INDIA UNIVERSITY
WEST BENGAL

2) JavaScript Example : code between the head tag


To create function in JavaScript, you need to write function with function_name
as given below. To call function, you need to work on event. Here we are using
onclick event to call msg() function.
<html> <body>
<head> <p>Welcome to
<script Javascript</p>
type="text/javascript"> <form>
function msg(){ <input type="button"
alert("Hello TIU"); value="click"
} onclick="msg()"/>
</script> </form>
</head> </body>
</html>

9
TECHNO INDIA UNIVERSITY
WEST BENGAL

3) External JavaScript file


• We can create external JavaScript file and embed it in many html page.

• It provides code re usability because single JavaScript file can be used


in several html pages.

• An external JavaScript file must be saved by .js extension. It is


recommended to embed all JavaScript files into a single file. It
increases the speed of the webpage.

• Let's create an external JavaScript file that prints Hello Javatpoint in a


alert dialog box.

10
TECHNO INDIA UNIVERSITY
WEST BENGAL

message.js index.html

function msg(){ <html>


alert("Hello Javatpoint"); <head>
} <script type="text/javascript"
src="message.js"></script>
</head>
<body>
include the
JavaScript <p>Welcome to JavaScript</p>
file into html <form>
page. It calls
<input type="button" value="click"
the
JavaScript onclick="msg()"/>
function on </form>
button click. </body>
</html> 11
TECHNO INDIA UNIVERSITY
WEST BENGAL

Advantages of External JavaScript

• It helps in the reusability of code in more than one HTML file.


• It allows easy code readability.
• It is time-efficient as web browsers cache the external js files, which
further reduces the page loading time.
• It enables both web designers and coders to work with html and js files
parallelly and separately, i.e., without facing any code conflictions.
• The length of the code reduces as only we need to specify the location
of the js file.

12
TECHNO INDIA UNIVERSITY
WEST BENGAL

Disadvantages of External JavaScript

• There are the following disadvantages of external files:


• The stealer may download the coder's code using the url of the js file.
• If two js files are dependent on one another, then a failure in one file
may affect the execution of the other dependent file.
• The web browser needs to make an additional http request to get the js
code.
• A tiny to a large change in the js code may cause unexpected results in
all its dependent files.
• We need to check each file that depends on the commonly created
external javascript file.
• If it is a few lines of code, then better to implement the internal
javascript code.

13
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Variable
• A JavaScript variable is simply a name of storage location. There are two
types of variables in JavaScript : local variable and global variable.

• There are some rules while declaring a JavaScript variable (also known as
identifiers).

• Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $


) sign.

• After first letter we can use digits (0 to 9), for example value1.

• JavaScript variables are case sensitive, for example x and X are different
variables.
14
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Local variable:


<html>
<body> 1
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write("The result is ", z);
</script>
</body>
</html>
2 3

15
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript global variable


A JavaScript global variable is accessible from any function. A variable i.e.
declared outside the function or declared with window object is known as global
variable. For example:
<html>
<body>
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
} A JavaScript global variable is declared outside
a();//calling JavaScript function the function or declared with window object. It
b(); can be accessed from any function.
</script>
</body>
16
</html>
TECHNO INDIA UNIVERSITY
WEST BENGAL

Declaring JavaScript global variable within function


To declare JavaScript global variables inside function, you need to use
window object. For example:
<html>
<body>
<script>
function m(){
window.value=100;//declaring global variable by window object
}
function n(){
alert(window.value);//accessing global variable from other function
}
m();
n();
</script>
</body>
</html> 17
TECHNO INDIA UNIVERSITY
WEST BENGAL

Internals of global variable in JavaScript

When you declare a variable outside the function, it is added in the


window object internally. You can access it through window object also.
For example:

var value=50;
function a()
{
alert(window.value);//accessing global variable
}

18
TECHNO INDIA UNIVERSITY
WEST BENGAL

Javascript Data Types


JavaScript provides different data types to hold different types of values. There
are two types of data types in JavaScript.

• Primitive data type


• Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify


type of the variable because it is dynamically used by JavaScript engine.
You need to use var here to specify the data type. It can hold any type of values
such as numbers, strings etc. For example:

var a=40;//holding number


var b="Rahul";//holding string
19
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript primitive data types: There are five types of primitive data types in JavaScript.
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all

JavaScript non-primitive data types:


Data Type Description
Object represents instance through which we can access
members
Array represents group of similar values
RegExp represents regular expression 20
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript If-else

The JavaScript if-else statement is used to execute the code whether


condition is true or false. There are three forms of if statement in
JavaScript.

• If Statement

• If else statement

• if else if statement

21
TECHNO INDIA UNIVERSITY
WEST BENGAL

22
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Switch result="B Grade";


break;
<!DOCTYPE html> case 'C':
<html> result="C Grade";
<body> break;
<script> default:
var grade='B'; result="No Grade";
var result; }
switch(grade){ document.write(result);
case 'A': </script>
result="A Grade"; </body>
break; </html>
case 'B':

23
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Loops: There are four types of loops in JavaScript.


– for loop
– while loop
– do-while loop
– for-in loop

• JavaScript for loop


<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
24
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript while loop JavaScript do while loop

<script> <script>
var i=11; var i=21;
while (i<=15) do{
{ document.write(i + "<br/>");
document.write(i + "<br/>"); i++;
i++; }while (i<=25);
} </script>
</script>

25
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript For In loop


Syntax
for (key in object) {
// code block to be executed
}

26
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript For In loop


<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In</h2>
<p>The for in statement can loops over array values:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html> 27
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and
method).

• JavaScript is an object-based language. Everything is an object in


JavaScript.

• JavaScript is template based not class based. Here, we don't create


class to get the object. But, we direct create objects.

Creating Objects in JavaScript: There are 3 ways to create objects.


• By object literal
• By creating instance of Object directly (using new keyword)
• By using an object constructor (using new keyword)
28
TECHNO INDIA UNIVERSITY
WEST BENGAL

JavaScript Object by object literal


The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
Example:
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>

** property and value is separated by : (colon). 29


TECHNO INDIA UNIVERSITY
WEST BENGAL

By creating instance of Object


The syntax of creating object directly is given below:
var objectname=new Object();
Example:
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
** Here, new keyword is used to create object. 30
TECHNO INDIA UNIVERSITY
WEST BENGAL

By using an Object constructor


Here, we need to create function with arguments. Each argument value can
be assigned in the current object by using this keyword.
<html>
<body>
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
</body>
</html>
** The this keyword refers to the current object. 31
TECHNO INDIA UNIVERSITY
WEST BENGAL

Thank You

32

You might also like