Transcript Javascript
What is Java Script?
An extension to HTML.
Allows authors to incorporate some functionality in
their web pages. (without using CGI script).
JavaScript can be used in a number of ways to spice up
your page. Moving images, actions on buttons etc.
What can Java script do?
JavaScript can greatly enhance the interactivity of your web
page. (image flips, drop down menu boxes, live clocks etc).
JavaScript gives HTML designers a programming tool
JavaScript can put dynamic text into an HTML page
JavaScript can react to events.
JavaScript can read and write HTML elements - It can read
and change the content of an HTML element .
JavaScript can be used to validate data - before it is submitted
to a server, this will save the server from extra processing
Java vs Java Script
Java is an Object Oriented Programming (OOP)
language created by James Gosling of Sun
Microsystems. JavaScript was created by the fine people
at Netscape.
JavaScript is a distant cousin of Java.
It is also an OOP language. Many of their
programming structures are similar.
However, JavaScript contains a much smaller and
simpler set of commands than does Java. It is easier for
the average weekend warrior to understand.
Differences
Java can stand on its own, while JavaScript must
be placed inside an HTML document to
function.
Java must be compiled into what is known as a
"machine language" before it can be run on the
Web. To alter it, you need to compile again.
JavaScript is text-based. You write it to an
HTML document and it is run through a
browser. You can alter it after it runs and run it
again and again.
Java Script Vs Java Applets
A Java "applet" (a little application) is a fully
contained program. JavaScript is text that is
downloaded into a browser
Java applets run independently of the HTML
document that is calling them. They do appear
on the same page.
The HTML document does little more than call
for the application and place it on the page.
JavaScript is wholly reliant on the browser to
understand it and make it come to life.
Benefits
JavaScript's easy to understand.
It is much easier and more robust than Java.
JavaScript is geared to Web pages: It allows you to call on
an item that already exists, like the status bar or the
browser itself, and play with just that part..
It allows for fast creation of Web page events. (Many
commands in JavaScript are Event Handlers).
JavaScript is a little more forgiving than Java. It allows
more freedom in the creation of objects. Java is very rigid
and requires all items to be denoted and spelled out.
How to use them.
JavaScript and applets are available on the Net as fully
functioning items. Download and use them on your
page (provided you are given permission).
There are many, many sites out there that do nothing
more than hand out applets or JavaScript.
Gamelan.com is a good one for applets.
Take a look at javascripts.com for over 2300 free
JavaScript scripts.
How to write?
A bare-bone script consists of only two lines:
The <script></script> tag:
<script>
</script>
The actual JavaScript codes will fall inside this
tag.
JavaScript where to put….
Scripts in the head section: Scripts to be executed when
they are called, or when an event is triggered, go in the
head section.
Scripts in the body section: Scripts to be executed when
the page loads, go in the body section. When you place
a script in the body section it generates the content of
the page.
Scripts in both the body and the head section: You can
place an unlimited number of scripts in your document,
so you can have scripts in both the body and the head
section. (SUPPORTS 0-1-INFINITY PRINCIPLE)
Example
<html>
<body>
<center><b><font size=200>
<script type="text/javascript"> document.write("Hello World!")
</script>
</font></b></center>
</body>
</html>
The code above will produce this output on an HTML page:
Hello World!
hello.html
Ending Statements With a
Semicolon?
With traditional programming languages, like C++ and
Java, each code statement has to end with a semicolon.
Many programmers continue this habit when writing
JavaScript, but in general, semicolons are optional!
However, semicolons are required if you want to put
more than one statement on a single line.
JavaScript uses them to separate commands and
declarations
Some features
Conditional statements
Conditional operators
Buttons, Alerts and Confirmation Box
Event Handling
Loops
Variables
JavaScript uses variables to store data.
A variable's value can change during the script. You can
refer to a variable by name to see its value or to change
its value.
Rules for Variable names:
Variable names are case sensitive
They must begin with a letter or the underscore character
Keep all of your variables in the HEAD section.
If you declare a variable outside a function, all the
functions on your page can access it.
The lifetime of these variables starts when they are
declared, and ends when the page is closed.
Conditional Statements
In JavaScript we have three conditional
statements:
if statement - use this statement if you want to
execute a set of code when a condition is true
if...else statement - use this statement if you want
to select one of two sets of lines to execute
switch statement - use this statement if you want
to select one of many sets of lines to execute
Conditional Operator
JavaScript also contains a conditional operator that
assigns a value to a variable based on some condition.
Syntax
variablename=(condition)?value1:value2
Example
greeting=(visitor=="PRES")?"Dear President ":"Dear "
If the variable visitor is equal to PRES, then put the
string "Dear President " in the variable named greeting.
If the variable visitor is not equal to PRES, then put the
string "Dear " into the variable named greeting.
Buttons
<FORM> tags .
Syntax
<FORM>
<INPUT type="button" value="Click Me" name="button1">
</FORM>
You can change the background color of a page .
<FORM>
<INPUT type="button" value="Change to Yellow!"
name="button3" onClick="document.bgColor='yellow'">
</FORM>
Alerts
JavaScript alert boxes tell the viewer something you
want them to know.
Syntax
alert('your choice of text')
To use it, place it inside another command.
The following script will alert the user to NOT click
this particular link when they move their mouse over it.
<A HREF="noplace" onMouseover="alert('Hey! I said
not to try clicking this link!')"> Don't click this
link!</A>
Confirmation Box
A JavaScript confirmation box can be a handy way to
give your visitors a choice of whether or not an action
is performed.
Allows the viewer to press an "OK" or "Cancel"
button.
Syntax
confirm("Text or question you want to use");
The confirmation box will return a value of true or
false, and we must make use of the result by assigning it
to a variable, like this:
var where_to= confirm("Do you really want to go to
this page??");
Looping
In JavaScript we have the following looping
statements:
while
do...while
for
External Scripts
To run the same script on several pages, without writing the
script on each and every page, you can write a script in an
external file, and save it with a .js file extension, like this:
The external script cannot contain the <script> tag
Now you can call this script, using the "src" attribute, from any
of your pages:
<html> <head> </head>
<body>
<script src="xxx.js"></script>
</body>
</html>
Remember to place the script exactly where you normally would
write the script.
Comments
The two forward slashes at the end of comment
line (//) are a JavaScript comment symbol. This
prevents the JavaScript compiler from compiling
the line.
<script type="text/javascript">
<!–
some statements
//-->
</script>
Conclusion
JavaScript was designed to add interactivity to HTML
pages
JavaScript is a scripting language - a scripting language
is a lightweight programming language
A JavaScript is usually embedded directly in HTML
pages
JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
Everyone can use JavaScript without purchasing a
license
JavaScript is supported by all major browsers, like
Netscape and Internet Explorer