Presentation is loading. Please wait.

Presentation is loading. Please wait.

Forms and Java script. Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script,

Similar presentations


Presentation on theme: "Forms and Java script. Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script,"— Presentation transcript:

1 Forms and Java script

2 Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script, PHP

3 Creating a form

4 Please share any suggestions or comments with us: Comments?

5 Creating a form The field with the NAME attribute equal to comments had a VALUE equal to Comments? This is my comments The field with the NAME attribute equal to submit had a VALUE equal to Order Bed

6 Creating an email form Please share any suggestions or comments with us: Comments?

7 Creating GUI component Textbox: Radio button King Queen

8 Creating GUI component Creating checkboxes Foodboard Drawers

9 Adding hidden field to a form Why do we need hidden fields? –To keep the status of the program –To transfer data between different forms

10 Java scripts Two types of scripts: –Automatically executed –Event-driven

11 Automatic script Example: Adding date and time to the web site

12 Automatic script time.js: document.write(" "+Date()+" ")

13 Alert box

14 Code <input type="button" value="Open Alert Box" onClick='alert("Welcome to our first alert box. Press OK to contine.")'>

15 Practice 1.Open Textpad and cut & paste this code Java script page /title> And save it as script.html

16 Practice 2. Insert HTML and Java script code to : - set up a simple form, as shown below. If a user clicks on “Send comments” button, the comment should be sent to your email address - add an alert box

17 Creating a button that Executes a script

18 Code What time is it?

19 Changing an Image when a visitor points

20

21

22 Code "Have you ever been in Wisconsin?". See the beautiful picture, please point to it to see how long it will last.

23 Controlling a New Windows’s size An FBI agent must go undercover in the Miss United States beauty pageant to prevent a group from bombing the event. Sandra Bullock

24 Variables in java script String: “How are you”: a series of characters inside quote marks Number: 4,5: any number not inside quote marks Boolean: true/false Null: null Create a variable: var myVar = 45 var myString=“How are you”

25 If/then statement if (condition) { statement[s] if true } If (condition) { statement if true } else { statement if false }

26 Repeat loops for ([init expression];[condition];[update expression]) { statements inside loop } Example: for (var i=startValue; i< maxValue; i++) { statements inside loop }

27 Function function functionName([parameters]) { statements }

28 Example

29 Code var newWindow function makeNewWindow() { newWindow = window.open("","","HEIGHT=300,WIDTH=300") } function closeNewWindow() { if (newWindow) { newWindow.close() }

30 Code

31 Practice 1.Open Textpad and cut & paste this code Java script page /title> And save it as script.html

32 Practice 2. Use google search engine to download 3 pictures (let’s call them pic1, pic2 and pic3). Insert HTML and Javascript code so that: - Pic1 is displayed in the middle of the screen. If a user moves his mouse over pic1, pic2 will be displayed there instead. If the user moves the mouse out of pic2, pic3 will be displayed there instead. 3. Adding date and time to your web page


Download ppt "Forms and Java script. Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script,"

Similar presentations


Ads by Google