Internet Development JavaScript

1
Internet Development JavaScript

• Bryan Duggan

2
Introduction

• What is JavaScript?
• JavaScript is the Netscape-developed object
  scripting language used in millions of web pages
  and server applications worldwide. Netscape's
  JavaScript is a superset of the ECMA-262
  Edition 3 (ECMAScript) standard scripting
  language, with only mild differences from the
  published standard.
• JavaScript is not "Interpretive Java". In a
  nutshell, JavaScript is a dynamic scripting
  language supporting prototype based object
  construction.

Source http//www.mozilla.org/js/
3
JavaScript Uses

• Browser Detection
• Use JavaScript to detect the browser used by a
  visitor at your page. Depending on the browser,
  another page specifically designed for that
  browser can then be loaded.
• Dynamic HTML
• Any code that allows you to change the content or
  appearance of a document in a Web browser.
• Cookies
• Use JavaScript to store information on the
  visitor's computer, then retrieving this
  information automatically next time the user
  visits your page. This technique is called
  "cookies".
• Control Browsers
• Opening pages in customized windows, where you
  specify if the browser's buttons, menu line,
  status line or whatever should be present.
• Data Processing
• Validating inputs to fields before submitting a
  form.An example would be validating the entered
  email address to see if it has an _at_ in it, since
  if not, it's not a valid address.

4
JavaScript vs. Java

• Similar syntax, but otherwise not related
• Java developed by Sun
• JavaScript developed by netscape/Microsoft/ECMA

5
Defining a Script

• Three places to define
• First Place it within the head of the HTML
  document. Scripts here aren't automatically
  executed when the page loads but can be referred
  to by other scripts within the document.
• Second Define a script within the body of the
  HTML document. Scripts here are executed as the
  page loads.
• Third Define a script within an event handler.
• You can also include the src attribute to the
  script tag if you would like to save your script
  to an external file and include it in the HTML
  file. Remember to use the .js extension when
  saving JavaScript to an external
  file.     ltscript src"menu.js"gtThe above would
  include the JavaScript from the menu.js file.

6
Defining a Script (example, cont.)

• Where to Put the JavaScript
• Scripts in the body section will be executed
  WHILE the page loads.
• Scripts in the head section will be executed when
  CALLED.
• Scripts in the head section
• lthtmlgt ltheadgt ltscript type"text/javascript"gt
  some statements lt/scriptgt lt/headgt
• Scripts in the body section
• lthtmlgt ltheadgt lt/headgt ltbodygt ltscript
  type"text/javascript"gt some statements lt/scriptgt
  lt/bodygt
• Scripts in both the body and the head section
• lthtmlgt ltheadgt ltscript type"text/javascript"gt
  some statements lt/scriptgt lt/headgt ltbodygt ltscript
  type"text/javascript"gt some statements lt/scriptgt
  lt/bodygt

7
Defining a Script (example)

• Put a JavaScript Into an HTML Page
• lthtmlgt ltbodygt ltscript type"text/javascript"gt
  document.write("Hello World!") lt/scriptgt lt/bodygt
  lt/htmlgt
• The code above will produce this output on an
  HTML page
• Hello World!
• Explanation
• ltscript type"text/javascript"gt Use the ltscriptgt
  tag. Use the type attribute to define the
  scripting language
• document.write("Hello World!") The JavaScript
  command for writing some output to a page is
  document.write
• lt/scriptgt ltscriptgt tag has to be closed.

Sourcehttp//www.w3schools.com/js/js_whereto.asp
8
Define variables

• Variables
• A variable is a "container" for information you
  want to store. A variable's value can change
  during the script. You can refer to a variable by
  name to see its value or to change its value.
• Rules for Variable names
• Variable names are case sensitive
• They must begin with a letter or the underscore
  character

9
Declare a Variable

• Create a variable with the var statement
• Ex var strname some value
• Create a variable w/o the var statement
• Ex strname some value
• Assign a Value to a Variable
• var strname "Hege" OR strname "Hege"

10
Types

• Numeric
• String
• Boolean
• Array
• Object
• Type is assigned at run time
• var item // item is undefined
• item 10 // item is now an integer
• item 'ten' // item is now a string

11
Lifetime of Variables

• Local variables A variable within a function,
  which can only be accessed within that function.
  When you exit the function, the variable is
  destroyed. Local variables can have the same name
  in different functions, because each is
  recognized only by the function in which it is
  declared.
• Global variables A variable outside a function,
  where all the functions on your page can access
  it. The lifetime of these variables starts when
  they are declared, and ends when the page is
  closed.

12
JavaScript Operators

• Arithmetic Operators
• Ex Addition? ? x2, x2 ? Result 4
• Subtraction (-), Multiplication (), Division
  (/), Modulus (),
• Increment (), Decrement (--)
• Assignment Operators
• Ex ? xy ? same as xxy
• Comparison Operators
• Ex equal to ? ? 58 returns false
• Logical Operators
• Ex and ? ? x6, y3, (xlt10 y gt 1)
  returns true

13
JavaScript Operators (Cont.)

• String Operator
• A string is most often text, for example "Hello
  World!". To stick two or more string variables
  together, use the operator.
