Journal Notebook

Chapter 1:

  1. Explain the difference between HTML, XHTML and DHTML. (Sample notebook journal with first two question completed)
  2. DHTML stands for dynamic hypertext markup language. It is comprised of three different languages: HTML, CSS and JavaScript. HTML structures the web page based on XML(Extensible Markup Language) standards while CSS styles it. JavaScript adds interactivity to the webpage. XHTML, also known as Extensible Hypertext Markup Language, was designed to strictly follow Extensible Markup Language (XML), a language that a lot of other applications use. This was done in hopes of XHTML being able to be used in other applications that supported XML. However, most developers support HTML because of its ability to modify a web page's structure, style and behaviors.


  3. Explain the difference between the following doc type definitions: (HTML doctype is HTML5), and HTML4.01 Transitional. Nota Bene, when HTML4.0 came out it had a few bugs so they quickly released the standard HTML4.01, which fixed the bugs. Therefore, the fourth version version of HTML is referred to as HTML 4.01. It is typical for software to do this.

    HTML 4.01 transitional is a replacement for HTML 4.0 which, as mentioned above, did not function properly. HTML 4.01 transitional supported XML and some features that HTML5 could create such as inline styling. HTML 4.01 transitional was meant to bridge the gap between older document types and HTML5 by supporting non-XML tags. Currently, HTML5 is the much preferred and supported document type. Not only does HTML5 support CSS and JavaScript, but old syntax standards as well such as XML.


  4. Why does HTML5, not have a corresponding XHTML standard?
  5. The XHTML standard was created before HTML5 and was created with hopes that the language would be able to be used with other applications that used Extensible Markup Language (XML). However, programmers found the XHTML language's syntax to be inflexible and difficult to use which is why they embraced HTML5 instead. HTML5's language was much easier to use and became the standard language for the web.


  6. Briefly define the following tags: p, strong, table, td, tr, div, span, body, head, title, html,ul, ol, li. (help page 6 textbook)
  7. The p tag indicates to the browser that the text is meant to be displayed as a paragraph. The strong tag makes the text bolded on the web page. The table tag formats the text as a table in the web browser and the td stands for table data that goes into the table. Tr stands for table row and formats all data to go into a table row. Div divides data so that programmers are able to link and manipulate the data to display a certain way in the browser. A span groups inline elements.The body tag indicates to the browser that the text is in the body of the web page. The title tag contains metadata for the web page and the title that displays in the tab bar. HTML is a doctype tag that shows the document is written using HTML and XML standards. The ul means unordered list which will display bullet points for listing information instead of numbers. Numbers are displayed when using the ol tag (ordered list). Li means list item, it displays the information that will appear in a list.


Chapter 1 Journal Notebook Addendum:

  1. What is a URL?
  2. Uniform Resource Locator - It is a unique address for a web document.

  3. What does W3C stand for, what do they do?
  4. W3C stands for World Wide Web Consortium and they oversee the development of web technology standards.

  5. What is a 3 Tier Client/Server system?
  6. A 3 Tier Client/Server system is comprised of three parts: the client tier, the processing tier and the data storage tier. The client tier uses the web to interface with the processing tier which exchanges information between the client and data tiers.

  7. What is ECMAScript, why was it created?
  8. ECMAScript is a standardized version of JavaScript. It was created because both of the Microsoft and Netscape browsers had their own versions of JavaScript. Their versions of JavaScript varied so much that programmers had to write almost entirely different JavaScript programs for each browser.

  9. How do you create a single-line comment in JavaScript?
  10. //

  11. How do you create a multi-line comment in JavaScript?
  12. /* */

  13. What is an identifier?
  14. It is a name assigned to a variable.

  15. What is an event handler for?
  16. An event handler is a piece of code that responds to a specific event. An example of this is onclick which executes a piece of code when the user clicks on an image or hyperlink.

