JavaScript Basics

1
JavaScript Basics

• What is JavaScript?
• JavaScript is a scripting language designed for
  Web pages by Netscape.

2

• JavaScript ? Java
• Developed by Netscape
• Purpose to Create Dynamic websites
• Widely Used

3
Why Use JavaScript?

• JavaScript enhances Web pages with dynamic and
  interactive features.
• JavaScript runs in client software.
• JavaScript 1.3 works with version 4.0 browsers.

4
What Can JavaScript Do?

• Common JavaScript tasks can replace server-side
  scripting.
• JavaScript enables shopping carts, form
  validation, calculations, special graphic and
  text effects, image swapping, image mapping,
  clocks, and more.

5

• Client-side programming
• recall HTML is good for developing static pages
• ?? can specify text/image layout, presentation,
  links,
• ?? Web page looks the same each time it is
  accessed
• ?? in order to develop interactive/reactive
  pages, must integrate programming
• client-side programming

6

• ?? programs are written in a separate programming
  language
• e.g., JavaScript, JScript, VBScript
• ?? programs are embedded in the HTML of a Web
  page, with tags to identify the
• program component
• e.g., ltscript type"text/javascript"gt lt/scriptgt
• ?? the browser executes the program as it loads
  the page, integrating the dynamic
• output of the program with the static content of
  HTML

7
JavaScript Syntax.

• Unlike HTML, JavaScript is case sensitive.
• Dot Syntax is used to combine terms.
• e.g., document.write("Hello World")
• Certain characters and terms are reserved.
• JavaScript is simple text (ASCII).

8
JavaScript Terminology.

• JavaScript uses specialized terminology.
• Understanding JavaScript terms is fundamental to
  understanding the script.
• Objects, Properties, Methods, Events, Functions,
  Values, Variables, Expressions, Operators.

9
Objects

• Objects refers to windows, documents, images,
  tables, forms, buttons or links, etc.
• Objects should be named.
• Objects have properties that act as modifiers.
  

10
Properties

• Properties are object attributes.
• Object properties are defined by using the
  object's name, a period, and the property name.
• e.g., background color is expressed by
  document.bgcolor .
• document is the object.
• bgcolor is the property.

11
Methods

• Methods are actions applied to particular
  objects. Methods are what objects can do.
• e.g., document.write(Hello World")
• document is the object.
• write is the method.

12
Events

• Events associate an object with an action.
• e.g., the OnMouseover event handler action can
  change an image.
• e.g., the onSubmit event handler sends a form.
• User actions trigger events.

13
Functions

• Functions are named statements that performs
  tasks.
• e.g., function doWhatever () statement here
• The curly braces contain the statements of the
  function.
• JavaScript has built-in functions, and you can
  write your own.

14
Function

• ltscript langauge"JavaScript"gt
• lt!-- hide me
• function announceTime( )
• //get the date, the hour, minutes, and seconds
• var the_date new Date()
• var the_hour the_date.getHours()
• var the_minute the_date.getMinutes()
• var the_second the_date.getSeconds()
• //put together the string and alert with it
• var the_time the_hour "" the_minute ""
  the_second
• alert("The time is now " the_time)
• // show me --gt
• lt/scriptgt lt/headgt ltbodygt ... lt/bodygt lt/htmlgt

15
Values

• Values are bits of information.
• Values types and some examples include
• Number 1, 2, 3, etc.
• String characters enclosed in quotes.
• Boolean true or false.
• Object image, form
• Function validate, doWhatever

16
Variables

• Variables contain values and use the equal sign
  to specify their value.
• Variables are created by declaration using the
  var command with or without an initial value
  state.
• e.g. var month
• e.g. var month April

17
Variables

• ltscript languageJavaScriptgt
• lt!-- definition of variables
• var num_car 25
• var passenger_per_car 3
• //calculation of total number of people
• var total_passenger num_car passenger_per_car
• Alert(total_passenger)
• // end of script --gt
• lt/scriptgt
• www.artsci.wustl.edu/hmliaw/Test-Variable.htm

18
Expressions

• Expressions are commands that assign values to
  variables.
• Expressions always use an assignment operator,
  such as the equals sign.
• e.g., var month May is an expression.
• Expressions end with a semicolon.

19
Operators

• Operators are used to handle variables.
• Types of operators with examples
• Arithmetic operators, such as plus.
• Comparisons operators, such as equals.
• Logical operators, such as and.
• Control operators, such as if.
• Assignment and String operators.

20
Methods of Using JavaScript.

• 1. JavaScripts can reside in a separate page.
• 2. JavaScript can be embedded in HTML documents
  -- in the ltheadgt, in the ltbodygt, or in both.
• 3. JavaScript object attributes can be placed in
  HTML element tags.
• e.g., ltbody onLoad"alert('WELCOME')"gt

21

• lthtmlgt
• ltheadgt
• lttitlegtJavaScript Pagelt/titlegt
• ltscript LANGUAGEJavaScriptgt
• lt!-- actual JavaScript follows below
• alert (Welcome to the Test Site!)
• // ending the script --gt
• lt/scriptgt
• lt/headgt
• ltbodygt Content of the Page lt/bodygt
• lt/htmlgt

22
1. Using Separate JavaScript Files.

• Linking can be advantageous if many pages use the
  same script.
• Use the source element to link to the script file.

ltscript src"myjavascript.js
language"JavaScript1.2 type"text/javascript"
gt lt/scriptgt
23
2. Embedding JavaScript in HTML.

• When specifying a script only the tags ltscriptgt
  and lt/scriptgt are essential, but complete
  specification is recommended

ltscript language"javascript
type"text/javascript"gt lt!-- Begin hiding
window.locationindex.html" // End
hiding script--gt lt/scriptgt
24
Using Comment Tags

• HTML comment tags should bracket any script.
• The lt!-- script here --gt tags hide scripts in
  HTML and prevent scripts from displaying in
  browsers that do not interpret JavaScript.
• Double slashes // are the signal characters for a
  JavaScript single-line comment.

25
3. Using JavaScript in HTML Tags.

• Event handlers like onMouseover are a perfect
  example of an easy to add tag script.

lta hrefindex.html onMouseover"document.logo
.src'js2.gif'" onMouseout"document.logo.src
'js.gif'"gt ltimg src"js.gif" name"logo"gt lt/agt
26
Creating an Alert Message

• The following script in the ltbodygt tag uses the
  onLoad event to display an Alert window
• The message is specified within parenthesis.

ltbody onLoad"alert('WELCOME. Enjoy your visit.
Your feedback can improve cyberspace. Please let
me know if you detect any problems. Thank
you.')"gt