EWD T1

Home > Preview

The flashcards below were created by user slc53 on FreezingBlue Flashcards.


  1. basic html
    • <!DOCTYPE html>
    • <html>
    •     <head>
    •         <meta charset="UTF-8">
    •         <title></title>
    •     </head>
    •     <body>
    •         <?php        // put your code here
    •         ?>
    •     </body>
    • </html>
  2. Use JS to create a form to collect text when a button is clicked. When the button is clicked the data should be displayed.
    • <body>
    •     <form id="demoForm" action="" >
    •         <input type="text" name="data"/>
    •         <button onclick="showData()">
    •              Show Data
    •         </button>
    •     </form>
    •     <script type="text/javascript">
    •        function showData()
    •        {
    •          alert(demoForm.data.value);
    •        }
    •     </script>
    • </body>
  3. form element
    • <form id="demoForm" action="" >
    • </form>
  4. textbox for input
    <input type="text" name="data"/>

    self closing
  5. event handler button
    • <button onclick="showData()">
    •     Show Data
    • </button>
    • <script type="text/javascript">
    •     function showData()
    •           {
    •             //some code ;
    •           }
    • </script>
  6. What goes in the alert to display the data.

    <form id="demoForm" action="" >
        <input type="text" name="data"/>
        <button onclick="showData()">
              Show Data
        </button>
    </form>
    <script type="text/javascript">
       function showData()
          {
                alert(?????????????????????);
          }
    </script>
    alert(demoForm.data.value);
  7. table
    drop down list and select
    push
    document.write....
  8. style a td element- no inline nor separate file
    • <head>
    •         <meta charset="UTF-8">
    •         <title></title>
    •         <style type="text/css" >
    •           td {padding: 0.5cm}
    •         </style>
    • </head>
  9. style an h1 element inline
    <h1 style="text-align: center ">Table Demo</h1>
  10. // Define list (array) of items using JSON notation.
    • var itemList=[{item:"Milk", price:"4.50"},{item:"Bread", price:"2.75"}
    • ];
  11. create a table
    • <table id="theTable" border="1"
    •      style="margin:auto;font-size: 24pt;
    •      padding: 0.5cm;">
    • </table>
    • <script type="text/javascript">
    • // Add two rows with fixed data to the table  theTable.innerHTML = "";          theTable.innerHTML +=
    • "<tr><th>Item</th><th>Price</th></tr>";
    • theTable.innerHTML += "<tr><td>Cookies</td><td>$4.25</td></tr>";
    • theTable.innerHTML +=
    • "<tr><td>Ice Cream</td><td>$5.75</td></tr>";
    • // Define list (array) of items using JSON notation.          
    • var itemList=[{item:"Milk", price:"4.50"},{item:"Bread", price:"2.75"}
    • ];
    • // Add all the items from the list to the table         
    • for (i=0;i<itemList.length;i++)          {           
    • nextRow = "<tr>"; 
    • nextRow+="<td>"+itemList[i].item+"</td>";
    • nextRow+="<td>"+"$"+itemList[i].price+"</td>";
    • nextRow += "</tr>";
    • theTable.innerHTML += nextRow;          }                 
    • </script>
  12. JS tag
    <script type ="text/javascript">        </script>
  13. Show "Hello World!!" in a <p> with id="someID" using JS.
    • <p id="someID"></p> 
    • <script type ="text/javascript">            someID.innerText="Hello World!!";            someID.style.color = "red";       
    • </script>
  14. JSON array example
    • var itemlist=[
    • {desc:"bread",price:3.50},                    {desc:"milk",price:4.75}
    • ];
  15. JSON object
    var item ={desc : "ice cream", price:3};
  16. var item={desc : "ice cream", price:3};
    var itemlist=[{desc:"bread",price:3.50},
                        {desc:"milk",price:4.75}];
    How do you add item to the itemlist
    • itemlist.push(item);
    • itemlist.push({desc : "ice cream", price:3});
  17. var item ={desc : "ice cream", price:3};
    How do you show the item on the screen?
    • var item ={desc : "ice cream", price:3};
    • document.write(item.desc+"</br>");
  18. make a change when something is selected from a dropdownlist
    • <form id="ddlForm">
    •     <select name="itemDDL" onchange="showDets()">
    •     </select>
    • </form>
  19. button
    • <button onclick="addToCart()">
    • Add to Cart
    • </button>
  20. var itemList=[{item:"Milk", price:"4.50"},{item:"Bread", price:"2.75"}];
    How do you turn the 1st object into a string?
    itemStr=JSON.stringify(itemList[i]);


    • itemObj=JSON.parse(itemStr);
    •   makes it an object
  21. load when page loads
    <body onload = "onloadHandler()">

    • <script type = "text/javascript">
    • function onloadHandler()
    • { ...
    • }
    • ...
    • </script>
  22. How do you add a drop down list to a form
    • <form id="ddlForm">
    •     <select name="itemDDL" onchange="showDets()">
    •     </select>    
    • </form>
    • <script>
    • function onLoad(){
    • ddlForm.itemDDL.innerHTML = "<option label = \"\">Choose Item</option>";
    • for(i=0;i<itemList.length;i++
    • {   itemstr = JSON.stringify(itemList[i]);
    •     ddlForm.itemDDL.innerHTML =
    •     "<option value=" + itemStr + ">"
    •     + "itemList[i].item" +"</option>;
    • }//end for
    • }//end function

    </script>
  23. How do you add an item chosen from a dropdown list to the shoppingcart?
    shoppingCart.push(formID.selectName.value);

Card Set Information

Author:
slc53
ID:
323985
Filename:
EWD T1
Updated:
2016-10-17 00:51:14
Tags:
EWD T1
Folders:

Description:
EWD T1
Show Answers:

Home > Flashcards > Print Preview