Lecture E-Commerce - Chapter 27: Java Script (part I)

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (308.99 KB, 52 trang )

CSC 330 E-Commerce
Teacher

Ahmed Mumtaz Mustehsan
GM-IT CIIT Islamabad

Virtual Campus, CIIT
COMSATS Institute of Information Technology

T2-Lecture-6x

JavaScript
Part - I
For Lecture Material/Slides Thanks to: www.w3schools.com

Synopsis
 Introduction
 JavaScript

Where To
 JavaScript Output
 JavaScript Syntax
 JavaScript Statements
 JavaScript Comments
 JavaScript Variables
 JavaScript Data Type

3

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

Introduction

Introduction
 JavaScript

is the programming language of the Web.
 All modern HTML pages are using JavaScript.
 JavaScript is one of 3 languages that all web
developers MUST learn:
 HTML to define the content of web pages
 CSS to specify the layout of web pages
 JavaScript to program the behavior of web pages
 JavaScript is the most popular programming
language in the world.
 It is the language for HTML, for the Web, for
computers, servers, laptops, tablets and smart
phones.

5

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

Where To place JavaScript
 In

HTML, Java Scripts must be inserted between
<script> and </script> tags.
 The lines between <script> and </script> contain
the JavaScript code:
 Java Scripts can be put in the <body> and in the
<head> section of an HTML page.

6

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

Example
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"My First JavaScript Function";
}

</script>




Just take it for a fact, that the browser will interpret the code
between the <script> and </script> tags as JavaScript.
Old examples may have type="text/javascript" in the <script>
tag. This is no longer required.
JavaScript is the default scripting language in all modern
browsers and in HTML5.

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

1-7

JavaScript Functions and Events
 Often,

JavaScript code is written to be executed when
an event occurs, like when the user clicks a button.
 JavaScript code inside a function, can be invoked
later, when an event occurs.
 Invoke a function = Call upon a function (ask for the
code in the function to be executed).

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

1-8

JavaScript in <head> or <body>
 You

can place any number of scripts in an HTML
document.
 Scripts can be placed in the <body> or in the <head>
section of HTML, and/or in both.
 Scripts may also be placed at the bottom of the
<body> section of a web page. This can reduce
display time.
 Sometimes you will see all JavaScript functions in the
<head> section.
 Separating HTML and JavaScript, by putting all the
code in one place, is always a good habit.

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

1-9

JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of
an HTML page.
The

function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.“;}
</script>
</head>
<body>

My Web Page

A Paragraph

<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Demo!!!
T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

110

JavaScript in <body>


In this example, a JavaScript function is placed in the <body> section of
an HTML page.



The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>

My Web Page

A Paragraph

<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</body>
</html>

◦Demo2!!!
T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

111

External JavaScripts
 Scripts

can also be placed in external files.
 External scripts are practical when the same code is
used in many different web pages.
 External JavaScript files have the file extension .js.
 To use an external script, put the name of the script
file in the source (src) attribute of the <script> tag:
◦<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

112

External JavaScripts…
 You

can place an external script reference in <head>
or <body> as you like.
 The script will behave as if it was located exactly
where you put the reference in the HTML document.
 External scripts cannot contain <script> tags.

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

113

JavaScript Output

JavaScript Output
 JavaScript

does not have any print or output

functions.

 In HTML, JavaScript can only be used to manipulate
HTML elements.

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

115

Manipulating HTML Elements


To access an HTML element from JavaScript, you can use the
document.getElementById(id) method.



Use the "id" attribute to identify the HTML element, and innerHTML to
refer to the element content:
<!DOCTYPE html>
<html>
<body>

My First Web Page

My First Paragraph

</script>
</body>
</html>

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

116

Manipulating HTML Elements…
 The

JavaScript statement (inside the <script> tag) is
executed by the web browser:
 document.getElementById("demo") is JavaScript
code for finding an HTML element using the id
attribute.
 innerHTML = "Paragraph changed." is JavaScript
code for changing an element's HTML content
(innerHTML).

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

117

Writing to The HTML Document
 For

testing purposes, you can use JavaScript to write
directly to the HTML document:
◦ <!DOCTYPE html>
<html>
<body>

My First Web Page

My first paragraph.

Writing to The HTML Document…


Use document.write for testing only.



If you execute it, on a loaded HTML document, all HTML elements will
be overwritten.
◦ <!DOCTYPE html>
<html>
<body>

My First Web Page

My first paragraph.

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

119

Writing to The Console


If your browser supports debugging, you can use
the console.log() method to display JavaScript values in the browser.



Activate debugging in your browser with F12, and select "Console" in
the debugger menu.

<!DOCTYPE html>
<html>
<body>

My First Web Page

120

Writing to The Console
 Debugging

is the process of testing, finding, and
reducing bugs (errors) in computer programs.
 The first known computer bug was a real bug (an
insect), stuck in the electronics.

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

121

JavaScript Syntax

JavaScript Syntax
 JavaScript

is a programming language. The Syntax
rules define how the language is constructed.
 JavaScript is a scripting language. It is a lightweight,

but powerful, programming language.
 Syntax : "The principles by which sentences are
constructed in a language."
 The sentences of a programming language are called
computer statements, or just statements.

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

123

JavaScript Literals
 In

a programming language, literals are constant
values like 3.14.
 Number literals can be written with or without
decimals, and with or without scientific notation (e):
◦ 3.14
1001
123e5

 String

literals can be written with double or single
quotes:

◦ "John Doe"
'John Doe'

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

124

JavaScript Variables
 In

a programming language, variables are containers
for storing information (data).
 The equal sign (=) assigns a value to a named
variable (just like in normal algebra):
x=5
length = 6

T2-Lecture-6

Ahmed Mumtaz Mustehsan

www.w3schools.com

125