Creating Web Documents: JavaScript

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 6 μήνες)

275 εμφανίσεις

Creating Web Documents:
JavaScript

Ftp / file management: review

Introduction to JavaScript

Sources

Homework: start review for midterm,
work on Project II, start reading about
JavaScript in HTML text

Uploading using ws_ftp


Use ws_ftp command mkdir to construct
directories for each of your projects:
project1, project2, project3.


Double click so the project1 directory is
what is shown on the right. Upload your
project1 files to this directory.


Rename the html file to index.htm.


Repeat for project2 and project3

File management


It may be appropriate to have a more
complex structure than a single
directory/folder for a Web site.


You can still use relative addressing (that is,
not absolute addressing with http://)


src="/models/heart.jpg"


href="../biblio.htm"
biblio.htm in parent folder


href="../project1/notes.htm"

heart.jpg in subfolder models

notes.htm in
subfolder of
parent folder


JavaScript


Scripting language used in browsers: not ‘full’
programming language.


Becoming more standardized, but still
discrepancies between versions.


Provides some computation, manipulation of
display, customization


(Repeat commercial for follow
-
on courses:
Creating Dynamic Web Documents & Creating
Databases for the Web)

Location of JavaScript


Mostly in the head section of HTML file, use
script tags and then enclose in comments

<script language="JavaScript">

<!
--


document.write("Hello World!");


//
--
>


</script>


Some JavaScript would be in the body, generally
inside <a …> or <img…> tags. These are often
calls to functions.

External JavaScript


Write one set of JavaScript functions and
use in many HTML pages


<script language="JavaScript"
src=“functions.js">

</script>

Elements of JavaScript


Typical programming elements:


variables, operators, expressions, statements,
definition of functions


Connection to Web


built
-
in functions (e.g., Date())


Document Object Model = names of ‘things’,
properties, methods (e.g., document.write)


events (e.g., onSubmit, onMouseOver)

Variable

… is something that holds a value, a value
being a string of characters, a number, a set
of things (such as strings or numbers).

Examples:


5


2.50


"Purchase College"


"bird.gif"


Statements


Programs ‘flow’ from statement to
statement


Simple statements


Assignment (setting the value of a variable)


calls to procedures


Certain statements are compound
statements, with the statements ‘inside’
operating depending on certain rules


Loops, conditionals (If, switch)


Punctuation (brackets, semicolons) can be
tricky!

Exercises


Start NotePad and copy the following
examples (you can keep adding code). Save
as js.html. Open in Netscape.

Example

<html>

<head>

<title> JavaScript 1 </title>

<script language="JavaScript">

document.write("<h1>This is it. </h1>");


document.write(Date());

</script>

</head>

<body>

This is the rest of the page.

</body>

</html>


Modified example

<html>

<head>

<title> JavaScript 1 </title>

<script language="JavaScript">

var s = "Hello ";

document.write(s);


document.write(Date());

document.write("<br><h1>" + s + "</h1>");

</script>

</head>

<body>

This is the rest of the page.

</body> </html>



Recap of example


JavaScript code in the head section (NOT
within a function definition
--
example of this
later in notes). This gets
executed
(done,
performed) before anything else.


document.write(
something
)

puts
the something at the start of the html page.
Try other possibilities:

document.write("<font color=red>
hello </font>");



Using built
-
in functions, variables

<html> <head> <title> JavaScript 1 </title>

<script language="JavaScript">

<!
--

var rawDate = Date();

var mon = rawDate.substr(4,3);


document.write("The month is ");


document.write(mon);


//
--
>

</script> </head>

<body>

<br>

This is the rest of the page.

</body> </html>

Variable set to what
Date() returns.

Extract the
month.

Set event handler to set status bar

<html> <head> <title> JavaScript 1 </title> </head>

<body>


This is the rest of the page.

<a href="http://rachel.ns.purchase.edu/~kpiastro/project1"

onMouseOver="status= 'This is where our stuff will be'; return true;"

>

Kristina's page </a>

</body>

</html>


Note single
quotes inside
double quotes

This lets the
hyperlink take
place.

This is an
event.

<html> <head> <title> JavaScript 1 </title> </head>

<body>


This is the rest of the page.

<a

href="http://rachel.ns.purchase.edu/~kpiastro/project1"

onMouseOver="status= 'This is where our stuff will be';
return true;"

onMouseOut="status='Good bye';return true;"

>

Kristina's page </a>

</body>

</html>


if test


The if statement allows you/the code to check a
condition and if the condition is true, do
something and if the condition is not true, do
something else (or do nothing)

if (condition) { any number of statements}


if (condition) { any number of statements}

else { any number of statements}



Form verification example


Show in two parts:


a verify function written in the head section


the form itself, with the call to verify part of the
onSubmit event handler

<html>

<head><title>Form example </title>

<script language="JavaScript">

function verify(f)

{


if (f.lname.value == null || f.address.value == null)

{ alert("Form needs a last name and an address");


return false;

}

if (f.lname.value == "" || f.address.value == "")

{ alert("Form needs a last name and an address");


return false;

}

return true;


}

</script> </head>

<body>

<h1> Address Information </h1> <br>

<form method=post enctype="text/plain" action="mailto:jeanine.meyer@purchase.edu"

onSubmit="return verify(this);">


First Name: <input type="text" name="fname">

Last Name: <input type="text" name="lname"> <br>

Street Address: <input type="text" name="address" size=30>

Town/City: <input type="text" name="city">

State: <select name="state" size=1>

<option value="NY" selected> New York

<option value="NJ"> New Jersey

<option value="CT"> Connecticut

<option value="PA"> Pennsylvania

</select> <br>

Status: <input type="radio" name="status" value="R"> Returning client

<input type="radio" name="status" value="N"> New client

<hr> Thank you <p>

<input type="submit" value="Send information">


</form> </body> </html>

Learning to fish….


Many on
-
line sites with examples of
JavaScript


You do need to review what you find (you
don't want to eat anything you hook….)


Go to google.com and put in:

JavaScript Date Time


Create an example that displays: "Class is
nearly over" when the time is past 1pm.

Sources


Textbook


www.webmonkey.com


Go to google (search site) and put in
JavaScript Tutorial for many tutorials


Use View to see HTML source

Homework


I have posted a mid
-
term study guide under
Course Documents. Prepare for midterm:


basic HTML tags


vocabulary / concept list


questions (relating to postings, discussion)


Work on Project II.