Javascript Tutorial (1)

1
JavaScript
2
History

• First web scripting language
• Developed by Netscape and Sun
• Initiated by Netscape and called LiveScript
• In parallel with this, Sun was developing Java

3
History

• Netscape and Sun got together and realized that
  many of the specifications for Java could apply
  to LiveScript
• Result is JavaScript

4
JavaScript Versus Java

• JavaScript is interpreted while Java is compiled
• But server-side JavaScript is compiled
• JavaScript is object-based while Java is
  object-oriented
• Object-based languages can utilize pre-defined
  objects, but you are limited in terms of creating
  your own objects

5
JavaScript Versus Java

• JavaScript has loose data typing, while Java has
  strong data typing
• Loose data typing means that a variable can hold
  any kind of data
• JavaScript code is embedded in an HTML document
  while Java applets are stand-alone applications
  that can be accessed from HTML

6
JavaScript Versus Java

• JavaScript has dynamic binding, while Java has
  static binding
• Names bound at runtime
• JavaScript can access browser objects and
  functionality, while Java cannot

7
Client-Side JavaScript

• Client-side JavaScript scripts operate on a
  client running Netscape Navigator (Microsoft
  Internet Explorer also supports it now) and are
  interpreted by Netscape Navigator

8
Client-Side JavaScript

• Detect whether the browser supports a certain
  plug-in
• Control a plug-in
• Validate user form input
• Prompt a user for confirmation
• Perform post-processing of information retrieved
  from server-side JavaScript scripts

9
Server-Side JavaScript

• JavaScript scripts that run on the server are
  called LiveWire applications because they use the
  Netscape LiveWire development environment
• This is the only system that supports server-side
  JavaScript development

10
Server-Side JavaScript

• Unlike CGI scripts, LiveWire applications are
  more closely integrated to the HTML pages that
  control them
• Can have a page that accepts credit card payments
  and gives user immediate feedback on the same
  page about whether card was accepted

11
Client Scripts

• To display error or information boxes
• To validate user input
• To display confirmation boxes
• To process server data, such as aggregate
  calculations
• To add programmable logic to HTML

12
Client Scripts

• To perform functions that dont require
  information from the server
• To produce a new HTML page without making a
  request to the server

13
Server Scripts

• To maintain data shared among applications or
  clients
• To maintain information during client accesses
• To access a database
• To access server files
• To call server C libraries
• To customize Java applets

14
Scripts

• Client-side and server-side JavaScript scripts
  are both embedded in an HTML file
• For server-side JavaScript scripts, this HTML
  file is compiled with the LiveWire compiler
• Creates a file that is in a platform-independent
  and compiled bytecode format

15
Scripts

• Client-side JavaScript needs Netscape Navigator
  and a standard HTML server
• Server-side JavaScript needs the LiveWire
  compiler, the LiveWire Application Manager, and a
  Netscape HTML server that supports the LiveWire
  server extension

16
Scripts

• Examples js1.htm, js2.htm, js3.htm
• The ltheadgt portion of an HTML page is the first
  to load, so it is best to define the functions
  for a page in this portion
• Functions can be called in the ltbodygt portion

17
JavaScript Program Code

• Main body
• Event handlers
• Functions

18
Main Body

• Main Body
• Any code that is between ltscriptgt and lt/scriptgt
  that is not a function definition

19
Events

• Events
• Mouse click
• Re-sizing window

20
Event Handlers

• Event handlers
• Scripts that link events to JavaScript functions
• Embed in HTML documents as attributes of HTML
  tags
• lttag eventHandler JavaScript Codegt
• Example js4.htm

21
More Events

• Top-level actions causing change in web page
  being displayed
• Navigation
• Interaction with an element of an HTML form

22
Navigation

• Selecting a hypertext link
• Moving forward or backward in the history list
• Opening a new URL
• Quitting the browser

23
Navigation

• In these events, some page is being loaded or
  unloaded
• These are document-level events that can be
  handled by JavaScript

24
JavaScript Events

• button
• click
• checkbox
• click
• document
• load
• unload

25
JavaScript Events

• form
• submit
• link
• click
• mouseover
• radio
• click

26
JavaScript Events

• selection
• blur
• change
• focus
• submit
• click

27
JavaScript Events

