Scribd
Upload
20 views25 pages

Javascript

notes

Uploaded by

2k23.mca2313345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views25 pages

Javascript

notes

Uploaded by

2k23.mca2313345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

JAVASCRIPT

1
JavaScript
• Brendan Eich developed JavaScript, a computer language,
in May 1995.
• JavaScript was first implemented in Netscape Navigator,
the most popular browser at the time.

• Client-side technology
–Embedded in your HTML page
–Interpreted by the Web browser

• Simple and flexible

• Powerful to manipulate the DOM (Document Object


Model)
2
JavaScript Advantages
• JavaScript allows interactivity such as:
– Implementing form validation
– React to user actions
– Changing an image on moving mouse over it
– Sections of a page appearing and disappearing
– Content loading and changing dynamically
– Performing complex calculations

3
JavaScript Allows Interactivity
• Improve appearance
– Especially graphics
– Visual feedback
• Site navigation
• Perform calculations
• Validation of input

4
Scripting
• <script> tag
• JavaScript can be implemented using JavaScript statements
that are placed within the <script>... </script> HTML tags in a
web page.
<script ...>
JavaScript code
</script>

• The script tag takes two important attributes −


• Language − This attribute specifies what scripting language
you are using.
• Type − This attribute is what is now recommended to indicate
the scripting language in use and its value should be set to
"text/javascript".
5
Scripting

• writeln method of the document object


– Write a line in the document and position the cursor in the
next line.
– Does not affect the actual Structure of the HTML
document.

SYNTAX:

document.writeln( “ WRITE SOMETHING" );

6
The First Script

OUTPUT

7
JavaScript - Placement in HTML File
• There is a flexibility given to include JavaScript
code anywhere in an HTML document. However
the most preferred ways to include JavaScript in
an HTML file are as follows −
1. Script in <head>...</head> section.
2. Script in <body>...</body> section.
3. Script in <body>...</body> and <head>...</head>
sections.
4. Script in an external file and then include in
<head>...</head> section.
8
JavaScript – When is Executed?
• JavaScript code is executed during the page
loading or when the browser fires an event
– All statements are executed at page loading
– Some statements just define functions that can be
called later.

• Function calls or code can be attached as "event


handlers" via tag attributes
– Executed when the event is fired by the browser
<img src="logo.gif“ onclick="alert('clicked!')"/>
9
JS – DATA TYPES
• JavaScript allows you to work with three primitive data
types −
❑ Numbers, eg. 123, 120.50 etc.
❑ Strings of text e.g. "This text string" etc.
❑ Boolean e.g. true or false.

• JavaScript also defines two trivial(small and of little


importance) data types, null and undefined, each of
which defines only a single value.

• In addition to these primitive data types, JavaScript


supports a composite data type known as object.

10
JS - VARIABLES
• Variables are named containers.

• Syntax:
<script type="text/javascript">
var name = "Ali";
var money;
money = 2000.50;
</script>

• JavaScript variable can hold a value of any data type.

• variable names should not start with a numeral (0-9). They must begin with a
letter or an underscore character.

• JavaScript variable names are case-sensitive.

11
JS – VARIABLES
• 4 Ways to Declare a JavaScript Variable:
1. var •Always declare JavaScript variables with
var,let, or const.
2. let
•The var keyword is used in all JavaScript code
3. const from 1995 to 2015.

4. Using nothing •The let and const keywords were added to


JavaScript in 2015.
Ex:
•If you want your code to run in older browsers,
var x = 5; you must use var.
let y = 6;
z = x + y;
12
JavaScript Variable Scope
• Global Variables − A <script type="text/javascript">
global variable has global
scope which means it can // Declare a global variable
var myVar = "global";
be defined anywhere in
your JavaScript code. function checkscope( )
{
// Declare a local variable
• Local Variables − A local var myVar = "local";
variable will be visible only document.write(myVar);
within a function where it is }
defined. Function </script>
parameters are always local
to that function. Output: local
13
JS - COMMENTS
• Comments can be used to explain code, and to
make it more readable.

• Comments can also be used to prevent execution,


when testing alternative code.

• Syntax:
<!– or // are treated as a one-line JS comment
Multi-line comments start with /* and end with */.

14
JS – OPERATORS
1. ARITHMATIC OPERATORS

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
15
2. ASSIGNMENT OPERATORS
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
16
3. COMPARISION & LOGICAL OPERATORS
Operator Description
== equal to
=== equal value and equal type
!= not equal
not equal value or not equal
!==
type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
17
4. Ternary Operator:

• : ? Operator :
It is like the short form of the if-else
condition.
Syntax:
• Y = condition? A : B
• where A and B are values and if condition is
true then Y = A otherwise Y = B.

• Example:
• Y = (6>5) ? 6 : 5 therefore Y = 6 18
5. typeof Operator :

• typeof Operator: It returns the type of a


variable.
<script type="text/javascript">
var a = 17;
Syntax: var b = “raj";
document.write("Type of a = " + (typeof a));
• typeof variable; document.write("<br>");
document.write("Type of b = " + (typeof b));
</script>

19
Standard Popup Boxes

• In JavaScript, there are three types of popup boxes:

1. alert
2. confirm
3. prompt.

• The alert() displays a simple message, the confirm()


asks the user to accept or cancel, and the prompt()
requests user input with an optional default value.

20
Standard Popup Boxes
Alert Box

•An alert box in JavaScript is a popup window that


displays a simple message to the user.

• It is triggered by the alert() function and pauses code


execution until the user clicks the “OK” button to close
it.

Syntax:
alert("your Alert here");
21
Standard Popup Boxes

Prompt Box

A prompt box in JavaScript is a popup window that


asks the user for input. It is triggered by the prompt()
function, which displays a message and input field,
allowing the user to provide a response or cancel.

Syntax:
prompt("your Prompt here");

22
Standard Popup Boxes

Confirm Box

It is a type of pop-up box that is used to get


authorization or permission from the user. The user
has to press the ok or cancel button to proceed.

Syntax:
confirm("your query here");

23
One Example
<html>

<body>
<script type="text/javascript">
alert('Hello JavaScript!');
</script>
</body>

</html>

24
<html>
<head>
<script type = "text/javascript">
function f1() {
alert("Hello World")
}
function f2() {
confirm("confirm here")
}
function f3() {
prompt("prompt here")
}
</script>
</head>
<body>
<input type = "button" onclick = "f1()" value = "alert" />
<input type = "button" onclick = "f2()" value = "confirm" />
<input type = "button" onclick = "f3()" value = "prompt" />
</body>
</html> 25

You might also like