Java Script An Introduction What is Java Script

What is Java. Script? • Java. Script adds “dynamic” behavior to HTML pages, adding

Where Does Java. Script Go? • Java. Script code belongs inside HTML <script> tags.

What Does Java. Script Look Like? The format of a typical Java. Script looks

Client Side vs. Server Side • Server side scripting is used for interaction with

Java. Script Statements • Java. Script expects us to speak to it in lines

Browser Differences • There are differences in how browsers are designed, and therefore differences

No Errors Shown, By Design • Because Java. Script errors are so common and

Overly Sensitive • Java. Script is case sensitive, some say “overly” so. • If

Data Types • Numerical data is entered in Java. Script without quotations around it,

Numerical Data • While strings must be quoted, numbers must not be, if they

Strings Of Data • In Java. Script, user data, like names or HTML look

Variables • Variables are programming constructs that have contents inside them that ‘vary’ •

Concatenation • Concatenation is a programmer’s word for ‘connect’. • When we use variables,

Operators • Java. Script uses “operators” which allow us to make mathematical calculations, and

Keywords • Keywords are words that have special meaning in Java. Script. These words

Read Right To Left • Isn’t it odd that the statements read right to

Java. Script Functions • Java. Script has several built in “functions” which allow us

Anatomy Of A Function • For a function to “function” certain rules must be

Booleans • Boolean data gets its name from the Mathematician George Boole • Boolean

Equal? NOT! • An important operator, often associated with Booleans, is the NOT operator,

Late Binding • Java. Script reads and processes statements one at a time. •

Curly Braces • Curly braces (the “{“ and the “}” signs) are required to

Conditionals • Java. Script allows us to do different things according to different circumstances

