Dynamic documents with javascript

CSIT570 (10/24/2013)

last week we went over:

the execution environment & the DOM
accessing elements in JavaScript
events and event handling

this week we will learn

more event handling
creating elements
changing element position
changing element styles

First things first

let's take a look at our Book constructor assignment

Creating new elements

Follow along as we create elements and style them with JavaScript.

Create a new HTML file called yourname-dynamicjs.html
Fill it with boilerplate HTML code (html, head, body tags).

JENN-DYNAMICJS.HTML

<html>
<head>
  <title>dynamic js 10/24/2013</title>
  
  <script type="text/javascript">
    document.onload = function(){

      // our js will go here

    };
  </script>

</head>
<body>

  <!-- our html will go here -->

</body>
</html>

Creating elements

var element = document.createElement(tagName);

for example, let's create a paragraph:

var paragraph = document.createElement("p");

adding our elements to the dom

parent.appendChild('theElementToAdd');

let's add a paragraph to the body of our page.

get the body of our page
create a paragraph
append the paragraph to the body

Adding our elements to the dom

//1. get body
var body = document.getElementsByTagName("body")[0];

//2. create paragraph
var newParagraph = document.createElement("p");

//3. append paragraph to body
body.appendChild(newParagraph);

Adding text to our new element

var text = document.createTextNode("Here is some text");

and we can append it to our paragraph:

//1. create text node
var text = document.createTextNode("Here is some text");	

//2. append text to new paragraph
newParagraph.appendChild(text);

Other Options

newParagraph.innerHTML = "some html";

newParagraph.innerText = "some text";

what is the difference between the two?

newParagraph.innerHTML = "<a href='http://cs.montclair.edu'>cs @ msu</a>";
newParagraph.innerText = "<a href='http://cs.montclair.edu'>cs @ msu</a>";

get/set/remove element attributes

newParagraph.setAttribute('id', 'my-new-paragraph');

newParagraph.getAttribute('id');

newParagraph.removeAttribute('id');

We can also get and set attributes via the element's object properties

newParagraph.id

newParagraph.className

newParagraph.style

in-class assignment: creating a guestbook!

HTML form with input for name and message, along with a submit button.
When the user clicks the submit button, add the message and name to the guestbook.

positioning elements

our favorite!

var paragraphStyle = newParagraph.style;
var positionX = paragraphStyle.left;
var positionY = paragraphStyle.top;

and we can set the position:

paragraphStyle.position = "absolute";
paragraphStyle.left = 300 + "px";
paragraphStyle.top = 75 + "px";

Mouse positioning

window.onclick = function(e){
		console.log("x: " + e.clientX + " y: " + e.clientY);	
};

What is happening here?

Let's update our guestbook

Add an input field for x position
Add an input field for y position
Set the position of the guestbook item
before you append it to the DOM!

homework for this week

Chapter 6 Exercises (on page 273):

6.1, 6.2, 6.3 (doesn't need to be an image of yourself

Read Chapter 7, Introduction to XML

Due before noon on Thursday of next week, 10/31