11

Internet 213Internet 213

2

World Wide WebWorld Wide Web Also called as WWW or W3Also called as WWW or W3 Allows users to use the Internet Allows users to use the Internet

easilyeasily The web lets you connect by simply The web lets you connect by simply

clicking the clicking the hyperlinkhyperlink.. It applies a protocol called It applies a protocol called TCP/IPTCP/IP

3

HyperlinkHyperlink This is a word, phrase This is a word, phrase

or graphic image that or graphic image that have URL’s (web have URL’s (web address) hidden on address) hidden on them. Usually an them. Usually an underlined word or underlined word or phrase.phrase.

4

Transmission Control Protocol / Transmission Control Protocol / Internet Protocol (TCP/IP)Internet Protocol (TCP/IP)

The protocol of the InternetThe protocol of the Internet Let the computers communicateLet the computers communicate

Note: Internet itself is a massive Note: Internet itself is a massive network of hardware and software network of hardware and software while Web is the application facilities while Web is the application facilities provided by the Internetprovided by the Internet

5

Uniform Resource LocatorUniform Resource Locator

A unique address for a web A unique address for a web page or documentpage or document

It consists of protocol and It consists of protocol and domain name or IP address and domain name or IP address and a file namea file name

6

http://www.yahoo.comhttp://www.yahoo.com

Protocol or Scheme Host

Domain

Top-level domain or type of site

7

HyperText Transfer ProtocolHyperText Transfer Protocol

Manages the hypertext links that are Manages the hypertext links that are used to navigate the Webused to navigate the Web

You can think of HTTP as driving You can think of HTTP as driving the Webthe Web

Ensures that browser correctly Ensures that browser correctly process and display the various types process and display the various types of information contained in Web of information contained in Web pagespages

8

IP AddressIP Address Another way to uniquely identify Another way to uniquely identify

computers or devices connected computers or devices connected to the Internetto the Internet

Using a series of four groups of Using a series of four groups of numbers separated by periodsnumbers separated by periods

9

HyperText Markup HyperText Markup LanguageLanguage

The lingua franca of the Web.The lingua franca of the Web. It is used to create web pages.It is used to create web pages.

10

TagsTags Formatting instructions that is Formatting instructions that is

used by HTML documentsused by HTML documents That’s why it is called Markup That’s why it is called Markup

because of using of tags in because of using of tags in defining elements of the Webdefining elements of the Web

11

Parsing or RenderingParsing or Rendering

The process of assembling and The process of assembling and formatting an HTML document formatting an HTML document of a web browserof a web browser

12

Brief history of JSBrief history of JS JavaScriptJavaScript, originally nicknamed , originally nicknamed

LiveWireLiveWire and then and then LiveScriptLiveScript when it was created by when it was created by NetscapeNetscape, , should in fact be called should in fact be called ECMAscriptECMAscript as it was renamed as it was renamed when Netscape passed it to the when Netscape passed it to the ECMA for standardisation.ECMA for standardisation.

13

Role of JS on the WebRole of JS on the Web Brings HTML to life and Brings HTML to life and

makes Web pages dynamic.makes Web pages dynamic.

14

JavaScriptJavaScript It is a scripting language (refers to It is a scripting language (refers to

programming languages that are programming languages that are executed by an interpreter from executed by an interpreter from within a Web browser)within a Web browser)

1515

Formats of JavaScriptFormats of JavaScript

16

Client-side JavaScriptClient-side JavaScript Programs are passed to the Programs are passed to the

computer that the browser is on, computer that the browser is on, and that computer runs them. and that computer runs them.

17

Server-Side JavaScriptServer-Side JavaScript The alternative is server side, The alternative is server side,

where the program is run on the where the program is run on the server and only the results are server and only the results are passed to the computer that the passed to the computer that the browser is on. Examples of this browser is on. Examples of this would be PHP, Perl, ASP, JSP etcwould be PHP, Perl, ASP, JSP etc

1818

Logic and DebuggingLogic and Debugging

19

BugBug Any error in a program that Any error in a program that

