Web Technologies
01 Introduction to JavaScript
Dr. Mostafa Elgendy
[email protected]
2
Agenda
❖ Introduction
❖ Variables
❖ Conditionals
❖ Summary
IS388 - Web Programming 22-Mar-23
3
Introduction
❖ JavaScript is a client-side scripting language that runs entirely
inside the web browser.
❖ To call it up, you place it between opening <script> and closing
</script> HTML tags
IS388 - Web Programming 22-Mar-23
4
Introduction
❖ client-side scripting (JavaScript) benefits:
❖ Usability: can modify a page without having to post back to the server.
❖ Efficiency: can make quick changes to page without waiting for server.
❖ Event-driven: can respond to user actions like clicks and key presses.
IS388 - Web Programming 22-Mar-23
5
Introduction
❖ server-side programming (PHP) 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
IS388 - Web Programming 22-Mar-23
6
Introduction
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
</body>
</html>
JavaScript
IS388 - Web Programming 22-Mar-23
7
Introduction
❖ You may also have noticed that, unlike with PHP, there is no trailing
semicolon (;).
❖ This is because a newline serves the same purpose as a semicolon in
JavaScript.
❖ If you wish to have more than one statement on a single line, you do
need to place a semicolon after each command except the last one
IS388 - Web Programming 22-Mar-23
8
Introduction
❖ You can put it in the <head> section, which is the ideal place if
you wish to execute a script when a page loads.
❖ In addition to writing JavaScript code directly in HTML
documents, you can include files of JavaScript code:
❖ <script type="text/javascript" src="script.js"></script>
IS388 - Web Programming 22-Mar-23
9
Variables
IS388 - Web Programming 22-Mar-23
10
Variables
❖ No particular character identifies a variable in JavaScript as the dollar sign
does in PHP.
❖ A variable may include only the letters a–z, A–Z, 0–9, the $ symbol, and the underscore
(_).
❖ No other characters, such as spaces or punctuation, are allowed in a variable name.
❖ The first character of a variable name can be only a–z, A–Z, $, or _ (no numbers).
❖ Names are case-sensitive. Count, count, and COUNT are all different variables.
❖ There is no set limit on variable name lengths.
IS388 - Web Programming 22-Mar-23
11
Variable Typing
❖ Like PHP, JavaScript is a very <script>
n = '838102050' // Set 'n' to a string
loosely typed language. document.write('n = ' + n + ', and is a ' + typeof n +
'<br>')
❖ The type of a variable is determined n = 12345 * 67890; // Set 'n' to a number
document.write('n = ' + n + ', and is a ' + typeof n +
only when a value is assigned. '<br>')
n += ' plus some text' // Change 'n' from a number to a
❖ Usually, you don’t have to worry string
document.write('n = ' + n + ', and is a ' + typeof n +
about the type; JavaScript figures '<br>’)
out what you want and just does it. </script> JavaScript
n = 838102050, and is a string
n = 838102050, and is a number
n = 838102050 plus some text, and is a string output
IS388 - Web Programming 22-Mar-23
12
String Variables
❖ JavaScript string variables should be enclosed in either single or
double quotation marks, like this:
❖ greeting = "Hello there"
❖ warning = 'Be careful’
❖ String Concatenation
❖ document.write("You have " + messages + " messages.")
IS388 - Web Programming 22-Mar-23
13
Numeric Variables
❖ Creating a numeric variable is as simple as assigning a value,
like these examples:
❖ count = 42
❖ temperature = 98.4
IS388 - Web Programming 22-Mar-23
14
Array
❖ JavaScript arrays are also very similar to those in PHP, in that an
array can contain string or numeric data, as well as other arrays.
❖ toys = ['bat', 'ball', 'whistle', 'puzzle', 'doll’]
IS388 - Web Programming 22-Mar-23
15
Operators
❖ Operators in JavaScript, as in PHP, can involve mathematics,
changes to strings, and comparison and logical operations.
❖ document.write(13 + 2)
IS388 - Web Programming 22-Mar-23
16
Arithmetic Operators
IS388 - Web Programming 22-Mar-23
17
Assignment Operators
IS388 - Web Programming 22-Mar-23
18
Comparison Operators
IS388 - Web Programming 22-Mar-23
19
Logical Operators
IS388 - Web Programming 22-Mar-23
20
Functions
❖ As with PHP, JavaScript functions are used to separate out
sections of code that perform a particular task.
<script>
function product(a, b)
{
return a*b
}
</script> JavaScript
IS388 - Web Programming 22-Mar-23
21
Conditionals
IS388 - Web Programming 22-Mar-23
22
The if Statement
❖ The code within such a statement is executed only if the given
expression evaluates to true.
if (a > 100)
{
b=2
document.write("a is greater than 100")
}
if (b == 10)
document.write("b is equal to 10")
JavaScript
IS388 - Web Programming 22-Mar-23
23
The else Statement
❖ When a condition has not been met, you can execute an alternative by using an
else statement.
if (a > 100)
{
if (a > 100) document.write("a is greater than 100")
{ }
document.write("a is greater than 100") else if(a < 100)
} {
else document.write("a is less than 100")
{ }
document.write("a is less than or equal to 100") else
} {
JavaScript document.write("a is equal to 100")
} JavaScript
IS388 - Web Programming 22-Mar-23
24
The switch Statement
<script>
switch (page)
{
case "Home":
document.write("You selected Home")
break
case "About":
document.write("You selected About")
break
case "Login":
document.write("You selected Login")
break
case "Links":
document.write("You selected Links")
break
}
</script> JavaScript
IS388 - Web Programming 22-Mar-23
25
Looping
IS388 - Web Programming 22-Mar-23
26
while Loops
<script>
counter=0
while (counter < 5)
{
document.write("Counter: " + counter + "<br>")
++counter
}
</script> JavaScript
Counter: 0
Counter: 1
Counter: 2
Counter: 3
Counter: 4
output
IS388 - Web Programming 22-Mar-23
27
do...while Loops
<script>
count = 1
do
{
document.write(count + " times 7 is " + count * 7 + "<br>")
} while (++count <= 7)
</script> JavaScript
1 times 7 is 7
2 times 7 is 14
3 times 7 is 21
4 times 7 is 28
5 times 7 is 35
6 times 7 is 42
7 times 7 is 49
output
IS388 - Web Programming 22-Mar-23
28
for Loops
<script>
for (count = 1 ; count <= 7 ; ++count)
{
document.write(count + "times 7 is " + count * 7 + "<br>");
}
</script> JavaScript
1 times 7 is 7
2 times 7 is 14
3 times 7 is 21
4 times 7 is 28
5 times 7 is 35
6 times 7 is 42
7 times 7 is 49
output
IS388 - Web Programming 22-Mar-23
29
Breaking Out of a Loop
<script>
haystack = new Array()
haystack[17] = "Needle"
for (j = 0 ; j < 20 ; ++j)
{
if (haystack[j] == "Needle")
{
document.write("<br>- Found at location " + j)
break
}
else document.write(j + ", ")
}
</script> JavaScript
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
- Found at location 17
output
IS388 - Web Programming 22-Mar-23
30
The continue Statement
<script>
haystack = new Array()
haystack[4] = "Needle";
haystack[11] = "Needle"; 0, 1, 2, 3,
haystack[17] = "Needle" - Found at location 4
for (j = 0 ; j < 20 ; ++j) 5, 6, 7, 8, 9, 10,
{ - Found at location 11
if (haystack[j] == "Needle") 12, 13, 14, 15, 16,
{ - Found at location 17
document.write("<br>- Found at location " + j + "<br>") 18, 19
continue output
}
document.write(j + ", ")
}
</script> JavaScript
IS388 - Web Programming 22-Mar-23
31
Access DOM
IS388 - Web Programming 22-Mar-23
32
HTML DOM
❖ Is a standard object model and
programming interface for HTML
❖ The HTML elements as objects
❖ The properties of all HTML elements
❖ The methods to access all HTML elements
❖ The events for all HTML elements
IS388 - Web Programming 22-Mar-23
33
getElementById
❖ getElementById: is a function used to access element by id using
JavaScript.
❖ getElementById('id1').style: is used to access the style of an
element.
IS388 - Web Programming 22-Mar-23
34
Example1
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick =
"document.getElementById('id1').style.color =
'red'">Click Me!</button>
</body>
</html>
JavaScript
IS388 - Web Programming 22-Mar-23
35
Example2
<!DOCTYPE html>
<html>
<body>
<div id='myobj'>Some text</div>
<script>
document.getElementById('myobj').style.color =
'green’
document.getElementById('myobj').style.fontStyle
= 'italic'
</script>
</body>
</html>
JavaScript
IS388 - Web Programming 22-Mar-23
36
innerHTML
❖ innerHTML: To access the content of an element
IS388 - Web Programming 22-Mar-23
37
Example3
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text =
document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>
JavaScript
IS388 - Web Programming 22-Mar-23
38
Example 4
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
document.getElementById("one").innerHTML="<b>Hel
lo World</b>";
</script>
</body>
</html>
JavaScript
IS388 - Web Programming 22-Mar-23
39
getElementsByTagName
❖ getElementsByTagName: To access elements and attributes
using tag name. This method will return an array of all the items
with the same tag name.
IS388 - Web Programming 22-Mar-23
40
Example 5
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs =
document.getElementsByTagName("p");
alert("Content in the second paragraph is " +
paragraphs[1].innerHTML);
</script>
</body>
</html>
JavaScript
IS388 - Web Programming 22-Mar-23
41
Example 6
<html>
<body>
<div id='object'>Div Object</div>
<script>
var div1 = document.getElementById('object').style
div1.border = 'solid 1px red’
div1.width = '200px'
div1.height = '200px’
div1.background = '#eee’
div1.color = 'blue'
div1.fontSize = '15pt'
div1.fontFamily = 'Helvetica’
div1.fontStyle = 'italic'
</script>
</body>
</html> JavaScript
IS388 - Web Programming 22-Mar-23
42
Summary
❖ Introduction
❖ Variables
❖ Conditionals
❖ Summary
IS388 - Web Programming 22-Mar-23
Questions
