Scribd
Upload
13 views

1 JS Intro Opr DT Var (Unit 3)

Uploaded by

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

1 JS Intro Opr DT Var (Unit 3)

Uploaded by

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

WEB TECHNOLOGY

KCS-602

by

Dr. Seema Maitrey


M.Tech(CE), Ph.D(CSE)
Department of Computer Science & Engineering
Contents
❑ Introduction

❑ Operators

❑ Datatypes

❑ Variables
INTRODUCTION TO JAVASCRIPT
• JavaScript is not Java, or even related to Java
• The original name for JavaScript was “LiveScript”
• The name was changed when Java became popular
• Now that Microsoft no longer likes Java, its name for their JavaScript dialect is “Active Script”

Statements in JavaScript resemble statements in Java, because both languages


borrowed heavily from the C language

• JavaScript should be fairly easy for Java programmers to learn


• However, JavaScript is a complete, full-featured, complex language
• JavaScript are used to add functionality to HTML pages

JavaScript is reasonably platform-independent


Cont…
• JavaScript is a object-based scripting language and it is light weighted.
• It is first implemented by Netscape (with help from Sun Microsystems).
• JavaScript was created by Brendan Eich at Netscape in 1995 for the purpose of
allowing code in web-pages (performing logical operation on client side).
• It is not compiled but translated. JavaScript Translator is responsible to translate the
JavaScript code which is embedded in browser.

What can JavaScript Do?


• JavaScript can dynamically modify an HTML page

• JavaScript can react to user input

• JavaScript can validate user input

• JavaScript is a full-featured programming language


• JavaScript user interaction does not require any communication with the server
Features of JavaScript
Way of Using JavaScript
There are three places to put the JavaScript code.
• Between the <body> </body> tag of html (Inline JavaScript)
• Between the <head> </head> tag of html (Internal JavaScript)
• In .js file (External JavaScript)

<html>
<body>
To Put a JavaScript Into an HTML Page:
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
(i) Inline JavaScript

• When java script is written within the html element using attributes related to
events of the element then it is called as inline java script.

Example: <html> <form>


<input type="button" value="Click" onclick="alert('Button Clicked')"/>
</form> </html>

Output:
(ii) Internal JavaScript

Java script when written within the section using element is called as internal java script

<html>
<head>
<script>
function msg()
Example: {
alert("Welcome in JavaScript"); }
</script>
</head>
<form>
<input type="button" value="Click" onclick="msg()"/>
</form>
</html>

Output:
click
(iii) External JavaScript
• Writing javascript is written in a separate file with extension .js is called as external java script.
• For adding the reference of an external java script file to html page, use tag with src attribute.
Example: <script type="text/javascript" src="filename.js"/>
• Now, create a file with name message.js and write the following java script functions in it.
function msg()
{ alert("Welcome in JavaScript"); }

<html> <head>
Example: <script type="text/javascript" src="message.js">
</script> </head>
<body>
<form>
<input type="button" value="click" onclick="msg()"/>
</form> </body> </html>

output:
Simple User Interaction: alert(), confirm(), and prompt()
There are three built-in methods of doing simple user interaction

(i) alert(msg) alerts the user that something has happened.


• Display a message in a dialog box.

(ii) confirm(msg) Display a message in a dialog box with two buttons: "OK" or "Cancel".

• returns true if the user click "OK". Otherwise it returns false.

(iii) prompt(msg, default) Display a message and allow the user to enter a value.
• The second argument is the "default value" to be displayed in the input textfield.
• Without the default value, "undefined" is shown in the input textfield.
• If the user click the "OK" button, prompt() returns the value in the input textfield
as a string.
• If the user click the "Cancel" button, prompt() returns null.
alert(), confirm(), and prompt()
JS COMMENTS
There are two types of comments in JavaScript:
1) Single-line Comment: It is represented by double forward slashes (//).
It can be used before and after the statement.

<script>
Ex: // It is single line comment
document.write("hello javascript");
</script>

2) Multi-line Comment: It can be used to add single as well as multi line comments.
It is represented : /* your code here */
<script>
/* It is multi line comment.
Ex: It will not be displayed */
document.write("example of javascript multiline
comment");
</script>
IDENTIFIER

JavaScript Identifiers are names given to variables, functions, etc.

It is the same as identifiers in other programming languages like C, C++, Java,


etc. except that it allows an additional character – '$'.

• Contains only 'A' – 'Z', 'a' – 'z', '0' – '9', '_', '$'
• First character cannot be a digit
• Case-sensitive
• Cannot be reserved words or keywords
VARIABLE
It is simply a name of storage location. There are two types of variables in JavaScript :
-local variable and global variable.

Rules while declaring a 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.

<script> Output: 30
Example: var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>

• Dynamic binding – a variable can hold any type of value


• If a variable is used without being declared, the variable is created automatically.
(1) local variable
Declared inside block or function using “var” keyword. It is accessible within the function or block only.

<script> <script>
function abc() If(10<13)
Example: { Or,
{
var x=10; //local variable var y=20; // local variable
} }
</script> </script>
(2) global variable
Declared outside the function or declared with window object. It is accessible from any function.

<script>
var data=200; //gloabal variable
function a(){
document.writeln(data); }

Example: function b(){


document.writeln(data);
}
a(); //calling JavaScript function
b();
</script>
DATA TYPES
• Primitive data types
– Number: integer & floating-point numbers
– Boolean: true or false
– String: a sequence of alphanumeric characters
– Null: to represent nothing.
– Undefined: to represent the value of an unintialized variable

• non-primitive data type

– Object: represents instance that allow to access members


– Array: a sequence of similar values
– RegExp: represents regular expression
OPERATORS
Symbols that are used to perform operations on operands.
Arithmetic Operators +, -, *, /, %, ++, --

Comparison operators(Relational) Operators ==, !=, >, >=, <, <=,


===, !== (Strictly equals and strictly not equals)
Categories i.e., Type and value of operand must match / must not
of match
operators:
Logical Operators ! – Logical NOT, && – Logical AND, || – Logical OR

Assignment operators =, +=, -=, *=, /=, %=

Bitwise operators &, |, ^, ~, >>, <<, >>>

String concatenation operator +

Special Operators (?:), ,(Comma Operator allows multiple


expressions to be evaluated as single statement),
instanceof, new, typeof,
(1) typeof operator
It is an unary operator that tells the type of its operand.

Returns a string which can be "number", "string", "boolean", "object", "function", "undefined“ & "null"

<SCRIPT>
var x = "hello";
var y=10;
Example: alert("Variable x value is " + typeof x );
alert("Variable y value is " + typeof y );
alert("Variable z value is " + typeof z );
</script>

OP:
(2) == vs ===
// Type conversion is performed before comparison
var v1 = ("5" == 5); // true

// No implicit type conversion. True if only if both types & values are equal

var v2 = (“5" === 5); // false

var v3 = (5 === 5.0); // true

var v4 = (true == 1); // true (true is converted to 1)

var v5 = (true == 2); // false (true is converted to 1)

var v6 = (true == "1") // true


We Covered:

✓ Introduction to JS

✓ Operators , Datatypes

✓ Variables
Thank
You

You might also like