int 213 - prelims handouts
TRANSCRIPT
-
8/8/2019 INT 213 - Prelims Handouts
1/53
11
Internet 213Internet 213
-
8/8/2019 INT 213 - Prelims Handouts
2/53
22
World Wide WebWorld Wide Web
Also called as WWW or W3Also called as WWW or W3
Allows users to use the InternetAllows users to use the Internet
easilyeasily
The web lets you connect by simplyThe web lets you connect by simply
clicking theclicking the hyperlinkhyperlink.. It applies a protocol calledIt applies a protocol called TCP/IPTCP/IP
-
8/8/2019 INT 213 - Prelims Handouts
3/53
33
HyperlinkHyperlink
ThisThis isis aa word,word, phrasephrase
oror graphicgraphic imageimage thatthat
havehave URLsURLs (web(webaddress)address) hiddenhidden onon
themthem.. UsuallyUsually anan
underlinedunderlined wordword or or
phrasephrase..
-
8/8/2019 INT 213 - Prelims Handouts
4/53
44
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 communicateNoteNote:: Internet Internet itself itself isis aa massivemassive
networknetwork of of hardwarehardware andand softwaresoftware
whilewhile WebWeb isis thethe applicationapplication facilitiesfacilities
providedprovided byby thethe InternetInternet
-
8/8/2019 INT 213 - Prelims Handouts
5/53
55
Uniform Resource LocatorUniform Resource Locator
AA uniqueunique addressaddress forfor aa webweb
pagepage oror documentdocument ItIt consistsconsists ofof protocol protocol andand
domaindomain namename oror IPIP addressaddress andand
aa filefile namename
-
8/8/2019 INT 213 - Prelims Handouts
6/53
66
http://www.yahoo.comhttp://www.yahoo.com
Protocol or
SchemeHost
Domain
Top-level
domain ortype of site
-
8/8/2019 INT 213 - Prelims Handouts
7/53
77
HyperText Transfer ProtocolHyperText Transfer Protocol
ManagesManages thethe hypertexthypertext linkslinks thatthat areare
usedused toto navigatenavigate thethe WebWeb
YouYou cancan thinkthink ofof HTTPHTTP asas drivingdriving
thethe WebWeb
EnsuresEnsures thatthat browser browser correctlycorrectlyprocessprocess andand displaydisplay thethe variousvarious typestypes
ofof informationinformation containedcontained inin WebWeb
pagespages
-
8/8/2019 INT 213 - Prelims Handouts
8/53
88
IP AddressIP Address
AnotherAnother wayway toto uniquelyuniquely identifyidentify
computerscomputers oror devicesdevices connectedconnected
toto thethe InternetInternet
UsingUsing aa seriesseries ofof fourfour groupsgroups ofof
numbersnumbers separatedseparated byby periodsperiods
-
8/8/2019 INT 213 - Prelims Handouts
9/53
99
HyperText MarkupHyperText 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.
-
8/8/2019 INT 213 - Prelims Handouts
10/53
1010
TagsTags
FormattingFormatting instructionsinstructions thatthat isis
usedused byby HTMLHTML documentsdocuments
ThatsThats whywhy itit isis calledcalled MarkupMarkup
because because ofof usingusing ofof tagstags inin
definingdefining elementselements ofof thethe WebWeb
-
8/8/2019 INT 213 - Prelims Handouts
11/53
1111
Parsing or RenderingParsing or Rendering
TheThe process process ofof assemblingassembling andand
formattingformatting anan HTMLHTML documentdocument ofof
aa webweb browserbrowser
-
8/8/2019 INT 213 - Prelims Handouts
12/53
1212
Briefhistory of JSBriefhistory of JS
JavaScriptJavaScript,, originallyoriginally nicknamednicknamed
LiveWireLiveWire andand thenthen LiveScriptLiveScript
whenwhen itit waswas createdcreated byby NetscapeNetscape,,
shouldshould inin factfact be be calledcalled
ECMAscriptECMAscript asas itit waswas renamedrenamedwhenwhen Netscape Netscape passed passed itit toto thethe
ECMAECMA forfor standardisationstandardisation..
-
8/8/2019 INT 213 - Prelims Handouts
13/53
1313
Role of JS on the WebRole of JS on the Web
BringsBrings HTMLHTML toto lifelife andand
makesmakes WebWeb pagespages dynamicdynamic..
-
8/8/2019 INT 213 - Prelims Handouts
14/53
14
14
JavaScriptJavaScript
ItIt isis aa scriptingscripting languagelanguage (refers(refers toto
programmingprogramming languageslanguages thatthat areare
executedexecuted by by anan interpreterinterpreter fromfrom
withinwithin aa WebWeb browser)browser)
-
8/8/2019 INT 213 - Prelims Handouts
15/53
15
15
F
ormats of JavaScriptF
ormats of JavaScript
-
8/8/2019 INT 213 - Prelims Handouts
16/53
16
16
ClientClient--side JavaScriptside JavaScript
ProgramsPrograms areare passed passed toto thethe
computercomputer thatthat thethe browserbrowser isis on,on,
andand thatthat computercomputer runsruns themthem..
-
8/8/2019 INT 213 - Prelims Handouts
17/53
17
17
ServerServer--Side JavaScriptSide JavaScript
TheThe alternativealternative isis serverserver side,side,
wherewhere thethe programprogram isis runrun onon thethe
serverserver andand onlyonly thethe resultsresults areare
passed passed toto thethe computercomputer thatthat thethe
browser browser isis onon.. ExamplesExamples ofof thisthiswouldwould bebe PHP,PHP, Perl,Perl, ASP,ASP, JSPJSP etcetc
-
8/8/2019 INT 213 - Prelims Handouts
18/53
18
18
Logic and DebuggingLogic and Debugging
-
8/8/2019 INT 213 - Prelims Handouts
19/53
19
19
BugBug
AnyAny errorerror inin aa program program thatthat
causescauses itit toto functionfunction incorrectly,incorrectly,
whetherwhether duedue toto incorrectincorrect syntaxsyntax oror
flawsflaws inin logiclogic
-
8/8/2019 INT 213 - Prelims Handouts
20/53
2020
DebuggingDebugging
DescribesDescribes thethe actact ofof tracingtracing andand
resolvingresolving errorserrors inin aa programprogram..
FirstFirst coinedcoined by by GraceGrace MurrayMurray
HopperHopper
-
8/8/2019 INT 213 - Prelims Handouts
21/53
2121
A FirstA First
JavaScriptJavaScriptProgramProgram
-
8/8/2019 INT 213 - Prelims Handouts
22/53
2222
The TagThe Tag
ItIt isis usedused toto notifynotify thethe WebWeb
BrowserBrowser thatthat thethe commandscommands thatthat
followfollow itit needneed toto bebe interpretedinterpreted byby
aa scriptingscripting engineengine..
-
8/8/2019 INT 213 - Prelims Handouts
23/53
2323
LanguageLanguage
AttributeAttribute ofof thethe tagtag tellstells
thethe browser browser whichwhich scriptingscripting
languagelanguage andand whichwhich versionversion ofof thethe
scriptingscripting languagelanguage isis beingbeing usedused..
-
8/8/2019 INT 213 - Prelims Handouts
24/53
24
24
Note:Note:
IfIf youyou omitomit thethe LanguageLanguage attributeattribute
fromfrom thethe tag,tag, youryour
JavaScriptJavaScript programprogram shouldshould stillstill runrun..
However,However, thethe InternetInternet isis alwaysalways
changing,changing, itit isis difficultdifficult toto determinedetermine
whetherwhether competingcompeting scriptingscripting
languageslanguages suchsuch asas VBScriptVBScript willwill
becomebecome dominantdominant
-
8/8/2019 INT 213 - Prelims Handouts
25/53
2525
Creating a JavaScript ProgramCreating a JavaScript Program
11.. ToTo startstart aa JavaScriptJavaScript programprogram
useuse thethe tagtag
--
specifyingspecifying youryour browserbrowser thatthat youryour
usingusing JavaScriptJavaScript22.. CloseClose itit usingusing
-
8/8/2019 INT 213 - Prelims Handouts
26/53
2626
33.. UseUse thethe commentcomment tagtag toto telltell thethe
incompatibleincompatible browser browser toto ignoreignore
thethe codecode thatthat followsfollows..
>
44.. YouYou cancan embedembed JavaScriptJavaScript onon
headhead oror body body dependingdepending onon thetheapplicationapplication ofof youryour scriptscript
-
8/8/2019 INT 213 - Prelims Handouts
27/53
2727
My First JavaScript ProgramMy First JavaScript Program
Hello WorldHello World
-
8/8/2019 INT 213 - Prelims Handouts
28/53
2828
JavaScript is an OOPJavaScript is an OOP
ObjectObject--OrientedOriented ProgrammingProgramming
(OOP),(OOP), inin computercomputer science,science, typetype ofof
highhigh--levellevel computercomputer languagelanguage thatthatusesuses self self--contained,contained, modularmodular
instructioninstruction setssets forfor definingdefining andand
manipulatingmanipulating aspectsaspects ofof aa computercomputer
programprogram..
-
8/8/2019 INT 213 - Prelims Handouts
29/53
2929
ObjectObject
AA programming programming codecode andand datadata
thatthat cancan be be treatedtreated asas anan
individualindividual unitunit oror componentcomponent
ExEx.. DocumentDocument objectobject
-
8/8/2019 INT 213 - Prelims Handouts
30/53
3030
StatementsStatements
IndividualIndividual lineslines inin aa programmingprogramming
languagelanguage
-
8/8/2019 INT 213 - Prelims Handouts
31/53
3131
MethodsMethods
GroupGroup relatedrelated statementsstatements
associatedassociated withwith anan objectobject
ExEx.. write(write( )) andand writeln(writeln( ))
-
8/8/2019 INT 213 - Prelims Handouts
32/53
3232
Document ObjectDocument Object
RepresentsRepresents thethe contentcontent ofof aa
browsersbrowsers windowwindow
AnyAny text,text, graphics,graphics, oror otherother
informationinformation displayeddisplayed inin aa webweb
page page isis part part ofof thethe documentdocumentobjectobject
-
8/8/2019 INT 213 - Prelims Handouts
33/53
3333
ArgumentArgument
AnyAny typetype ofof informationinformation thatthat cancan
bebe passedpassed toto aa methodmethod
ExEx.. TheThe texttext stringstring withinwithin thethe
write()write() andand writelnwriteln methodsmethods ofof thethe
DocumentDocument objectobject
-
8/8/2019 INT 213 - Prelims Handouts
34/53
3434
Text or Literal StringText or Literal String
TextText thatthat isis containedcontained withinwithin
doubledouble quotationquotation marksmarks..
ExEx..
OutputOutput:: thisthis isis aa texttext stringstring
-
8/8/2019 INT 213 - Prelims Handouts
35/53
3535
Note:Note:
TheThe onlyonly differencedifference between between thethe
write()write() andand writeln()writeln() methodsmethods isis thatthat
thethe writelnwriteln methodmethod addsadds aa carriagecarriagereturnreturn afterafter thethe lineline ofof texttext..
HoweverHowever itit willwill bebe onlyonly recognizedrecognized ifif
itit isis withinwithin thethe HTMLHTML tagtag
pairpair..
-
8/8/2019 INT 213 - Prelims Handouts
36/53
3636
Tag Tag
ShortShort forfor PreformattedPreformatted TextText
TellsTells aa WebWeb browser browser thatthat anyany texttext
andand lineline breaks breaks containedcontained betweenbetweenopeningopening andand closingclosing tagtag areare toto bebe
renderedrendered exactlyexactly asas theythey appearappear
KnownKnown asas ContainerContainer ElementElement
because because itit containscontains texttext andand otherother
HTMLHTML tagstags
-
8/8/2019 INT 213 - Prelims Handouts
37/53
3737
JavaScript is Case SensitiveJavaScript is Case Sensitive
DocumentDocument..writewrite isis notnot similarsimilar toto
documentdocument..writewrite
UppercaseUppercase DD willwill notnot bebe recognizedrecognizedasas anan objectobject andand willwill causecause errorerror
YouYou mustmust useuse lowercaselowercase dd whenwhenreferringreferring toto documentdocument objectobject
-
8/8/2019 INT 213 - Prelims Handouts
38/53
3838
JavaScript VariablesJavaScript Variables ThenThen namename mustmust startstart withwith anan
alphabeticalphabetic (a(a--zz oror AA--Z)Z) charactercharacter oror
anan underscoreunderscore (_)(_)
TheThe restrest ofof thethe namename cancan containcontain anyany
letter,letter, anyany digit,digit, oror anan underscoreunderscore..
CantCant containcontain aa spacespace AvoidAvoid JavaScriptJavaScript reservedreserved wordswords asas
thethe namesnames ofof variablesvariables
-
8/8/2019 INT 213 - Prelims Handouts
39/53
3939
Debugging a ScriptDebugging a Script
-
8/8/2019 INT 213 - Prelims Handouts
40/53
4040
1. Capitalization1. Capitalization
JavaScriptJavaScript isis aa casecase sensitivesensitive
language,language, meaningmeaning thatthat itit treatstreats
capitalcapital andand lowercaselowercase versionsversions ofofthethe samesame letterletter asas differentdifferent
charactercharacter
-
8/8/2019 INT 213 - Prelims Handouts
41/53
4141
2. Spacing2. Spacing
SomeSome parts parts ofof aa scriptscript cancan
encounterencounter errorerror ifif incorrectincorrect
spacingspacing isis usedused..
TheThe best best wayway toto avoidavoid spacingspacing
errorerror isis toto paypay carefulcareful attentionattention totospacingspacing whilewhile youyou enterenter codecode
-
8/8/2019 INT 213 - Prelims Handouts
42/53
4242
3. Parenthesis( ), Brackets3. Parenthesis( ), Brackets
[ ], Braces{ }[ ], Braces{ } \\& Quotes & Quotes
JavaScriptJavaScript oftenoften usesuses fourfour typestypesofof symbolssymbols toto encloseenclose arguments,arguments,
valuesvalues oror numbersnumbers..
-
8/8/2019 INT 213 - Prelims Handouts
43/53
4343
4. Typographical Errors4. Typographical Errors
ErrorError inin enteringentering commandcommand suchsuch
asas zerozero ((00)) toto thethe letterletter (O)(O)..
-
8/8/2019 INT 213 - Prelims Handouts
44/53
4444
5. Others5. Others
JavaScriptJavaScript--compatiblecompatible browserbrowser
oftenoften displaydisplay aa JavaScriptJavaScript errorerror
windowwindow describesdescribes thethe typetype ofoferrorerror thethe browserbrowser encounteredencountered..
-
8/8/2019 INT 213 - Prelims Handouts
45/53
4545
AddingAdding
JavaScript to aJavaScript to aPagePage
-
8/8/2019 INT 213 - Prelims Handouts
46/53
4646
Body SectionBody Section
>
-
8/8/2019 INT 213 - Prelims Handouts
47/53
4747
Head SectionHead Section
>
-
8/8/2019 INT 213 - Prelims Handouts
48/53
4848
JavaScript Source FileJavaScript Source File
AA JavaScriptJavaScript codecode inin anan externalexternal
filefile
DesignatedDesignated withwith thethe filefile extensionextension
ofof jsjs andand containscontains onlyonly JavaScriptJavaScript
statementsstatements
-
8/8/2019 INT 213 - Prelims Handouts
49/53
4949
Reasons Behind .js Source FileReasons Behind .js Source File
YourYour HTMLHTML documentdocument willwill bebe neaterneater
TheThe JavaScriptJavaScript codecode cancan be be sharedshared
amongamong multiplemultiple HTMLHTML documentsdocuments JavaScriptJavaScript SourceSource FilesFiles hidehide
JavaScriptJavaScript codecode fromfrom incompatibleincompatible
browsersbrowsers
JavaScriptJavaScript sourcesource filesfiles helphelp hidehide youryour
JavaScriptJavaScript codecode
-
8/8/2019 INT 213 - Prelims Handouts
50/53
5050
Adding CommentsAdding CommentsTo a JavaScriptTo a JavaScript
ProgramProgram
-
8/8/2019 INT 213 - Prelims Handouts
51/53
5151
CommentComment
NonprintingNonprinting lineslines thatthat youyou placeplace
inin youryour codecode toto containcontain variousvarious
typestypes ofof remarks,remarks, includingincluding namenameofof thethe program,program, youryour namename andand
thethe datedate youyou createdcreated andand etcetc..,,
-
8/8/2019 INT 213 - Prelims Handouts
52/53
5252
Double Slash (//)Double Slash (//)
IndicatesIndicates aa singlesingle lineline
commentcomment.. EverythingEverything afterafter itit
onon thethe samesame lineline willwill bebe
ignoredignored byby thethe scriptscript engineengine..
-
8/8/2019 INT 213 - Prelims Handouts
53/53
5353
SlashSlash--Asterisk (/* & */)Asterisk (/* & */)
IndicatesIndicates aa block block commentcomment..
EverythingEverything afterafter itit willwill bebe
ignoredignored by by thethe scriptscript engineengine
untiluntil anan asteriskasterisk--slashslash isis
encounteredencountered..