Podstawy tworzenia stron WWW

Transcript Podstawy tworzenia stron WWW

JavaScript
Bartosz Sakowicz
JavaScript - basics
JavaScript is used in millions of Web pages to improve the design,
validate forms, detect browsers, create cookies, and much more.
JavaScript is the most popular scripting language on the internet,
and works in all major browsers, such as Internet Explorer, Mozilla,
Firefox, Netscape, Opera.
JavaScript – basics (2)
•JavaScript was designed to add interactivity to HTML pages
•JavaScript is a scripting language
•A JavaScript is usually embedded directly into HTML pages
•JavaScript is an interpreted language
•It is free
Java != JavaScript !!!
JavaScript - examples
<html>
<body>
<script type="text/javascript">
<!–
document.write(“It is JavaScript!")
//-->
</script>
</body>
</html>
<html><head>
JavaScript – examples(2)
<script type=“text/javascript”>
function pushbutton() {
alert(“Hello!");
}
</script></head><body>
<form>
<input type="button" name="hello" value=“Hello"
onclick="pushbutton()">
</form>
</body></html>
<html><head>
JavaScript – examples(3)
<script type=“text/javascript”>
function getname(str) {
alert("Hi, "+ str+"!");
}
</script></head><body>
<p>Enter your name:</p>
<form>
<input type="text" name="name" onblur="getname(this.value)"
value="">
</form></body></html>
Inserting JavaScript
1) <head> section (as in previous transparencies)
2) Inline scripts:
<body> <script type="text/javascript"> .... </script> </body>
3) External file:
<head>
<script src=“menu.js"></script>
</head>
Hierarchy of objects
Location
Anchor
B utton
C heckbox
Hidden
W indow
Navigator
Document
History
Link
Pass word
Form
R adio
Image
R es et
Select
Submit
Text
Textarea
Basics usage of objects
a) With dot (.) – the same as in C++ (preferred way)
b) With usage the table of properties of object, eg:
document[1] – useful with loops
c) With usage of association table:
document["href"]
Expressions & operators
x=7; // variables doesn’t have type!
str = “Some text";
(bool1 == true) && (bool2 == false);
str = “Some" + " text";
All the operators are identical as in C++/Java.
Control flow statements
Statement
Example usage
break
continue
for(i=1; i<5; i++) {
// expressions
break; }
The same as break.
for
See break..
for..in
for (i in obj) {// expressions}
goto
goto label1;
if..else
if(condition) {// expressions if true } else {// expressions if false }
return
function sum(a,b) {x=a+b; return x;}
while
do-while
with
while(condition) {//expressions}
do { //expressions } while (condition)
with (document) {
write " Some text "; }
Events - onload and onUnload
Events are triggered when the user enters or leaves the page.
The onload event is often used to check the visitor's browser type
and browser version,
Events are often used to deal with cookies that should be set when a
user enters or leaves a page.
Eg:
<body onload="DoSthonload">
<body onunload="DoSthonunload">
Events - onFocus, onBlur and onChange
Events are often used in combination with validation of form fields.
Eg:
<input type="text" size="30“
id="email" onchange="checkEmail()">;
Events - onSubmit
Event is used to validate all form fields before submitting it.
Eg:
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
Events - onMouseOver and onMouseOut
Events are often used to create "animated" buttons, eg:
<html><head>
<script type=“text/javascript”><!-function changeImage(i,j) {
document.images[i].src = “image"+j+".gif";
}--></script></head><body>
<a
href=
"doc.htm"
onmouseover="changeImage(0,2)"
onmouseout="changeImage(0,1)">
<img
src=“image1.gif"
alt=“image1"/></a>
<a
href=
"doc.htm"
onmouseover="changeImage(1,2)"
onmouseout="changeImage(1,1)">
<img
src=“image1.gif"
alt=“image1"/></a></body></html>

Podstawy tworzenia stron WWW

Transcript Podstawy tworzenia stron WWW

Directory