Chapter 2 Journal Notebook:

  1. What is the difference between a named function and anonymous function.
  2. A named function is created by assigning a name to a function and setting its parameters and/or organizing statements in which it will execute. An anonymous function is an unnamed function. Instead of assigning a name to a function, programmers are able to add the entire function definition within a statement and get the same result as when the function is defined.

  3. Why do we use anonymous functions?
  4. An anonymous functions is used for functions one only wants to use once. Anonymous functions are not named so there is no way to reference them to reuse the function.

  5. How do you check JavaScript errors in a browser?
  6. You can inspect the document and bring up the browser console window which displays the errors.

  7. JavaScript Datatypes, what are the primary, composite and special JavaScript data types?
  8. The primitive or primary data types are ones that can only be assigned a single value. These data types include boolen, number and string. A composite data type is a data type that is composed of different values. An example of this is an array. An array stores multiple values in one variable. A string might also be considered a composite data type because a string can hold multiple characters within it. Lastly, special JavaScript data types are the undefined and null data types. These data types are considered special because they have unique meanings to them. Undefined can only ever have the value undefined and null can only have the value of null.

Chapter 2 Journal Addendum:

  1. What is a comparison operator? What kind of values does it return?
  2. A comparison operator is an operator that compares two operands to determine if one operand's value is greater than the other. Comparison operators only return values of true or false. For example, the equal operator (==) returns a value of true if both operands are equal. If they are not equal, it will return false.

  3. How is the expression 5 + 2 * 8 evaluated? Explain your answer.
  4. Programs use operator precedence to solve arithmatic equations like 5 + 2 * 8. According to the rules of operator precedence, the eight would multiply the two first because multiplication is higher in the operator precedence than addition. After multiplying two to eight and getting sixteen, the program would then add five to sixteen getting a total of twenty-one.

  5. With jQuery how do you select more than one single ID element at a time?
  6. In jQuery one would use the CSS selector symbol # to select elements by their IDs. You can select more than one ID element at a time by using commas to separate each ID in the list.

  7. From web page assignment, give and briefly describe an example of jQuery chaining.

  8. JQuery chaining is when you select an element and then apply a method to it.
    $("#photognum, #photoghrs, #distance").change(calcStaff);

    If you look at the following example, the elements with ID's photognum, photoghrs and distance are selected and attached to a method called change. When there is a change to one of the IDs the method will call the function calcStaff.

  9. How do you avoid using document.write on a webpage?
  10. You would instead change the innerHTML by using the getElementById.

Chapter 3 Journal Addendum

  1. How do you access an individual element in an array?
  2. By using [].

  3. What property do you use to determine the number of elements in an array?
  4. You would use the .length property.

  5. How do you use a browser to check the value of a specific array element?
  6. You can go to the browser console window by clicking inspect and type out the variable name of the array and the number the value is under. Analyze the following array: var example = ["abcs", "123s", "colors"];. To find the value of the array element two in the following example you would search example[1] in the browser console and it would return 123s.

  7. Briefly describe the Array object, discuss four of its methods and two of its properties.
  8. An array object lets you store multiple values in a single variable.

    Methods:

    1. Push is a method that allows one to treat an array as a stack. When programmers use push, they can add an element or elements to the end of an array.
    2. Pop also allows one to treat an array as a stack. When programmers use pop, they can take away the last element from an array.
    3. Shift is a method that allows programmers to take away the first element from an array.
    4. Unshift is a method that allows programmers to add one or more elements to the beginning of an array.

    Properties:

    1. The .length property returns the number of elements in an array.
    2. The .prototype property allows you to add new properties and methods to an array object.

  9. Briefly discuss the looping flow Control structures (for, while and do while).
  10. When you use a loop statement, the statement repeatedly executes a statement as long as the value returned is a truthy value. Once the statement returns a falsy value the loop stops executing. Statements control the flow of the loop in different ways. For example, the while statement will repeat a loop as long as the expression under it equates to a truthy value. The do/while statement executes a loop once, then repeats the execution as long as it is a truthy value. The for statement works almost exactly like the while statement, but you can include a counter which changes with each iteration.

  11. What are the differences between a while and do/while statement?
  12. A while statement repeats a loop as long as the expression under while evaluates to a truthy value. A do/while statement executes a loop once and then repeats the expression as long as it evaluates to a truthy value. The biggest difference between while and do/while statements is that the while statement tests the statement first while the do/while statement loops once before testing the statement.

  13. Which repetition statement allows you to initialize a counter variable as part of its syntax?
  14. The for statement includes a counter in its syntax.

  15. Briefly define the branching flow control structures if, if else and switch/case statement.

  16. The if, if/else and switch/case statements allow for selection and conditional statements. The if statement states that if a certain condition is true then run that statement. The if/else statement places an alternate piece of code to be run if the condition is false. The switch/case statement has an expression and several different options called cases that have to match the expression.

