JavaScript Popups

<head>
<script type="text/javascript">

function testPopup() {
window.open( "http://www.google.com/" )
}

</script>
</head>
<body>
<form>
<input type="button" onClick="testPopup()" value="Click">
</form>
</body>


OpenNewWindow =window.open('contact.html','help','toolbar=no,
location=0,directories=no,status=yes,menubar
=0,scrollbars=yes,resizable=yes,
width=300,height=350')





JavaScript Window.Open Arguments


When you open a window, you can set its URL, name, size, buttons, and other attributes, such as whether or not the window can be resized. The basic syntax of this method is


window.open(url, name, features, replace)


where

url is a URL that indicates the document to load into the window.

name is the name for the window (which is useful for referencing later on using the target attribute of HTML links).features is a comma-delimited string that lists the features of the window.

replace is an optional Boolean value (true or false) that indicates if the URL specified should replace the window’s contents or not. This would apply to a window that was already created.

An example of this method is

secondwindow = open("http://www.yahoo.com", "yahoo", "height=300,width=200,

 scrollbars=yes");



<a href="http://www.google.com" target="_blank">Go to Google</a>

Javascript Making a simple MouseOver

<a href="http://www.cit.cornell.edu"
onMouseOver="document.logo.src='family.gif ' ; "
onMouseOut ="document.logo.src='harry.gif ' ; " >
<img name="logo" src="harry.gif " border=0></a>


The onMouseOver and onMouseOut attributes are “Event Handlers” that tell the browser what
code to execute when the events occur. You can make it so that the mouseover affects another image on
the page by changing the name of the image accordingly in the event handler code.

We can use a MouseOver to animate a still image when the
mouse rolls over it. In your class files folder you have two images, logoscroll.gif and logostill.gif which
can be used to create this effect.

Javascript String Constructor

String is the built-in object corresponding to the primitive string data type. It contains a very large number of methods for string manipulation and examination, substring extraction, and even conversion of strings to marked-up HTML, though unfortunately not standards-oriented XHTML.

The String() constructor takes an optional argument that specifies its initial value:

var s = new String();

var headline = new String("Dewey Defeats Truman");


Because you can invoke String methods on primitive strings, programmers rarely create String objects in practice.

The only property of String is length, which indicates the number of characters in the string.

var s = "String fun in JavaScript";

var strlen = s.length;

// strlen is set to 24


The length property is automatically updated when the string changes and cannot be set by the programmer. In fact there is no way to manipulate a string directly. That is, String methods do not operate on their data “in place.” Any method that would change the value of the string, returns a string containing the result. If you want to change the value of the string, you must set the string equal to the result of the operation. For example, converting a string to uppercase with the toUpperCase() method would require the following syntax:

var s = "abc";

s = s.toUpperCase();

// s is now "ABC"
Invoking s.toUpperCase() without setting s equal to its result does not change the value of s. The following does not modify s:

var s = "abc";

s.toUpperCase();

// s is still "abc"
Other simple string manipulation methods such as toLowerCase() work in the same way; forgetting this fact is a common mistake made by new JavaScript programmers.

JavaScript String Split Function

split()

The split() method splits (for lack of a better word) a string up into substrings and returns them in an array. It accepts a string or regular expression argument containing the delimiter at which the string will be broken.

<script type="text/javascript">
var testString = "It is very nice script";

var testSplitResult = testString.split(" ");

for(i = 0; i < testSplitResult.length; i++){
    document.write("<br /> Element " + i + " = " + testSplitResult[i]);
}
</script>

JavaScript Redirect

<script type="text/javascript">

window.location = "http://www.yoursite.com/"

</script>

JavaScript System Dialogs alert(),confirm(),prompt()

The browser is capable of invoking system dialogs to display to the user through the alert(),
confirm(), and prompt() methods. These dialogs are not related to the web page being displayed
in the browser and do not contain HTML. Their appearance is determined by operating system and/
or browser settings rather than CSS. Additionally, each of these dialogs is synchronous and modal,
meaning code execution stops when a dialog is displayed, and resumes
after it has been dismissed.

The alert() method has been used throughout this book. It simply
accepts a string to display to the user. When alert() is called, a
system message box displays the specifi ed text to the user, followed by
a single OK button.

Alert dialogs are typically used when users must be made aware of something that they have no
control over, such as an error. A user’s only choice is to dismiss the dialog after reading the message.
The second type of dialog is invoked by calling confirm(). A confi rm dialog looks similar to an
alert dialog in that it displays a message to the user. The main difference between the two is the

To determine if the user clicked OK or Cancel, the confirm() method
returns a Boolean value: true if OK was clicked, or false if Cancel
was clicked or the dialog box was closed by clicking the X in the
corner. Typical usage of a confi rm dialog looks like this:

if (confirm(“Are you sure?”)) {
alert(“I’m so glad you’re sure! “);
} else {
alert(“I’m sorry to hear you’re not sure. “);
}

If the OK button is clicked, prompt() returns the value in the text box; if Cancel is clicked or the
dialog is otherwise closed without clicking OK, the function returns null. Here’s an example:

var result = prompt(“What is your name? “, “”);
if (result !== null) {
alert(“Welcome, “ + result);
}

JavaScript Variables

Variables store a value you can refer to later in the script. Variable names
can be nearly any valid identifi er. A JavaScript identifi er is a word that
contains only letters, numbers, $, and _, and that doesn’t start with a
number.
Variables are a great demonstration of how statements and expressions
can be combined. You use a variable declaration statement to create a
variable.

var myVariable;

If you already have a variable, you can use a variable assignment expression
to assign it a value.

myVariable = 42;
42
You can combine a variable declaration with an assignment expression.
var myVariable = 42;
You can also string together several variable declarations with commas.
Don’t forget the commas, though! Leaving off a comma can have the
unintended side effect of declaring a global variable when you don’t
mean to do that.var variable1 = 4,
variable2 = 8,
variable3 = 15;

JavaScript has a relatively small number of built-in data types, including
these common types:
var myNumber = 42;
var myString = "A string of text";
var myBoolean = true;
var myArray = [myNumber, myString, myBoolean];

JavaScript Alert

The JavaScript alert is a dialogue box that pops up and takes the focus away from the current window and forces the web browser to read the message.


1.
<form>
<input type="button" onclick=
"alert('Are you sure you want to call')"
value="See">
</form>


2.
function myFunc() {
alert("executing myFunc!");
return true;
}

3.

for (var i = 0; i < 10; i++) {
var link = document.createElement("a");
link.innerHTML = "Link " + i;
link.href = "#";
link.onclick = function() {
alert("This is link " + i);
return false;
};
document.body.appendChild(link);
}

Web Application with PHP


PHP embedded in HTML

<html>
<head><title>Example 1</title></head>
<body>
<?php
/* If it is April 1st, we show a quote */
if (date('md' == '0401')) {
echo 'A bookstore is one of the only pieces of evidence we have '.
'that people are still thinking. <i>Jerry Seinfeld</i>';
} else {
echo 'Good morning!';
}
?>
</body>
</html>

The line
<?php
begins the PHP section embedded into the HTML code; the
line
?>
ends the PHP section. Notice that the code uses echo
to send the output.
When the text is so simple, the echo
statements are acceptable.

Creating A Function In Javascript

The basic structure of a function looks like this:

function functionName() {
// the JavaScript you want to run
}

The keyword function lets the JavaScript interpreter know you’re creating a function—
it’s similar to how you use if to begin an if/else statement or var to create a variable.

function printToday()
{
var today = new Date();
document.write(today.toDateString());
}

The function’s name is printToday. It has just two lines of JavaScript code that retrieve
the current date, convert the date to a format we can understand