Java Script

JavaScript

With JavaScript,

• A Web page can really react to what you're doing.

• Images can swap when you move a cursor over them.

• Form elements can influence each other on the fly.

• And calculations can be made without having to resort to a CGI script.

• There's none of this submit-and-wait stuff - everything happens on your Web page while you're playing with it.

Why JavaScript

• One of the best things about JavaScript is that you can do a great deal with very little programming.

• You don't need a fancy computer, you don't need any software other than a Web browser, and you don't need access to a Web server; you can do all your work right on your own computer.

• Even though it's simple to work with, JavaScript is a complete programming language, so as you learn more complicated JavaScript, you're also learning the basics of computer programming. If you want to move on to other programming languages, like Perl, C, C++, or Java, JavaScript is a great introduction.

What is Java Script?

• JavaScript is not Java. • Sometimes JavaScript isn't JavaScript! It turns

out that different browsers deal with JavaScript differently.

• View Source! The best way to learn JavaScript is to look at scripts other people have written. JavaScript, just like HTML, can be viewed by selecting View Source on your browser. Do it frequently!

• Finally, as with HTML, the best way to learn JavaScript is to experiment freely and often.

JavaScript Syntax

• JavaScript usually goes between the </title> tag and the </head> tag.

• Like HTML, JavaScript is just text that can be typed into a word processor. It goes right into the HTML that describes your page. (Although I've only shown JavaScript in the header of the HTML page, you can also put JavaScript in the body. You'll see an example of this in the next lesson.)

• The beginning of a bit of JavaScript begins with <script language="JavaScript">

Your First JavaScript Exercise

• <HTML>• <HEAD>• <TITLE>• </TITLE> • <SCRIPT LANGUAGE = "JavaScript"> alert ("Welcome

to my Web Site"); </SCRIPT>• </HEAD>• <BODY>• My first page with JavaScript Code. • </BODY>• </HTML>

Examples• alerts

<A HREF="javascript:alert('Hello World')">Hello World</A> <A HREF="javascript:alert('Hello World');alert('Hello Net')">Hello

World</a> • Variables

var monkey_love = prompt("Do you love the monkey?","Type yes or no"); if (monkey_love == "yes") { alert("Welcome! I'm so glad you came! Please, read on!"); }

• Events <a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a> <a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>

MouseOver

• One of the most commonly used features of JavaScript is the ability to change images on a mouseover. <img src="thumbs_up1.gif" name="the_image"> <a href="#"

onMouseOver="document.the_image.src='thumbs_up2.gif';"> Change </a>

• This is just like a standard <img src= > tag except this one has been given a name: the_image. This name could be anything: my_image, a_box, whatever - but it can't have any spaces in it.

Introduction to Window Manipulation

• Before learning how to open a window in JavaScript, you should know how to open one using HTML. The HTML used to do this is:

• <a href="yer_new_window.html" target="yer_new_window">this link</a>

• The important thing to know about windows opened by targeted links is that the window above now has the name "yer_new_window" associated with it. If you have another href that uses "yer_new_window" as the target, and you haven't closed the window yet, whatever URL you put in that link will open in the original window.

• The JavaScript syntax is:• window.open("URL","name","features"); • And the code that will use the above syntax will look like this• <a href="#" onClick="window.open('index.html','india');"> • Here's a window named javascript_1</a>

Windows Features Part I• The third parameter of the window.open() method is a list of

features that you'd like your window to have. • If you don't include this parameter at all, the window will contain all

the features of a default browser window. However, if you specify any features in the third parameter, just those features will appear.

• For example, if you write • window.open("some_url","window_name","location,menubar"); • you'll get a window with just the location box (also called address

bar - the place in your browser where you type in a URL) and a menu bar (File, Edit, etc.). Note that it's important that you don't put any spaces in the string.

• Another example is • window.open("some_url","window_name","location,height=100

,width=100"); • This will open a window that is 100 pixels high and 100 pixels wide

and has no features other than a location field.

Windows Features Part IIHere's a list of the features that you can include in the feature string: • Menubar

It includes File, Edit, and a few other items. • Status

This is the message bar at the bottom of your window.• Scrollbars

This allows scrollbars to appear when necessary. ·• Resizable

If resizable is listed, the window can be resized. • Width

The width of the window in pixels. · • Height

The height of the window in pixels. • Toolbar

The browser toolbar, which contains the Back and Forward buttons.• Location

The address bar of a browser into which you can type URLs.

Exercise 1• <html>• <head>• <SCRIPT LANGUAGE = "JavaScript">• var monkey_love = prompt ("Do you love monkey?", "Type Yes or

No");• if (monkey_love == "yes"){• alert ("Welcome! I am glad you came! Please, read on!");• }else {• alert ("Go away");• }• </SCRIPT>• </head>• <body>

Exercise 2• <SCRIPT LANGUAGE = "JavaScript">• // document.writeln("Your Name is ", Your_Name);• </SCRIPT>• <P>• <a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a>• <P>• <a href="#" onMouseOver="alert('Hee hee');">Mouse over me</a>• <P>• <a href="contact.html" target="my_window">this link</a>• <p>• <a href="#" onClick="window.open('testit.htm','my_window',

'scrollbars,resizable,location,height=100,width=100')";>Clcik here</a>

• </body>• </html>

Exercise 3 - Where has that browser been?

<SCRIPT language="JavaScript">

function cameFrom(where) { if (!document.referrer && !where) return true; else return (document.referrer.indexOf(where)>=0) }if (cameFrom("domain1.com")) { location.replace("newpage1.html"); }else if (cameFrom("domain2.com")) { location.replace("newpage2.html"); }if (cameFrom("google.com")) { alert("You found us!"); }else if (cameFrom("worstenemy.com")) { location.replace("reprimand.html"); }else if (cameFrom()) { alert("The wind blows where it will, and you hear the sound of it, but you do not know from whence it comes.") }

</SCRIPT>

Hard Return in JScript

• While hard returns are irrelevant to HTML parsing, hard returns mean a world of difference in JavaScript.

• For comments you can use the C-style block comment ( /* .... */ )

• Don’t use the single line comment set-off by two slashes ( // )

• Because it will turn everything until the closing script tag ( </script> ) into a single long comment (and will probably cause an error in the script).

Inline JavaScript

• <H1 onMouseOver="this.style.color='tan';" onMouseOut="this.style.color='purple';">Mouse over me to see my over color. Then mouse out to see my out color.</H1>

Java Script

Technology

Transcript of Java Script