• Ex txt1"What a very, txt2"nice day!"
  txt3txt1txt2 The variable txt3 now contains
  "What a very nice day!".

Source http//www.w3schools.com/js/js_operators.a
sp
14
JavaScript Functions

• Function
• A function contains some code that will be
  executed by an event or a call to that function.
• A function is a set of statements, it can be
  reused within the same script, or in other
  documents.
• Define functions at the beginning of a file (in
  the head section), and call them later in the
  document.

15
How to Define a Function

• Define its name, any values ("arguments"), and
  statements
• function myfunction(argument1,argument2,etc)
  some statements
• A function with no arguments must include the
  parentheses
• function myfunction() some statements
• Some functions return a value to the calling
  expression
• function result(a,b) cab return c

16
How to Call a Function

• A function is not executed before it is called.
• Call a function containing arguments
• myfunction(argument1,argument2,etc)
• Call a function without arguments
• myfunction()
• The return Statement
• Functions that will return a result must use the
  "return" statement.
• Ex function total(a,b) resultab return
  result

17
Conditional Statements

• JavaScript we have three conditional statements
• if statement - use this statement if you want to
  execute a set of code when a condition is true
• if...else statement - use this statement if you
  want to select one of two sets of lines to
  execute
• switch statement - use this statement if you want
  to select one of many sets of lines to execute

18
If and If...else Statement

• Use the if statement if you want to execute some
  code if a condition is true.
• Syntax
• if (condition) code to be executed if condition
  is true
• Example
• ltscript type"text/javascript"gt //If the time on
  your browser is less than 10, //you will get a
  "Good morning" greeting.var dnew Date() var
  timed.getHours() if (timelt10)
  document.write("ltbgtGood morninglt/bgt") lt/scriptgt
  
• Here, it tells the code to execute some code if
  the condition is true.

19
If and If...else Statement (cont.)

• If a condition is true and another code if a
  condition is false, use the if....else statement.
• Syntax
• if (condition) code to be executed if condition
  is true else code to be executed if condition
  is false
• Example
• ltscript type"text/javascript"gt //If the time on
  your browser is less than 10, //you will get a
  "Good morning" greeting. //Otherwise you will
  get a "Good day" greeting.var d new Date() var
  time d.getHours() if (time lt 10)
  document.write("Good morning!") else
  document.write("Good day!") lt/scriptgt

20
Switch Statement

• Use the Switch statement if you want to select
  one of many blocks of code to be executed.
• Syntax
• switch (expression) case label1 code to be
  executed if expression label1 break case
  label2 code to be executed if expression
  label2 break default code to be executed if
  expression is different from both label1 and
  label2
• Exampleltscript type"text/javascript"gt //You
  will receive a different greeting based //on what
  day it is. Note that Sunday0, //Monday1,
  Tuesday2, etc.var dnew Date() theDayd.getDay()
  switch (theDay) case 5 document.write("Finally
  Friday") break case 6 document.write("Super
  Saturday") break case 0 document.write("Sleepy
  Sunday") break default document.write("I'm
  looking forward to this weekend!") lt/scriptgt

21
Conditional Operator

• A conditional operator is assigned a value to a
  variable based on some condition.
• Syntax variablename(condition)?value1value2 
• Example greeting(visitor"PRES")?"Dear
  President ""Dear " If the variable visitor is
  equal to PRES, then put the string "Dear
  President " in the variable named greeting. If
  the variable visitor is not equal to PRES, then
  put the string "Dear " into the variable named
  greeting.

22
Looping

• In JavaScript we have the following looping
  statements
• while - loops through a block of code while a
  condition is true
• do...while - loops through a block of code once,
  and then repeats the loop while a condition is
  true
• for - run statements a specified number of times

23
Looping (cont.)

• While
• Syntax while (condition) code to be executed
  
• do...while
• Syntax do code to be executed while
  (condition)
• For
• Syntax for (initialization condition
  increment) code to be executed

24
JavaScript Guidelines

• JavaScript is Case Sensitive
• Symbols Open symbols, like  ( " ', must have
  a matching closing symbol, like  ' " ).
• White Space JavaScript ignores extra spaces. You
  can add white space to your script to make it
  more readable.
• Ex name"Hege" is same as name "Hege"
• Break up a Code Line You can break up a code
  line within a text string with a backslash.
• Ex document.write("Hello \ World!")

25
JavaScript Guidelines (cont.)

• Insert Special Characters insert special
  characters (like " ' ) with the backslash
• Ex document.write ("You \ I sing \"Happy
  Birthday\".")
• Result of Ex You I sing "Happy Birthday".
•   Comments add a comment to your JavaScript code
  starting the comment with two slashes "//
• Ex suma b //calculating the sum
• Add a comment to the JavaScript code, starting
  the comment with "/" and ending it with "/"
• Ex suma b /calculating the sum/

26
The Browser Object Model
27
The Window Object

• The window object represents the browser window
  the document is being displayed in.
• E.g window.alert(Hello!)
• window.confirm
• Window.prompt

28
The document object

• Elements include
• images
• forms
• elements
• links
• Can also refer to elements by name. E.g.
• document.myform.firstname