Scribd
Upload
4 views

Session1

The document provides an overview of JavaScript, highlighting its role as a dynamic programming language primarily used for client-side web development. It covers key concepts such as JavaScript statements, variables, data types, operators, and their placement within HTML files. Additionally, it discusses the advantages and disadvantages of JavaScript, along with examples of its syntax and functionality.

Uploaded by

Shimaa Said
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
4 views

Session1

The document provides an overview of JavaScript, highlighting its role as a dynamic programming language primarily used for client-side web development. It covers key concepts such as JavaScript statements, variables, data types, operators, and their placement within HTML files. Additionally, it discusses the advantages and disadvantages of JavaScript, along with examples of its syntax and functionality.

Uploaded by

Shimaa Said
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/ 28

JAVASCRIPT

1
Outline

●
Introduction to javascript
●
Javascript Statements
●
JavaScript Placement in HTML File
●
JavaScript Variables
●
Javascript Operators
●
Javascript datatypes

2
What is JavaScript ?

●
JavaScript is a dynamic computer programming language. It is lightweight and
most commonly used as a part of web pages, whose implementations allow
client-side script to interact with the user and make dynamic pages.
●
Client-side JavaScript is the most common form of the language. The script
should be included in or referenced by an HTML document for the code to be
interpreted by the browser.
●
It means that a web page need not be a static HTML, but can include
programs that interact with the user, control the browser, and dynamically
create HTML content.

3
Web programming
●
Programming for the World Wide Web involves both:
– server-side programming.
– client-side (browser-side) programming.

4
Web programming (Cont.)

5
Markup vs. Scripting vs. Programming
Languages
Markup Language Scripting Language Programming Language
A text-formatting language Interpreted command by Compiled, converted
designed to transform raw command, and remain in permanently into binary
text into structured .their original form executable files (i.e., zeros
documents, by inserting and ones) before they are
procedural and descriptive .run
markup into the raw text
Output isn’t a standalone Produce a standalone
program or application, it program or application
runs inside another program
.Very simple to learn and use Simple, but has some More complicated and has
programming logic .advanced logic and structure
.Example: HTML, XHTML Example: JavaScript, Example: C,C++, Java
VBScript and Action Script 6
Advantages of JavaScript

●
The merits of using JavaScript are :
1) 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.
2) Immediate feedback to the visitors: They don't have to wait for a page
reload to see if they have forgotten to enter something.
3) Increased interactivity: You can create interfaces that react when the
user hovers over them with a mouse or activates them via the keyboard.
4) 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.
7
Disadvantages of JavaScript

●
Limitations of JavaScript:
1) Client-side JavaScript does not allow the reading or writing of files. This
has been kept for security reason.
2) JavaScript cannot be used for networking applications because there is
no such support available.
3) JavaScript doesn't have any multi-threading or multiprocessor
capabilities.

8
JavaScript Statements

●
JavaScript statements are composed of:
●
Values, Operators, Expressions, Keywords, and Comments.
●
Most JavaScript programs contain many JavaScript statements.
●
The statements are executed, one by one, in the same order as they are
written.
●
Semicolons separate JavaScript statements.

9
JavaScript Placement in HTML File

●
You can place any number of scripts in an HTML document.
– In HTML, JavaScript code is inserted between <script> and
</script> tags.
– Scripts can be placed in the <body>, or in the <head> section of
an HTML page, or in both.
– External JavaScript: scripts can also be placed in external files
●
JavaScript files have the file extension .js.
●
To use an external script, put the name of the script file in the
src (source) attribute ofsrc="myScript.js"></script>
<script a <script> tag:
10
Your First JavaScript Code

●
This function can be used to write text. It will print “Hello World!”

<html>
<body>
<script language = "javascript" type =
"text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<input type="button" value="Click Me" onClick="alert('Hello')"/>
</body>
</html>

11
JavaScript Variables

●
Like many other programming languages, JavaScript has variables. Variables
can be thought of as named containers. You can place data into these
containers and then refer to the data simply by naming the container.
●
Before you use a variable in a JavaScript program, you must declare it.
Variables are declared with the var keyword as follows.
●
Storing a value in a variable is called variable initialization.
●
You can do variable initialization at the time of variable creation or at a later
point in time when you need that variable.

12
JavaScript Variables

