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";
No comments:
Post a Comment