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

2. 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.

3. 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.

4. 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.

5. 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").

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

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

9. 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

10. 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

11. 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

12. 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

13. 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

14. Example JS

15. JavaScript ‘onClick’ Element

16. 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()

17. 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

18. 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