Java Script Basics What is Java Script Java

  • Slides: 21
Download presentation
Java. Script Basics What is Java. Script? Java. Script is a programming language designed

Java. Script Basics What is Java. Script? Java. Script is a programming language designed for Web pages. CIS 233

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

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.

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

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

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 programming uses specialized terminology. • Understanding Java. Script

Java. Script Terminology. • Java. Script programming 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 • 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

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

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

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

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

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

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 • 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

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

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:

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.

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

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

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

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"> <!-- Begin hiding window. location=”index. html" // End hiding script--> </script> CIS 233

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

Using Comment Tags • HTML comment tags should bracket any script. • The <!-- script here --> 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

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

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

 • Return to jqjacobs. net/web -- Java. Script Basics References and Recommended Readings

• Return to jqjacobs. net/web -- Java. Script Basics References and Recommended Readings The Web Wizard’s Guide to Java. Script by Steven Estrella Java. Script for the World Wide Web by Tom Negrino and Dori Smith © 2003 by James Q. Jacobs. All rights reserved. My photography, graphics, and writings may be used and reproduced for non-commercial, educational purposes, such as classroom materials, without my permission if you cite the source in some way. CIS 233