IT130 :The Internet and the Web

1
IT130 The Internet and the Web

• Introduction to JavaScript
• Great tutorial on the web
• http//www.w3schools.com
• http//devedge.netscape.com/library/manuals/2000/j
  avascript/1.5/guide/

2
What is Java Script?

• JavaScript is not an all-purpose programming
  language What is JavaScript? JavaScript is NOT
  Java
• JavaScript is an interpreted web scripting
  language run from the Web browser ( as opposed to
  CGI scripting that runs on the server side)

3
Applets and Java Interpreters
This figure shows a web browser that has a Java
interpreter runs the program locally on the
users computer, freeing up the Web server for
other purposes.
4
Introduction to JavaScript

• JavaScript is an interpreted programming or
  script language from Netscape.
• JavaScript is used in Web site development to
• automatically change a formatted date on a Web
  page
• cause a linked-to page to appear in a popup
  window
• cause text or a graphic image to change during a
  mouse rollover
• validate a form.
• schedulesnow.htm SuperBowlquiz Rollover.htm

5
Background of JavaScript

• Originally created by a team at Netscape and Sun
  as a subset of Java, with some differences
• Doesnt need to be compiled, the browser has an
  interpreter that process the commands in a script
• JavaScript commands can be embedded directly into
  an HTML file (not in a separate applet)
• You dont need to know Object Oriented
  Programming to use it.

6
JavaScript DHTML

• JavaScript is part of a growing number of HTML
  extensions known as Dynamic HTML (DHTML). DHTML
  is comprised of
• CSS (cascading style sheets)
• DOM (document object module)
• Scripting (JavaScript - Jscript and VBScript)
• Together, these technologies make the Web what it
  is today, by enabling far more advanced
  interactivity and much flashier styling than
  would HTML on its own

7
Current version of JavaScript

• The European Computer Manufacturers Association
  (ECMA) is now in charge of the development of a
  JavaScript standard.
• The current version of JavaScript is called
  ECMA-262 and is supported by most browsers.
• Another client-side scripting language supported
  by Internet Explorer is VBScript

8
Few comments about Java Script

• JavaScript has some features in common with OO
  languages you should be familiar with the
  concept of OO languages since it was introduced
  in CSC211.
• A hierarchy of objects is represented in code
  using dot syntax
• document.sunflowerphoto
• referring to an image named sunflowerphoto in
  a html document loaded in the Web browser window.
• Built-in properties values
• document.bgColorsilver
• bgColor is a property of the object document and
  silver is its value.
• Events and event handlers
• code that responds to events initiated by
  visitors to a Web Page.

9
Debugging JavaScript

• Before starting to code, outline the main tasks
  you want the program to perform break your
  program down to smaller tasks. Write your program
  step by step - Debug your program often!
• Syntactic errors set this in IE
• Internet Options/Advanced
• Check boxDisplay a notification about every
  script error
• Check the line indicated and the ones above and
  below
• In Notepad Edit/Goto enter the line number
• If you have syntactic errors the script will not
  run

10
Debugging JavaScript

• Semantic errorsthe syntax is correct but will
  produce the wrong result
• Calculate the average of two numbers
• Correct z (xy)/2
• Incorrect a xy/2
• If x10 and y30
• z20
• a25

11
JavaScript and HTML

• You can place the JavaScript commands in a
  separate file
• Then link the HTML file to that file by using the
  ltSCRIPTgt tag in the head of the file

ltheadgt ltscript srcurl languagejavascriptgt o
ther script commands and commentslt/scriptgt lt/head
gt

• script is the tag, language is the attribute,
  javascript is the value

12
JavaScript and HTML

• You can place the JavaScript commands directly in
  the HTML file
• The ltSCRIPTgt tag can go either in the ltHEADgt or
  in the ltBODYgt

ltbodygt ltscript languageJavaScriptgt script
commands and commentslt/scriptgt lt/bodygt
13
Keep in mind

• JavaScript is case sensitive (commands, objects,
  methods, function names etc ..)
• Each JavaScript command line must end with a
  semi-colon ()
