JavaScript

Content:
1. BASICS
   - Initialization
   - Write to HTML
   - Manipulating DOM
2. FORMS
   - Validate form
   - Interact with form
3. Setting visibility of elements
4. AJAX
5. Object
6. Knockout data binding

Tutorial on javascript-coder.com

1. BASICS

See more about html

Code example:Html with JavaScript

Initialization

If you need to run a code when forms gest loaded you can do it like below

JavaScript
function initialize()
{
  // do something
}

HTML
<body onload="initialize()">

Write to HTML

JavaScript
function doSomething()
{
  document.write("Hello");
}

Manipulating DOM

DOM elements can be accessed like below

HTML
  <input id="edit1" type="text" value="abc" />

JavaScript
    var label = document.getElementById("myId");
    var edit = document.getElementById("edit1");
    alert(
    "Text value is: " + label.innerHTML + 
    ", Edit box value is: " + edit.value
    );
    edit.disabled=true; // disable edit box

2. FORMS

See more about forms

Code example:Form with JavaScript

Validate form

JavaScript code can be used to validate form content before submission.

JavaScript
function validateForm()
{
    var result = ....
    return result;
}

HTML
<FORM action="form_response.htm" method="post" onSubmit="return validateForm()" >
... 
</FORM>

Interact with form

JavaScript can respond when user changes control values.

Radio buttons, checkboxes, listboxes and edit fields can handle onchange event. Edit box will trigger that event only when it loses focus.

HTML
<select name="comboOptions" onchange="alert('You selected ' + this.value)"> 
...
</select>

3. Setting visibility of elements

It is possible to dynamically set visibility of HTML elements.

JavaScript
if (shouldBeHidden) {
    document.getElementById("myId").style.display = "none";
}else {
    document.getElementById("myId").style.display = "block";
}

4. AJAX

AJAX stands for "Asynchronous Javascript And Xml". It allows updating parts of web page without reloading the whole page.

JavaScript
function onClick() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // IE 5,6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("lblHello").innerText = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "http://localhost/ajax.txt", true);
    xmlhttp.send();
}

HTML
<div id="lblHello">will be updated with AJAX</div>
<input id="btnGet" type="button" value="Make AJAX call" onclick="onClick()"/>

Code example:Ajax

(requires http://localhost/ajax.txt)

JQuery abstracts browsers differences and simplifies the code.

5. Object

Object can be created in standard way

JavaScript
var person = {
    firstName: "John",
    lastName: "First"
};
alert(person.firstName);

or using function

JavaScript
function Person() {
    this.firstName = "John";
    this.lastName = "First";
}
var p = new Person();

6. Knockout data binding

Knockout is a JavaScript library that supports data binding with MVVM model similar to WPF in .net.

The code below implements one way binding for firstName and two way binding (changes made by user are immediately reflected to the underlying variable) for last name.

HTML
<html>
<head>
    <script type='text/javascript' src="knockout-3.1.0.debug.js"></script>
</head>
<body>
    First name: <span data-bind="text: firstName"></span><br/>
    Last name: <input data-bind="value: lastName" /><br/>

    <button onclick="alert(_viewModel.firstName)">Show First name</button><br/>
    <button onclick="alert(_viewModel.lastName())">Show Last name</button>

    <script>
        var _viewModel = {
            firstName: "John",
            lastName: ko.observable("First")
        };
       
        ko.applyBindings(_viewModel);
    </script>
</body>
</html>

Home | Knowledge verification | Import for Anki (Save target as ...)