c122oct2714.notebookcisweb.bristolcc.edu/~pgrocer/audio_smartboard14/cis122/...of beige. onfocus can...
Post on 16-Apr-2018
216 Views
Preview:
TRANSCRIPT
c122Oct2714.notebook
1
October 27, 2014
I have two images and I am bringing each of them up using mouse activity.Note that the information about onmouseover and onmouseout is withinthe <img> tag.
c122Oct2714.notebook
2
October 27, 2014
Another approach is using the <a href to handle the onmouseover and onmouseout. Note that I still have the same name for the image.
c122Oct2714.notebook
3
October 27, 2014
Comparing to a third option
c122Oct2714.notebook
4
October 27, 2014
Going back and looking at HTML5 forms, remember that we had the submit and reset which were bottons.
Now we have an onclick event which means that we can set upa button to click on and then code what we want to happen usingthe onclick event.
c122Oct2714.notebook
5
October 27, 2014
c122Oct2714.notebook
6
October 27, 2014
In this example I have an alert and multiple changes of background color.Note that on the one where there is both a onmouseover and onmouseout that both events are within the <a> tag and there is just one line saying CHANGE BACKGROUND! that these two events are tied to.
c122Oct2714.notebook
7
October 27, 2014
A different approach to the same code. This time I have a paragraph to click on.
c122Oct2714.notebook
8
October 27, 2014
Notice that with this approach I can still put my mouse over and out from these paragraphs but there is not the usual indication thatthese will cause an event to happen.
c122Oct2714.notebook
9
October 27, 2014
c122Oct2714.notebook
10
October 27, 2014
c122Oct2714.notebook
11
October 27, 2014
c122Oct2714.notebook
12
October 27, 2014
I went back and changed the course name so nowI am seeing "The data has been changed" again.
c122Oct2714.notebook
13
October 27, 2014
c122Oct2714.notebook
14
October 27, 2014
c122Oct2714.notebook
15
October 27, 2014
c122Oct2714.notebook
16
October 27, 2014
Again, just using the <p onclick does not make it clearthat this line should be clicked on (unless you read it and even then it somehow feels funny).
c122Oct2714.notebook
17
October 27, 2014
c122Oct2714.notebook
18
October 27, 2014
onFocus or onfocus when associated with body appears to act the same as onload. Here when the page starts it has the focus and the background of beige. onfocus can also be used to focus on individual areas of the form like a textbox.
c122Oct2714.notebook
19
October 27, 2014
c122Oct2714.notebook
20
October 27, 2014
c122Oct2714.notebook
21
October 27, 2014
Starting Functions
c122Oct2714.notebook
22
October 27, 2014
c122Oct2714.notebook
23
October 27, 2014
Call the function basicHelloWorld().Within that function the alert is displayed.I decided to put the script that holds the functionin the head section. I could also put it in thebody (frequently they are placed at the bottom).
c122Oct2714.notebook
24
October 27, 2014
c122Oct2714.notebook
25
October 27, 2014
I am sending the literal Ann to the function. It is received as passedName.
c122Oct2714.notebook
26
October 27, 2014
c122Oct2714.notebook
27
October 27, 2014
c122Oct2714.notebook
28
October 27, 2014
c122Oct2714.notebook
29
October 27, 2014
c122Oct2714.notebook
30
October 27, 2014
firstName received in firstReceived and lastNamereceived in lastReceived. Note that in these examplesI am putting out the response in the function.
c122Oct2714.notebook
31
October 27, 2014
I have been coding with prompts and alerts because they are quick and easy, but it is really better not to rely on popups. It is far better to take in the information from fields on the form.
c122Oct2714.notebook
32
October 27, 2014
Still putting information out with an alert. We willchange that in a moment.
c122Oct2714.notebook
33
October 27, 2014
Information comes in from the form. I use the onclickto call the function and I send the information fromthe textboxes on the form.
Notice that when I use the data I have to specify that I wantthe value of the field. Value is one of the properties and theproperty I need to work with when I am doing a calculation.
c122Oct2714.notebook
34
October 27, 2014
Now I am putting the result in nameOut but I need to specify where it is it is on the document, on the info form and the field is nameOut.
c122Oct2714.notebook
35
October 27, 2014
If I do not send information then I need to be specificabout the location of all the fields on the form.
c122Oct2714.notebook
36
October 27, 2014
Here I sent nameOut to the function even though it was empty. In the function I assign a value to it.
c122Oct2714.notebook
37
October 27, 2014
onclick I do the afunction sending aname to it. It is received as info.
c122Oct2714.notebook
38
October 27, 2014
c122Oct2714.notebook
39
October 27, 2014
c122Oct2714.notebook
40
October 27, 2014
I call basicHello and send it three fields of data.
I receive the data and assign the value to nameOut that is Hello concatenating withwhat is returned from the function catNames.The full name is returned and so I say Hello concatenated with the fullName returned from catNames.
c122Oct2714.notebook
41
October 27, 2014
c122Oct2714.notebook
42
October 27, 2014
Interesting approach where onclick I do the JavaScript shown.
c122Oct2714.notebook
43
October 27, 2014
My favorite: call the basicHello and send the data. When I have created the msg, I return it and it gets assigned to nameOut.value.
c122Oct2714.notebook
44
October 27, 2014
c122Oct2714.notebook
45
October 27, 2014
c122Oct2714.notebook
46
October 27, 2014
I call the function calc and send it three numbers. I then return the number I get in the formula. The 6 gets assigned to ans.
c122Oct2714.notebook
47
October 27, 2014
The difference is that I am sending up the responses tothe prompts.
c122Oct2714.notebook
48
October 27, 2014
Now I am using data from text boxes and I am sending the value to the function. Essentially at some point I need to get the value. I can get it before I send or after I receive when I use.
c122Oct2714.notebook
49
October 27, 2014
c122Oct2714.notebook
50
October 27, 2014
If I do not use value, this is what I will see.
c122Oct2714.notebook
51
October 27, 2014
Note that I took value offnum1 and did not use valuein the function. This is theoutput I got.
c122Oct2714.notebook
52
October 27, 2014
c122Oct2714.notebook
53
October 27, 2014
Now I put the value in when I did the alert and when I did the return and it worked.
Again note that what is returned from thefunction is assigned as the result value.
c122Oct2714.notebook
54
October 27, 2014
c122Oct2714.notebook
55
October 27, 2014
c122Oct2714.notebook
56
October 27, 2014
c122Oct2714.notebook
57
October 27, 2014
Using bgColor is no longer the way to code.
c122Oct2714.notebook
58
October 27, 2014
c122Oct2714.notebook
59
October 27, 2014
Cancel will get me out becauseI check for user_input != nullto determine to process.
If it is null I break from the inner loop and set i to 4 so that when I return to the outer loop I will find that is is not <= 3 so I will quit.
c122Oct2714.notebook
60
October 27, 2014
I can also set a flag when I break out of the inner loop and just before I go back to the outer loop check it and determine that I should break out of the outer loop if the flag is set to Y.
c122Oct2714.notebook
61
October 27, 2014
I now want to change this so if the answer is wrong I willstay with it until the correct answer is entered.
c122Oct2714.notebook
62
October 27, 2014
One way to do it.
top related