causes it to function incorrectly, causes it to function incorrectly, whether due to incorrect syntax or whether due to incorrect syntax or flaws in logicflaws in logic

20

DebuggingDebugging Describes the act of tracing and Describes the act of tracing and

resolving errors in a program.resolving errors in a program. First coined by Grace Murray First coined by Grace Murray

HopperHopper

2121

A First A First JavaScript JavaScript ProgramProgram

22

The <Script> TagThe <Script> Tag

It is used to notify the Web It is used to notify the Web Browser that the commands that Browser that the commands that follow it need to be interpreted by follow it need to be interpreted by a scripting engine.a scripting engine.

23

LanguageLanguage Attribute of the <script> tag tells Attribute of the <script> tag tells

the browser which scripting the browser which scripting language and which version of the language and which version of the scripting language is being used.scripting language is being used.

24

Note:Note: If you omit the Language attribute If you omit the Language attribute

from the <script> tag, your from the <script> tag, your JavaScript program should still run. JavaScript program should still run.

However, the Internet is always However, the Internet is always changing, it is difficult to determine changing, it is difficult to determine whether competing scripting whether competing scripting languages such as VBScript will languages such as VBScript will become dominantbecome dominant

25

Creating a JavaScript ProgramCreating a JavaScript Program

1. To start a JavaScript program 1. To start a JavaScript program use the <script> taguse the <script> tag

<Script language=“JavaScript”> - <Script language=“JavaScript”> - specifying your browser that your specifying your browser that your using JavaScriptusing JavaScript

2. Close it using </script>2. Close it using </script>

26

3. Use the comment tag to tell the 3. Use the comment tag to tell the incompatible browser to ignore incompatible browser to ignore the code that follows.the code that follows.

<!-- your codes here --><!-- your codes here -->

4. You can embed JavaScript on 4. You can embed JavaScript on head or body depending on the head or body depending on the application of your scriptapplication of your script

27

My First JavaScript ProgramMy First JavaScript Program

Hello WorldHello World

28

JavaScript is an OOPJavaScript is an OOP Object-Oriented Programming Object-Oriented Programming

(OOP), in computer science, type of (OOP), in computer science, type of high-level computer language that high-level computer language that uses self-contained, modular uses self-contained, modular instruction sets for defining and instruction sets for defining and manipulating aspects of a computer manipulating aspects of a computer program. program.

29

ObjectObject A programming code and data A programming code and data

that can be treated as an that can be treated as an individual unit or componentindividual unit or component

Ex. Document objectEx. Document object

30

StatementsStatements Individual lines in a programming Individual lines in a programming

language language

31

MethodsMethods Group related statements Group related statements

associated with an objectassociated with an object Ex. write( ) and writeln( )Ex. write( ) and writeln( )

32

Document ObjectDocument Object Represents the content of a Represents the content of a

browser’s windowbrowser’s window Any text, graphics, or other Any text, graphics, or other

information displayed in a web information displayed in a web page is part of the document page is part of the document objectobject

33

ArgumentArgument Any type of information that can Any type of information that can

be passed to a methodbe passed to a method Ex. The text string within the Ex. The text string within the

write() and writeln methods of the write() and writeln methods of the Document objectDocument object

34

Text or Literal StringText or Literal String Text that is contained within Text that is contained within

double quotation marks.double quotation marks. Ex. <“this is a ‘text’ string”>Ex. <“this is a ‘text’ string”> Output: this is a ‘text’ stringOutput: this is a ‘text’ string

35

Note: Note: The only difference between the The only difference between the

write() and writeln() methods is that write() and writeln() methods is that the writeln method adds a carriage the writeln method adds a carriage return after the line of text.return after the line of text.

However it will be only recognized if However it will be only recognized if it is within the HTML <PRE> tag it is within the HTML <PRE> tag pair.pair.

36

<PRE> Tag<PRE> Tag Short for Preformatted TextShort for Preformatted Text Tells a Web browser that any text Tells a Web browser that any text

and line breaks contained between and line breaks contained between opening and closing tag are to be opening and closing tag are to be rendered exactly as they appearrendered exactly as they appear

