Jeremiah Flaga: March 2013

Friday, March 22, 2013

My solution to chapter 10 exercises of JavaScript Step by Step 2e

This is my solution to Chapter 10 programming exercises of JavaScript Step by Step 2e.

1. Create a document containing a paragraph of text that you create and append using
the DOM. Create a link immediately after this paragraph that links to a site of your
choice, also using the DOM. Make sure that all the elements have id attributes.

JavaScript:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
</head>
<body>
    <script type="text/javascript">
        // create <p> the append to body
        var element = document.createElement("p");
        element.setAttribute("id", "p1");
        element.textContent = "I am a p";
        document.body.appendChild(element);

        // create <a> then append to body
        element = document.createElement("a");
        element.setAttribute("id", "a1");
        element.setAttribute("href", "http://jeremiahflaga.blogspot.com");
        element.textContent = "this is my blog";
        document.body.appendChild(element);
    </script>
</body>
</html>

TypeScript:

// create <p> the append to body
var element: HTMLParagraphElement = <HTMLParagraphElement>document.createElement("p");
element.setAttribute("id", "paragraph1");
element.textContent = "I am a paragraph";
document.body.appendChild(element);

// create <a> then append to body
var element2: HTMLAnchorElement= <HTMLAnchorElement>document.createElement("a");
element2.setAttribute("id", "anchor1");
element2.setAttribute("href", "http://jeremiahflaga.blogspot.com");
element2.textContent = "this is my blog";
document.body.appendChild(element2);

2. Create a document with any elements you like, or use an existing HTML document that
contains id attributes in its elements. Retrieve two of those elements, make changes to
them, and put them back into the document. The type of change you make depends
on the type of element you choose. For example, if you choose an a element, you might
change the href; if you choose a p element, you might change the text.

JavaScript:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
</head>
<body>
    <p id="p1">I am a p</p>
    <a id="a1" href="http://jeremiahflaga.blogspot.com">this is my blog</a>

    <script type="text/javascript">
        // change text of <p>
        var element = document.getElementById("p1");
        element.textContent = "I am a p of exercise #2";
        document.body.appendChild(element);

        // change text of <a>
        element = document.getElementById("a1");
        element.setAttribute("href", "http://www.johnpapa.net/");
        element.textContent = "Click here to go to John Papa's blog";
        document.body.appendChild(element);
    </script>
</body>
</html>

TypeScript:

// change text of <p>
var element: HTMLParagraphElement = <HTMLParagraphElement>document.getElementById("p1");
element.textContent = "I am a p of exercise #2 - from typescript";
document.body.appendChild(element);

//  change text of <a>
var element2: HTMLAnchorElement = <HTMLAnchorElement>document.getElementById("a1");
element2.setAttribute("href", "http://www.johnpapa.net/");
element2.textContent = "Click here to go to John Papa's blog - from typescript";
document.body.appendChild(element2);

3. Create a document by using the DOM that contains a table with at least two columns
and two rows. Add some text in the table cells.

JavaScript:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
</head>
<body>
    <script type="text/javascript">
        // create <table> the append to <body>
        var table = document.createElement("table");
        document.body.appendChild(table);
        table.setAttribute("border", 1);

        // create <tr> (row) then append to <table>
        var row = document.createElement("tr");
        table.appendChild(row);

        // create <td> (cell) then append to <tr>
        var cell = document.createElement("td");
        row.appendChild(cell);
        cell.textContent = "Cell #1";

        // create <tr> (row) then append to <table>
        var row = document.createElement("tr");
        table.appendChild(row);

        // create <td> (cell) then append to <tr>
        var cell = document.createElement("td");
        row.appendChild(cell);
        cell.textContent = "Cell #2";
    </script>
</body>
</html>

TypeScript

// create <table> the append to <body>
var table: HTMLTableElement = <HTMLTableElement>document.createElement("table");
document.body.appendChild(table);
table.setAttribute("border", "1");

// create <tr> (row) then append to <table>
var row: HTMLTableRowElement = <HTMLTableRowElement>document.createElement("tr");
table.appendChild(row);

