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