ITEC 3650 - Guided Application in IT and Industry Processes

• W3Schools JavaScript Home
• JS Introduction
• JS Where To
• JS Output
• JS Syntax
• JS Statements
• JS Statement Reference
• JS Comments
• JS Variables
• JS Operators
• JS Operators Reference
• JS Arithmetic
• JS Assignment
• JS Data Types
• isNaN Function- Not a Number function
• parseInt Function - Converts a string to an integer
• parseFloat Function - Converts a string to a floating number
• String Function - Converts a value to a string
• JS Popup Alert
• JS Style Guide
• JS Best Practices
• JS Mistakes

Examples

• Update a Web Form Value - Example 1
• Update a Web Form Style - Example 2
• Display a Message - Example 3
• Prompt for a Value - Example 4
• Add 2 Integers - Addition of 2 Integers

• DOM Intro
• DOM Methods
• DOM Document
• DOM Elements
• DOM HTML
• DOM CSS

• JS Functions
• Function Definitions
• Function Parameters
• Function Invocation

• JavaScript Events

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
<style>
   .error {
        color: red;
        padding-left: 5px;
   }
</style>
<form id="TextExampleDOMForm" onsubmit="return false">
<input type="submit" value="SubmitExample" Name="SubmitButton" onclick="TextExample()">
<label for="txtName">Name: </label>
<input type="text" id="txtName" name="txtName" size="20" maxlength="20"
    data-rule-required="true"  data-msg-required="Name is Required" >
<label for="txtName" class="error"></label>
<label id="SubmitExampleValue"></label>
<script>
function TextExample() 
{
    document.getElementById("SubmitExampleValue").innerHTML = document.getElementById("txtName").value;
}
$( "#TextExampleDOMForm" ).validate({

});
</script>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
<style>
   .error {
        color: red;
        padding-left: 5px;
   }
</style>
<form id="SelectExampleDOMForm" onsubmit="return false">
<input type="submit" value="SelectExample" name="SelectButton" onclick="SelectExample()">
<label>Auto: </label>
<select name="selAuto" id="Auto"                
        data-rule-required="true" data-msg-required="Auto is Required">
    <option value="">Select an Auto...</option>
    <option value="Volvo">Volvo (Latin for 'I roll')</option>
    <option value="Saab">Saab (Swedish Aeroplane AB)</option>
    <option value="Mercedes">Mercedes (Mercedes-Benz)</option>
    <option value="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>
<label for="selAuto" class="error"></label>
<span id="SelectExampleValue"></span>
<script>
function SelectExample() 
{
    document.getElementById("SelectExampleValue").innerHTML = document.getElementById("selAuto").value;
}
$( "#SelectExampleDOMForm" ).validate({

});

</script>
</form>