• text
• change
• focus
• A text field is said to have focus when it is
  currently accepting typed input
• Clicking anywhere inside a text item gives it
  focus
• Moving the mouse over the text field may give it
  focus
• blur
• The opposite of focus
• select

28
JavaScript Events

• textarea
• blur
• change
• focus
• select

29
Functions

• Defining a function to create an object
• function house(rms, stl, yr, gar)
• this.rooms rms
• this.style stl
• this.yearBuilt yr
• this.hasGarage gar
• var myhouse new house(8, Ranch, 1990, true)

30
Functions

• Every object is an array of its property values
  and every array is an object
• 0-based indexing
• Thus,
• myhouse0 8
• myhouse1 Ranch
• myhouse2 1990
• myhouse3 true

31
Functions

• Every object is also an associative array
• Thus,
• myhouserooms 8
• myhousestyle Ranch
• myhouseyearBuilt 1990
• myhousehasGarage true

32
Functions

• Can dynamically extend an object instance
• yourhouse new house(12, Tudor, 1934, true)
• yourhouse.hasPorch false
• yourhouse.windows 46
• Doesnt affect other object instances nor the
  object itself

33
Functions

• A variable-length array-of-strings object
• function stringarr(howMany, initStr)
• this.length howMany
• for (var j 1 j lt howMany j)
• thisj initStr

34
for..in Statement

• for (varName in objName)
• forBody
• varName takes on the successive property names of
  the object objName

35
for..in Statement

• function showAny(anyObj)
• for (var iter in anyObj)
• document.write(ltbrgtProperty iter is
  anyObjiter)
• document.write(ltbrgt)

36
Methods

• function house(rms, stl, yr, garp)
• this.length 5
• this.rooms rms
• this.style stl
• this.yearBuilt yr
• this.hasGarage gar
• this.show mshowHouse

37
Methods

• function mshowHouse( )
• var nprops this.length
• for (var iter 1 iter lt nprops iter)
• document.write(ltbrgtProperty iter
  is thisiter)
• document.write(ltbrgt)
• myhouse.show( )

38
Techniques for Including JavaScript Code in HTML

• Embed script between ltscriptgt and lt/scriptgt
• Event-handler functions
• Through the javascript URL pseudo-protocol
• The JavaScript HTML entity
• lt

39
The ltscriptgtlt/scriptgt Tags

• ltscriptgt-tag may appear in head or body
• The language attribute is optional
• ltscript language JavaScriptgt
• // JavaScript code
• lt/scriptgt
• Works for both Navigator 2.0 and Navigator 3.0
• language JavaScript1.1 works only for
  Navigator 3.0

40
The ltscriptgtlt/scriptgt Tags

• JavaScript is not the only language to use the
  ltscriptgt-tag
• ltscript language VBScriptgt
• ' VBScript code
• lt/scriptgt
• JavaScript is the default scripting language
• Can leave out the language attribute

41
The ltscriptgtlt/scriptgt Tags

• An HTML document may contain more than one pair
  of non-overlapping ltscriptgt and lt/scriptgt-tags
• Statements executed in order of appearance
• They constitute part of the same JavaScript
  program, however
• ltscriptgt var x 1 lt/scriptgt
• ltscriptgt document.write(x) lt/scriptgt

42
The ltscriptgtlt/scriptgt Tags

• Selectively displaying text in JavaScript-ignorant
  browsers
• ltscript language nonegt
• Your browser doesnt understand JavaScript.
• This page wont work for you.
• lt/scriptgt

43
The ltscriptgtlt/scriptgt Tags

• Selectively displaying text in JavaScript-ignorant
  browsers
• Browsers that recognize the ltscriptgt-tag will
  know there is no such language as none and will
  ignore everything between the ltscriptgt and
  ltscriptgt-tags
• Browsers that dont understand the ltscriptgt and
  lt/scriptgt-tags will ignore them and display the
  two lines in-between them

44
The ltscriptgtlt/scriptgt Tags

• Including JavaScript files
• ltscript src ../../javascript /prog.jsgt
  lt/scriptgt
• Simplifies your HTML files
• Can share JavaScript among different HTML files

45
The ltscriptgtlt/scriptgt Tags

• Including JavaScript files
• When they are used by more than one HTML file,
  this allows them to be cached by the browser,
  allowing them to load more quickly
