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

Made with Slides.com

Dynamic Documents with JavaScript

  • 2,249

More from Jenn Schiffer