dhtml script
Download
Report
Transcript dhtml script
Chapter 5
Scripting Language
(Java Script ‘n’ PHP)
Scripting Language
A high level programming language that is interpreted by another program at
runtime rather than compiled by the computer's processor as other programming
languages (such as C and C++) are. Scripting languages, which can be embedded
within HTML, commonly are used to add functionality to a Web page, such as
different menu styles or graphic displays or to serve dynamic advertisements. These
types of languages are client-side scripting languages, affecting the data that the end
user sees in a browser window. Other scripting languages are server-side scripting
languages that manipulate the data, usually in a database, on the server.
Scripting languages came about largely because of the development of the Internet
as a communications tool. JavaScript, ASP, JSP, PHP, Perl, Tcl and Python are
examples of scripting languages.
Client-Side Script: generally refers to the class of computer programs on
the web that are executed client-side, by the user's web browser, instead of serverside (on the web server). This type of computer programming is an important part of
the Dynamic HTML (DHTML) concept, enabling web pages to be scripted; that is,
to have different and changing content depending on user input, environmental
conditions (such as the time of day), or other variables.
Client-side scripts are often embedded within an HTML or XHTML document
(hence known as an "embedded script"), but they may also be contained in a
separate file, to which the document that use it make reference (hence known as an
"external script"). Upon request, the necessary files are sent to the user's computer
by the web server on which they reside. The user's web browser executes the script,
then displays the document, including any visible output from the script.
Server-Side Script: written in languages such
as PHP, ASP.NET, Java, ColdFusion, Perl, Ruby, Python, and server-side
JavaScript, are executed by the web server when the user requests a document. They
produce output in a format understandable by web browsers (usually HTML), which
is then sent to the user's computer. The user cannot see the script's source code and
may not even be aware that a script was executed. Documents produced by serverside scripts may, in turn, contain client-side scripts.
Server-side scripts require that their language's interpreter be installed on the server,
and produce the same output regardless of the client's browser, operating system, or
other system details. Client-side scripts do not require additional software on the
server; however, they do require that the user's web browser understands the
scripting language in which they are written. It is therefore impractical for an author
to write scripts in a language that is not supported by popular web browsers.
JavaScript
JavaScript is a simple, powerful, and popular programming language that is built into
web browsers. Learning JavaScript is especially useful if you are a web designer and
already know HTML and CSS, because it is used to make web pages interactive.
However, JavaScript is not limited to making interactive web pages; you can also use it
for server-side programming using a framework like Node.js.
JavaScript programs are a sequence of statements or commands that are run by a web
browser in the order they are written. The code below is an example of a JavaScript
Hello World program wrapped in a few lines of HTML, which enables it to run in a web
browser as a valid web page:
<!doctype html>
<title>JavaScript Test</title>
<script>
alert('Hello World!');
</script>
In the example above, the JavaScript code is the line between the <script> and </script>.
This line contains a JavaScript alert command that instructs the web browser to display a
message box that contains the text between the quotation marks.
Common Scripting Tasks
1. Adding dynamic features to Web pages
• validation of form data
• image rollovers
• time-sensitive or random page elements
• handling cookies
2. Defining programs with Web interfaces
• utilize buttons, text boxes, clickable images, prompts, frames
limitations of client-side scripting
since script code is embedded in the page, viewable to the world
for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
since designed to run on any machine platform, scripts do not contain platform
specific commands
script languages are not full-featured
e.g., JavaScript objects are crude, not good for large project development
How to run a script program:
•Write the code in a text editor (such as Dreamweaver or Notepad).
•Save the file as filename.html
•Open the file using your favorite web browser.
•If you'd like, you can edit test.html to change the message that appears in the
message box, then save your code and click F5 while your web browser is active to
refresh the page.
How does it work?
• Embedded within HTML page.
• Executes on client.
• Simple programming statements combined with HTML tags.
• Interpreted (not compiled), No special tools required.
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('<h1>This is my first JavaScript
Page</h1>');
</script>
</body>
</html>
HTML written
inside JavaScript
Java Script Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
</body>
</html>
JavaScript written
An Event
inside HTML
Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
</script>
Another event
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
Note quotes: " and '
HTML Forms and JavaScript
•JavaScript is very good at processing user input in the web browser
•HTML <form> elements receive input
•Forms and form elements have unique names
•Each unique element can be identified
•Uses JavaScript Document Object Model (DOM)
Naming Form Elements in HTML
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
Using Form Data
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
Introduction to PHP
• PHP is server side scripting system.
• PHP stands for "PHP: Hypertext Preprocessor“.
• Syntax based on Perl, Java, and C.
• Very good for creating dynamic content.
• Powerful, but somewhat risky!
• If you want to focus on one system for dynamic content, this is a good one to
choose.
PHP Scripts
•
•
•
•
•
•
Typically file ends in .php--this is set by the web server configuration.
Separated in files with the <?php ?> tag.
php commands can make up an entire file, or can be contained in html.
Program lines end in ";" or you get an error.
Server recognizes embedded script and executes.
Result is passed to browser, source isn't visible.
<P>
<?php $myvar = "Hello World!";
echo $myvar;
?>
</P>
How it works:
PHP code is executed on the server, generating HTML which is then sent to the client.
The client would receive the results of running that script, but would not know what
the underlying code was.
A visual, if you please...
PHP Getting Started
•On windows, you can download and install WAMP. With one installation and you get an
Apache webserver, database server and php.
•http://www.wampserver.com
•On mac, you can download and install MAMP.
•http://www.mamp.info/en/index.html
Above is the PHP source code.
It renders as HTML that looks like this.
PHP Variables
•Variables are used for storing values, like text strings, numbers or arrays.
•When a variable is declared, it can be used over and over again in your script.
•All variables in PHP start with a $ sign symbol.
•The correct way of declaring a variable in PHP:
•In PHP, a variable does not need to be declared before adding a value to it.
•In the example above, you see that you do not have to tell PHP which data type the
variable is.
•PHP automatically converts the variable to the correct data type, depending on its
value.
PHP Conditional Statements
•If statement - use this statement to execute some code only if a specified condition is
true.
•If...else statement - use this statement to execute some code if a condition is true and
another code if the condition is false.
•If-elseif-else statement - use this statement to select one of several blocks of code to
be executed.
•Switch statement - use this statement to select one of many blocks of code to be
executed.
PHP Arrays
In PHP, there are three kind of arrays:
• Numeric array - An array with a numeric index.
• Associative array - An array where each ID key is associated with a value.
• Multidimensional array - An array containing one or more arrays.
In the following example you access the variable values by referring to the array name
and index:
The code above will output:
PHP Loops
• while - loops through a block of code while a specified condition is true.
• do...while - loops through a block of code once, and then repeats the loop as long
as a specified condition is true.
• for - loops through a block of code a specified number of times.
• foreach - loops through a block of code for each element in an array.
A while loop example: