Java Script Basics What is Java Script Java

• Java. Script ≠ Java • Developed by Netscape • Purpose: to Create

Why Use Java. Script? • Java. Script enhances Web pages with dynamic and interactive

What Can Java. Script Do? • Common Java. Script tasks can replace serverside scripting.

• Client-side programming • recall: HTML is good for developing static pages •

• �� programs are written in a separate programming language • e. g.

Java. Script Syntax. • Unlike HTML, Java. Script is case sensitive. • Dot Syntax

Java. Script Terminology. • Java. Script uses specialized terminology. • Understanding Java. Script terms

Objects • Objects refers to windows, documents, images, tables, forms, buttons or links, etc.

Properties • Properties are object attributes. • Object properties are defined by using the

Methods • Methods are actions applied to particular objects. Methods are what objects can

Events • Events associate an object with an action. • e. g. , the

Functions • Functions are named statements that performs tasks. • e. g. , function

Function <script langauge="Java. Script"> <!-- hide me function announce. Time( ) { //get the

Values • Values are bits of information. • Values types and some examples include:

Variables • Variables contain values and use the equal sign to specify their value.

Variables <script language=“Java. Script”> <!-- definition of variables var num_car= 25; var passenger_per_car= 3;

Expressions • Expressions are commands that assign values to variables. • Expressions always use

Operators • Operators are used to handle variables. • Types of operators with examples:

Methods of Using Java. Script. 1. Java. Scripts can reside in a separate page.

<html> <head> <title>Java. Script Page</title> <script LANGUAGE=“Java. Script”> <!-- actual Java. Script follows below

1. Using Separate Java. Script Files. • Linking can be advantageous if many pages

2. Embedding Java. Script in HTML. • When specifying a script only the tags

Using Comment Tags • HTML comment tags should bracket any script. • The <!--

3. Using Java. Script in HTML Tags. • Event handlers like on. Mouseover are

Creating an Alert Message • The following script in the <body> tag uses the

Slides: 26

Download presentation

Java. Script Basics What is Java. Script? Java. Script is a scripting language designed for Web pages by Netscape. CIS 233

• Java. Script ≠ Java • Developed by Netscape • Purpose: to Create Dynamic websites • Widely Used CIS 233

Why Use Java. Script? • Java. Script enhances Web pages with dynamic and interactive features. • Java. Script runs in client software. • Java. Script 1. 3 works with version 4. 0 browsers. CIS 233

What Can Java. Script Do? • Common Java. Script tasks can replace serverside scripting. • Java. Script enables shopping carts, form validation, calculations, special graphic and text effects, image swapping, image mapping, clocks, and more. CIS 233

• Client-side programming • recall: HTML is good for developing static pages • �� can specify text/image layout, presentation, links, … • �� Web page looks the same each time it is accessed • �� in order to develop interactive/reactive pages, must integrate programming • client-side programming CIS 233

• �� programs are written in a separate programming language • e. g. , Java. Script, JScript, VBScript • �� programs are embedded in the HTML of a Web page, with tags to identify the • program component • e. g. , <script type="text/javascript"> … </script> • �� the browser executes the program as it loads the page, integrating the dynamic • output of the program with the static content of HTML CIS 233

Java. Script Syntax. • Unlike HTML, Java. Script is case sensitive. • Dot Syntax is used to combine terms. • e. g. , document. write("Hello World") • Certain characters and terms are reserved. • Java. Script is simple text (ASCII). CIS 233

Java. Script Terminology. • Java. Script uses specialized terminology. • Understanding Java. Script terms is fundamental to understanding the script. • Objects, Properties, Methods, Events, Functions, Values, Variables, Expressions, Operators. CIS 233

Objects • Objects refers to windows, documents, images, tables, forms, buttons or links, etc. • Objects should be named. • Objects have properties that act as modifiers. CIS 233

Properties • Properties are object attributes. • Object properties are defined by using the object's name, a period, and the property name. • e. g. , background color is expressed by: document. bgcolor. • document is the object. • bgcolor is the property. CIS 233

Methods • Methods are actions applied to particular objects. Methods are what objects can do. • e. g. , document. write(”Hello World") • document is the object. • write is the method. CIS 233

Events • Events associate an object with an action. • e. g. , the On. Mouseover event handler action can change an image. • e. g. , the on. Submit event handler sends a form. • User actions trigger events. CIS 233

Functions • Functions are named statements that performs tasks. • e. g. , function do. Whatever () {statement here} • The curly braces contain the statements of the function. • Java. Script has built-in functions, and you can write your own. CIS 233

Function <script langauge="Java. Script">  </script> </head> <body>. . . </body> </html> CIS 233

Values • Values are bits of information. • Values types and some examples include: • Number: 1, 2, 3, etc. • String: characters enclosed in quotes. • Boolean: true or false. • Object: image, form • Function: validate, do. Whatever CIS 233

Variables • Variables contain values and use the equal sign to specify their value. • Variables are created by declaration using the var command with or without an initial value state. • e. g. var month; • e. g. var month = April; CIS 233

Variables <script language=“Java. Script”>  </script> www. artsci. wustl. edu/~hmliaw/Test-Variable. htm CIS 233

Expressions • Expressions are commands that assign values to variables. • Expressions always use an assignment operator, such as the equals sign. • e. g. , var month = May; is an expression. • Expressions end with a semicolon. CIS 233

Operators • Operators are used to handle variables. • Types of operators with examples: • Arithmetic operators, such as plus. • Comparisons operators, such as equals. • Logical operators, such as and. • Control operators, such as if. • Assignment and String operators. CIS 233

Methods of Using Java. Script. 1. Java. Scripts can reside in a separate page. 2. Java. Script can be embedded in HTML documents -- in the <head>, in the <body>, or in both. 3. Java. Script object attributes can be placed in HTML element tags. e. g. , <body on. Load="alert('WELCOME')"> CIS 233

<html> <head> <title>Java. Script Page</title> <script LANGUAGE=“Java. Script”>  </script> </head> CIS 233

1. Using Separate Java. Script Files. • Linking can be advantageous if many pages use the same script. • Use the source element to link to the script file. <script src="myjavascript. js” language="Java. Script 1. 2” type="text/javascript"> </script> CIS 233

2. Embedding Java. Script in HTML. • When specifying a script only the tags <script> and </script> are essential, but complete specification is recommended: <script language="javascript” type="text/javascript">  </script> CIS 233

Using Comment Tags • HTML comment tags should bracket any script. • The  tags hide scripts in HTML and prevent scripts from displaying in browsers that do not interpret Java. Script. • Double slashes // are the signal characters for a Java. Script single-line comment. CIS 233

3. Using Java. Script in HTML Tags. • Event handlers like on. Mouseover are a perfect example of an easy to add tag script. <a href=”index. html” on. Mouseover="document. logo. src='js 2. gif'" on. Mouseout="document. logo. src='js. gif'"> <img src="js. gif" name="logo"> </a> CIS 233

Creating an Alert Message • The following script in the <body> tag uses the on. Load event to display an Alert window • The message is specified within parenthesis. <body on. Load="alert('WELCOME. Enjoy your visit. Your feedback can improve cyberspace. Please let me know if you detect any problems. Thank you. ')"> CIS 233