Javascript Tutorial

1
More JavaScript
2
Browser support

• JavaScript works on almost all browsers
• Internet Explorer uses JScript (referred to in
  menus as Active Scripting), which is
  Microsofts dialect of JavaScript
• Older browsers dont support some of the newer
  features of JavaScript
• We will assume modern browser support
• Enabling and disabling JavaScript
• See http//www.valleyvet.com/si_javascript_help.ht
  ml

3
What you cant do

• To protect the visitor to your web pages, you
  cant
• Read or write user files
• However, JScript on IE allows ASP scripting,
  which is how the very destructive JS.Gigger.A_at_mm
  worm spreads
• To turn off active scripting in Outlook Express,
  seehttp//support.microsoft.com/support/kb/articl
  es/Q192/8/46.ASP
• Execute any other programs
• Connect to any other computer, except to download
  another HTML page or to send e-mail
• Determine what other sites the user has visited
• Open a very small (less than 100px by 100px)
  window or an offscreen window (except in IE)

4
Debugging

• Mozilla/Netscape has much better debugging tools
  than IE
• Mozilla
• Select Tools gt Web Development gt JavaScript
  console
• Netscape 6
• Select Tasks gt Tools gt JavaScript console
• Netscape 4
• Select Communicator gt Tools gt JavaScript
  console
• Any Mozilla or Netscape
• Type javascript in the location bar and press
  Enter
• Internet Explorer
• Go to the Preferences... dialog and look for
  something like Web content gt Show scripting
  error alerts
• After debugging, test your program in IE
• IE is the most popular browser

5
Numbers

• In JavaScript, all numbers are floating point
• Special predefined numbers
• Infinity, Number.POSITIVE_INFINITY -- the result
  of dividing a positive number by zero
• Number.NEGATIVE_INFINITY -- the result of
  dividing a negative number by zero
• NaN, Number.NaN (Not a Number) -- the result of
  dividing 0/0
• NaN is unequal to everything, even itself
• There is a global isNaN() function
• Number.MAX_VALUE -- the largest representable
  number
• Number.MIN_VALUE -- the smallest (closest to
  zero) representable number

6
Strings and characters

• In JavaScript, string is a primitive type
• Strings are surrounded by either single quotes or
  double quotes
• There is no character type
• Special characters are

\0 NUL \b backspace \f form feed \n
newline \r carriage return \t horizontal tab
\v vertical tab \' single quote \" double
quote \\ backslash \xDD Unicode hex DD \xDDDD
Unicode hex DDDD
7
Some string methods

• charAt(n)
• Returns the nth character of a string
• concat(string1, ..., stringN)
• Concatenates the string arguments to the
  recipient string
• indexOf(substring)
• Returns the position of the first character of
  substring in the recipient string, or -1 if not
  found
• indexOf(substring, start)
• Returns the position of the first character of
  substring in the given string that begins at or
  after position start, or -1 if not found
• lastIndexOf(substring), lastIndexOf(substring,
  start)
• Like indexOf, but searching starts from the end
  of the recipient string

8
More string methods

• match(regexp)
• Returns an array containing the results, or null
  if no match is found
• On a successful match
• If g (global) is set, the array contains the
  matched substrings
• If g is not set
• Array location 0 contains the matched text
• Locations 1... contain text matched by
  parenthesized groups
• The array index property gives the first matched
  position
• replace(regexp, replacement)
• Returns a new string that has the matched
  substring replaced with the replacement
• search(regexp)
• Returns the position of the first matched
  substring in the given string, or -1 if not
  found.

9
boolean

• The boolean values are true and false
• When converted to a boolean, the following values
  are also false
• 0
• "0" and '0'
• The empty string, '' or ""
• undefined
• null
• NaN

10
undefined and null

• There are special values undefined and null
• undefined is the only value of its type
• This is the value of a variable that has been
  declared but not defined, or an object property
  that does not exist
• void is an operator that, applied to any value,
  returns the value undefined
• null is an object with no properties
• null and undefined are but not

11
Arrays

• As in C and Java, there are no true
  multidimensional arrays
• However, an array can contain arrays
• The syntax for array reference is as in C and
  Java
• Example
• var a "red", 255, "green", 128
• var b a10 // b is now "green"
• var c a1 // c is now "green", 128
• var d c1 // d is now 128

12
Determining types

• The unary operator typeof returns one of the
  following strings "number", "string", "boolean",
  "object", "undefined", and "function"
• typeof null is "object"
• If myArray is an array, typeof myArray is
  "object"
• To distinguish between different types of
  objects,
• myObject instanceof Constructor
• The Constructor should be an object that is a
  constructor function
• It is an error if the right-hand side is not an
  object at all
• myObject.constructor Constructor
• myObject.toString() "ConstructorName"

