Introduction to JavaScript

1
Introduction to JavaScript

• So far we used HTML and CSS to produce static Web
  pages. In this section we will learn to create
  Web pages whose content and layout can be
  modified using built-in programs. These programs
  are written in JavaScript.

2
What is JavaScript?

• JavaScript is a scripting language which allows
  us to add interest and interactivity to our Web
  pages.
• JavaScript is embedded in the HTML codes.
• JavaScript is interpreted (evaluated line by line
  as it is run).
• JavaScript is a client-side scripting language,
  that is, it runs on the client machine.
• JavaScript is half of DHTML (dynamic HTML). The
  other half is CSS.

3
Java and JavaScript

• JavaScript and Java are two different things.
  JavaScript has vaguely similar syntax to Java.
• Java is a full-featured programming language
  developed by Sun Microsystems. Applet is used in
  Web pages and is created by Java. The Browser
  has a built-in Java interpreter to run the Applet
  and display its content on a Web page.

4
JavaScript, Java and JScript

• JavaScript was developed by Netscape and was
  originally called LiveScript.
• JavaScript and JScript are also different.
  JScript is the Microsoft equivalent of
  JavaScript. They are almost identical but it is
  important to know the differences.
• Some JavaScript commands are not supported in
  JScript and vice versa.

5
Using the ltSCRIPTgt Tag

• To insert a client-side program (JavaScript) into
  a HTML file, we use,
• ltSCRIPT SRCURL LANGUAGElanguagegt
• Script commands and comments
• lt/SCRIPTgt
• where the URL is the file containing the
  programming commands, and languageJavaScript.
  This is also the default language.
• We can place the script either within the ltHEADgt
  tags or the ltBODYgt tags.

6
Hiding the Script from Older Browsers

• Older Browsers do not support JavaScript. They
  will treat the script as part of the pages
  content.
• We can hide the script from these Browsers as
  follow,
• ltSCRIPT LANGUAGEJavaScriptgt
• lt!--Hide this script from Browsers that dont
  support JavaScript
• JavaScript commands
• // stop hiding from other browsers --gt
• lt/SCRIPTgt
• Note that the // is single line comment. Use /
  to start and / to end multi-line comments (as in
  C).

7
Sending Output to a Web Page

• To display text on our Web page, we use,
• document.write(text) or document.writeln(te
  xt)
• where text is the text and any HTML tags that we
  want to send to our Web page. The latter command
  attaches a carriage return to the text.
• For example,
• script1.html

8
Variables and Data

• A variable is a named element in a program, used
  to store and retrieve information. Variable
  names are case-sensitive.
• 4 types of variables numeric (numbers), string
  (characters), Boolean (either true or false), and
  null (has no value).
• Restrictions on variable names are
• - first character must be either letters,
  numbers or an underscore(_).
• - the rest of the characters can be letters,
  numbers, or underscores.
• - cannot have spaces.
• - cannot use reserved words, such as
  document.write.

9
Declaring a Variable

• A variable need to be declared before it can be
  used. The syntax is,
• var variable
• var variablevalue
• variablevalue
• where variable is the name of the variable, and
  value is the initial value of the variable. The
  first command creates the variable without
  assigning it value. The second and third
  commands both create the variable and assign it a
  value.

10
Variables Date and Time

• To create a date and time variable, we use,
• variable new Date(month, day, year,
  hoursminutesseconds) OR
• variable new Date(year, month, day, hours,
  minutes, seconds)
• For example, DateVariable new Date (April, 4,
  201, 166000)
• To return the current date and time, we use,
• variable new Date()

11
Retrieving Date and Time Values

• To retrieve the year, we use,
• yearDateVariable.getYear()
• To retieve the month, we use,
• monthDatevariable.getmonth()
• To retrieve the day of the week, we use,
• DayofWeekDatevariable.getDay()

12
Date Methods

• Note that the method,
• getFullYear()
• is used when we want to calculate a difference
  in dates before and after the year 2000.

13
Arithmetic Operators

• Binary operators work on two elements in an
  expression, such as and -.
• Unary operators work on only one element, such as
  and --.

14
Assignment Operators

