JavaScript

1
JavaScript Basic
2

• What is JavaScript?
• JavaScript was designed to add interactivity to
  HTML pages.
• A JavaScript consists of lines of executable
  computer code
• A JavaScript is usually embedded directly into
  HTML pages
• JavaScript is an interpreted language (means that
  scripts execute without preliminary compilation)
• Everyone can use JavaScript without other
  computer language background.

3

• Are Java and JavaScript the Same?
• NO!
• Java and JavaScript are two completely different
  languages in both concept and design!
• Java (developed by Sun Microsystems) is a
  powerful and much more complex programming
  language - in the same category as C and C.

4

• What can a JavaScript Do?
• JavaScript gives HTML designers a programming
  tool - HTML authors are normally not programmers,
  but JavaScript is a scripting language with a
  very simple syntax! Almost anyone can put small
  Scripts" of code into their HTML pages.
• JavaScript can put dynamic text into an HTML page
  for example the drop down menu on a web site
  may be old HTML code behind it but to interact
  with users input is the job of java script
  code.
• JavaScript can also used for various tricks- for
  example you can switch image in a page for a
  different one when the user rolls her mouse over
  it.

5

• How to Put a JavaScript Into an HTML Page
• lthtmlgt
• ltbodygt
• ltSCRIPT LANGUAGE"JavaScript
  typetext/JavaScriptgt
• document.write("Hello World!")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt
• The code above will produce this output on an
  HTML page
• Hello World!

6

• Example Explained
• To insert a JavaScript into an HTML page, we use
  the ltscriptgt tag (also use the type attribute to
  define the scripting language).
• So, the ltscript type"text/javascript"gt and
  lt/scriptgt tells where the JavaScript starts and
  ends
• lthtmlgt
• ltbodygt
• ltSCRIPT LANGUAGE"JavaScript typetext/JavaScri
  ptgt
• ...
• ...
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

7

• The word document.write is a standard JavaScript
  command for writing output to a page.
• By entering the document.write command between
  the ltscript type"text/javascript"gt and lt/scriptgt
  tags, the browser will recognize it as a
  JavaScript command and execute the code line. In
  this case the browser will write Hello World! to
  the page
• lthtmlgt
• ltbodygt
• ltSCRIPT LANGUAGE"JavaScript
  typetext/JavaScriptgt
• document.write("Hello World!")
• lt/scriptgt
• ltbodygt
• lt/htmlgt
• Note If we had not entered the ltscriptgt tag, the
  browser would have treated the document.write("Hel
  lo World!") command as pure text, and just write
  the entire line on the page.

8
Another example lthtmlgt ltbody bgcolor"white"gt ltP
gtParagraph 1lt/Pgt ltSCRIPT LANGUAGE"JavaScript
typetext/JavaScriptgt document.bgColor
"RED" lt/SCRIPTgt lt/bodygt lt/htmlgt
9

• Example Explained
• ltBODY BGCOLORWHITEgt is a HTML code to set the
  background color to white.
• To insert a JavaScript into an HTML page, we use
  the ltSCRIPT LANGUAGE"JavaScript
  typetext/JavaScriptgt to start the JavaScript
  code
• Document.bgcolor RED set the background to
  red.
• ltSCRIPTgt to end the JavaScript code

10
(No Transcript)
11

• Ending Statements With a Semicolon?
• With traditional programming languages, like C
  and Java, each code statement has to end with a
  semicolon.
• Many programmers continue this habit when writing
  JavaScript, but in general, semicolons are
  optional! However, semicolons are required if you
  want to put more than one statement on a single
  line.

12
Try It Out lthtmlgt ltbody bgcolor"white"gt ltPgtParag
raph 1lt/Pgt ltSCRIPT LANGUAGE"JavaScript"gt //
Script block 1 alert("First Script
Block") lt/SCRIPTgt ltPgtParagraph 2lt/Pgt ltSCRIPT
LANGUAGE"JavaScript"gt // Script block 2
document.bgColor "RED" alert("Second
Script Block") lt/SCRIPTgt ltPgtParagraph
3lt/Pgt lt/bodygt lt/htmlgt
13

• How Does it work?
• The first part of the page is the same as our
  earlier example. The background is set to white
  and paragraph 1 is written.
• lthtmlgt
• ltbody bgcolor"white"gt
• ltPgtParagraph 1lt/Pgt
• The first new section in the first script block
• ltSCRIPT LANGUAGE"JavaScript"gt
• // Script block 1
• alert("First Script Block")
• lt/SCRIPTgt
• // Script block 1 is just a comment, browser
  ignores anything after //

14

• alert("First Script Block") The alert function
  enable us to alert or inform the user about
  something, by displaying a message box. The
  message to be given in the message box is
  specified inside the parenthesis of the alert()
  function and is known as the functions
  parameter.

15

• once you click OK, the browser carries on parsing
  down the page through the following lines
• ltSCRIPT LANGUAGE"JavaScript"gt
• // Script block 2
• document.bgColor "RED"
• alert("Second Script Block")
• lt/SCRIPTgt

16
(No Transcript)
17

• The second paragraph is displayed and the second
  block of JavaScript is run.
• First line is comment
• Second line is changing the background color.
• The third line is the alert function
• When we close the message box, the browser moves
  on to the next lines of the code in the page,
  displaying the third paragraph.

18
(No Transcript)
19

• We have seen in the preceding example that by
  using JavaScript we can change the background
  color of the page by using BGCLOR property of
  document.
• We are able to use this property with both
  internet explorer and Netscape browsers. However
  for other property and functions this is not
  true.
• the material In this course is going to be
  compatible with internet explorer and Netscape
  browsers version 4 and above.
• Over the course we will be developing part of a
  web-based application, namely Trivia Quiz that
  works with both Netscape and explorer 4.0.
• We mainly later on in the course focus on the
  property and the functions that works with the
  Explorer 6.0 (new internet explorer)