Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
13 views

01 - Introduction To Javascript

Uploaded by

mohamednoamann54
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
13 views

01 - Introduction To Javascript

Uploaded by

mohamednoamann54
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/ 43

Web Technologies

01 Introduction to JavaScript
Dr. Mostafa Elgendy
mostafa.csc0227@miuegypt.edu.eg
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