• One-line comment // comment
• Multi-line comment / comment /

14
Sending output to the Web page
JSOutput.htm

• document.writeln(string)
• positions output cursor on next line when
  finished
• document.write(string)
• Leaves the output cursor where it is when done
  executing
• The string can contain any text or HTML source
  code
• document is the object, write is the method.
• Methods are object-associated actions

15
JavaScript Variables

• A variable is a named element in a program, used
  to store and retrieve information
• Variable names are case sensitive, cannot contain
  spaces, and must start with a letter or an
  underscore
• When you have more than one word in a variable
  name, start with a lowercase first letter and
  capitalize the first letter of any subsequent
  word currentDate

16
Declaring a JavaScript variable

• var variableNameindicates that variableName is
  a program variable, it doesnt occupy any space.
• var variableName value
• (using var helps other people to read your code)
• variableName value(also assign an initial
  value to the variable)
• You do NOT need to declare the variable type

17
Different types of variables
JSVar.htm

• Numeric 13, 22.3,-3.1415, 5.1E2 (5.1x102)
• String any group of characters within quotation
  marks. This is a string, another string,
  3.14, (the empty string)
• Boolean can only be true or falsevar isBad
  true
• Null variable is a variable that has no value
  (assigned yet)var noGivenValue

18
Assignment operators

• This operators are used with any data type to
  assign a specific value to a variable
• x5 x equals 5x6 x equals 11x-2 x
  equals 9x3 x equals 27x/9 x equals 3

19
JavaScript functions

• A function is used to group related, script
  statements together in reusable units. A function
  might perform actions or calculate a value.
• Object methods are nothing more than functions
  that are associated with an object.
• The format of a function definition is
• function function_name(function_parameter
  list)
• JavaScript statements
• Functions may or may not return a value,
  depending on whether a value is
• specified with the return statement within the
  function
• return value_to_return
• The value returned can be stored in a variable.
  Never name a function the same as one of the
  elements of a form!

20
Performing an action with a function

• Define the function in the ltheadgt and always
  before the command that calls the function

function showDate (date)document.write(Today is
date)

• Call (or run) the function when needed, passing
  the parameters by value.

var ThisDay 10/29/2002showDate(ThisDay)
Today is 10/29/2002
21
Returning a value from a function
JSaverage.htm

• You can use a function to calculate a value
• You need a return command and a variable at the
  end of the functions command block

function average(num1, num2) var
avrg (num1num2)/2 return avrg
Declaring the function
var x 10var y30var z average(x,y)document
.write(the average is z)
Function is called parameters 10 and 30 are
passedz result of function
22

• ltheadgt ltscript language"JavaScript"gt
• function average(num1,num2)
• var avrg (num1num2)/2
• return avrg
• lt/scriptgt
• ltstylegt
• h3 text-aligncenter colorblue
• body color darkblue
• lt/stylegt lt/headgt
• ltbodygt
• lth3gt This function calculates the average of 10
  and 30 lt/h3gt
• ltscriptgt
• var x 10
• var y 30
• var z average(x,y) // call function average()
• document.write("The average of "x" and "y" is
  "z)
• lt/scriptgt
• lt/bodygt

23
The window object and methods

• The window object represents a browser window.
  Window methods are
• window.alert("string) Shows an alert window
  with text string, and 'OK' button
• window.prompt(string of character, default
  value) Prompts user for input
• window.confirm(string)If the OK button is
  clicked, the confirm method returns the value
  true
• window.close()
• window.open(URL, windowname)

24
(No Transcript)
25
Average revisited
function average(num1, num2) var
avrg (num1num2)/2 return avrg

• firstNumber window.prompt("Enter an
  integer","0")
• secondNumber window.prompt("Enter
  another","0")
• xparseInt (firstNumber)
• yparseInt (secondNumber)
• var z average(x,y)
• document.writeln(First number x)
• document.writeln(Second number y)
• document.writeln(The average of x and y is z)

Transform string input into an integer
Call functionReturn average
JSAverprompt.htm