1 / 25

Introducing JavaScript

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).

dannyy
Download Presentation

Introducing JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introducing JavaScript

  2. 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.

  3. Goals (continued) • Understand how events are central to JavaScript programming. • Understand how we can use built-in event handlers to detect events and program to those events.

  4. 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!). • JavaScript deals with objects.

  5. 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).

  6. Common JavaScript Objects • A web browser’s window • A string of characters • An integer number • Text in a web page • A menu in a web page • An image • A path to an image saved in memory

  7. JavaScript Syntax • Spaces do not matter to the JavaScript interpreter. • Executable lines of JavaScript code end with a semi-colon:window.alert("Hi There!");

  8. JavaScript Syntax • Programming structures begin and end with a curly brace:if(strUserName == "JOE"){//Executable lines //go here}//End If

  9. A Note on Spacing & Indention • Use lots of white space to clarify your programming structures. • Use indention to differentiate between a structure's header and its body (executable block).

  10. JavaScript Comments • Single line comments begin with 2 forward slashes://This is a comment.//These lines are also//single line//comments.

  11. 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. */

  12. Linking JavaScript to HTML • We can develop a JavaScript application directly inside a web page using a <script> … </script> container. • We can also develop our application in an external document and then link it by using the src attribute.

  13. More on the <script> Tag • Normally, we nest <script> inside the <head>…</head> container. • The <script> tag has several attributes that give the browser important information about your application. Two important attributes are type and language.

  14. The type Attribute • The type attribute defines the MIME type for your program. We'll always use the MIME value of text/javascript: <script type="text/javascript">

  15. The language Attribute • The language attribute defines the version of JavaScript in which you code. We'll always use the MIME value of JavaScript 2.1: <script type="text/javascript" language="JavaScript 2.1">

  16. Take the next few minutes to examine the file called introToJavaScript_01.html.

  17. The src Attribute • We can link external JavaScript applications using the src attribute: <script type="text/javascript" language="JavaScript 2.1" src="scripts/hiThere.js">

  18. Take the next few minutes to examine the file called introToJavaScript_02.html.

  19. 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 …

  20. onAbort onBlur onChange onClick onError onFocus onLoad onMouseOut onMouseOver onSelect onSubmit onUnload JavaScript Event Handlers Reference: JavaScript Event Handlershttp://www.intranetjournal.com/corner/hoque/eh-1.shtml

  21. Take the next few minutes to examine the file called introToJavaScript_03.html.

  22. The main Module (Function) • Most programs have a central point through which all operations process. Traditionally, programmers name this module (function) main. • We can tell main to execute when a page loads by using the onLoad event handler …

  23. 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 <body> tag.

  24. Take the next few minutes to re-visit the file introToJavaScript_01.html.See if you can find the event handler …

  25. Summary • JavaScript is a client-side language that executes within in a web page. • One of the central ideas in JavaScript is writing code that deals with objects. • We detect events via event handlers, writing code to react to those events.

More Related