// create <td> (cell) then append to <tr>
var cell: HTMLTableCellElement = <HTMLTableCellElement>document.createElement("td");
row.appendChild(cell);
cell.textContent = "Cell #1 - from typescript";

// create <tr> (row) then append to <table>
row = <HTMLTableRowElement>document.createElement("tr");
table.appendChild(row);

// create <td> (cell) then append to <tr>
cell = <HTMLTableCellElement>document.createElement("td");
row.appendChild(cell);
cell.textContent = "Cell #2 - from typescript";

My solution to chapter 9 exercises of JavaScript Step by Step 2e

This is my solution to Chapter 9 programming exercises of JavaScript Step by Step 2e.

1. Use the availHeight and availWidth methods to determine whether a screen is at least 768 pixels high and 1024 pixels wide. If it’s not, display an alert() dialog box stating the size of the available screen.

JavaScript:

if (screen.availHeight < 768 && screen.availWidth < 1024) {
    alert("Available height: " + screen.availHeight + "\n"
        + " Available width: " + screen.availWidth);
}

TypeScript: same as above

2. Alter the step-by-step exercise that used the location object to display an alert() dialog box based on the values of the query string. Specifically, display the word “Obrigado” if the country is specified as Brazil, and display “Thank you” if the country is Great Britain. Test these conditions.

JavaScript:

if (location.search) {
    var querystring = decodeURI(location.search).substring(1);
    var splits = querystring.split('&');
    for (var i = 0; i < splits.length; i++) {
        var splitpair = splits[i].split('=');
        if (splitpair[0].toLowerCase() === 'country') {
            if (splitpair[1].toLowerCase() === 'brazil') {
                alert('Obrigado');
            }
            else if (splitpair[1].toLowerCase() === 'great britain') {
                alert('Thanks you');
            }
        }
    }
}

TypeScript:

if (location.search) {
    var querystring: string = decodeURI(location.search).substring(1);
    var splits: string[] = querystring.split('&');
    for (var i = 0; i < splits.length; i++) {
        var splitpair: string[] = splits[i].split('=');
        if (splitpair[0].toLowerCase() === 'country') {
            if (splitpair[1].toLowerCase() === 'brazil') {
                alert('Obrigado');
            }
            else if (splitpair[1].toLowerCase() === 'great britain') {
                alert('Thanks you');
            }
        }
    }
}

Wednesday, March 13, 2013

My solutions to programming exercises in JavaScript Step by Step 2e - Chapters 4 to 8

Even though I have already studied JavaScript in the past, I have never really done programming exercises using it. So I solved the exercises of JavaScript Step by Step 2e.

Because I am also currently learning Typescript, I solved the exercises, starting on chapter four, using both JavaScript and TypeScript.
(You can learn about TypeScript in John Papa's Blog - http://www.johnpapa.net/typescriptpost/)

You can download my solutions to chapters 4 to 8 here.

Sample code (Chapter 8 Exercise #2)
2. Create an object to hold the names of three of your favorite songs. The objects should have properties containing the artist, the song length, and the title for each song.

JavaScript:

function Song(artist, length, title) {
    this.artist = artist;
    this.length = length;
    this.title = title;
}

var songs = new Object;
songs.song1 = new Song("artist1", 101, "title1");
songs["song2"] = new Song("artist2", 102, "title2");
songs["song3"] = new Song("artist3", 103, "title3");

for (var i in songs) {
    alert(i + "=" + songs[i].title);
}

TypeScript:

class Song {
    private _title: string;

    artist: string;
    length: number;

    constructor(artist: string, length: number, title: string) {
        this.artist = artist;
        this.length = length;
        this._title = title;
    }

    get title(): string {
        return this._title;
    }

    set title(value: string) {
        if (value == undefined) throw 'value for title is undefined';
        this._title = value;
    }
}

var songs = new Object();
songs["song1"] = new Song("artist1", 101, "title1");
songs["song2"] = new Song("artist2", 102, "title2");
songs["song3"] = new Song("artist3", 103, "title3");

for (var i in songs) {
    alert(i + "=" + songs[i].title);
}