JavaScript
Dr. Waheed Anwar
Computer Science
server-side programming
server-side programming benefits:
security: has access to server's private
data; client can't see source code
compatibility: not subject to browser
compatibility issues
power: can write files, open connections to
servers, connect to databases, ...
Computer Science
client-side programming
client-side scripting benefits:
usability: can modify a page without having
to post back to the server (faster UI)
efficiency: can make small, quick changes to
page without waiting for server
event-driven: can respond to user actions
like clicks and key presses
Computer Science
What is Javascript?
4
a lightweight programming language ("scripting
language")
❑ used to make web pages interactive
❑ insert dynamic text into HTML (ex: user name)
❑ react to events (ex: page load user click)
❑ get information about a user's computer (ex: browser
type)
❑ perform calculations on user's computer (ex: form
validation)
Computer Science
First Program in JavaScript
<body>
<script>
[Link]("Welcome to java script programming");
[Link](“ <h1> Welcome to java script programming </h1>");
[Link]("Welcome to java script programming"+my);
</script>
</body>
Computer Science
Popup boxes
6
alert("message from alet"); // message
confirm("message from confirm"); // returns true
or false
prompt("message from prompt"); // returns user
input string
Computer Science
Statements, I
Most JavaScript statements are also borrowed from C
▪ Assignment: greeting = "Hello, " + name;
▪ Compound statement:
{ statement; ...; statement }
▪ If statements:
if (condition) statement;
if (condition) statement; else statement;
▪ Familiar loop statements:
while (condition) statement;
do statement while (condition);
for (initialization; condition; increment) statement;
Computer Science
while loops (same as Java/c)
8
while (condition) {
statements;
}
do {
statements;
} while (condition);
break and continue keywords also behave as in Java/c
Computer Science
for loop (same as C/Java)
9 var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
}
var s1 = "hello";
var s2 = "";
for (var i = 0; i < [Link]; i++) {
s2 += [Link](i) + [Link](i);
}
// s2 stores "hheelllloo"
Computer Science
Statements, II
• The switch statement:
switch (expression){
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
• Other familiar statements:
– break;
– continue;
– The empty statement, as in ;; or { }
Computer Science
Switch Case Example
Var num=parseInt(prompt("Please Enter number 1-4 for season"));
switch(num)
{
case 1:
[Link]("<h3> Welcome to Winter </h3>");
break;
case 2:
[Link]("<h3> Welcome to Spring </h3>");
break;
case 3:
[Link]("<h3> Welcome to Summer </h3>");
break;
case 4:
[Link]("<h3> Welcome to Autumn </h3>");
break;
default:
[Link]("<h3> This is not valid input </h3>");
}
Computer Science