transcript
- Slide 1
- XP 1 JavaScript Source from multiple external sources from the
Internet over the years Please PM me to claim credit if needed
Known Arthur: John Mitchell (2008), Tom Horton, Alfred C Weaver,
Richard Sinn
- Slide 2
- XP JavaScript History Developed by Brendan Eich at Netscape
Scripting language for Navigator 2 Later standardized for browser
compatibility ECMAScript Edition 3 (aka JavaScript 1.5) Related to
Java in name only Name was part of a marketing deal Various
implementations available Spidermonkey interactive shell interface
Rhino: http://www.mozilla.org/rhino/
- Slide 3
- XP 3 HTML Background Many markup languages in the past SGML:
Standard Generalized Markup Language HTML (Hypertext Markup
Language) based on SGML XML (eXtensible Markup Language) replaces
SGML XHTML is replacing HTML
- Slide 4
- XP 4 Principles Distinguish structure from presentation
Presentation based on structure Presentation may vary, perhaps
based on display characteristics, user-preference, etc. People like
to ignore this idea E.g. use vs. tag? XML and CSS or XSL
- Slide 5
- XP 5
- Slide 6
- 6 Tags and Elements Example of an element: content Begin and
end tags set off a section of a document Has a semantic property by
tag-name Modified by attributes content can contain other elements
Elements nest, dont overlap Empty-elements: no end tag Note space
before />
- Slide 7
- XP 7 Basic HTML Structure Comments: Example: . My Page
JavaScript written inside HTML An Event" title="XP JavaScript
Statements My Page My Page My Page JavaScript written inside HTML
An Event">
- XP JavaScript Statements My Page My Page My Page JavaScript
written inside HTML An Event
- Slide 18
- XP Example Statements window.prompt('Enter your name:','');
Another event Note quotes: " and '
- Slide 19
- XP HTML Forms and JavaScript JavaScript is very good at
processing user input in the web browser HTML elements receive
input Forms and form elements have unique names Each unique element
can be identified Uses JavaScript Document Object Model (DOM)
- Slide 20
- XP Naming Form Elements in HTML Name: Phone: Email:
- Slide 21
- XP Forms and JavaScript document.formname.elementname.value
Thus: document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
- Slide 22
- XP Using Form Data Personalising an alert box Enter your
name:
- Slide 23
- XP 30 Characteristics " and ' can be used in pairs Scope rules
for variables Strings are very common data types Rich set of
methods available Arrays have dynamic length Array elements have
dynamic type Arrays are passed by reference Array elements are
passed by value
- Slide 31
- XP Motivation for JavaScript Netscape, 1995 Netscape > 90%
browser market share Opportunity to do HTML scripting language
Brendan Eich I hacked the JS prototype in ~1 week in May And it
showed! Mistakes were frozen early Rest of year spent embedding in
browser Common uses of JavaScript include: Form validation Page
embellishments and special effects Dynamic content manipulation
Emerging Web 2.0: client functionality implemented at client - ICFP
talk, 2006
- Slide 32
- XP Example 1: simple calculation var num1, num2, sum num1 =
prompt("Enter first number") num2 = prompt("Enter second number")
sum = parseInt(num1) + parseInt(num2) alert("Sum = " + sum)
- Slide 33
- XP Example 2: browser events function whichButton(event) { if
(event.button==1) { alert("You clicked the left mouse button!") }
else { alert("You clicked the right mouse button!") }} Mouse event
causes page-defined function to be called Other events: onLoad,
onMouseMove, onKeyPress, onUnLoad
- Slide 34
- XP Example 3: page manipulation Some possibilities
createElement(elementName) createTextNode(text)
appendChild(newChild) removeChild(node) Example: Add a new list
item: var list = document.getElementById(list1') var newitem =
document.createElement('li') var newtext =
document.createTextNode(text) list.appendChild(newitem)
newitem.appendChild(newtext) This example uses the browser Document
Object Model (DOM). For now, we will focus on JavaScript as a
language, not its use in the browser.
- Slide 35
- XP Design goals Brendan Eichs 2006 ICFP talk Make it easy to
copy/paste snippets of code Tolerate minor errors (missing
semicolons) Simplified onclick, onmousedown, etc., event handling,
inspired by HyperCard Pick a few hard-working, powerful primitives
First class functions for procedural abstraction Objects
everywhere, prototype-based Leave all else out!
- Slide 36
- XP Language basics JavaScript is case sensitive HTML is not
case sensitive; onClick, ONCLICK, are HTML Statements terminated by
returns or semi-colons (;) x = x+1; same as x = x+1 Semi-colons can
be a good idea, to reduce errors Blocks Group statements using { }
Not a separate scope, unlike other languages (see later slide)
Variables Define a variable using the var statement Define
implicitly by its first use, which must be an assignment Implicit
definition has global scope, even if it occurs in nested
scope?
- Slide 37
- XP 37 Tutorial Objectives Understand basic JavaScript syntax
Create an embedded and external script Work with variables and data
Work with data objects and extract values from dates Work with
expressions and operators Create and call a JavaScript function
Work with arrays and conditional statements Learn about program
loops
- Slide 38
- XP 38 Server-Side Programs a user must be connected to the Web
server to run the server-side script only the programmer can create
or alter the script the system administrator has to be concerned
about users continually accessing the server and potentially
overloading the system
- Slide 39
- XP 39 Client-Side Programs solve many of the problems
associated with server-side scripts can be tested locally without
first uploading it to a Web server are likely to be more responsive
to the user can never completely replace server-side scripts
- Slide 40
- XP 40 Introduction to JavaScript JavaScript is an interpreted
programming or script language from Netscape. JavaScript is used in
Web site development to such things as: 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
- Slide 41
- XP 41 Java vs. JavaScript Requires the JDK to create the applet
Requires a Java virtual machine to run the applet Applet files are
distinct from the XHTML code Source code is hidden from the user
Programs must be saved as separate files and compiled before they
can be run Programs run on the server side Requires a text editor
Required a browser that can interpret JavaScript code JavaScript
can be placed within HTML and XHTML Source code is made accessible
to the user Programs cannot write content to the hard disk Programs
run on the client side
- Slide 42
- XP 42 ECMAScript The responsibility for the development of a
scripting standard has been transferred to an international body
called the European Computer Manufacturers Association (ECMA). The
standard developed by the ECMA is called ECMAScript, though
browsers still refer to it as JavaScript. The latest version is
ECMA-262, which is supported by the major browsers.
- Slide 43
- XP 43 Other Client-side Languages Internet Explorer supports
JScript. JScript is identical to JavaScript, but there are some
JavaScript commands not supported in JScript, and vice versa. Other
client-side programming languages are also available to Web page
designers, such as the Internet Explorer scripting language,
VBScript.
- Slide 44
- XP 44 Example of Web Site using JavaScript
- Slide 45
- XP 45 Writing a JavaScript Program The Web browser runs a
JavaScript program when the Web page is first loaded, or in
response to an event. JavaScript programs can either be placed
directly into the HTML file or they can be saved in external files.
placing a program in an external file allows you to hide the
program code from the user source code placed directly in the HTML
file can be viewed by anyone
- Slide 46
- XP 46 Writing a JavaScript Program A JavaScript program can be
placed anywhere within the HTML file. Many programmers favor
placing their programs between tags in order to separate the
programming code from the Web page content and layout. Some
programmers prefer placing programs within the body of the Web page
at the location where the program output is generated and
displayed.
- Slide 47
- XP 47 Using the Tag To embed a client-side script in a Web
page, use the element: script commands and comments To access an
external script, use: script commands and comments
- Slide 48
- XP 48 Comments The syntax for a single-line comment is: //
comment text The syntax of a multi-line comment is: /* comment text
covering several lines */
- Slide 49