If Statement • Here is a sample ‘If’ statement: If(x == y) { alert(“I

Assignment vs. Comparison • The “equals” sign carries special significance in Java. Script •

Custom Message Based On Date The sample below accesses the date object on the

Java. Script Objects • Java. Script uses “objects” to allow us to access resources

The Date Object • Users come to our website from different parts of the

Document Object Model (DOM) • Document Object Model: The elements that make up an

The Navigator Object • Java. Script can determine information about what browser is being

Event Handlers • Events are occurrences on an HTML page, like a “page load”

Rollovers • The most common kind of event handler is a “rollover", where an

Slides: 33

Download presentation

Java. Script An Introduction

What is Java. Script? • Java. Script adds “dynamic” behavior to HTML pages, adding programming capabilities. • Java. Script is a predominantly "client side" scripting language used for a large variety of tasks, such as form validation, image rollovers and fly-out menus. • Java. Script was created by Netscape, and is now the “official” client side language.

Where Does Java. Script Go? • Java. Script code belongs inside HTML <script> tags. • Inside the <script> tags, the rules of Java. Script apply. No HTML can go directly inside the script tag. • Java. Script is embedded directly into the HTML page, usually in the <head> tag.

What Does Java. Script Look Like? The format of a typical Java. Script looks like this: <script type=“text/javascript”> //Code goes here </script> Notice the comment tag (//Code goes here) inserted in the text. The double slashes indicate no code will be executed beyond that point on the line.

Client Side vs. Server Side • Server side scripting is used for interaction with the user, and is frequently used to create dynamic pages by interacting with a database. • Client side scripting is designed to run on the user's machine, and as such is cut off from the server while it is running. • Any work that can be done on the client is best done there, as any processing there takes a load off a busy server.

Java. Script Statements • Java. Script expects us to speak to it in lines of code it understands, called “statements” • Each Java. Script statement should go on the same “line” of text, and most end with a semi-colon: var my. Answer = 2 + 2;

Browser Differences • There are differences in how browsers are designed, and therefore differences in how Java. Script is processed. • One such difference appears in how the document object model (DOM) is handled. • The DOM allows us to navigate an HTML document, and make changes to the page, without reloading the page.

No Errors Shown, By Design • Because Java. Script errors are so common and disruptive to a user’s experience, most browsers elect NOT to display any Java. Script errors, by default • In order to troubleshoot scripting errors, we use a browser like Firefox, which gives feedback on errors by selecting: Tools >> Error Console

Overly Sensitive • Java. Script is case sensitive, some say “overly” so. • If you use a Java. Script function or variable and get even one letter in the wrong case, Java. Script will either show you an error, or will give you unexpected results

Data Types • Numerical data is entered in Java. Script without quotations around it, while alphanumeric data (hereafter called string data) needs to be inserted with quotes. • There are 3 basic types of data in Java. Script, strings, numbers and booleans. • While the Java. Script engine is processing, it will give it's best guess as to the data type involved. In general, any number that can be used in a calculation is considered numerical. An address number, like a zip code, would be a string.

Numerical Data • While strings must be quoted, numbers must not be, if they are to be calculated. • Java. Script treats most numbers automatically, meaning there is one numerical data type

Strings Of Data • In Java. Script, user data, like names or HTML look like “strings” of data that is NOT specifically meaningful to Java. Script. • This data type is called a “string” because it is alphanumeric data that is “strung” together like beads on a chain • Strings are required to be in quotes, either single or double quotes, but not both

Variables • Variables are programming constructs that have contents inside them that ‘vary’ • Variables allow us to tailor our code to the circumstances: var my. Answer = 2 + 2; • In the above code, a variable named ‘my. Answer’ is declared, and it is assigned a value, the sum of 2 and 2.

Concatenation • Concatenation is a programmer’s word for ‘connect’. • When we use variables, we ‘concatenate’ data into meaningful statements: my. Var = ‘The Year is: ‘; my. Var += my. Date. get. Full. Year();

Operators • Java. Script uses “operators” which allow us to make mathematical calculations, and also to concatenate strings of data: • var my. Var = 2 + 2; • In the above example the “plus” sign is the operator that allows us to add 2 and 2. The same operator is used to concatenate strings: • var my. Name = “Bill ” + “Newman”; • Note the “space” left after the first name. This is there so that the two words have a space between them, once they are concatenated.

Keywords • Keywords are words that have special meaning in Java. Script. These words must be used in accordance to Java. Script rules and can't be used as variable or function names. • Some common keywords are break, do, else, for, this, true, false, if, var, void, null, return, while, function, in and switch. • If we are tempted to use a word that logically is very close to a keyword, the suggestion is to attach the prefix "my" to it, ie: my. Function.

Read Right To Left • Isn’t it odd that the statements read right to left? var my. Var = 2 + 2; • This is because the most important part of the statement (the sum, if it’s math) is easier to scan this way in a long program.

Java. Script Functions • Java. Script has several built in “functions” which allow us to perform actions automatically by calling the name of the function, and supplying some data. Here is a very common function, called “alert()”. alert(‘Here is a message that pops up!’); • Note the function includes a “string” of data, that is a message to a user

Anatomy Of A Function • For a function to “function” certain rules must be followed: • Functions all require parenthesis: alert(“message here”); • Sometimes they require “data” inserted inside the parenthesis. In this case, the “string” of text saying, “message here”.

Booleans • Boolean data gets its name from the Mathematician George Boole • Boolean data consists of logic types. For us, that would be the values true and false • Boolean data, like numerical data, does NOT use quotation marks • Booleans (true or false) are always lower case If(x == true){alert(“It’s true!!”); }

Equal? NOT! • An important operator, often associated with Booleans, is the NOT operator, symbolized by the exclamation mark “!” • The “not” operator is used with the equal sign to create “not equal”, which is the same as false: If(x != true){alert(“That would be false!”); }

Late Binding • Java. Script reads and processes statements one at a time. • Java. Script makes assumptions about the code it sees, since it processes data on the fly. • If it sees numbers that are not quoted, it tries to calculate them. • If it sees numbers that are quoted, it tries to connect, or concatenate them

Curly Braces • Curly braces (the “{“ and the “}” signs) are required to let Java. Script know where to start and stop. • These are required when you build your own functions, and for if statements, for example: if(x == y){alert(“x equals y!”); }

Conditionals • Java. Script allows us to do different things according to different circumstances • We do this as people, when we say: If it rains, bring an umbrella. Otherwise, bring shorts. • A ‘conditional’ is a statement that allows us to determine what happens “if” something occurs

If Statement • Here is a sample ‘If’ statement: If(x == y) { alert(“I guess x equals y!”); } The “double equal” is the operator that checks for equality. If the variables x and y are equivalent, then the alert displays

Assignment vs. Comparison • The “equals” sign carries special significance in Java. Script • To “compare” data, we need to use the “double” equal: if(x == y){alert(“x equals y!”); } • To “assign” data, we use a single equal sign: var my. Var = 2 + 2; var my. Name = “Bill “ + “Newman”; • Both of these examples “assign” data to the variable on the left.

Custom Message Based On Date The sample below accesses the date object on the user’s machine, and displays an “alert()” message, if it’s noon, or later: var my. Date = new Date(); If(my. Date. get. Hour() > 12) { alert(‘It’s after Noon!’); }

Java. Script Objects • Java. Script uses “objects” to allow us to access resources like the “date” on the system clock of the user’s machine: var my. Date = new Date(); • We need to create an ‘instance’ (example) of a date object in order to use it further. This allows us to work with different date objects at once.

The Date Object • Users come to our website from different parts of the world • Accessing the user’s system clock is useful for tailoring a user’s experience to their time of day • What if you wanted to show a custom image or message based on the time of day of the user? Java. Script does this.

Document Object Model (DOM) • Document Object Model: The elements that make up an HTML document can be put to various purposes by Java. Script. • The way that an HTML document is navigated is by a structure called the Document Object Model (DOM). • The DOM allows us to read down to a part of an HTML document and either read or change data. • You can call out the object by it's exact name, or by climbing the DOM "tree" elements sequentially.

The Navigator Object • Java. Script can determine information about what browser is being used. This is useful for tailoring HTML for a specific browser: var my. Browser = navigator. app. Name(); alert(“Your browser is: “ + my. Browser);

Event Handlers • Events are occurrences on an HTML page, like a “page load” or the actions by the user, like mouse clicks and mouse hovers, etc. • Events can be “captured” and used as a trigger for actions taken by Java. Script. • The mouse clicks and mouse hovers, etc. are called "events", and the Java. Script "handles" or reacts to the actions of the user, hence the phrase "event handler".

Rollovers • The most common kind of event handler is a “rollover", where an image is "swapped out" (changed) when a user hovers the mouse over an image. • The simple "mouse over" example code below simply (although inefficiently) handles a mouse over event: • <a href="mypage. htm" on. Mouse. Over="document. my. Image. src='images/on. gif'" on. Mouse. Out="document. my. Image. src='images/off. gif'"> <img src="images/on. gif" name="my. Image"><a/> • The above example uses the “document” object model to identify an object by name, in this case an image named “my. Image”