JavaScript

1
JavaScript
2
Introduction

• JavaScript is an interpreted programming
  language. Its interpreter is embedded inside the
  web browser software.
• This means the script contained in the web
  documents can be read by the browsers JavaScript
  engine whenever the document is loaded into the
  browser window.
• With this, Web documents can be made to respond
  to user action and perform dynamic visual effects.

3
Introduction

• Do not confuse JavaScript with the programming
  language Java.
• Though the bear some resemblance, they are two
  completely separate languages.
• JavaScript appeared in December 1995 and was
  initially called LiveScript. The name was
  changed for marketing reasons.
• For security reasons JavaScript cannot read or
  write files. Exception cookie files.

4
Introduction

• We are going to concern ourselves with the core
  and client-side features of JavaScript. These
  features are the most useful in the creation of
  interactive Web Pages.
• Topic 1 learn the basics. The mechanics of the
  language. Syntax etc.
• Topic 2 learn about the Document Object Model
  (DOM) JavaScript DOM CSS DHTML or Dynamic
  Html

5
Topic 1 the Basics

• In Order to include JavaScript in a Web Document
  a script block can be defined within the html
  code.
• It can be defined anywhere, but the usual place
  is inside the head section of the html file.
• When a browser loads a document it reads (parses)
  the code in sequential order. Placing the script
  block in the head of the document ensures the
  code is read before the rest of the html code.

6
The basics

• In addition, the JavaScript code may be placed in
  a separate file.
• This file should be saved with the .js file
  extenstion and must contain no html tags.
• In order to use the script in your html file, you
  must make a reference to it similar to an
  external style sheet.
• The reference is placed inside the head tags of
  the html file.

7
The basics

• An external JavaScript file is the preferred
  method because it is easier to maintain, avoids
  conflict between JavaScript and XML, and allows
  the code to be accessed by several html documents

8
Syntax Rules

• JavaScript Statement - a single complete
  JavaScript instruction. A semi-colon is always
  at the end of a JavaScript statement.
• This is similar to the way the period is used to
  terminate a sentence in the English language
  syntax rules.
• Important! JavaScript is a case-sensitive
  language. For example ALERT, Alert, and
  alert are considered 3 different words.

9
Syntax Rules

• Keywords JavaScript keywords are always in
  lowercase. Keywords are part of the Syntax and
  cannot be used when creating your own identifier
  names for variables, functions or labels.
• I made a table of these reserved words.

10
Syntax Rules

• Whitespace spaces, tabs, and newlines. These
  are completely ignored by JavaScript. This
  allows you to format and indent your code for
  better readability.
• You can add comments to your JavaScript code by
  using / .. / for multi-line comments and or //
  for single line comments.

11
Variables

• A variable is a place in which to store data for
  manipulation in a JavaScript program.
• Naming a variable you may use letter, digits,
  and the underscore character _. The variable name
  may not begin with a digit.
• Valid variable names
• abc
• my_variable
• var123

12
Variables

• To create a variable you need to use the var
  keyword.
• Example var message
• Data types JavaScript is a loosely typed
  language. This means its variables can store
  multiple data types.
• Data types are numbers, text strings, boolean
  values (true, false)

13
Variables

• This is different from other programming
  languages such as C and Java as you need to
  declare the specific data type of each variables
  and then can only store data of that type.

14
Variables

• You can initialize your variables by using the
  operator. The operator is also known as the
  assignment operator as you are assigning a value
  to a variable.
• Example
• var abc 0.06
• var my_var JavaScript

15
Variables

• If you want to change the value of a given
  variable you will need to reassign it with the
  new value.
• Example
• var abc 0.06
• abc 10

16
Functions

• A function is a piece of JavaScript code that can
  be executed as many times as you want.
• Functions and variables form the basis of all
  JavaScripts.
• Example the function alert() is a predefined
  function in JavaScript that causes a dialog box
  to pop up.

17
Functions

• Another Example Here is a function that adds to
  numbers.
• function addNumbers()
• var num1 10
• var num2 10
• var result num1 num2

18
Function Arguments

• You can pass or give data to your function
  through function arguments. These arguments are
  placed inside the brackets after the function
  name.
• Example
• function addNumbers(var num1, var num2)
• var result num1 num2

19
Return Values

• A function can also return a value once its has
  completed its block of code.
• Example
• function addNumbers(var num1, var num2)
• var result num1 num2
• return result

20
Call a Function

• The previous slides show how to create a
  function. This only means that we defined its
  behavior. We have not actually used it.
• To used a defined function you must call it. Do
  this by using its name in a code statement.

21
Call a Function

• Examples
• addNumbers() /function with no arguments and
  no return value /
• addNumbers(10, 10) / function with 2
  arguments and no return value /
• var sum addNumbers(10, 10) / function with
  2 arguments and a return value

22
Variable Scope

• You can consider JavaScript to have only 2 types
  of scope global and local.
• Scope defines the life of the variable. It
  determines where it exists and when it can be
  used.
• A variable is said to have local scope if it is
  defined inside a function. These variables can
  only be used inside that function.

23
Variable Scope

• A variable has a global scope if it is defined
  within the script and outside any functions.
  These variable can be used anywhere.
• Problems can arise concerning scope. If you have
  a global variable with the name my_var you
  cannot define another variable in a function by
  the same name.
• However, multiple functions can define a variable
  using the same name since these variables are
  created locally.

24
Variable Scope

• One more not on scope. It is possible to have
  more than one reference to JavaScript Code.
  Problems related to variables and variable scope
  if these separate code files are trying to
  declare the same global variable names or one
  piece of code is trying to declare a local
  variable that exists as a global variable in the
  other code file. Be aware of this if you are
  referencing 2 or more files in your html document
  that normally work fine by themselves.