Scribd
Upload
12 views

01 - Introduction To Javascript

Uploaded by

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

01 - Introduction To Javascript

Uploaded by

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

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

You might also like