• If you are using jQueryValidation and do not want to submit it to another webform, use onsubmit="return false" in the <form> tag.
• If you are using jQueryValidation use the following to make sure that the form is valid (Assuming <form id="myform">): if ($(#myform).valid()) {
• To skip validation while still using a submit-button, add the attribute "formnovalidate" to that input: <input type="submit" formnovalidate name="cancel" value="Cancel">
• Use document.getElementByID("myText").value to get/set the value in an input field, such as <input type = "text" id="myText">
• Use document.getElementByID("myText").innerHTML to get/set the value of HTML elements, such as <div id = "myText">
• You can change the value of an attribute of an HTML element, such as document.getElementById("myImage").src = "landscape.jpg";
• You can change the value of the style of an HTML element, such as document.getElementByID("myText").style.color = "blue";
• Remember that anything you time into the keyboard is the data type character. You cannot do arithmetic on the input unless you convert it using the parseInt() or parseFloat() function

• Hypotenuse of a Right Triangle
• Hypotenuse of a Right Triangle (using proper folders)

• JS Debugging
• Chrome Debugging
  • On the Chrome Tool Bar, press the 3 vertical dots->More Tools->Developer Tools
  • On the Debugger Tool Bar, press "Sources" to see the source code, then select the source file from the directory tree on the left. You may have to click "Refresh" to see the sourse.
  • On the Debugger Tool Bar, press the 3 vertical dots->Dock Side->Dock to Bottom
  • On the Debugger Tool Bar, press the 3 vertical dots->Show Console Drawer. When the console drawer appears, make sure that the console tab is clicked and not "What's New".
• Hypotenuse of a Right Triangle
• Hypotenuse of a Right Triangle (using proper folders)

• JS Debugging
• Chrome Debugging
• Hypotenuse of a Right Triangle
• Hypotenuse of a Right Triangle (using proper folders)

• JS Comparisons
• JS Conditions
• JS Switch

Type = "Radio"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
<style>
   .error {
        color: red;
        padding-left: 5px;
   }
</style>
<form id="RadioExampleValidationCheckForm" onsubmit="return false">
<input type="submit" value="RadioExample" name="RadioButton" onclick="RadioExample()">
<label>Cars: </label>
<label for="rdChevrolet"><input type="radio" id="rdChevrolet" name="rdcar" value="Chevrolet" 
    data-rule-required="true" data-msg-required="Car is Required" />Chevrolet</label>
<label for="rdFord"><input type="radio" id="rdFord" name="rdcar" value="Ford" />Ford Motor</label>
<label for="rdDodge"><input type="radio" id="rdDodge" name="rdcar" value="Dodge" />Dodge Ram</label>
<label for="rdcar" class="error"></label>
<span id="RadioExampleValue"></span>
<br>
</form>
<script>
function RadioExample() {
    if (document.getElementById("rdChevrolet").checked) {
        document.getElementById("RadioExampleValue").innerHTML = 
            document.getElementById("rdChevrolet").value;
    }
    if (document.getElementById("rdFord").checked) {
        document.getElementById("RadioExampleValue").innerHTML = 
            document.getElementById("rdFord").value;
    }
    if (document.getElementById("rdDodge").checked) {
        document.getElementById("RadioExampleValue").innerHTML = 
            document.getElementById("rdDodge").value;
    }
}

$( "#RadioExampleValidationCheckForm" ).validate({

});
</script>

Type = "Checkbox"

<input type="submit" value="CheckboxExample" name="CheckboxButton" onclick="CheckboxExample()">
<label>Fruits: </label>
<label for="ckApple">
    <input type="checkbox" name="ckfruit1" id="ckApple" value="Apple">Red Apple</label>
<label for="ckPear">
    <input type="checkbox" name="ckfruit2" id="ckPear" value="Pear">Green Pear</label>
<label for="ckBanana">
    <input type="checkbox" name="ckfruit3" id="ckBanana" value="Banana">Yellow Banana</label>
<span id="CheckBoxExampleAppleValue"></span>
<span id="CheckboxExamplePearValue"></span>
<span id="CheckBoxExampleBananaValue"></span>
<script>
function CheckboxExample() {

    document.getElementById("CheckBoxExampleAppleValue").innerHTML = "";
    document.getElementById("CheckboxExamplePearValue").innerHTML = "";
    document.getElementById("CheckBoxExampleBananaValue").innerHTML =  "";

    if (document.getElementById("ckApple").checked) {
        document.getElementById("CheckBoxExampleAppleValue").innerHTML = 
            document.getElementById("ckApple").value;
    }
    if (document.getElementById("ckPear").checked) {
        document.getElementById("CheckboxExamplePearValue").innerHTML = 
            document.getElementById("ckPear").value;
    }
    if (document.getElementById("ckBanana").checked) {
        document.getElementById("CheckBoxExampleBananaValue").innerHTML = 
            document.getElementById("ckBanana").value;
    }
}
</script>

• Minimum, Maximum, and Average with Validation

• Work on Calculator Assignment

• jQuery HOME
• jQuery Intro
• jQuery Getting Started
• jQuery Syntax
• jQuery Selectors
• jQuery Events
• jQuery Hide/Show
• jQuery Fade
• jQuery Slide
• jQuery Animate
• jQuery Chaining
• jQuery Add
• jQuery Remove
• jQuery CSS Classes
• jQuery css()
• jQuery Dimensions

JQuery Resources

• JQuery Home Page
• JQuery User Interface

• Introduction to AJAX
• JavaScript Fetch API

• URL: http://brucebauer.info/assets/ITEC3650/gethint.php
• Parameters:
  • Name: Partial name to lookup
  • Invoking gethint.php: https://brucebauer.info/assets/ITEC3650/gethint.php?Name=E
• Example of using gethint.php
• Another AJAX Example - AJAX Javascript Calculator

Assignment - Due February 20 at midnight - Create a new project called unitsconversion. Create index.html, and an assets, script, and style subfolders. As closely as possible, create the web form using the image below. When complete, you should prompt for a numeric value, the value's units (call "FromUnits") and the units to convert the value to (called "ToUnits"). When the calculate button is pressed you will make an AJAX call to a webpage that will do the conversions for you. The value is required and should be numeric. The FromUnit and ToUnit are required. Display error messages as appropriate. The clear button shold clear all inputs, error messages and results.

• URL - https://brucebauer.info/assets/ITEC3650/unitsconversion.php
• FromValue - The number to be converted
• FromUnit - The unit of the FromValue, must be one of the following:
  • cm - centimenters
  • m - meters
  • km - kilometers
  • in - inches
  • ft - feet
  • yd - yards
  • mi - miles
• ToUnit - The unit that you want to convert the FromValue to, must be one of the following:
  • cm - centimenters
  • m - meters
  • km - kilometers
  • in - inches
  • ft - feet
  • yd - yards
  • mi - miles

To see the operation of the webpage, try: Example of Calculation - Converts 10 cm to in (3.937007874 in)

Click to view figure

• Attend the CSTEM Job Fair at the Stephens Center 12pm to 3pm
• Click here to register.

• Work on AJAX Assignment

• JavaScript Arrays
• JavaScript Array Methods
• JavaScript Sorting Arrays
• JavaScript For Loop

• JSON Introduction
• JSON Syntax
• JSON Arrays
• JSON Objects

• Polygon.io - Click on "Documentation", "Market Data", "Ticker Details"
• Example of using Polygon.io to Retrieve Ticker Details

• Polygon.io - Click on "Documentation", "Market Data", "Ticker Details" and "Aggregates (Bars)"
• Example of using Polygon.io Stock Data to Retrieve Stock Data and Charts

• W3Schools Examples
• ChartJS.org

Here is the simplest code to chart dates and values:

var ctx = document.getElementById("chartjs-0");

var myChart = new Chart(ctx, {
    "type":"line",
    "data": {
        "labels": dates,
        "datasets":[{
            "data": values,
            fill: false
        }]
    },
    "options":{ 
        responsive: false,
        maintainAspectRatio: true,
    }
});

• Work on Currency Value Conversion Assignment

• Work on Student Project

• Work on Student Project

• Work on Student Project

• Project Presentation