JavaScript

1
JavaScript

• Language Fundamentals I

2
About JavaScript

• JavaScript is not Java, or even related to Java
• The original name for JavaScript was LiveScript
• The name was changed when Java became popular
• Now that Microsoft no longer likes Java, its name
  for their JavaScript dialect is Active Script
• Statements in JavaScript resemble statements in
  Java, because both languages borrowed heavily
  from the C language
• JavaScript should be fairly easy for Java
  programmers to learn
• However, JavaScript is a complete, full-featured,
  complex language
• JavaScript is seldom used to write complete
  programs
• Instead, small bits of JavaScript are used to add
  functionality to HTML pages
• JavaScript is often used in conjunction with HTML
  forms
• JavaScript is reasonably platform-independent

3
Using JavaScript in a browser

• JavaScript code is included within ltscriptgt tags
• ltscript type"text/javascript"gt
  document.write("lth1gtHello World!lt/h1gt")
  lt/scriptgt
• Notes
• The type attribute is to allow you to use other
  scripting languages (but JavaScript is the
  default)
• This simple code does the same thing as just
  putting lth1gtHello World!lt/h1gt in the same place
  in the HTML document
• The semicolon at the end of the JavaScript
  statement is optional
• You need semicolons if you put two or more
  statements on the same line
• Its probably a good idea to keep using semicolons

4
JavaScript isnt always available

• Some old browsers do not recognize script tags
• These browsers will ignore the script tags but
  will display the included JavaScript
• To get old browsers to ignore the whole thing,
  use ltscript type"text/javascript"gt
  lt!-- document.write("Hello World!")
  //--gt lt/scriptgt
• The lt!-- introduces an HTML comment
• To get JavaScript to ignore the HTML close
  comment, --gt, the // starts a JavaScript comment,
  which extends to the end of the line
• Some users turn off JavaScript
• Use the ltnoscriptgtmessagelt/noscriptgt to display a
  message in place of whatever the JavaScript would
  put there

5
Where to put JavaScript

• JavaScript can be put in the ltheadgt or in the
  ltbodygt of an HTML document
• JavaScript functions should be defined in the
  ltheadgt
• This ensures that the function is loaded before
  it is needed
• JavaScript in the ltbodygt will be executed as the
  page loads
• JavaScript functions can be put in a separate .js
  file
• ltscript src"myJavaScriptFile.js"gtlt/scriptgt
• Put this in the ltheadgt
• An external .js file lets you use the same
  JavaScript on multiple HTML pages
• The external .js file cannot itself contain a
  ltscriptgt tag
• JavaScript can be put in an HTML form object,
  such as a button
• This JavaScript will be executed when the form
  object is used

6
Primitive data types

• JavaScript has three primitive types number,
  string, and boolean
• Everything else is an object
• Numbers are always stored as floating-point
  values
• Hexadecimal numbers begin with 0x
• Some platforms treat 0123 as octal, others treat
  it as decimal
• Since you cant be sure, avoid octal altogether!
• Strings may be enclosed in single quotes or
  double quotes
• Strings can contains \n (newline), \" (double
  quote), etc.
• Booleans are either true or false
• 0, "0", empty strings, undefined, null, and NaN
  are false , other values are true

7
Variables

• Variables are declared with a var statement
• var pi 3.1416, x, y, name "Dr. Dave"
• Variables names must begin with a letter or
  underscore
• Variable names are case-sensitive
• Variables are untyped (they can hold values of
  any type)
• The word var is optional (but its good style to
  use it)
• Variables declared within a function are local to
  that function (accessible only within that
  function)
• Variables declared outside a function are global
  (accessible from anywhere on the page)

8
Operators, I

• Because most JavaScript syntax is borrowed from C
  (and is therefore just like Java), we wont spend
  much time on it
• Arithmetic operators (all numbers are
  floating-point) - /
  --
• Comparison operators lt lt !
  gt gt
• Logical operators ! (
  and are short-circuit operators)
• Bitwise operators
  ltlt gtgt gtgtgt
• Assignment operators - /
  ltlt gtgt gtgtgt

9
Operators, II

• String operator
• The conditional operator condition ?
  value_if_true value_if_false
• Special equality tests
• and ! try to convert their operands to the
  same type before performing the test
• and ! consider their operands unequal if
  they are of different types
• Additional operators (to be discussed) new
  typeof void delete

10
Comments

• Comments are as in C or Java
• Between // and the end of the line
• Between / and /
• Javas javadoc comments, / ... /, are treated
  just the same as / ... / comments they have no
  special meaning in JavaScript

11
Statements, I

• Most JavaScript statements are also borrowed from
  C
• Assignment greeting "Hello, " name
• Compound statement statement ...
  statement
• If statements if (condition) statement
  if (condition) statement else statement
• Familiar loop statements while (condition)
  statement do statement while (condition)
  for (initialization condition increment)
  statement

12
Statements, II

• The switch statement switch (expression)
  case label statement
  break case label statement
  break ... default
  statement
• Other familiar statements
• break
• continue
• The empty statement, as in or

13
JavaScript is not Java

• By now you should have realized that you already
  know a great deal of JavaScript
• So far we have talked about things that are the
  same as in Java
• JavaScript has some features that resemble
  features in Java
• JavaScript has Objects and primitive data types
• JavaScript has qualified names for example,
  document.write("Hello World")
• JavaScript has Events and event handlers
• Exception handling in JavaScript is almost the
  same as in Java
• JavaScript has some features unlike anything in
  Java
• Variable names are untyped the type of a
  variable depends on the value it is currently
  holding
• Objects and arrays are defined in quite a
  different way
• JavaScript has with statements and a new kind of
  for statement

14
Object literals

• You dont declare the types of variables in
  JavaScript
• JavaScript has object literals, written with this
  syntax
• name1 value1 , ... , nameN valueN
• Example (from Netscapes documentation)
• car myCar "Saturn", 7 "Mazda",
  getCar CarTypes("Honda"), special Sales
• The fields are myCar, getCar, 7 (this is a legal
  field name) , and special
• "Saturn" and "Mazda" are Strings
• CarTypes is a function call
• Sales is a variable you defined earlier
• Example use document.write("I own a "
  car.myCar)

15
Three ways to create an object

• You can use an object literal
• var course number "CIT597", teacher "Dr.
  Dave"
• You can use new to create a blank object, and
  add fields to it later
• var course new Object()course.number
  "CIT597"course.teacher "Dr. Dave"
• You can write and use a constructor
• function Course(n, t) // best placed in
  ltheadgt this.number n // keyword
  "this" is required, not optional
  this.teacher t
• var course new Course("CIT597", "Dr. Dave")

16
Functions

• Functions should be defined in the ltheadgt of an
  HTML page, to ensure that they are loaded first
• The syntax for defining a function isfunction
  name(arg1, , argN) statements
• The function may contain return value
  statements
• Any variables declared within the function are
  local to it
• The syntax for calling a function is just
  name(arg1, , argN)
• Simple parameters are passed by value, objects
  are passed by reference

17
Warnings

• JavaScript is a big, complex language
• Weve only scratched the surface
• Its easy to get started in JavaScript, but if
  you need to use it heavily, plan to invest time
  in learning it well
• Write and test your programs a little bit at a
  time
• JavaScript is not totally platform independent
• Expect different browsers to behave differently
• Write and test your programs a little bit at a
  time
• Browsers arent designed to report errors
• Dont expect to get any helpful error messages
• Write and test your programs a little bit at a
  time

18
The End