Slightly more advanced JavaScript

Size: px

Start display at page:

Download "Slightly more advanced JavaScript"

Clementine Price
7 years ago
Views:

1 Slightly more advanced JavaScript

2 onclick attribute A lot of HTML elements can be given the onclick attribute. This allows for something to happen when the element is clicked. A simple use of the onclick attribute is to display an alert, which does not even require writing any extra JavaScript code. <h1 onclick="alert('hello!')">a heading</h1>

A simple use of the onclick attribute is to display an alert, which does not

3 onclick attribute A more common use for the onclick attribute is to call a function. <input type="button" value="click me" onclick="myfunction()">

4 Finding and modifying elements To find some specific element on the page, use document.getelementbyid("someid"); To change the content of some element, use someelement.innerhtml=somethingelse;

5 Changing content of a paragraph <script type="text/javascript"> function change() { var myparagraph = document.getelementbyid("p1"); myparagraph.innerhtml="new text."; } </script> <p id="p1">old text.</p> <input type="button" value="change text" onclick="change()">

getelementbyid("p1"); myparagraph.innerhtml="new text.

6 Shorter version <script type="text/javascript"> function change() { document.getelementbyid("p1").innerhtml="new text."; } </script> <p id="p1">old text.</p> <input type="button" value="change text" onclick="change()">

7 Introducing conditions Sometimes, we may want something to happen only if a certain condition is satisfied. For this purpose, we use the if statement. if (some condition) { some action } else { some other action }

satisfied. For this purpose, we use the if statement.

8 Introducing conditions Usually, the condition part in the parentheses is some equality or inequality. Equality is checked with ==. For example, a condition might be: if (mystring=="chocolate") { p3.innerhtml="tasty"; }

9 Modifying attributes of elements To change the attribute of some element, use element.attribute="something else"; p1=document.getelementbyid('p1'); p1.style="color:red"; img3=document.getelementbyid('logo'); img3.src="logo2.png";

10 Changing attributes example <script type="text/javascript"> function changecolor() { document.getelementbyid("heading").style="color:blue"; } </script> <h1 id="heading" style="color:red" onclick="changecolor()">heading</h1>

11 Changing attributes example <script type="text/javascript"> function changelink() { mylink=document.getelementbyid("link"); if (mylink.innerhtml == "Link to Google") {mylink.href=" mylink.innerhtml="link to Yahoo";} else {mylink.href=" mylink.innerhtml="link to Google";} } </script> <a href=" id="link">link to Google</a> <br> <br> <input type="button" value="change Link" onclick="changelink()">

innerhtml="link to Yahoo";} else {mylink.href="http://www.google.com"; mylink.

12 More complex example For the next example, we will create a multiple choice quiz which grades itself. We have all the tools we need to do this, except the following one: Given a checkbox or radio button, the.checked method returns true if the checkbox or radio button is checked, and false if it is not checked.

We have all the tools we need to do this, except the following one: Given a

13 More complex example First, we create the outline of a question with 4 answers: <h3>quiz</h3> <p>question 1</p> <p> <input name="question1" type="radio">choice 1<br> <input name="question1" type="radio">choice 2<br> <input name="question1" type="radio">choice 3<br> <input name="question1" type="radio">choice 4<br> </p>

1<br> <input name="question1" type="radio">choice 2<br> <input name="question1"

14 More complex example In an actual quiz, this may look something like: <h3>quiz</h3> <p>which of the following countries is <em>not</em> in Africa?</p> <p> <input name="question1" type="radio">egypt<br> <input name="question1" type="radio">angola<br> <input name="question1" type="radio">ecuador<br> <input name="question1" type="radio">tanzania<br> </p>

</p> <p> <input name="question1" type="radio">egypt<br> <input name="question1"

15 More complex example We will then give an id attribute to the correct answer choice. <p> <input name="question1" type="radio">egypt<br> <input name="question1" type="radio">angola<br> <input name="question1" type="radio" id="correct1">ecuador<br> <input name="question1" type="radio">tanzania<br> </p>

<p> <input name="question1" type="radio">egypt<br> <input name="question1"

16 More complex example We continue doing this for every question. Eventually, we have several questions, and each question has one input element (the one containing the correct answer choice) with an id. We then insert a button to count how many correct answers were selected, and a blank paragraph which will display the number of correct answers once this number is calculated. <input type="button" onclick="myfunction()" value="submit Answers"> <p id="result"></p>

17 More complex example We can now start writing the script to calculate the number of right answers. First, we declare variables which have initial values of true if the radio button containing the right answer for the corresponding question was checked, and false if the radio button was not checked. <script type="text/javascript"> function myfunction() { var q1=document.getelementbyid("correct1").checked; var q2=document.getelementbyid("correct2").checked; var q3=document.getelementbyid("correct3").checked; var q4=document.getelementbyid("correct4").checked;

was checked, and false if the radio button was not checked. <script type="text/javascript"> function myfunction() { var q1=document.

18 More complex example Now, we go through all these variables, and add 1 to the final score for every variable with value true. var score=0; if (q1==true) {score=score+1;} if (q2==true) {score=score+1;} if (q3==true) {score=score+1;} if (q4==true) {score=score+1;}

var score=0; if (q1==true) {score=score+1;} if (q2==true)

19 More complex example Finally, we will display the total score in the blank paragraph with id result. document.getelementbyid("result").innerhtml = "Your score is " + score + " out of 4."; } </script>

20 More complex example This is not the most efficient possible way to create a self-grading quiz, and there are more complex loops and methods which would be more elegant and appropriate for this task. Also, more functionality could be added, like notifications for which questions were gotten wrong, and what the right answers are. This exercise just serves as a brief demo of the few tools we learned.

Also, more functionality could be added, like notifications for which questions were gotten wrong,

c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form.

c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form. Practice Problems: These problems are intended to clarify some of the basic concepts related to access to some of the form controls. In the process you should enter the problems in the computer and run