Chapter 4 Journal Notebook

  1. How is window.alert useful in debugging?
  2. The window.alert command can be useful in debugging because depending on where it is placed, it can show whether or not something is working correctly. For example, examine the following function: var a = 1; var b = 2; function calc { return a + b window.alert("test") }; document.write(calc); If the window.alert was inserted inside of this function, no alert would display on the web page because this function is missing ().

  3. What is console.log Object and Method?
  4. The console is an object that allows developers to access the browser's debugging console. The console.log() method is used to output a message to the console.

  5. Using Chrome, Firefox web Developer and Dreamweaver briefly outline ways to test RWD designs?
  6. Chrome, Firefox and Dreamweaver all have ways to test RWD designs. Chrome has a way to test RWD designs when users inspect the web page. The option to test RWD designs in Chrome is located on the left hand side of the inspect element panel and is entitled, "toggle device toolbar". Firefox has a similar option located on the right side of the inspect element and is entitled, "Responsive Design Mode". Both "toggle device toolbar" and "Responsive Design Mode" allows users to resize their screens to see if their pages are responsive. Dreamweaver also has a way to test RWD designs located on the right hand side. The right hand side contains a QR code that one could plug into their smart phone to view and test the web page on their smart phone. In addition to this, users can also use scrubber within dreamweaver to resize the page.

Chapter 4 Journal Notebook Addendum

  1. Good Article on JavaScript Engines. What are Spider Monkey, Nashorn and Chrome's V8?
  2. Spider Monkey, Nashorn and Chrome's V8 are all JavaScript Engines. Spider Monkey is used in Mozilla while V8 is used in Google Chrome. Spider Monkey is based on the first JavaScript Engine created by Brendan Eich for Netscape. Chrome's V8 was the first modern JavaScript Engine created and executes JavaScript using just-in-time compilation (JIT compilation). Nashorn was developed by Oracle using the Java programming language. Since its release in 2012, Nashorn has been a good open source tool for embedding JavaScript in Java applications, however with the release of Java 11, Nashorn has depreciated.

  3. Wikipedia article on API. What does API stand for and represent?
  4. API stands for application programming interface and it represents the computing interface that computers use to talk to each other. Server applications lay down rules that dictate what can be accessed by different computer systems.

  5. Compare two popular JavaScript APIs Mozilla JavaScript API - Google Maps API. With these two Java APIs Standard Edition, and one written by me Complex. Java is a lot more extensive than JavaScript, but what advantage do Java APIs have?
  6. Java APIs are very consistant and are based on the same standards. JavaScript APIs can be hard to navigate and very from one JavaScript API to the other. Many developers add JavaScript libraries to their APIs which can cause even more inconsistancy.

  7. Review these two APIs: document, or w3Schools document API. Then describe two methods and two properties for object document. Note Document with the capital first is the interface (aka a Class that is implement, just the definition), the document with the lower-case letter first is the object, it actually exists. The object document is based on the interface Document.
  8. The document object defines the webpage body. Two methods of the document object are write() and writeln(). These two methods write HTML or JavaScript code to the document. The writeln() method preforms the same actions as the write() method except it adds a newline character after each statement. Two properties of the document object are forms and images. The forms document object property returns a collection of all form elements in the document whereas the images object property returns all image elements in the document.