• The time savings of caching outweighs the delay
  incurred by the browser opening a network
  connection to download the JavaScript file

46
The ltscriptgtlt/scriptgt Tags

• Including JavaScript files
• A JavaScript program from one machine can use
  code located on other machines
• This only works for Netscape 3.0 and higher
• Can include JavaScript code in-between the
  ltscriptgt and lt/scriptgt-tags for Netscape 2.0
  browsers, as this is ignored by Netscape 3.0
  browsers if the SRC attribute is defined

47
Event Handler Functions

• Area
• onClick( ), onMouseOver( ), onMouseOut( )
• Button
• onClick( )
• Checkbox
• onClick( )

48
Event Handler Functions

• FileUpload
• onBlur( ), onChange( ), onFocus( )
• Form
• onSubmit( )
• Frame
• onLoad( ), onUnload( )
• Image
• onAbort( ), onError( ), onLoad( )

49
Event Handler Functions

• Link
• onClick( ), onMouseOver( ), onMouseOut( )
• Radio
• onClick( )
• Reset
• onClick( )
• Select
• onChange( )

50
Event Handler Functions

• Submit
• onClick( )
• Text
• onBlur( ), onChange( ), onFocus( )
• Textarea
• onBlur( ), onChange( ), onFocus( )
• Window
• onBlur( ), onError( ), onFocus( ), onLoad( ),
  onUnload( )

51
JavaScript in URL's

• javascriptfunctiongreetingnamemessage
• Multiple statements separated by semi-colons
• Value of last expression evaluated becomes the
  document that URL refers to and this value will
  be formatted and displayed

52
JavaScript in URL's

• javascriptalert(Hello World!)
• Has side-effect but returns no value
• Browser executes the code but doesnt modify
  currently displayed document

53
JavaScript in URL's

• Can use void operator to remove returned value
  and just have side-effect of assignment
• javascriptvoid function( )
• Microsoft has syntax,
• lta href script-enginescript-codegt
• Supports vbscript

54
JavaScript Entities

• JavaScript-statements
• Can only appear within the value of HTML
  attributes
• ltbody bgcolor favorite_color( )gt

55
Order of Execution

• Scripts
• JavaScript statements that appear between
  ltscriptgt and lt/scriptgt-tags are executed in the
  order they appear
• When more than one script appears in a page, they
  are executed in the order they appear

56
Order of Execution

• Scripts
• JavaScript code evaluation occurs as part of the
  browsers HTML parsing process
• Thus, if script appears in the ltheadgt portion of
  an HTML document, none of the ltbodygt of the
  document will have been defined yet
• Thus, many JavaScript objects, such as form
  objects, havent as yet been created and cannot
  be manipulated by this code

57
Order of Execution

• Functions
• Functions shouldnt be executed before the
  objects they manipulate exist
• Functions should be defined before they are
  invoked
• Can define function to manipulate objects before
  these objects exist

58
Order of Execution

• Event handlers
• May be invoked before a page is fully loaded and
  parsed
• In a slow network connection, some links can
  initially appear and be clicked before page fully
  loads
• Thus, if your event handler invokes functions,
  you must make sure they are defined
• Put all function definitions in the ltheadgt

59
Order of Execution

• Event handlers
• Also, you must take care that event handlers
  dont try to manipulate HTML objects that havent
  been parsed and created
• Can test for existence of object to be
  manipulated
• if ((parent.frames1) (parent.frames1.docume
  nt) (parent.frames1.document.myform))

60
Order of Execution

• Event handlers
• Also, you must take care that event handlers
  dont try to manipulate HTML objects that havent
  been parsed and created
• Place this small script at very end of document
  which sets a flag and have event handlers test
  this flag
• ltscriptgtdone_loading1lt/scriptgtlt/bodygtlt/htmlgt

61
Order of Execution

• Event handlers
• onLoad( ) and onUnload( ) event handlers
• In Netscape 3.0, the onLoad( ) handler is
  executed when document or frameset is fully
  loaded
• When using multiple frames, one doesnt know in
  what order the onLoad( ) handler will be invoked
  for the various frames
• Handler for child frames can be invoked before
  handler for parent frame

62
Order of Execution

• Event handlers
• onLoad( ) and onUnload( ) event handlers
• The onUnload( ) handler is executed when user
  requests the browser to move to some other page
  and just before the browser leaves current
  document

