Web 124 Final Project

Welcome to my Web 124 Final Project where we will walk through the objectives of the course demonstrating competency in the content outline. Click this text area to get started!

-Ray

Click the button to see course objectives we will be walking through. We've already manipulated the DOM in the opening event. This project is using JavaScript to manipulate the HTML on the page so that it appears that we are navigating to different pages, but the url in the browser address bar will remain the same.

Manipulating the DOM

The DOM or Document Object Model is a representation of all the HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript that instructs what should be displayed by a web browser. All of the code written in the document helps a web browser make a model of what the requested web page should look like.

We have been using JavaScipt to make changes to that model by altering the styling of sections in that document making them display or hide as well as opening and closing a window.

Add or Remove HTML Nodes

Nodes are a plot point on the DOM that represent many different types of elements in the HTML code. So far, we have been displaying and hiding sections of HTML that were already created and represented on the DOM, but given the style "display: none" or "display: block" with CSS. We haven't actually created or removed anything that wasn't already there. If you look at the inspector, you will see elements grayed out that are not currently being displayed. Click the button below to remove this paragraph from the document entirely and create a different one that is not shown in the inspector.

Control the BOM

The Browser Object Model contains information about the browser window. Click the button below to see your current url and screen dimensions displayed below.

Enhance and validate form data

JavaScript is often used to validate information that a user inputs so that it is not harmful to the webpage and can pass along accurate information that is being asked for on the form. JavaScript can also make a form easier or more intuitive than traditional HTML. For example, when this objective loaded a focus method was used to place a cursor in the field of the form so that it is ready for entry. When the input box is filled out, we are able to get or check for information about what has been entered.

Try clicking the submit button without entering a name and notice the alert is different than when something has been entered. This is an example of how JavaScript can improve and validate data and the usability of a form.

JavaScript Object-Oriented Programming

JavaScript uses objects to represent things, often something physical or tangible, in a container of information. JavaScript.info refers to objects as a container like a drawer holding different pieces of data. An example might be information about the user like their name, age, occupation, preferences, etc. JavaScript also references objects for things that the language uses such as the window in which the user is viewing the page in or information about the browser that is recreating the requested HTML file.

JavaScript has many built-in objects to handle information and data such as Numbers, Dates, Math functions, Strings(text) and many more used for programming. Let's use the number object for example. First of all, it's worth noting that anything entered in an HTML input field comes into JavaScript as a text string, so there are methods in JavaScript that can convert those numbers from text to an actual number that can be used in a mathematical function.

Using the isNan() method, we will convert the text in the field to a number and then test it. If the text is not a number then it will not convert to a number and test true for NaN;

Next Objective >

Strings and Arrays

As mentioned previously, strings are text and they can be organized into a collection known as an array. Arrays may contain other data types as well like numbers. Let's create an array and then access it. Enter some colors into this text area separating them each on a new line (return).

Validation and Debugging

We've already seen in the object oriented programming section how JavaScript can be used to validate or test data that has been input from a user which is a benefit of this language. It's important to be able to make sure that the developer is going to get the right type of data from a user that they need. Another way to prevent mistakes or errors from disrupting the script is to just simply plan for errors to happen. If then statements are one way to do this, but JavaScript also has a syntax known as try...catch...finally to display error messages so that the user can correct their error or for the script to keep going. A number between 1 and 10 has been set to a variable. Guess the number in the input box and if you're correct, an alert will display. If incorrect, an error message will display. Using the finally command, a button will display for us to move on to the last objective.

Let's move on >

Security

Whenever you allow a user to enter something that could be stored or displayed on a web page it is an opportunity for an attack by someone with ill intentions. It's important to validate form and input fields not only to make sure that you receive the type of data that you desire, but also to protect your code from being tampered with. Another serious vulnerability in JavaScript code is when using methods to make changes to the DOM as demonstrated earlier, but with the document.write function or by using innerHTML to make changes to the document. Document.write is a sure way to ask for trouble when collecting data from a user because it rewrites the actual HTML code rather than add to it. innerHTML in a similar way allows a user to enter elements such as <p>things you don't want</p>. The best way around this is to use the DOM Manipulation method when adding new elements of text to the page or textContent as in this example where there is already an element that we are adding text to.

Paste this example code into each box to see the difference between innerHTML allowing code vs. DOM Manipulation protecting the document from attack.
<p id="clickme" onclick="window.open('https://www.youtube.com/watch?v=DLzxrzFCyOs?autoplay=1')";>Click Me!!!</p>

Paste the code above into this box:

See innerHTML Below

Now try pasting the code into this box:

See textContent Below

Result:

Completion

Whew! Thanks for spending so much time with these demonstrations over objectives from Web 124 JavaScript II at JCCC. Feel free to go back and review any of the exercises by using the navigation key words below or simply refresh the browser to start over.