• Assignment operators assign a value to an
  element, such as , and .
• For examples,
• xx2
• x 2
• in both expressions, the value of x has been
  increased by 2.

15
Math Object and Math Methods

• There are also built-in Math methods to carry out
  calculations. These methods are know as Math
  Object. The syntax is,
• valueMath.method(variable)

16
Functions

• A function is a series of of commands that either
  performs an action or calculate a value. To
  create a function we use,
• function function_name(parameters)
• JavaScript commands
• where function_name is the name of the function,
  and parameters are the parameters of the
  function.
• To run (or call) a function, we use,
• function_name (values)
• where values are the values substituted for each
  of the function parameters.

17
Performing an Action with a Function

• For a given function,
• function ShowDate(date)
• document.write(Today is date ltBRgt)
• To call the function ShowDate, we write,
• var Today 25/3/2001
• ShowDate(Today)
• The output is,
• Today is 25/3/2001.

18
Returning a Value from a Function

• A function can calculate a value then return this
  value where it was called by using a return
  command.
• Example, for a given function,
• function Area (Width, Length)
• var SizeWidthLength
• return Size
• To use this function, we use,
• var x8
• var y6
• var zArea(x,y)
• The result (z) is 48.
• For example, calculate the number of days till
  Christmas day from a current year. XmasDays.html

19
Comparison Operators

• A comparison operator compares the value of one
  element with that of another, creating a Boolean
  expression that is either true or false.
• For examples,
• x lt 100
• y 20

20
Logical operators

• A logical operator connects two or more Boolean
  expressions.
• For example,
• (x lt 100) lt(y 20)

21
Conditional Statements

• A conditional statement is one that runs only
  under certain conditions.
• To create a command block that runs if a certain
  condition is met, we use,
• If (condition)
• JavaScript commands
• To choose between two command blocks (nested If
  statement), we use,
• if (condition)
• JavaScript commands if true
• else
• JavaScript commands if false

22
If Else Statement An example

• Here is an example of a nested If Else
  structure.
• if (you are notStudent)
• document.write (You are not a student!)
• else
• if (you are ITstudent)
• document.write(You are an Internet
  Technology student.)
• else
• document.write (You are student of other
  subjects.)

23
Arrays

• An array is an ordered collection of values
  referenced by a single variable name.
• To create an array, we use,
• var variable new Array()
• where variable is the name of the array
  variable.
• To populate the array with values, we use,
• variableivalue
• where i is the ith element of the array, and the
  value is the value of the ith element.
• The first value of i (the index) is always has
  the value 0.

24
Changing the Format of Date

• To change the date format from, for example,
• 15/10/2001 to 15 October 2001, we can use 12
  nested if statements.
• A better way to do this would be to use array in
  a function. For example, the MonthTxt function
  shown below.

25
Using the MonthTxt function

• The MonthTxt function returns the name of the
  month.
• To remove the fixed date and replace it with the
  current date, we use,
• var Todaynew Date()

26
The For Loops

• The For Loop allows us to create a group of
  commands that will be executed a set number of
  times through the use of a counter, which tracks
  the number of times the command block has been
  run. The syntax is,
• for(start condition update)
• JavaScript commands
• where start is the starting value, condition is
  the Boolean expression, and update defines how
  the counter changes.

27
For Loop Example

• For example, forLoop.html
• for (count0 countlt10 count)
• document.writeln(count "ltBRgt")
• First count is set to zero (initialisation).
  This is done once only.
• The contents of the loop (between and ) are
  then executed.
• At the end of the loop, we increment the counter
  with count
• We then do the contents of the loop again (and
  again and again).
• At the start of each loop, we test the condition
  (countlt10). When it is false, we leave the loop
  and continue with the rest of the program.
• The loop may not execute at all if the test
  condition is not true to begin with.

28
The While Loop

• The While Loop is similar to the For Loop but
  without using the counter. The syntax is,
• while(condition)
• JavaScript commands
• where condition is a Boolean expression that
  stops the loop when its value becomes false.
• The condition is tested at the start of each loop
  (as with the for loop).
• The loop may never be executed.
• For example, whileLoop.html