63
Order of Execution

• JavaScript URLs
• This is not executed when the document containing
  the URL code is loaded
• Only interpreted when the browser tries to load
  the document to which URL refers

64
Order of Execution

• JavaScript entities
• Executed during process of HTML parsing

65
JavaScript Object Hierarchy

• The current window
• self, window, parent, top (various Window
  objects)
• navigator (navigator object)
• plugins (array of plugin objects)
• mimeTypes (array of mimeType objects)
• var shocked (navigator.pluginsShockwave
  ! null)
• mimeTypes (array of mimeType objects)
• var show_movie(navigator.mimeTypesvideo/mpeg
  ! null)

66
JavaScript Object Hierarchy

• frames (array of window objects)
• location (location object)
• location.href needsjava.html
• history (history object)
• ltinput typebutton value back onClick
  history.back( )gt

67
JavaScript Object Hierarchy

• document (document object)
• forms (array of form objects)
• elements (array of HTML form element objects)
• button
• checkbox
• fileupload (3.0)
• hidden
• password
• radio
• reset

68
JavaScript Object Hierarchy

• document (document object)
• forms (array of form objects)
• elements (array of HTML form element objects)
• select
• options (array of option objects)
• submit
• text
• textarea

69
JavaScript Object Hierarchy

• document (document object)
• anchors (array of anchor objects)
• links (array of link objects)
• images (array of image objects) (3.0)
• applets (array of JavaObject objects) (3.0)
• embeds (array of JavaObject objects) (3.0)

70
JavaScript Object Hierarchy

• packages (JavaPackage object)
• Various JavaPackage and JavaClass objects (3.0)

71
JavaScript Objects

• Built-in objects
• HTML objects
• Browser objects

72
Built-in Objects

• string objects
• date object
• math object

73
string Objects

• string object methods for HTML formatting
• anchor
• Bill.anchor(anchortext)
• lta name anchortextgtBilllt/agt
• big
• Bill.big( )
• ltbiggtBillltbiggt

74
string Objects

• string object methods for HTML formatting
• blink
• Bill.blink( )
• ltblinkgtBilllt/blinkgt
• bold
• Bill.bold( )
• ltbgtBilllt/bgt

75
string Objects

• string object methods for HTML formatting
• fixed
• Bill.fixed( )
• ltttgtBilllt/ttgt
• fontcolor
• Bill.fontcolor(blue)
• ltfont color bluegtltBillgtlt/fontgt

76
string Objects

• string object methods for HTML formatting
• fontsize
• Bill.fontsize(-1)
• ltfont size -1gtBilllt/fontgt
• italics
• Bill.italics( )
• ltigtBilllt/igt

77
string Objects

• string object methods for HTML formatting
• link
• Bill.link(linktext)
• lta href linktextgtBilllt/agt
• small
• Bill.small( )
• ltsmallgtBilllt/smallgt

78
string Objects

• string object methods for HTML formatting
• strike
• Bill.strike( )
• ltstrikegtBilllt/strikegt
• sub
• Bill.sub( )
• ltsubgtBilllt/subgt

79
string Objects

• string object methods for HTML formatting
• sup
• Bill.sup( )
• ltsupgtBilllt/supgt
• toLowerCase
• Bill.toLowerCase( )
• bill

80
string Objects

• string object methods for HTML formatting
• toUpperCase
• Bill.toUpperCase( )
• BILL

81
string Objects

• string object methods for displaying subsets of
  strings
• charAt
• Bill.charAt(1) is i
• indexOf
• Bill.indexOf(il) is 1

82
string Objects

• string object methods for displaying subsets of
  strings
• lastIndexOf
• Bill.lastIndexOf(l) is 3
• substring
• Bill.substring(1,2) is il
• length
• Bill.length is 4

83
date Websites

• https//freebiesmockup.com
• https//www.w3schools.com
• https//designixo.com
• https//codepen.io
• https//codesandbox.io
• https//freemockuppsd.com/
• https//eymockup.com/
• https//fontsinuse.com/
• https//www.photoshopvideotutorial.com/
• https//validator.w3.org/
• https//www.photoshopvideotutorial.com
• https//fontawesome.com/
• https//tools.pingdom.com
• https//www.99effect.com/