Building and Managing Web Sites

coordinatedcapableΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 10 μήνες)

80 εμφανίσεις

CSC96B

1

CSC 96

Building and Managing Web Sites
with Microsoft Technologies

Week 9

Javascript

CSC96B

2

Client
-
side Scripting


Client
-
side scripting uses simplified programming
languages to add interactivity and conditional
behavior to web pages.


Interactivity achieved by embedding code in
HTML that manipulates browser’s document
object model. Code triggered by events.


Client
-
side scripting requires the browser to
support the scripting language.


Javascript is THE standard for Internet pages.


VBScript can be used in Intranets or other
environments where users only use IE3.01 + .

CSC96B

3

Javascript Overview


Javascript is NOT Java.


Javascript embedded in documents using
inline scripts or the <SCRIPT> element.


Preferred method is with <SCRIPT>
elements and functions.


Javascript triggered by events
--

called
event handlers.

CSC96B

4

Javascript Events


Mouse events caused by the user (e.g.,
onMouseOver, OnMouseOut, OnClick)


Keyboard events caused by the user (e.g.,
onKeyDown, onKeyPress) [HTML 4.0 standard]


Document events


Document level (onLoad, onUnload)


Forms (OnSubmit, OnReset)


Form elements (onBlur,onSelect, OnChange)


CSC96B

5

Javascript Overview


Javascript standard is now ECMAScript.


Javascript comes in many flavors. Version 1
and 1.1 should work ok on most browsers.


Javascript is the foundation of Dynamic
HTML.


CSC96B

6

<
script
Language="
javascript
"
>

<!
--

function EmptyAlert(theField,s)

{


if ((s == null) || (s.length == 0))


{

alert(theField.name + " must be
completed.")



theField.focus()



return false


}

}

--
>

<
/script
>

...

<
input
type="
text
" name="
YourName
" size="
30
"
onblur="
EmptyAlert(this,this.value)
"
>

CSC96B

7

<SCRIPT LANGUAGE=JAVASCRIPT>

function OpenWindow()

{


window.status = "";



strFeatures =
"toolbar=no,location=no,directories=no,status=yes,sc
rollbars=yes,resizeable=yes,copyhistory=no,top=100,l
eft=100,width=500,height=300";



objNewWindow =
window.open("http://www.ciwmb.ca.gov/wpie/request.ht
m", "RequestWindow", strFeatures);



window.status = "Open WPIE Item Request Form";

}

</SCRIPT>

...

<A HREF="javascript: OpenWindow()")>Submit</A>

CSC96B

8

Another Example

<SCRIPT LANGUAGE=JAVASCRIPT>

function closewindow(which)

{


self.window.close()

}

</SCRIPT>

...

<p><a HREF="javascript: closewindow()"><b>Return

to Search Page</b></a></p
>

CSC96B

9

Inline Javascript

<html>

<head>

<title>Javascript Status bar</title>

</head>

<body>

<h2>
Test Page
</h2>

<a href=
"valtara.com"

OnMouseOver=
"window.status='Great
site!';return true;"
>
Valtara.comm
</a>

</body>

</html>

CSC96B

10

Javascript Considerations


Lots of sample code
--

learn the basics and copy,
copy, copy!


Microsoft vs. Netscape Javascript incompatibilites
are significant. Test, test, test!


Much documentation not good at showing
versioning problems.


If you go into DHTML and need cross
-
browser
support, use Dreamweaver or similar products.

CSC96B

11

Javascript Resources


ECMAScript specification


http://www.ecma.ch/STAND/Ecma
-
262.htm


Netscape DevEdge


http://developer.netscape.com/


Microsoft MSDN Scripting Page


http://msdn.microsoft.com/scripting/