Chapter 6 Journal Notebook

  1. Briefly describe the two form attributes action and method.
  2. The action attribute specifies where to send the form-data when a form is submitted. The method attribute specifies how to send form-data. For example, if one wanted to send the form data as a URL, they would chose the get method. If they wanted the information sent as an HTTP post transaction, they would chose the post method.

  3. Briefly describe seven types of attribute values for tag input?
  4. Seven types of attributes for the tag input are list, required, size, maxlength, placeholder, min and max attributes. The list attribute refers to a datalist element that contains pre-defined options for an input element. The required attribute specifies that an input field must be filled out before submitting the form. The maxlength attribute specifies the maximum number of characters allowed in an input field. The size attribute specifies the visible width in characters of an input field. The placeholder attribute places text in an input field that instructs the user what type of value to add to that field. Lastly, the min and max attributes specify the minimum and maximum values for an input field.

  5. Briefly describe the attributes required, placeholder, value, name, and id.
  6. The required attribute forces users to submit a value in the input box before the form will process their request. Placeholder is an attribute that displays text when their is no other value placed in the input. Value sets or returns the value of the control. Name sets or returns the value assigned to the element's name attribute. The id attribute is used to specify a unique id for an HTML element.

  7. What are the other two tags besides input for getting user input?
  8. The textarea and select tags are two tags besides the input tag that collects user input.

  9. Will we always have version of IE7 floating around (hint consult webcast)?
  10. It is very likely that we will have IE7 for a very long time since it was the last form of IE in which microsoft gave developers information on how to integrate it into different applications.

Chapter 6 Notebook Addendum

  1. Can you figure out how this works
  2. The string split method is being used. The split() method splits a string into an array of substrings, and returns a new array. It is splitting the url code by its name values. Mickey is under name, Minnie is under first and Mouse is under last.

  3. Do many programming language support regular expressions?
  4. Yes, regular expressions are highly supported by programming languages.

  5. What do these regular expression symbols mean: ^, $, \d, \s, \w, [0-9], [a-zA-Z], |, ?, . (dot), *, {3,5}.
    1. ^ means the start of string, or start of line in multi-line pattern.
    2. $ means the end of string, or end of line in multi-line pattern.
    3. /d means digit.
    4. /s means white space.
    5. /w means a letter, number or underscore.
    6. [0-9] means a digit from 1 to 9.
    7. [a-zA-Z] means the first case would match a lower case letter from a to z, the second case would match an upper case letter from A to Z.
    8. | means either/or.
    9. ? means zero or 1 time.
    10. .(dot) means use any character.
    11. * means zero or more times.
    12. {3-5} means match three times, but not more than five times.
  6. Also Comment on this very large collection of Regular Expressions.
  7. I like the list this website provides for meta-characters. I was not sure what {2,} meant in the question below and I tried looking the answer up on other websites and did not receive much useful information. The website also has a very useful list of scripts with regular expressions that can help do things like validate data, validate numbers, parse data and modify data. For example, the following example checks to see if something is a currency.

    function isCurrency1(str) {
                            /* Verify formatted currency optional $, no leading zero
                             *    reguire comma separator, 2 digit decimal if any
                             *    ignore leading and trailing spaces
                             * Return boolean
                             */
                            str = str.replace(/^\s+|\s+$/g, '');
                            return /^\$?[1-9][0-9]{0,2}(,[0-9]{3})*(\.[0-9]{2})?$/.test(str);
                            }//eof - isCurrency1

    This function seems really short thanks to the regular expression in which it is attached.

  8. Briefly explain these three JavaScript regular expressions...
    1. /^\d{3}[ -]?\d{2}[ -]?\d{4}/ Hint and RegEX Tester
    2. This is the layout for a social security number, except it allows the numbers to be together and it can include any number. \d{3} means any three digits and [ -] means either space or -. \d{3} and \d{4} mean and three and any four digits respectively.

    3. /^(?!000|666|999)d{3}[ -]?(?!00)\d{2}[ -]?(?!0000)\d{4}/ Hint and regExpTester
    4. This is another layout for a social security number. There would be three digits in the beginning then two digits in the middle and four digits at the end. These groups of numbers can be dashed like a social security number however, users are given the option not to include the dash and just use a space. The ?! means that the result cannot have the value listed so at the end it is impossible to have four zeros in a row. \d {4} means any four digits can be used (except four zeros as specified in the expression before \d).

    5. /[a-z]{2,}\d*@(saddleback|ivc)\.edu/ and regExpTester
    6. This is the RegEx for email. The email format listed specifies at least two lower case letters([a-z]{2,}) and zero or more digits followed by an @ symbol. The user can choose either saddleback or ivc and the email must end in .edu.

    Note on JavaScript regular expressions you can use the REGEXP object or delimit the string with forward slashes. PS regular expression are declarative programming,standard JavaScript is a procedural and object oriented programming language.

  9. Briefly define these HTML events: onclick, onsubmit, onfocus, onmouseover
  10. The onclick event triggers a function when something is clicked. Onsubmit is similar to onclick except that it is triggered when someone clicks submit. Onsubmit sends data when triggered. Onfocus is triggered when a user activates or focuses a particular area. For example, if a user tabs to an input field then that user is focused on that field and it would trigger whatever function is associated with onfocus. Onmouseover is an event that triggers when a user puts their mouse over an element that is the target of the onmouseover.

  11. Mouse Over here what is happening?
  12. The HTML event onmouseover is taking place. When the mouse goes over the text, it triggers an alert box stating rollover.

  13. Can you get an automatic A using the form block below, if not why? To analyze the form block use Web developer menu Forms --> Display Form Details or use right^click inspect.
  14. You will never get an automatic A using the form block because there is no action value that can be used to transfer the data.

  15. What form types are listed below, does chrome provide automatic pattern checking...
  16. The form types are number, month and email. Chrome does do automatic pattern checking.

