Embed Size (px)
Citation preview
JavaScriptNeed to know HTML5
If you already know a bit of HTML?
I know there will be a few of you in this course who have had some HTML background and this section will seem overly simplified. The issue here is that the vast majority of students enrolled in this course have very little to no experience with coding and programming.
Please bear with us while we work through this second week.
Translating a Foreign Language
Take a look at the document to the right. Before I give you any explanation as to what it all means, I want you to examine the various words and symbols and to see if you can find any repeating patterns any logic to it. Can you guess what it is intended to do?
Translating a Foreign Language
Did you notice the following symbols and words?
< ></ ><! - - - - >DOCTYPEhtmlheadtitlebodyh1p
Can you find any repeating patterns? Can you guess the function of any of the words?
Making the effort here will pay off with learning later.
Translating a Foreign LanguageThe language used here is HTML5. It will be necessary for you to have, at least, a basic understanding of HTML5 if you are going to be working with JavaScript. The two languages interact quite extensively. On first review we will divide HTML5 expressions into two types :
1. Tags2. Text
What you need to know about tags at the moment is that they are activated by the appearance of this symbol set < > and they are deactivated by these </ >In other words, when the words html or head or title are situated inside these symbols they go from being ordinary text to being tags. And tags make things happen – like publishing a webpage title: HTML5 Reference<title>HTML5 Reference</title>
Find details about the function and use of the following HTML Tags
<html> </html><head> </head><title> </title>
<h1> </h1><p> </p>
Go to the following website:
http://www.w3schools.com/tags/tag_html.aspStudy the Example and then read the Definition and Usage section. Place them into your toolbox. In the left hand column you will find more HTML tags including all the ones listed above. Place them into your toolbox as well.Bookmark the website. It is an excellent resource and we
will be using it in a variety of ways.
Put the DOM concept into your Toolbox. This is a very important concept which we
will be discussing in more detail later.
Document Object ModelHere is one way to visualize a DOM
Here is another way to visualize
a DOM
Examine this model. Now go back to the Translating a Foreign Language slide. Compare the two. Now to the first way to visualize a DOM. See what they have in common. Try to understand the organization and why all three represent parts of the same coding entity.
What is the HTML DOM?
The HTML DOM is:1. A standard object model for HTML2. A standard programming interface for HTML3. Language Neutral (and that includes JavaScript)
The HTML DOM defines the objects and properties of all HTML elements, and the methods to access them.
In other words:The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
What is the HTML DOM2?
Something else that HTML DOM is:
1. A way to begin to understand the process of organizing data so that it can be made useful
2. A way to begin to understand the process of programming
Add what you have learned about DOM to your Toolbox. On Sunday I will be asking you to email me your most up-to-date Toolbox (so better to do the work sooner rather than later )
There are two shortcuts to learning to program
1. Start with ordinary language to describe up you want to do before you translate it into code
2. Use models to help you visualize what your program will ultimately do (and look like).
Examine the HTML5 code on the right. Now look at it on the left. What changed? Was the change
useful? Why?
<!DOCTYPE html><html><head><title>HTML Reference</title></head><body><h1>Definition</h1><p>HTML is an acronym meaning HyperText Markup Language</p></body></html>
<!DOCTYPE html><html> <head> <title>HTML Reference</title> </head> <body> <h1>Definition</h1> <p>HTML is an acronym meaning HyperText Markup Language</p> </body></html>
Last week I introduced Text Editors and told you to download Notepad++, TextWrangler or a similar editor.
Open up your text editor now type in the following HTML5 Code:
<!DOCTYPE html><html><head><title>HTML Reference</title></head><body><h1>Definition</h1><p>HTML is an acronym meaning HyperText Markup Language</p></body></html>
(Don’t worry about formatting, the text editor will do the formatting for you. Just type!)
Now Save Your WorkThese directions pertain precisely to Notepad++ but should match
very similar steps in TextWrangler and other editors
1. Go to File2. Select Save As…3. Type in a File Name (use your first initial, last name and
the no. 1)4. Click on the drop down arrow on the right side of Save
as Type:5. Select Hyper Text Markup Language (html, etc.)6. Save in a directory for easy retrieval
This is what it will look like…at least in Notepad++
Notice the way it organized and visualizes the codeGo back and open and close the +/- boxes
Last Step – The Fun Part
1. Go back to your Text Editor2. Choose the Run function from your Menu Bar3. You will have several choices for Launch in a Web
Browser4. Choose the one you use and click on it5. A window will open in that browser and your program will
appear.6. It is a very simple program. It shows the header Definition
and then gives a brief explanation of that definition.7. So now go back to your text editor and make some
changes. Play around with it. See what happens when you run the changes.
8. Once you’re satisfied with your work send me a copy of the file.
