Scribd Logo
Upload

Welcome to Scribd!

  • 30 views

    Networks Worksheet 5

    Uploaded by

    howeqk
    The document describes several JavaScript activities: 1. It demonstrates how to add interactive buttons and content to an HTML page using JavaScript functions. 2. It shows how to validate user input by checking for empty fields and displaying alerts. 3. It explains that using document.write overwrites the entire page, while using it inside a function only overwrites the targeted element. 4. It introduces using arrays in JavaScript by rolling random "dice" values from an array when a button is clicked. Random array items are selected with Math.random() and Math.ceil.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Networks Worksheet 5

    Uploaded by

    howeqk
    30 views3 pages
    The document describes several JavaScript activities: 1. It demonstrates how to add interactive buttons and content to an HTML page using JavaScript functions. 2. It shows how to validate user input by checking for empty fields and displaying alerts. 3. It explains that using document.write overwrites the entire page, while using it inside a function only overwrites the targeted element. 4. It introduces using arrays in JavaScript by rolling random "dice" values from an array when a button is clicked. Random array items are selected with Math.random() and Math.ceil.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes several JavaScript activities: 1. It demonstrates how to add interactive buttons and content to an HTML page using JavaScript functions. 2. It shows how to validate user input by checking for empty fields and displaying alerts. 3. It explains that using document.write overwrites the entire page, while using it inside a function only overwrites the targeted element. 4. It introduces using arrays in JavaScript by rolling random "dice" values from an array when a button is clicked. Random array items are selected with Math.random() and Math.ceil.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    30 views3 pages

    Networks Worksheet 5

    Uploaded by

    howeqk
    The document describes several JavaScript activities: 1. It demonstrates how to add interactive buttons and content to an HTML page using JavaScript functions. 2. It shows how to validate user input by checking for empty fields and displaying alerts. 3. It explains that using document.write overwrites the entire page, while using it inside a function only overwrites the targeted element. 4. It introduces using arrays in JavaScript by rolling random "dice" values from an array when a button is clicked. Random array items are selected with Math.random() and Math.ceil.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 3

    Worksheet 5 JavaScript

    Activity 1:
    1. Copy the Tully Monster.html file and TullyMonster.png to your own file area.

    2. Open Tully Monster.html in a browser. Click on the button labelled ‘Show answer’ –
    what happens? The Tully Monster grew to 35cm long

    3. Open the same file in a text editor such as Notepad or in a web page editing program
    such as Dreamweaver.

    4. Add another paragraph at the end of the <form>. It should say: “Click below to find out
    where it lived.” with the id ‘box2’.

    5. Add a new button to your web page to display the answer “It lived in the tropical
    estuaries of Illinois, USA.”. You can use similar code to the first question.

    Include the code:

    <p id="box2">Click below to find out where it lived.</p>

    6. Test the new button.

    Activity 2: Input and output


    1. Using the same HTML file, add an input box to accept an answer to the question.

    Answer: <input type="text" name="answer">

    2. Save your HTML file and test your changes in a browser. You will notice that at this
    point, any user input is ignored when the button is clicked.

    1
    Validating use input with a JavaScript function

    1. Insert <script> tags at the end of HTML file before the closing </body> tag.

    <script> </script>

    2. Insert a new function called validate within the <script> tags using the code below:

    function validate() {
    var x = document.forms["question"]["answer"].value;
    if (x == "") {
    document.getElementById("box").style.color="red";
    }
    }

    This will later turn the question text red if the answer is left blank.

    3. Change the button onclick action to execute the function:

    <button type="button" onclick="validate()">Show answer</button>

    4. Save the file and refresh the browser. Test the new function.

    5. Add in an else if clause to the IF statement to output an alert box if the answer is correct.

    else if (x == "35cm"){
    alert("Correct!");
    }

    6. Save the file and refresh the browser again. Test the alert function by entering the
    correct answer.

    7. Amend your code using an additional function using the code below to show or hide the
    image. The function syntax is included below:

    function showHide() {
    var x = document.getElementById("monster");
    if(x.style.display == 'block')
    x.style.display = 'none';
    else
    x.style.display = 'block';
    }
    2
    You will need to include a new <div> block around the image called “monster”, and a
    new button to call the function.

    Activity 3: Writing directly to an HTML document

    1. Insert the code: document.write("Goodbye World!"); just inside the opening


    <script> tag of your HTML document from Activity 2. What happens?goes to the right of
    lowest text

    2. Include some HTML element tags within the write statement, for example:
    document.write("<h1>Goodbye World!</h1>");

    3. Now move the same line of code inside a function. Save the file and execute the
    function by clicking on the button. What happens? goes to a new blank page with
    goodbye worldWhy? idk tbh

    Activity 4: Using arrays with JavaScript


    1. Copy the file DiceRoll.html into your own file area.

    2. Open DiceRoll.html in a browser. Click on the button labelled ‘Roll the dice’ – what
    happens?shows random face of dice

    3. Open the same file in a text editor such as Notepad or in a web page editing program
    such as Dreamweaver.

    4. You will be able to see how the JavaScript code works, more specifically how the button
    calling the rollDice() function makes use of the dice array, alongside the behaviour of
    the button ‘Click Me!’

    5. You will see the following line of code in the rollDice() function, which chooses a random
    item in the array:

    var roll = Math.ceil(Math.random() * dice.length);

    You might also like