javascript - university of technology, iraq 2014/omar... · javascript was designed to add...

INTERNET PROGRAMMING

Software Engineering Branch / 4th Class

Computer Engineering Department

University of Technology

JavaScript

OUTLINES

2

JavaScript Basic

© Omar Janeh, 2015 | University of Technology, Baghdad

HTML & CSS & JAVASCRIPT DOCUMENTS

3

HTML to define the content of web pages.

CSS to specify the layout of web pages.

JavaScript to program the behavior of web pages.


WHAT IS JAVASCRIPT?

JavaScript was designed to add interactivity to

HTML pages.

JavaScript is a scripting language.

A scripting language is a lightweight programming

language.

JavaScript is usually embedded directly into HTML

pages.

JavaScript is an interpreted language (means that

scripts execute without preliminary compilation).

Everyone can use JavaScript without purchasing a

license. 4


ARE JAVA AND JAVASCRIPT THE SAME?

No, they are not. Java and JavaScript are two

completely different languages in both concept and

design.

Java (developed by Sun Microsystems) is a

powerful and much more complex programming

language in the same category as C and C++.

5


WHAT CAN JAVASCRIPT DO?

JavaScript gives HTML designers a programming tool. HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax. Almost anyone can put small “snippets” of code into their HTML pages.

JavaScript can put dynamic text into an HTML page. A JavaScript statement like document.write(“<h1>” + name + “</h1>”) can write a variable text into an HTML page.

JavaScript can react to events. A JavaScript script can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.

JavaScript can read and write HTML elements. A JavaScript script can read and change the content of an HTML element.

6


WHAT CAN JAVASCRIPT DO?

JavaScript can be used to validate data. A

JavaScript script can be used to validate form data

before it is submitted to a server. This saves the

server from extra processing.

JavaScript can be used to detect the visitor’s

browser. A JavaScript script can be used to detect

the visitor’s browser, and depending on the

browser, load another page specifically designed

for that browser.

JavaScript can be used to create cookies. A

JavaScript script can be used to store and retrieve

information on the visitor’s computer.

7


WHERE TO PUT THE JAVASCRIPT

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>

function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!";}

</script>

</body>

</html> 8


WHERE TO PUT THE JAVASCRIPT

Internal JavaScript: You can place any number of

scripts in an HTML document. 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. External scripts are practical when the

same code is used in many different web pages.

9

<script>

document.getElementById("demo").innerHTML

= "My First JavaScript";

</script>

<script src="myScript.js"> </script> © Omar Janeh, 2015 | University of Technology, Baghdad

JAVASCRIPT STATEMENTS

<html>

<body>

<script>

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph.</p>");

document.write("<p>This is another paragraph.</p>");

</script>

</body>

</html>

10


JAVASCRIPT COMMENTS

<html>

<body>

<script type="text/javascript">

// Write a heading

document.write("<h1>This is a heading</h1>");

// Write two paragraphs:

document.write("<p>This is a paragraph.</p>");

document.write("<p>This is another paragraph.</p>");

</script>

</body>

</html> 11


JAVASCRIPT VARIABLES

var pi = 3.14;

var person = "John Doe";

var answer = 'Yes I am!';

12

<!DOCTYPE html>

<html>

<body>

<p>Create a variable, assign a

value to it, and display it:</p>

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

<script>

var carName = "Volvo";

document.getElementById("demo").

innerHTML = carName;

</script>

</body>

</html>


JAVASCRIPT OPERATORS

13


JAVASCRIPT OPERATORS

14

<html>

<body>


x=5+5;

document.write(x);

document.write("<br />");

x="5"+"5";

document.write(x);


x=5+"5";

document.write(x);


x="5"+5;

document.write(x);


</script>

<p>The rule is: If you add a

number and a string, the

result

will be a string.</p>

</body>

</html>


JAVASCRIPT COMPARISONS

15


JAVASCRIPT IF...ELSE STATEMENTS

<html>

<body>


var d = new Date();

var time = d.getHours();

if (time < 10)

{

document.write("<b>Good

morning</b>");

}

else

{

document.write("<b>Good day</b>");

}

</script> 16

<p>

This example demonstrates the

If...Else statement.</p>

<p>

If the time on your browser

is less than 10,

you will get a "Good morning"

greeting.

Otherwise you will get a

"Good day" greeting.</p>

</body>

</html>


JAVASCRIPT LOOPS

The for Loop:

<html>

<body>


for (i = 0; i <= 5; i++)

{

document.write("The number is " + i);


}

</script>

<p>Explanation:</p>

<p>This for loop starts with i=0.</p>

<p>As long as <b>i</b> is less than, or equal to 5, the loop

will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>

</html> 17


JAVASCRIPT LOOPS

The while Loop:

<html>

<body>


i=0;

while (i<=5)

{

document.write("The number is " + i);


i++;

} </script> <p>Explanation:</p> <p><b>i</b> is equal to

0.</p> <p>While <b>i</b> is less than, or equal to,

5, the loop will continue to run.</p> <p><b>i</b>

will increase by 1 each time the loop runs.</p>

</body>

</html>

18


JAVASCRIPT POPUP BOXES

<html>

<head>


function show_confirm()

{

var r=confirm("Press a button!");

if (r==true)

{

alert("You pressed OK!");

}

19

else

{

alert("You pressed

Cancel!");

}

}

</script>

</head>

<body>

<input type="button"

onclick="show_confirm()"

value="Show a

confirm box" />

</body>

</html>


JAVASCRIPT FUNCTIONS

<html>

<head>


function displaymessage()

{

alert("Hello World!");

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!"

onclick="displaymessage()" />

</form>

<p>By pressing the button above, a function will be called.

The function will alert a message.</p>

</body>

</html> 20


JAVASCRIPT EVENTS

onClick: <input type="button" name="language" value="Click for Spanish"

onclick="translate()">

onMouseOver and onMouseOut: <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver

event');return false"><img src="w3s.gif“ alt="w3schools" /></a>.

onSubmit:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onFocus, onBlur, and onChange <input type="text" size="30" id="email“ onchange="checkEmail()"> 21


JAVASCRIPT EVENTS

22


JAVASCRIPT EVENTS

23


JAVASCRIPT TRY…CATCH STATEMENTS

<html>

<head>

<script

type="text/javascript">

var txt="";

function message()

{

try

{

adddlert("Welcome

guest!");

}

catch(err)

{

txt="There was an error on

this page.\n\n"; 24

txt+="Error message: " +

err.message + "\n\n";

txt+="Click OK to

continue.\n\n";

alert(txt);

}

}

</script>

</head>.

<body>

<input type="button"

value="View message"

onclick="message()"

/>

</body>

</html>


JAVASCRIPT SPECIAL CHARACTERS

25

var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);

JavaScript will now output the proper text string:

We are the so-called “Vikings” from the north.


REFERENCES

26


27

Next Lecture JavaScript (JS)

javascript - university of technology, iraq 2014/omar... · javascript was designed to add...

Documents