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

In this chapter students will be able to: JS variables, JS data types, JS functions, JS events, JS objects, JS strings, JS numbers, javascript operators, javascript math object, javascript dates, javascript booleans, javascript comparison and logical operators, javascript if...else statements, javascript loop statements ( for, while, do/while), javascript best practices.

Trang 1

CSC 330 E-Commerce

Teacher

Ahmed Mumtaz Mustehsan

GM-IT CIIT Islamabad

COMSATS Institute of Information Technology

T2-Lecture-6x

Trang 2

JavaScript Part - I

For Lecture Material/Slides Thanks to: www.w3schools.com

Trang 3

JavaScript Data Type

3 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com

Trang 4

Introduction

Trang 5

developers MUST learn:

HTML to define the content of web pages

JavaScript to program the behavior of web pages

language in the world

computers, servers, laptops, tablets and smart

phones

5 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com

Trang 6

Where To place JavaScript

the JavaScript code:

<head> section of an HTML page

6 T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com

Trang 7

 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

Trang 8

JavaScript Functions and Events

an event occurs, like when the user clicks a button.

later, when an event occurs

Invoke a function = Call upon a function (ask for the code in the function to be executed)

Trang 9

JavaScript in <head> or <body>

document

section of HTML, and/or in both

<body> section of a web page This can reduce

display time

<head> section

code in one place, is always a good habit

Trang 12

1-External JavaScripts

used in many different web pages

file in the source (src) attribute of the <script> tag:

Trang 13

1-External JavaScripts…

or <body> as you like

where you put the reference in the HTML document

T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com 13

Trang 14

1-JavaScript Output

Trang 16

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

Trang 17

1-Manipulating HTML Elements…

executed by the web browser:

document.getElementById("demo") is JavaScript

code for finding an HTML element using the id

attribute

code for changing an element's HTML content

(innerHTML)

Trang 18

1-Writing to The HTML Document

directly to the HTML document:

◦ <!DOCTYPE html>

<html>

<body>

<p>My first paragraph.</p>

Trang 19

1-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>

<p>My first paragraph.</p>

Trang 20

1-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.

Trang 21

1-Writing to The Console

reducing bugs (errors) in computer programs

insect), stuck in the electronics

Trang 22

1-JavaScript Syntax

Trang 23

JavaScript Syntax

rules define how the language is constructed

but powerful, programming language

 Syntax : "The principles by which sentences are

constructed in a language."

computer statements, or just statements

Trang 24

1-JavaScript Literals

values like 3.14

decimals, and with or without scientific notation (e):

Trang 25

1-JavaScript Variables

for storing information (data)

variable (just like in normal algebra):

 x = 5 length = 6

Trang 26

variables (just like algebra):

y = x * 10



Trang 27

1-JavaScript Statements

sequences of "commands" to the HTML browser

Trang 28

1-JavaScript Keywords

Trang 29

1-JavaScript Comments

Anything after double slashes // is ignored by the

browser: considered as comments for self

documentation

// I will not be executed

Comments will be discussed later!

Trang 30

1-JavaScript Data Types

numbers, text strings, arrays, objects and much more:

literal

// Object assigned by an object literal

Trang 31

1-JavaScript Functions

be invoked many times (reused):

Invoke a function = Call upon a function (ask for the code in the function to be executed)

Trang 32

1-JavaScript Identifiers

functions, and objects, with unique names.

underscores, and dollar signs, but cannot begin with

Trang 33

1-JavaScript is Case Sensitive

different variables

different functions

Trang 34

1-JavaScript Character Set

punctuations, and symbols in the world

names

You will often see identifier names written like

lastName (instead of lastname)

Trang 35

1-JavaScript Statements

Trang 36

WelCome to Java Script " inside an HTML element

identified with id="demo":

“WelCome to Java Script.";

Trang 37

1-Semicolon ;

executable statement

many statements on one line

Ending statements with semicolon is optional in

JavaScript

Trang 38

1-JavaScript Code

JavaScript statements

sequence they are written

"How are you?";

Trang 39

1-JavaScript Code Blocks

 JavaScript statements can be grouped together in blocks.

 Blocks start with a left curly bracket, and end with a right curly bracket.

 The purpose of a block is to make the sequence of statements execute together.

 A good example of statements grouped together in blocks, are

Trang 40

1-JavaScript Statement Identifiers

identifier to identify the JavaScript action to be

performed

be used as variable names (or any other things)

(reserved words)

Trang 41

1-JavaScript Statement Identifiers…

 Here is a list of some of the JavaScript statements (reserved words)

you will learn about in this tutorial:

Trang 42

1-JavaScript White Space in 1-JavaScript

Statements

space to your script to make it more readable

var person = "Hege"

Trang 43

1-Breaking a JavaScript Statement

a backslash:

◦var text = "Hello \

World!";

◦var text = \ "Hello World!";

Trang 44

1-JS Comments

Trang 45

JavaScript Comments

code, and make the code more readable

execution, when testing alternative code

Trang 46

1-Single Line Comments

ignored by JavaScript (will not be executed)

front of each line, to explain the code:

Trang 47

document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:

document.getElementById("myP").innerHTML = "My first paragraph.";

of each line, to explain the code:

var x = 5; // Declare x, give it the value of 5

var y = x + 2; // Declare y, give it the value of x + 2

Trang 48

1-Multi-line Comments

JavaScript

comment block) to explain the code:

Trang 49

1-Using Comments to Prevent Execution

very suitable for testing

lines from an executable line to a comment

of the code lines

//document.getElementById("myH").innerHTML = "My First Page";

Trang 50

/*

The code below will change

the heading with id = "myH"

and the paragraph with id = "myp"

in my web page:

*/

Trang 51

1-Example

prevent execution of multiple lines:

/*

*/

Trang 52

1-The End JavaScript

Part-I Thank You

T2-Lecture-6 Ahmed Mumtaz Mustehsan www.w3schools.com

52

Định dạng
Số trang	52
Dung lượng	308,99 KB