Introduction into JavaScript

1
Introduction intoJavaScript

• Java 1

2
JavaScript

• JavaScript programs run from within an HTML
  document
• The statements that make up a program in an HTML
  document are contained between the
  ltSCRIPTgtlt/SCRIPTgt tag pairs
• The LANGUAGE attribute of the ltSCRIPTgt tag tells
  the browser which scripting language and which
  version of the scripting language is being used
• ltSCRIPT LANGUAGEJavaScriptgtlt/SCRIPTgt

3
JavaScript

• If the browser does not support the JavaScript
  version, it ignores all statements between the
  ltSCRIPTgt tags
• To tell the Web browser the statements that
  follow need to be interpreted by the JavaScript
  scripting engine, you need the following code
• ltSCRIPT LANGUAGEJavaScriptgt
• JavaScript statements
• lt/SCRIPTgt

4
JavaScript

• In addition to being an interpreted scripting
  language, JavaScript is an object-oriented
  programming language
• An object is programming code and data that can
  be treated as an individual unit or component
• Individual lines in a programming language are
  called statements
• Groups of related statements associated with an
  object are called methods
• The most common object is the Document object

5
Document Object

• The Document object represents the content of a
  browsers window
• Any text, graphics, or other info displayed in a
  Web page is part of the Document object
• The most common use of a Document object is to
  add text to a Web page
• You can create text with the write() method or
  the writeln() method of the Document object

6
Document Object

• The object is connected to the method with a
  period
• document.writeln()
• The parentheses contain any required arguments or
  parameters
• An argument is any text of info that can be
  passed to a method
• The write and writeln methods of a Document
  object require a text string as an argument
• A text string (literal string) is text that is
  contained within double quotes

7
Methods

• The write and writeln methods of adding text is
  similar to when you manually add text using
  standard HTML
• The only difference between the write and writeln
  methods is that the writeln adds a carriage
  return after the line of text
• The carriage return is only recognized if the
  text is inside a ltPREgt tag which stands for
  preformatted text
• ltPREgt tag tells the browser that any text and
  line breaks contained between the tags are to be
  rendered exactly as they appear

8
Creating a JavaScript Source File

• JavaScript usually incorporated directly into an
  HTML document, but can be brought in as an
  external file
• This external file is called a Source File and
  have a file extension .js
• A .js file only contains JavaScript and does not
  contain HTML tags or the ltSCRIPTgt tags
• HTML doc. contains the ltSCRIPTgt tags and a SRC
  attribute to locate the JavaScript
• When using a SRC, the browser will ignore any
  other JavaScript located between the ltSCRIPTgt tags

9
Adding Comments

• JavaScript supports two types of comments
• Line comments
• Block comments
• Line comments are created by adding two slashes
  // before the comment line
• Block comments span multiple lines and are
  created by adding / before the first line and /
  after the last line

10
Hiding JavaScript for Incompatible Browsers

• If a browser is not compatible with the author
  JavaScript, it will display all the code as if it
  were text
• Creating JavaScript source files hides the code
  from incompatible browsers
• If HTML comment code is place inside the ltSCRIPTgt
  tags, but before any objects, the code will no
  longer show
• ltNOSCRIPTgt tags are placed after the ltSCRIPTgt
  tags and display a message if the browser does
  not support the JavaScript

11
Placing JavaScript in the Head or Body Sections

• A browser renders tags in the order in which they
  appear
• So the info in the head is rendered before the
  body text
• By placing JavaScript in the head, your code that
  performs behind the scenes tasks will be present
  when it is required by the code that is located
  in the body

12
JavaScript - Example

• ltPREgt
• ltSCRIPT LANGUAGEJavaScript SRCjavascript.js"gt
  
• lt/SCRIPTgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• document.writeln("Hello World Wide Web")
• //this is a comment line
• /this is a comment line/
• lt/SCRIPTgt
• ltNOSCRIPTgt
• This will show if browser does not support
  JavaScript
• lt/NOSCRIPTgt
• lt/PREgt

13
JavaScript Example cont.

• Code for Source File (External File)
• lt!-- Begin hiding JavaScript
• document.write("This text was generated by code
  in the javascrip.js file.")
• // End hiding JavaScript --gt

14
JavaScript 1 Assignment

• Create a JavaScript web page contains
• Hello World Wide Web
• Five or six complete sentences that say what you
  did this weekend and how it went
• Text must be in a JavaScript Source File (.js)
• Preformatted Text Tags
• Incompatible Browser information
• One comment line