Chapter 12 Journal Notebook

  1. What is the difference between the object jQuery and $?
  2. The dollar sign is an alias for jQuery. The $ symbol is often used to save time, however it can conflict with other libraries that use the $ sign for something else.

  3. List and describe three jQuery methods used to traverse the DOM.
  4. Three jQuery methods for traversing the DOM are the children(), each() and first() methods. The children() method selects the child elements of each element matched by the main selector. The each() method selects each element and the first() method only selects the first element out of a group of selected elements.

  5. List and describe six jQuery DOM manipulation methods - ECMA6/7 have save methods as jQuery.
  6. Six jQuery DOM manipulation methods are the append(), prepend() before(), after(), remove() and replace() methods. The append() method allows users to make changes to the DOM by appending a new node after the current node. The prepend() method does the exact same thing as the append() method, except it it creates a new node before the current node. The before/after() methods allow users to insert content after and before selected elements, essentially creating or changing siblings.The remove() and replace() methods are self descriptive. The remove() method removes an element and the replace() method replaces an element.

  7. List and describe two jQuery animation methods.
  8. Two jQuery animation methods are fadeIn() and fadeOut(). FadeIn() displays hidden elements by changing their display values to the default and then changing their opacity from 0 to 100. FadeOut() hides elements by changing their opacity from 100 to 0 and then changing their display values to none.

  9. What are the advantages of jQuery 1.12.4?
  10. jQuery 1.12.4 is supported by user interface and it supports IE 6, 7 and 8.

  11. Compare and contrast methods: addClass(), show(), and css( "display","block")?
  12. The method addClass() adds a class to an item within the HTML document. This would allow users to style a new class and potentially make some pretty big changes on the appearance of their webpage. The show() method is essentially the same as the display: block command in CSS. All these methods tie in with CSS, but addClass is the only method that creates major changes to the appearance of the page. The show() and display: block methods only make something visually appear on the screen, but does not significantly style it.