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.

  1. Create a new HTML file called yourname-dynamicjs.html 
  2. 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.

  1. get the body of our page
  2. create a paragraph
  3. 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!


  1. HTML form with input for name and message, along with a submit button.
  2. 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


  1. Add an input field for x position
  2. Add an input field for y position
  3. 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

Dynamic Documents with JavaScript

By Jenn Schiffer

Dynamic Documents with JavaScript

  • 1,185
Loading comments...

More from Jenn Schiffer