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

Introduction To Javascript Instructor: Engr. Laila Nadeem: Pat Morin Comp240 5

The document provides an introduction and overview of JavaScript, including its history, uses, syntax, events, classes, and how it interacts with HTML documents. It explains what JavaScript is, how to add it to HTML pages, basic syntax like comments, and shows simple examples of using JavaScript to write text to an HTML document and define functions. The document serves as a high-level introduction to JavaScript for beginners.

Uploaded by

Azeem Haider
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views

Introduction To Javascript Instructor: Engr. Laila Nadeem: Pat Morin Comp240 5

The document provides an introduction and overview of JavaScript, including its history, uses, syntax, events, classes, and how it interacts with HTML documents. It explains what JavaScript is, how to add it to HTML pages, basic syntax like comments, and shows simple examples of using JavaScript to write text to an HTML document and define functions. The document serves as a high-level introduction to JavaScript for beginners.

Uploaded by

Azeem Haider
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Pat Morin

COMP240
Introduction
5 to
JavaScript
Instructor : Engr. Laila Nadeem
Outline

• What is JavaScript?
– History
– Uses
• Adding JavaScript to HTML

• JavaScript syntax

• JavaScript events

• JavaScript classes

• The HTML Document Object Model


2
What is JavaScript?

• JavaScript is a programming language for use in


HTML pages

• Invented in 1995 at Netscape Corporation


(LiveScript)

3
JavaScript is not Java

 Completely different types of languages that just happen


to be similarly named
 JavaScript - programs are interpreted in the browser
 Java - programs are compiled and can be run as stand alone
applications

4
What can JavaScript Do?

• JavaScript can dynamically modify an HTML page

• JavaScript can react to user input

• JavaScript can validate user input

• JavaScript can be used to create cookies

• JavaScript user interaction does not require any


communication with the server

5
Pros and Cons of JavaScript
• Pros:
– Allows more dynamic HTML pages, even complete web
applications

Cons:
–•Requires a JavaScript-enabled browser
– Requires a client who trusts the server enough to run the code
the server provides

6
Hello World in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("<h1>Hello, world!</h1>");
//-->
</script>
</body>
</html>

7
Hello World Screenshot

8
External Scripts

• Scripts can also be loaded from an external file

• This is useful if you have a complicated script or set of


subroutines that are used in several different
documents
<script src="myscript.js"></script>

9
Using JavaScript in your HTML
<html>
<head>
<title>Hello World in JavaScript</title>
<script type="text/javascript">
function helloWorld() {
document.write("Hello World!");
}
</script>
</head>
<body>
<script type="text/javascript">
helloWorld();
</script>
</body>
</html>

10
The <script>…</script> tag

 The code for the script is contained in the <script>…


</script> tag

<script type="text/javascript">
.
.
.
</script>
11
Displaying text
 The document.write() method writes a string of text to the
browser

<script type="text/javascript">
<!--
document.write("<h1>Hello, world!</h1>");
//-->
</script>

12
document.write()

Ends in a semicolon

document.write("<h1>Hello,world!</h1>");

Enclosed in quotes -- denotes


a "string"

13
Comments in JavaScript
 Two types of comments
 Single line
 Uses two forward slashes (i.e. //)
 Multiple line
 Uses /* and */

14
Single Line Comment Example

<script type="text/javascript">
<!--
// This is my JavaScript comment
document.write("<h1>Hello!</h1>");
//-->
</script>

15
Multiple Line Comment Example

<script type="text/javascript">
<!--
/* This is a multiple line comment.
* The star at the beginning of this line is optional.
* So is the star at the beginning of this line.
*/
document.write("<h1>Hello!</h1>");
//-->
</script>

16
Find the Bug!

<script type="text/javascript">
<!--
/* This is my JavaScript comment
* that spans more than 1 line.
*
document.write("<h1>Hello!</h1>");
//-->
</script>
17
Arrays
JavaScript array is an object that represents a collection of
similar type of elements.
There are 3 ways to construct array in JavaScript
 By array literal
 By creating instance of Array directly (using new
keyword)
 By using an Array constructor (using new keyword)
1. Array Literal
<script>
var emp=["Ali","Atif","Ahmed"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
2. Using New Keyword
<script>
var i;
var emp = new Array();
emp[0] = "Ali";
emp[1] = "Atif";
emp[2] = "Ahmed";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
3. Array Constructor
<script>
var emp=new Array("Ali","Atif","Ahmed");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>

You might also like