●
In this example, x, y, and z, are variables, declared with the var keyword:

<body>

<h2>JavaScript Variables</h2>

<p>In this example, x, y, and z are variables.</p>

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

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body> 13
JavaScript Datatypes

●
One of the most fundamental characteristics of a programming language is the
set of data types it supports. These are the type of values that can be
represented and manipulated in a programming language.
●
JavaScript allows you to work with three primitive data types
1) Numbers, eg. 123, 120.50 .
2) Strings of text e.g. "This text string" .
3) Boolean e.g. true or false.

var name = "Ali";


var money;
money = 2000.50;
14
JavaScript Datatypes

●
One Statement, Many Variables
●
You can declare many variables in one statement.
●
Start the statement with var and separate the variables by comma:

var person = "John Doe", carName = "Volvo", price = 200;

15
JavaScript Variable Scope

●
The scope of a variable is the region of your program in which it is defined.
JavaScript variables have only two scopes.
1) Global Variables: A global variable has global scope which means it can be
defined anywhere in your JavaScript code.
2) Local Variables: A local variable will be visible only within a function where it
is defined. Function parameters are always local to that function.
<script type = "text/javascript">

var myVar = "global"; // Declare a global variable


function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
</script>
16
JavaScript Operators

●
JavaScript supports the following types of operators.
1) Arithmetic Operators
2) Comparison Operators
3) Logical (or Relational) Operators
4) Assignment Operators
5) Conditional (or ternary) Operators

17
Arithmetic Operators

Operator Description Example Result


+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4

18
Arithmetic Operators

●
For Example:

<!DOCTYPE html>
<html>
<body>

<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new
number.</p>

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

<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>

</body> 19
</html>
Assignment Operators

●
Assignment Operators:
(x=10, y=5)
Operator Example Same As Result
= x=y x=5
=+ x+=y x=x+y x=15
=- x-=y x=x-y x=5
=* x*=y x=x*y x=50
=/ x/=y x=x/y x=2
=% x%=y x=x%y x=0

20
Comparison Operators

Operator Description
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to
== Equality
!= Inequality
=== Strict Equality
!== Strict Inequality
21
Comparison Operators

●
Example:

<script type = "text/javascript">


<!--
var a = 10;
var b = 20;
var linebreak = "<br />";

document.write("(a == b) => ");


result = (a == b);
document.write(result);
document.write(linebreak);
//-->
</script>

</body>
</html>
22
Logical Operators

Operator Description
&& Logical "AND" – returns true when
both operands are true; otherwise it
returns false
|| Logical "OR" – returns true if either
operand is true. It only returns false
when both operands are false
! Logical "NOT"—returns true if the
operand is false and false if the operand
is true. This is a unary operator and
precedes the operand
23
Logical Operators

●
Example:

<body>

<h2>JavaScript Comparison</h2>

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

<script>
var x = 6;
var y = 3;

document.getElementById("demo").innerHTML =
(x < 10 && y > 1) + "<br>" +
(x < 10 && y < 1);
</script>

</body>
24
String Operators

●
String Operators:
●
+ operator , used in string concatenation.
●
Example:
<script>
A=“Welcome ”
B=“Ahmed”
C=A+B
document.write (c)
// the result will be “WelcomeAhmed”
</script>

25
Conditional (Ternary) Operator

●
Special Operators:
●
Conditional Operator: (Condition)?if true:if false
●
Example:
<script>
temp=120;
x=(temp>100) ? ”red” : “blue”; // the value of x will be
“red”

temp=20;
y=(temp>100) ? ”red” : “blue”;
// the value of y will be “blue”
</script>
26
Operators Precedence
●
The operators that you have learned are evaluated in the following order (from lowest precedence to highest):
1) Assignment operators (=, +=, -=, *=, /=, %=)
2) Conditional (?:)
3) Logical or (||)
4) Logical and (&&)
5) Equality (==, !=)
6) Relational (<, <=, >=, >)
7) Addition/Subtraction (+, -)
8) Multiply/divide/modulus (*, /, %)
9) Parentheses(())
●
Example: 5 + 3 * 2 = 11  3*2=6 , then 6+5 = 11.
BUT
(5 + 3) * 2 = 16  5+3 = 8 , then 8*2 = 16.
27
Questions?

28

You might also like

pFad - Phonifier reborn

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

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy