ملخص تقنية تصميم صفحات الويب - الوحدة الرابعة

2
1. <html>
2. <head>
3. <title>vbs controls</title>
4. </head>
5. <body>
6. <h1></h1>
7. <center>
8. <table>
9. <tr>
10.<td><input type="text" name="txt1" value="check this"></td>
11.<td><input type="checkbox" name="box1" value="checkbox
">checkbox</td>
12.</tr>
13.<tr>
14.<td><input type="text" name="txt1" value="click this radio"></td>
15.<td><input type="radio" name="rad1" >radio button</td>
16.</tr>
17.<tr>
18.<td><input type="text" name="txt1" value="enter your password"></td>
19.<td><input type="password" name="pass1" value=""></td>
20.</tr>

3
21.<tr>
22.<td><input type="button" name="btn1" value="this is button
control"></td>
23.<td><input type="reset" name="reset1" value="click me to clear all
controls"></td>
24.</tr>
25.</table>
26.</center>
27.<script language="vbscript">
28.sub btn1_onclick()
29.dim message
30.message="your pass is "&pass1.value
31.msgbox message,0,"sdf"
32.end sub
33.sub reset1_onclick()
34.pass1.value=""
35.box1.checked=false
36.message=" .. "
37.msgbox message,0
38.end sub
39.</script>
40.</body>
41.</html>

4
1. <html>
2. <head>
3. <title>2 </title>
4. </head>
5. <body>
6. <input type="button" name="btn1" value="click me and watch
the change">
7. <script language="vbscript">
8. sub btn1_onclick
9. btn1.value=""
10.end sub
11.</script>
12.</body>
13.</html>

5
1. <html>
2. <head>
3. <title></title>
4. </head>
5. <body>
6. choose a color
7. <table border>
8. <tr><td><input type="checkbox" name="chk1" value="red">red</td>
9. <td><input type="checkbox" name="chk2" value="yellow">yellow</td>
10. </tr>
11. <tr>
12. <td><input type="checkbox" name="chk3" value="green">red</td>
13. <td><input type="checkbox" name="chk4" value="blue">blue</td>
14. </tr>
15. </table><br><br>
17. sub chk1_onclick
18. dim message
19. message="your favourite color is " &chk1.value

6
20. msgbox message,0
21. chk1.checked=false
22. end sub
24. dim message
28. end sub
30. dim message
34. end sub
36. dim message
40. end sub
41. </script>
42. </body>
43. </html>

7
1. <html>
2. <head>
3. <title> </title>
4. </head>
5. <body>
6. <input type="button" name="B1" value="click me to focus to the name field">
7. <br>
8. <input type="button" name="B2" value="click me to move focus a way from the name
field">
9. <br>
10. <input type="button" name="B3" value="click me to select the address field ">
11. <br>
12. <input type="text" name="myname" value="this is the name field "> <br>
13. <input type="text" name="address" value="this is the address field "> <br>
15. sub B1_onclick
16. myname.focus
17. end sub
18. sub B2_onclick
19. myname.blur
20. end sub
21. sub B3_onclick
22. address.select
23. end sub
24. </script>
25. </body>
26. </html>

8
1. <html>
2. <head>
3. <title></title>
4. </head>
5. <body>
6.
7. <select name="colors">
8. <option>red</option>
9. <option>blue</option>
10. <option>yellow</option>
11. <option>green</option>
12. </select>
13. <input type=button name=B1 value="I know that color you like">
15. sub B1_onclick
16. select case colors.selectedIndex
17. case 0
18. msg="you selected red"
19. case 1
20. msg="you selected blue"
21. case 2
22. msg="you selected yellow"
23. case 3

9
24.msg="you selected green"
25.end select
26.msgbox msg
27.end sub
28.sub colors_onchange
29.select case colors.selectedIndex
30.case 0
31.msg="you selected red"
32.case 1
33.msg="you selected blue"
34.case 2
35.msg="you selected yellow"
36.case 3
37.msg="you selected green"
38.end select
39.msgbox "you change your mind " &msg
40.end sub
41.</script>
42.</body>
43.</html>

10
1. <html>
2. <head>
4. sub b1_onclick()
5. document.write("this is new page")
6. end sub
7. </script>
8. <title></title>
9. </head>
10. <body bgcolor="pink">
11. <p>you will get new page if you click</p>
12. <input type="button" name="b1" value="click me">
13. </body>
14. </html>

11
1. <html>
2. <head>
3. <script language=vbscript>
4. sub wellcome()
5. alert("wellcome to this page please read it carefully")
6. end sub
7. sub thankyou()
8. alert("thank you for visiting this page")
9. end sub
10.</script>
11.<title></title>
12.</head>
13.<body onload="call wellcome" onunload="call thankyou()">
14.<p>when you load the page you an alert box pops up to wellcome you
and another box to thank you</p>
15.</body>
16.</html>

12
1. <html>
2. <head>
3. <title></title>
4. </head>
5. <body>
6. <p>this example shows validation techniques</p>
7. <form name="formvalidation">
8. <table>
9. <tr>
10.<td>please enter your age:</td>
11.<td><input type="text" name="age" size="2">
12.<tr>
13.<td><input type="button" name="cmdsub"
value="submit"></td>
14.<td></td>
15.</tr>

13
16.</table>
17.<script language="vbscript" for="cmdsub" event="onclick">
18.if (len(document.formvalidation.age.value)=0) then
19.msgbox"you must enter your age befor submitting"
20.elseif(not(isnumeric(document.formvalidation.age.value))) then
21.msgbox"you must enter a number for your age"
22.elseif(document.formvalidation.age.value>100) then
23.msgbox "please enter a value between 0 and 100"
24.else
25.msgbox "thanks for providing your age."
26.document.formvalidation.submit
27.end if
28.</script>
29.</form>
30.</body>
31.</html>

14
1. <html>
2. <head>
3. <title></title>
4. </head>
5. <body>
6. <img src="bird.gif" width="50" height="80">
7. <img id="image1" src="bird.gif" width="50" height="80">
9. w=document.getElementById("image1").width
10.h=document.getElementById("image1").height
11.document.getelementbyid("image1").width=2*w
12.document.getelementbyid("image1").height=2*h
13.</script>
14.</body>
15.</html>

15
1. <html>
2. <head>
3. <script language=vbscript>
4. sub enlargeimage()
5. document.getElementById("myimage").width=2*document.getElementById("myi
mage").width
6. document.getElementById("myimage").height=2*document.getElementById("my
image").height
7. end sub
8. sub reduceimage()
9. document.getElementById("myimage").width=document.getElementById("myim
age").width/2
10. document.getElementById("myimage").height=document.getElementById("myim
age").height/2
11. end sub
12. </script>
13. <title></title>
14. </head>
15. <body>
16. <img id="myimage" onmouseover="call enlargeimage()"
17. onmouseout="call reduceimage" border="0" src="bd_2lg.gif" width="60"
height="95"/>
18. <p>click it</p>
19. </body>
20. </html>

ملخص تقنية تصميم صفحات الويب - الوحدة الرابعة

More Related Content

What's hot (17)

Similar to ملخص تقنية تصميم صفحات الويب - الوحدة الرابعة (20)

More from جامعة القدس المفتوحة (20)

Recently uploaded (20)

ملخص تقنية تصميم صفحات الويب - الوحدة الرابعة