1、Introducing JavaScript,Goals,By the end of this lecture you should Understand the purpose of JavaScript. Understand the basic rules governing JavaScript syntax. Understand how we can link our JavaScript applications to web pages.,Goals (continued),Understand how events are central to JavaScript prog

2、ramming. Understand how we can use built-in event handlers to detect events and program to those events.,What is JavaScript?,JavaScript is a client-side language. JavaScript code executes within the confines of a web page. JavaScript syntax is similar to C and Java (but, JavaScript is NOT Java!). Ja

3、vaScript deals with objects.,Review: What is an Object?,An object is a unique programming entity that has attributes to describe it (like adjectives in grammar) and methods to retrieve/set attribute values (like verbs in grammar).,Common JavaScript Objects,A web browsers window A string of character

4、s An integer number Text in a web page A menu in a web page An image A path to an image saved in memory,JavaScript Syntax,Spaces do not matter to the JavaScript interpreter. Executable lines of JavaScript code end with a semi-colon:window.alert(Hi There!);,JavaScript Syntax,Programming structures be

5、gin and end with a curly brace:if(strUserName = JOE) /Executable lines /go here/End If,A Note on Spacing & Indention,Use lots of white space to clarify your programming structures. Use indention to differentiate between a structures header and its body (executable block).,JavaScript Comments,Single

6、line comments begin with 2 forward slashes:/This is a comment./These lines are also/single line/comments.,JavaScript Comments,You can also create comments to span multiple lines by beginning with /* and ending with */: /* This is a comment * that spans multiple * lines. */,Linking JavaScript to HTML

7、,We can develop a JavaScript application directly inside a web page using a container. We can also develop our application in an external document and then link it by using the src attribute.,More on the Tag,Normally, we nest inside the container. The tag has several attributes that give the browser

8、 important information about your application. Two important attributes are type and language.,The type Attribute,The type attribute defines the MIME type for your program. Well always use the MIME value of text/javascript: ,The language Attribute,The language attribute defines the version of JavaSc

9、ript in which you code. Well always use the MIME value of JavaScript 2.1: ,Take the next few minutes to examine the file called introToJavaScript_01.html.,The src Attribute,We can link external JavaScript applications using the src attribute: ,Take the next few minutes to examine the file called int

10、roToJavaScript_02.html.,Detecting a Web Page Event,We write our scripts so they execute by reacting to events within a web browser. Since events are at the heart of JavaScript programming, we need a way to detect events. We do that by using built-in event handlers ,JavaScript Event Handlers,onAbort

11、onBlur onChange onClick onError onFocus,onLoad onMouseOut onMouseOver onSelect onSubmit onUnload,Reference: JavaScript Event Handlers,Take the next few minutes to examine the file called introToJavaScript_03.html.,The main Module (Function),Most programs have a central point through which all operat

12、ions process. Traditionally, programmers name this module (function) main. We can tell main to execute when a page loads by using the onLoad event handler ,The onLoad Event Handler,The onLoad event handler detects a special event that of a web page loading in a web browser. We use onLoad to connect our JavaScript applications as an attribute of the tag.,Take the next few minutes to re-visit the file introToJavaScript_01.html.See if you can find the event handler ,Summary,JavaScript is a client-side l