Known as Container Element Known as Container Element because it contains text and other because it contains text and other HTML tagsHTML tags

37

JavaScript is Case SensitiveJavaScript is Case Sensitive

Document.write is not similar to Document.write is not similar to document.writedocument.write

Uppercase D will not be recognized Uppercase D will not be recognized as an object and will cause erroras an object and will cause error

You must use lowercase d when You must use lowercase d when referring to document objectreferring to document object

38

JavaScript VariablesJavaScript Variables Then name must start with an Then name must start with an

alphabetic (a-z or A-Z) character or alphabetic (a-z or A-Z) character or an underscore (_)an underscore (_)

The rest of the name can contain any The rest of the name can contain any letter, any digit, or an underscore.letter, any digit, or an underscore.

Can’t contain a spaceCan’t contain a space Avoid JavaScript reserved words as Avoid JavaScript reserved words as

the names of variablesthe names of variables

3939

Debugging a ScriptDebugging a Script

40

1. Capitalization1. Capitalization JavaScript is a case sensitive JavaScript is a case sensitive

language, meaning that it treats language, meaning that it treats capital and lowercase versions of capital and lowercase versions of the same letter as different the same letter as different charactercharacter

41

2. Spacing2. Spacing Some parts of a script can Some parts of a script can

encounter error if incorrect encounter error if incorrect spacing is used.spacing is used.

The best way to avoid spacing The best way to avoid spacing error is to pay careful attention to error is to pay careful attention to spacing while you enter codespacing while you enter code

42

3. Parenthesis( ), Brackets3. Parenthesis( ), Brackets[ ], Braces{ } \& Quotes “”[ ], Braces{ } \& Quotes “”

JavaScript often uses four types JavaScript often uses four types of symbols to enclose arguments, of symbols to enclose arguments, values or numbers.values or numbers.

43

4. Typographical Errors4. Typographical Errors

Error in entering command such Error in entering command such as zero (0) to the letter (O).as zero (0) to the letter (O).

44

5. Others5. Others JavaScript-compatible browser JavaScript-compatible browser

often display a JavaScript error often display a JavaScript error window describes the type of window describes the type of error the browser encountered.error the browser encountered.

4545

Adding Adding JavaScript to a JavaScript to a

PagePage

46

Body SectionBody Section

<body><body>

<script Language="Javascript"><script Language="Javascript">

<!--<!--

document.writeln("Hello World");document.writeln("Hello World");

-->-->

</script></script>

</body></body>

47

Head SectionHead Section<head><head><script Language="Javascript"><script Language="Javascript"><!--<!--document.writeln("Hello World");document.writeln("Hello World");-->--></script></script></head></head>

48

JavaScript Source FileJavaScript Source File A JavaScript code in an external A JavaScript code in an external

filefile Designated with the file extension Designated with the file extension

of js and contains only JavaScript of js and contains only JavaScript statementsstatements

49

Reasons Behind .js Source FileReasons Behind .js Source File Your HTML document will be neaterYour HTML document will be neater The JavaScript code can be shared The JavaScript code can be shared

among multiple HTML documentsamong multiple HTML documents JavaScript Source Files hide JavaScript Source Files hide

JavaScript code from incompatible JavaScript code from incompatible browsersbrowsers

JavaScript source files help hide your JavaScript source files help hide your JavaScript codeJavaScript code

5050

Adding Comments Adding Comments To a JavaScript To a JavaScript

ProgramProgram

51

CommentComment Nonprinting lines that you place Nonprinting lines that you place

in your code to contain various in your code to contain various types of remarks, including name types of remarks, including name of the program, your name and of the program, your name and the date you created and etc.,the date you created and etc.,

52

Double Slash (//)Double Slash (//)

Indicates a single line Indicates a single line comment. Everything after it comment. Everything after it on the same line will be on the same line will be ignored by the script engine. ignored by the script engine.

53

Slash-Asterisk (/* & */)Slash-Asterisk (/* & */)

Indicates a block comment. Indicates a block comment. Everything after it will be Everything after it will be ignored by the script engine ignored by the script engine until an asterisk-slash is until an asterisk-slash is encountered.encountered.