13
Wrappers and conversions

• JavaScript has wrapper objects for when a
  primitive value must be treated as an object
• var s new String("Hello") // s is now a String
• var n new Number(5) // n is now a Number
• var b new Boolean(true) // b is now a Boolean
• Because JavaScript does automatic conversions as
  needed, wrapper objects are hardly ever needed
• JavaScript has no casts, but conversions can be
  forced
• var s x "" // s is now a string
• var n x 0 // n is now a number
• var b !!x // b is now a boolean
• Because JavaScript does automatic conversions as
  needed, explicit conversions are hardly ever
  needed

14
Variables

• Every variable is a property of an object
• When JavaScript starts, it creates a global
  object
• In client-side JavaScript, the window is the
  global object
• It can be referred to as window or as this
• The built-in variables and methods are defined
  here
• There can be more than one global object
• For example, one frame can refer to another frame
  with code such as parent.frames1
• Local variables in a function are properties of a
  special call object

15
HTML names in JavaScript

• In HTML the window is the global object
• It is assumed that all variables are properties
  of this object, or of some object descended from
  this object
• The most important window property is document
• HTML form elements can be referred to by
  document.formsformNumber.elementselementNumber
  
• Every HTML form element has a name attribute
• The name can be used in place of the array
  reference
• Hence, if
• ltform name"myForm"gt ltinput type"button"
  name"myButton" ...gt
• Then instead of document.forms0.elements0
• you can say document.myForm.myButton

16
More about with

• with (object) statement uses the object as the
  default prefix for variables in the statement
• As noted in an earlier lecture, one book hints at
  mysterious problems resulting from the use of
  with, and recommends against ever using it
• It turns out that there are two problems
• with is difficult to optimize, hence may be
  inefficient
• More importantly, variable declarations and
  function definitions have odd and
  counterintuitive behavior
• The problem appears to be determining if the
  prefix is used
• Other types of statements are fine

17
Functions

• In Java, methods are associated with objects
• In JavaScript, a function is an object
• Functions can be recursive
• function factorial(n) if (n lt 1) return
  1 else return n factorial(n - 1)
• Functions can be nested
• function hypotenuse(a, b) function
  square(x) return x x return
  Math.sqrt(square(a) square(b))

18
The Function() constructor

• Since functions are objects, they have a
  constructor
• Function(arg1, arg2, ..., argN, body)
• All the arguments to the constructor are strings
• Example var f new Function("x", "y",
  "return x y")
• Notice that the function has no name
• But you can assign it to a variable and use that
  name
• The name can be used to call the function as
  usual
• You can construct functions dynamically in
  JavaScript (they are automatically compiled)
• However, compilation is computationally expensive
• Functions defined in this way are always global

19
Function literals

• As we just saw, a function can be defined by
  means of a constructor
• var f new Function("x", "y", "return x y")
• A function can be written literally, as in the
  following example
• var f function(x, y) return x y
• This function is not necessarily global
• To write a recursive literal function, give it a
  name
• var f function fact(n) if (n lt 1) return n
  else return n
  fact(n - 1)
• The name does not persist after the function is
  created

20
Function names

• The name of a function is just the variable
  that holds the function
• var square function(x) return x x
• var a square(4) // a now holds 16
• var b square // b now holds square
• var c b(5) // c now holds 25
• var d b // d is an array
• var e d0(6) // e now holds 36

21
The call object

• When a function is called, a new call object is
  created
• The properties of the call object include
• The function parameters
• Local variables declared with the var statement
• The arguments object

22
arguments

• The arguments object is like an array
• argumentsn is a synonym for the nth argument
• arguments.length is the number of arguments that
  the function was called with
• function.length is the number of arguments it was
  defined with
• arguments.length, unlike function.length, is
  available only within the function
• arguments.callee is the function itself

23
Example uses of arguments

• function max() var m Number.NEGATIVE_INFIN
  ITY for (var i 0 i lt arguments.length
  i) if (argumentsi gt m) m
  argumentsi return m
• function(n) if (n lt 1) return 1
  return n arguments.callee(n - 1)

24
Methods

• When a function is a property of an object, we
  call it a method
• A method can be invoked by either of
  call(object, arg1, ..., argN) or
  apply(object, arg1, ..., argN)
• call and apply are defined for all functions
• call takes any number of arguments
• apply takes an array of arguments
• Both allow you to invoke a function as if it were
  a method of some other object, object
• Inside the function, the keyword this refers to
  the object

25
Properties of functions

• Since a function is an object, you can add
  properties to it
• Function properties are often a good alternative
  to global variables
• Example
• uniqueInteger.counter 0
• function uniqueInteger() return
  uniqueInteger.counter
• Function properties are a bit like static
  variables in Java

26
The End

• 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/