ICT 8 JAVASCRIPT

• JavaScript

  >scripting language

  >allows interactivity & functionality

  >contents of web page becomes dynamic and more enhanced

  >JavaScript and Java are different but both are influenced by C language
• Terms:

  Client-side

  >where codes and formulas are processed right on the users computer.

  High-level scripting

  >codes are written in words

  Interpreted

  >program is passed as source code then converted to machine code
• Object

  >refers to a person, place or thing
• Properties

  >attributes and descriptions

  > objectname.property=value
• Methods

  >actions that an object can perform

  >writing objectname.method(parameters)
• Parameters

  >values or instructions
• Note:

  • JS is case-sensitive
  • Semi-colons at the end are not required however it may help with readability and standardize your codes.
  • Missing and unbalanced quotation marks cause browser trouble in loading and displaying properly
• Abilities of JavaScript:

  • Can react to events
  • Validate data
  • Create cookies

  -Used to save or retrieve stored data

  • Enhance web page
• Features:

  • Supports all structure programming syntax in C language
  • Dynamic typing
  • Run locally in a web site so interactions with user are more and faster
  • detects user actions
  • Combined with CSS to produce DTHML
• Disadvantages:

  • Some browsers does not support JavaScript
  • Authors cannot perfectly conceal how their JS operates, because code is sent to client
  • Code maybe exposed to possible threats
• DOM - Document Object Model
• How to start JS:

  • <script type="text/JavaScript">
  • <script></script>
  • Use the "type" attribute to define scripting language; only optional
  • document.write

  >used when you want to display an output

  >ex: document.write ("Hi");
• document.write ("Hi")

  document-object name

  write-method

  "Hi" - parameter
• Commonly used properties and methods

  Window

  >main object

  >no need to write object name

  Sample methods:

  • location -new location
  • open -open new window
  • setTimeout -set a time interval

  Document

  >derived from window object

  >container for all HTML, Head and body

  >need to write object name to use these methods

  Sample:

  • fgColor -foreground color
  • Cookie - read info stored in cookie file
  • Write - display a message
  • lastModified - display the date it was last modified
• Commonly used properties and methods:

  Math

  >provides capability to perform math operations

  >write object name

  Sample:

  • PI- value of PI
  • pow(a, b)- takes the value of a to the power of b
  • mx(a, b)- larger value between a and be
  • min(a, b)- smaller value between a and b

  Navigator

  > determines which browser is running

  >write object name

  Sample:

  • appName- browsers code name
  • appversion-browsers release version
  • cookieEnabled- whether cookies are enabled or not
  • Platform-description of operating system
• Syntax for creating an event

  <tag attribute eventHandler="function/JavaScript code">

  Event - result of user action

  Event handlers - way to connect action to a function
• head

  >script placed here will be executed before anyone triggers an event

  >for function calls

  body

  >scripts placed here are executed when the page loads

  Head and body

  > can place script tgas wherever and how many you want
• External JavaScipt

  <script type=“text/JavaScript”src=“myEvents.js”></script>

  • Are very helpful especially if you are using them to control different HTML

  files.

  • There is no need to rewrite them all over again.
  • Save the file with file extension .js
  • To use the JavaScript file, all you have to do is use the src attribute and provide the destination of the file.

  The src attribute will point to the source of the JavaScript external file.
• JavaScript Guidelines

  • Case Sensitive

  -careful in naming variables

  -Uppercase letters are not equivalent to lowercase letters

  • White Space

  -JS ignores white spaces as long as it is the line of code

  -use to make your code easier to read

  • Breaking up of code lines

  -use the backslash ("\")

  -do not break code between commands

  ex: document.write ("wow\

  Philippines"); - correct

  document.\write("wow

  Philippines"); - incorrect