Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download JavaScript Diversion It‟s not just about Java.
Document related concepts
no text concepts found
Transcript
JavaScript Diversion
It‟s not just about Java.
A Quick Diversion
You have learned fundamental features
of all languages.
So let‟s briefly focus on JavaScript.
Convince you that you can do any language.
A handy tool.
• Particularly useful for designing web pages.
Not Related to Java
JavaScript is a different programming
language from Java.
Similar names that‟s all.
JavaScript developed for programming on
web pages
JavaScript is built into browsers
• Netscape
• IE
• etc.
Makes running your code very easy.
Graphics, file writing, (etc.) more limited than Java.
Similarities
Has all the fundamental features that
we‟ve discussed in Java
if statements
for loops
while loops
etc.
Most modern programming languages
are similar in features.
Big Difference
Big difference
“Untyped” language
So don‟t declare a variable type.
e.g., no int, double, float, char, etc.
Just say
var i = 1;
var j = 3.0;
var k = i+j;
var letter = „c‟;
var message = “go skiing”;
Medium-Big Difference
Variable Scope
In Java, variables are local
only useable within the {…} where defined
e.g.
if(temp == 85)
{
String message = “go play”;
}
System.out.println(message);
In JavaScript variables are usually global
if(temp == 85)
{
var message = “go play”;
}
document.write(message);
error!
exception is local
within functions
(stay tuned)
works!
Small Differences
Devil in the details
document.write() instead of System.out.println()
Different input methods.
Other methods differ.
Mostly annoyances.
You know the basic logic/structure!
Learn one (modern) language, know them all.
HTML
Hypertext Markup Language
All web pages use HTML
Just tags to delineate text.
NOT part of the programming language.
<HTML>
<BODY>
<!-- we‟ll insert some code here-->
<H2>Hello!</H2>
<P>
I‟m going to insert some code on my web page!
</P>
</BODY>
</HTML>
all opening tags have
corresponding closing tags
Save this as “hello.html”, and it will display in a browser.
SCRIPT Tag
Insert JavaScript with the <SCRIPT> tag.
JavaScript code!
Demo with laptop in class!
<HTML>
<BODY>
<SCRIPT LANGUAGE = "JavaScript" >
document.write("<H2>Hello!</H2>");
document.write("<P>");
document.write("Wrote this with code!");
document.write("</P>");
</SCRIPT>
</BODY>
</HTML>
Just like System.out.println()
but writes out stuff onto the
web page. Try it!
Using If and Loops
Same as Java
<HTML>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
document.write("<H2>Even and odd numbers to 10.</H2>");
for(var i=1; i<=10; i++)
{
if(i%2 == 0)
{
document.write("The number "+i+" is even. <BR>");
}
else
{
document.write("The number "+i+" is odd. <BR>");
}
}
</SCRIPT>
</BODY>
Demo with laptop in class!
</HTML>
Output
document.write
displays on browser
displays in popup
alert
<HTML>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
document.write("<H3>Popped up an alert box.<H3>");
alert("Yo!");
</SCRIPT>
</BODY>
</HTML>
Demo with laptop in class!
Input
Use HTML input forms
<FORM NAME=ageForm>
<INPUT TYPE=text NAME=age SIZE=10>
<INPUT TYPE=button VALUE=”Submit Your Age” onClick="calculateAge()">
</FORM>
Consider first input – a text field.
Has type text
input box name
i.e., input stored in that variable!
• Use the variable by calling “document.ageForm.age.value”
Consider second input – a button you click.
form name
Has a variable name of age
User types text or numbers (up to 10 characters).
Runs the JavaScript program called calculateAge()
Actually, this is a method (or function)
Runs after clicked.
value typed by user
Input Example
HTML
JavaScript
<HTML>
<BODY>
<H2>How old are you?</H2>
<FORM NAME= ageForm>
<INPUT TYPE=text NAME=age SIZE=10>
<INPUT TYPE=button VALUE=”Submit Your Age” onClick="calculateAge()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
function calculateAge()
{
var age = document.ageForm.age.value;
if(age<10)
{
alert("You are young.");
}
else
{
alert("You are ancient.");
}
}
</SCRIPT>
</BODY>
</HTML>
Demo with laptop
in class!
Using Two functions
<FORM NAME= ageForm>
<INPUT TYPE=text NAME=age SIZE=10
onFocus=“buzzOff()”>
<INPUT TYPE=button VALUE=”Submit Your
Age” onClick="calculateAge()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
function calculateAge()
{
var age = document.ageForm.age.value;
if(age<10)
{
alert("You are young.");
}
else
{
alert("You are ancient.");
}
}
function buzzOff()
{
alert("Buzz off.");
}
</SCRIPT>
This is the same as the last
example.
But now call two functions!
OnFocus means “when the
cursor is placed here”
Demo with laptop in class!
Java Functions?
Can we do these in java too?
Of course.
Called methods.
Let‟s do it!
