HTML Elements with JavaScript and DOM Events Madison, Hunter, and Jackson

Difference Between Using JavaScript vs CSS For the most part, the two are very similar. JavaScript is the programming language of HTML and the Web. CSS is a language that describes the style of an HTML document. CSS is relatively straight forward while JavaScript is more complicated. Overall, JS can change HTML content, attributes, styles, and elements. JavaScript allows you to create more advanced functions for your HTML page as well as have more control over them. JavaScript can also be used to create an interactive page.

Advantages of Using JavaScript vs CSS Right now, in the basic forms of programming, there isn’t a real reason to use one or the other. The real reason we are going to be using JavaScript is simply because, why not? We can use either one to do what we need to right now, but in the long run we need to be able to efficiently use both systems to accomplish higher levels of programming. JavaScript, HTML, and CSS are the 3 languages all web developers must learn.

What We are Trying to Accomplish This is why we are going to use JavaScript; to learn and expand our abilities within the system by doing things such as creating HTML elements with JavaScript. Also, we are attempting to manipulate DOM events with HTML by changing the style of same elements.

JavaScript/DOM Elements DOM Elements = Document Object Model DOM defines: the HTML elements as objects, the properties of HTML elements, the methods to access all HTML elements, and the events for all HTML elements. In order to find HTML elements in DOM you need id’s or tags such as: var myElement = document.getElementById("intro") OR var x = document.getElementsByTagName("p").

Examples of DOM Elements createCanvas() createP() createDiv() createButton() createImg() createElement(tag)

Examples of What we are Changing with JavaScript Font Color Highlight Onclick functions Position on the page Content Movement

Using HTML with JavaScript/CSS HTML is an extremely intuitive and fluid system. The way it positions its info and organizes itself is very sophisticated and well planned out. A couple of functions we are able to use are: position() tells the position on the page html() changes the content of the page

Example of How to Add an HTML With Javascript In your linked Javascript file, inside the setup function, choose which element you want to add. Ex. createCanvas(), createP(), createButton() Video - 3:10

How to Add Elements Within Other Functions You can add elements within other functions besides just the setup function. For example, you can add an element so that whenever the mouse is pressed, the element appears. To do this, add the function that you wish to include, then on the next line, add the element that you want. Video 1 - 4:50

createElement HTML elements that are commonly used have their own “create__” tags It is unrealistic to expect to remember tags for every possible HTML element Therefore, we can use the function “createElement” This function allows us to make any DOM element that isn’t already defined

How to: createElement Written as follows: Video 1 - 6:50 First set of parentheses: the tag itself Ex. h1, p, etc. Second set of parentheses: the content of the tag Video 1 - 6:50

Example JS

JavaScript ‘onClick’ Element

How to Use Variables to Store Object Information You can store information contained in a “create__” function within a variable so that you can manipulate it easier To do this, you must type the variable you wish to use in your code above the function that you want to store Ex. var canvas canvas = createCanvas(); Video 2 - 3:00 By storing information in a variable, it is much easier to change it later with position() and html()

Moving Element Locations Using the variable in the previous slide, you can now adjust an element’s location on the HTML page Ex. ______.position(0,0) Instead of a blank space, fill in the desired variable name The number in the position tag affect where on the page the element will be moved

Changing the Content of an Element The actual content of an element can be changed with a simple html() function Use the html() function like so: h1 = createElement(“h1“, “____ “) h1.html(“_____”) The content of the original element will be replaced by the content of the html() tag Video 2 - 7:50