1 / 93

CS 21A

CS 21A. Beginning JavaScript Programming. Introduction to JavaScript Programming. Sonny Huang. Introduction to JavaScript Programming. Outline l        Describe JavaScript l        Define HTML and explain the use of HTML tags l        Define attribute

cprimus
Download Presentation

CS 21A

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. CS 21A • Beginning JavaScript Programming Introduction to JavaScript Programming Sonny Huang

  2. Introduction to JavaScript Programming Outline l       Describe JavaScript l       Define HTML and explain the use of HTML tags l       Define attribute l       Differentiate between JavaScript and VBScript l       Define JavaScript cookies and variables l       Define string, numeric, and Boolean JavaScript variable types l       Discuss the rules for naming variables l       Differentiate between variables and literals l       Discuss special codes and how they are used in a literal l       Discuss the advantages and disadvantages of using JavaScript l       Define expression and describe the arithmetic operators

  3. Introduction to JavaScript Programming Outline l       Discuss the order of precedence in an expression l       Define concatenation l       Define conditionals and the use of If and While statements l       Discuss the use of JavaScript functions l       Discuss If, If . . . Else, and While statements and loops l       Define objects, properties, methods, and events l       Describe how event handlers and forms are used l       Define frames and arrays

  4. Introduction • Introduction JavaScript • A scripting language developed by Netscape and Sun Microsystems to enable Web authors to design interactive sites. • Although it shares many of the features and structures of the full Java language, it was developed independently. • JavaScript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content.

  5. Introduction • JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license. • It is supported by recent browsers from Netscape and Microsoft, though Internet Explorer supports only a subset, which Microsoft calls Jscript.

  6. Introduction • Using Java Script, you can enhance a Web page by adding items such as: • Scrolling message • Animations and dynamic images • Data input forms • Pop-up windows • Interactive quizzes

  7. Introduction HTML • Short for HyperText Markup Language, the authoring language used to create documents on the World Wide Web. • HTML defines the structure and layout of a Web document by using a variety of tags and attributes. • The correct structure for an HTML document starts with <HTML><HEAD>(enter here what document is about)</HEAD><BODY> and ends with </BODY></HTML>. All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags.

  8. Introduction • There are hundreds of other tags used to format and layout the information in a Web page. • For instance, <P> is used to make paragraphs and <I> … </I>is used to italicize fonts. • Tags are also used to specify hypertext links. These allow Web developers to direct users to other Web pages with only a click of the mouse on either an image or word(s).

  9. Introduction Java • A high-level programming language developed by Sun Microsystems. • Java was originally called OAK, and was designed for handheld devices and set-top boxes. • Oak was unsuccessful so in 1995 Sun changed the name to Java and modified the language to take advantage of the burgeoning World Wide Web. • Java is an object-oriented language similar to C++, but simplified to eliminate language features that cause common programming errors.

  10. Introduction • Java source code files (files with a .java extension) are compiled into a format called bytecode (files with a .class extension), which can then be executed by a Java interpreter. • Compiled Java code can run on most computers because Java interpreters and runtime environments, known as Java Virtual Machines (VMs), exist for most operating systems, including UNIX, the Macintosh OS, and Windows. • Bytecode can also be converted directly into machine language instructions by a just-in-time compiler (JIT).

  11. Introduction • Java is a general purpose programming language with a number of features that make the language well suited for use on the World Wide Web. • Small Java applications are called Java applets and can be downloaded from a Web server and run on your computer by a Java-compatible Web browser, such as Netscape Navigator or Microsoft Internet Explorer.

  12. Introduction • JavaScript compared to JavaJavaScript Java

  13. Introduction C • A high-level programming language developed by Dennis Ritchie at Bell Labs in the mid 1970s. • Although originally designed as a systems programming language, C has proved to be a powerful and flexible language that can be used for a variety of applications, from business programs to engineering. • C is a particularly popular language for personal computer programmers because it is relatively small -- it requires less memory than other languages.

  14. Introduction • The first major program written in C was the UNIX operating system, and for many years C was considered to be inextricably linked with UNIX. Now, however, C is an important language independent of UNIX. • Although it is a high-level language, C is much closer to assembly language than are most other high-level languages. • This closeness to the underlying machine language allows C programmers to write very efficient code. • The low-level nature of C, however, can make the language difficult to use for some types of applications.

  15. Introduction Compiler • A program that translates source code into object code. • The compiler derives its name from the way it works, looking at the entire piece of source code and collecting and reorganizing the instructions. • Compilers require some time before an executable program emerges. However, programs produced by compilers run much faster than the same programs executed by an interpreter. • Every high-level programming language (except strictly interpretive languages) comes with a compiler.

  16. Introduction Interpreter • An interpreter translates high-level instructions into an intermediate form, which it then executes. • In contrast, a compiler translates high-level instructions directly into machine language. • The advantage of an interpreter is that it does not need to go through the compilation stage during which machine instructions are generated. This process can be time-consuming if the program is long.

  17. Introduction • The interpreter can immediately execute high-level programs. For this reason, interpreters are sometimes used during the development of a program, when a programmer wants to add small sections at a time and test them quickly. In addition, interpreters are often used in education because they allow students to program interactively. • Interpreters are available for most high-level languages. However, BASIC and LISP are especially designed to be executed by an interpreter.

  18. Introduction JavaScript • Is similar to the C programming language in appearance and style. • Variable and statements are case sensitive. Most of the statements are using lowercase, but, the event handlers, and many of the objects, properties, and methods use a mixed-case spelling. Some old browsers have problem with mix-case. • Is an interpreted language. There is no executable file exist. • Only run on JavaScript interpreter built into browsers. The version of JavaScript used depends on the version of browser

  19. HTML Tags <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd"> <HTML> <HEAD> <META name="Author" content="Dave Raggett"> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML>

  20. HTML Tags The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. Every HTML document must have a TITLE element in the HEAD section. TITLE element to identify the contents of a document. The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties. Each META element specifies a property/value pair. The name attribute identifies the property and the content attribute specifies the property's value.

  21. HTML Tags The BODY of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. • TEXT for color of the text • BACKGROUND uses .gif as background of the html page • In HTML tags are in pairs

  22. HTML Tags • INPUT tag for a text box in a FORM for data entry. • Type, Name, Value, and Size are all attributes of the INPUT tag. • Type = “text” indicates that a text box is created. • Name = “PhoneNumber” assigns variable(PhoneNumber) or name to the text box. This variable will store a data entered. • Value will store the initial value to the Type which is text box. • Size=17 indicates the size, which is in characters, of the text box.

  23. HTML Tags More about HTML documentation at web http://www.w3.org/TR/REC-html40/

  24. SCRIPT Tags The <SCRIPT> tag is an extension to HTML that can enclose any number of JavaScript statements as shown here and usually placed at the HEAD section of the HTML: <SCRIPT>JavaScript statements...</SCRIPT> A document can have multiple <SCRIPT> tags, and each can enclose any number of JavaScript statements.

  25. SCRIPT Tags Specifying the JavaScript Version As JavaScript evolves along with Navigator, its capabilities expand greatly. This means that JavaScript written for Navigator 4.0 may not work in earlier versions of Navigator. To ensure that users of earlier versions of Navigator avoid problems when viewing pages that use JavaScript 1.2, use the LANGUAGE attribute in the <SCRIPT> tag to indicate which version of JavaScript you're using.

  26. SCRIPT Tags By using the LANGUAGE attribute, you can write general JavaScript that Navigator version 2.0 and higher recognize, and include additional or refined behavior for newer versions of Navigator. Statements within a <SCRIPT> tag are ignored if the browser does not have the level of JavaScript support specified in the LANGUAGE attribute. for example: Navigator 2.0 executes code within the <SCRIPT LANGUAGE="JavaScript"> tag; it ignores code within the <SCRIPT LANGUAGE="JavaScript1.1"> and <SCRIPT LANGUAGE="JavaScript1.2"> tags.

  27. SCRIPT Tags Navigator 3.0 executes code within the <SCRIPT LANGUAGE="JavaScript"> and <SCRIPT LANGUAGE="JavaScript1.1"> tags; it ignores code within the <SCRIPT LANGUAGE="JavaScript1.2"> tag. Navigator 4.0 executes code within the <SCRIPT LANGUAGE="JavaScript">, <SCRIPT LANGUAGE="JavaScript1.1">, and <SCRIPT LANGUAGE="JavaScript1.2"> tags.

  28. SCRIPT Tags This example shows how to define functions three times, once for JavaScript 1.0, once using JavaScript 1.1 features, and a third time using JavaScript 1.2 features. <SCRIPT LANGUAGE="JavaScript">// Define 1.0-compatible functions such as doClick() here</SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1">// Redefine those functions using 1.1 features// Also define 1.1-only functions</SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2">// Redefine those functions using 1.2 features// Also define 1.2-only functions</SCRIPT>

  29. SCRIPT Tags Hiding Scripts within Comment Tags Only Netscape Navigator versions 2.0 and later recognize JavaScript. To ensure that other browsers ignore JavaScript code, place the entire script within HTML comment tags, and precede the ending comment tag with a double-slash (//) that indicates a JavaScript single-line comment:

  30. SCRIPT Tags A simple script Hello, net! That's all, folks. You may sometimes see a semicolon at the end of each line of JavaScript. In general, semicolons are optional and are required only if you want to put more than one statement on a single line.

  31. SCRIPT Tags Specifying a File of JavaScript Code The SRC attribute of the <SCRIPT> tag lets you specify a file as the JavaScript source (rather than embedding the JavaScript in the HTML). For example: <HEAD><TITLE>My Page</TITLE><SCRIPT SRC="common.js">...</SCRIPT></HEAD><BODY> This attribute is especially useful for sharing functions among many different pages.

  32. SCRIPT Tags The closing </SCRIPT> tag is required. JavaScript statements within a <SCRIPT> tag with a SRC attribute are ignored unless the inclusion has an error. For example, you might want to put the following statement between the <SCRIPT SRC="..."> and </SCRIPT> statements: document.write("Included JS file not found");The SRC attribute can specify any URL, relative or absolute. For example: <SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js“ > External JavaScript files cannot contain any HTML tags: they must contain only JavaScript statements and function definitions.

  33. SCRIPT Tags External JavaScript files should have the file name suffix .js, and the server must map the .js suffix to the MIME type application/x-javascript, which the server sends back in the HTTP header. To map the suffix to the MIME type, add the following line to the mime.types file in the server's config directory, and then restart the server. type=application/x-javascriptexts=jsIf the server does not map the .js suffix to the application/x-javascript MIME type, Navigator improperly loads the JavaScript file specified by the SRC attribute. NOTE: This requirement does not apply if you use local files.

  34. VBScript • Short for Visual Basic Scripting Edition • a scripting language developed by Microsoft and supported by Microsoft's Internet Explorer Web browser. • VBScript is based on the Visual Basic programming language, but is much simpler. • In many ways, it is similar to JavaScript. It enables Web authors to include interactive controls, such as buttons and scrollbars, on their Web pages.

  35. Cookies • A message given to a Web browser by a Web server. • The browser stores the message in a text file(Navigator- cookies.txt, IE - Cookies folder). • The message is then sent back to the server each time the browser requests a page from the server. • The main purpose of cookies is to identify users and possibly prepare customized Web pages for them. • When you enter a Web site using cookies, you may be asked to fill out a form providing such information as your name and interests. This information is packaged into a cookie and sent to your Web browser which stores it for later use.

  36. Cookies • The next time you go to the same Web site, your browser will send the cookie to the Web server. The server can use this information to present you with custom Web pages. So, for example, instead of seeing just a generic welcome page you might see a welcome page with your name on it. • The name cookie derives from UNIX objects called magic cookies. These are tokens that are attached to a user or program and change depending on the areas entered by the user or program

  37. Cookies • Each cookie is a small item of information with an optional expiration date and is added to the cookie file in the following format: name=value;expires=expDate; name is the name of the datum being stored, and value is its value. • If name and value contain any semicolon, comma, or blank (space) characters, you must use the escape function to encode them and the unescape function to decode them. • expDate is the expiration date, in GMT date format:

  38. Cookies • The expiration date is an optional parameter indicating how long to maintain the cookie. • If expDate is not specified, the cookie expires when the user exits the current Navigator session. • Navigator maintains and retrieves a cookie only if its expiration date has not yet passed. • JavaScript cookies cannot get data from the user’s hard drive, read e-mail, or steal other sensitive information. • Web sites can limited an access if the cookies info. is blocked.

  39. JavaScript Basic – Variables, Literals, and expressions • You use variables as symbolic names for values in your application. • You give variables names by which you refer to them and which must conform to certain rules. • A JavaScript identifier, or name, must start with a letter or underscore ("_"); • subsequent characters can also be digits (0-9). • Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).

  40. JavaScript Basic – Variables, Literals, and expressions • JavaScript is a loosely typed language. That means you do not have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution. • for example, you could define a variable as follows: var answer = 42 • And later, you could assign the same variable a string value, for example, answer = "Thanks for all the fish..."Because JavaScript is loosely typed, this assignment does not cause an error message.

  41. JavaScript Basic – Variables, Literals, and expressions Literal You use literals to represent values in JavaScript. These are fixed values, not variables, that you literally provide in your script. Numeric literal. String Literal; The maximum number of characters in a string is 255.

  42. JavaScript Basic – Variables, Literals, and expressions Special code “To be or not to be, that is the question!” Ham let

  43. JavaScript Basic – Variables, Literals, and expressions document.write(expression1 [,expression2], ...[,expressionN]) • The write method displays any number of expressions in a document window. You can specify any JavaScript expression with the write method, including numerics, strings, or logicals. • The writeln method is the same as the write method, except the write method does not append a newline character to the end of the output. • Use the write method within any <SCRIPT> tag or within an event handler.

  44. JavaScript Basic – Variables, Literals, and expressions • Event handlers execute after the original document closes, so the write method will implicitly open a new document of mimeType text/html if you do not explicitly issue a document.open() method in the event handler. • You can use the write method to generate HTML and JavaScript code. However, the HTML parser reads the generated code as it is being written, so you might have to escape some characters.

  45. JavaScript Basic – Variables, Literals, and expressions • For example, the following write method generates a comment and writes it to window2: window2=window.open('','window2')beginComment="\<!--"endComment="--\>"window2.document.write(beginComment)window2.document.write(" This some text inside a comment. ")window2.document.write(endComment)

  46. JavaScript Basic – Variables, Literals, and expressions alert("message") • Use the alert method to display a message that does not require a user decision. The message argument specifies a message that the dialog box contains. • Although alert is a method of the window object, you do not need to specify a windowReference when you call it. For example, windowReference.alert() is unnecessary.

  47. JavaScript Basic – Variables, Literals, and expressions function testValue(textElement) {if (textElement.length > 8) {alert("Please enter a name that is 8 characters or less")}}

  48. JavaScript Basic – Variables, Literals, and expressions Expressions and Operators • An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value; the value can be a number, a string, or a logical value. • Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value. For example, the expression x = 7 is an expression that assigns x the value seven. This expression itself evaluates to seven. Such expressions use assignment operators.

  49. JavaScript Basic – Variables, Literals, and expressions • other hand, the expression 3 + 4 simply evaluates to seven; it does not perform an assignment. The operators used in such expressions are referred to simply as operators. JavaScript has the following types of expressions: • Arithmetic: evaluates to a number, for example 3.14159 • String: evaluates to a character string, for example, "Fred" or "234" • Logical: evaluates to true or false

  50. JavaScript Basic – Variables, Literals, and expressions shows an expression that is used in a simple math problem. shows initializing a variable to zero.

More Related