Chapter 15 - Review
Javascript is one of the most popular client-side scripting languages for web pages. JavaScript is primarily object-oriented while PHP is generally a procedural language that requires server side processing. In PHP, all variables are local in scope unless declared as global. JavaScript is opposite, and all variables are global unless declared with the var keyword. While PHP is not case-sensitive in function or class declarations, JavaScript is.
jQuery is a library built to facilitate the use of the Javascript language, providing methods for interacting with the DOM, manipulating content, controlling events, adding effects on presentation... All taking into consideration cross browser compatibility issues. It prevents the web developer from having to write these from scratch for each new project.
To include an external JS file in an HTML5 page use
<script src="path/to/js/my-js-file.js"></script>
To include the javascript directly into the page output, use
<script>JAVASCRIPT code goes here</script>
HTML5 allows you to exclude the type attribute in the script tag if it is text/javascript, otherwise include the correct type
or if using < HTML5 or XHTML include type="text/javascript". Generally it is best practice to include javascript files at the
closing tag of the document to prevent blocking of other page elements from loading.
The entire document DOM must be read before any javascript is executed, otherwise you may encounter errors for js that is being called on unrecognized elements.
Unique identifiers are necessary in order to precisely select the correct element(s) for execution of js code. The most common unique identifier is the ID attribute - it can only be used for one element in the dom - mainly useful for css and js selection.
In jQuery, to select all paragraphs - $('p')
to select all elements in a certain class - $('.className')
to select a specific element by id - $('#elementID')
An event listener is a trigger that causes a particular action when a specific event occurs. Events include
when a user hovers over, clicks on, focuses on, resizes, types, etc.. a specific element/region of the page. The event listener
allows that event to be associated with an action or response. In jQuery you could use an anonymous function like this
$('#selectedElement').eventKeyword(function(eventObject) {javascript things to do});
or you could assign a predefined function like this
$('#selectedElement').eventKeyword(functionName);
The Javascript source will only be refreshed when the browser is reloaded, so if you dynamically change some script after the page has already loaded, you will need to refresh the page in order for your changes to take effect.
jQuery provides many methods for interacting with the DOM. These include hide(), show(), toggle(), fadeIn(), fadeOut(), addClass(), removeClass(), toggleClass(), val(), html(), text(), attr(), prepend(), append(), remove() etc...
Ajax stands for Asynchronous JavaScript and XML. It lets a web page ask for and receive a response from a web server and then update itself without having to load a new web page. In summary, it uses the javascript XMLHttpRequest object, built into current web browsers,(jQuery uses the ajax() method) to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files. The proper use of AJAX allows a more seamless user experience and page updates that are faster and respond to specific user activity refreshing certain parts of a page without a full refresh.
A server-side script will need to be interpreted by the Apache server in order to be passed back to the browser upon execution.
var objectName = new Object();
The data property of the ajax object stores the data being passed to the PHP script as part of the Ajax
request. The variable names used in storing these properties are the same names used by the called script to access
their values.
The ajax object type property indicates the method which the request returns any variables from
the server - either get or post (get is the default).
<?php $review = array( 1 => array( 'q'=>'What is JavaScript? How does JavaScript compare to PHP?', 'a'=>'<p>Javascript is one of the most popular client-side scripting languages for web pages. JavaScript is primarily object-oriented while PHP is generally a procedural language that requires server side processing. In PHP, all variables are local in scope unless declared as global. JavaScript is opposite, and all variables are global unless declared with the var keyword. While PHP is not case-sensitive in function or class declarations, JavaScript is.</p>' ), 2 => array( 'q'=>'What is jQuery? What is the relationship between jQuery and JavaScript?', 'a'=>'<p>jQuery is a library built to facilitate the use of the Javascript language, providing methods for interacting with the DOM, manipulating content, controlling events, adding effects on presentation... All taking into consideration cross browser compatibility issues. It prevents the web developer from having to write these from scratch for each new project.</p>' ), 3 => array( 'q'=>'How is an external JavaScript file incorporated into an HTML page? How is JavaScript code placed within the HTML page itself?', 'a'=>'<p>To include an external JS file in an HTML5 page use<br /><b><script src="path/to/js/my-js-file.js"></script></b><br/> To include the javascript directly into the page output, use<br/><b><script>JAVASCRIPT code goes here</script></b><br/> HTML5 allows you to exclude the type attribute in the script tag if it is text/javascript, otherwise include the correct type or if using < HTML5 or XHTML include type="text/javascript". Generally it is best practice to include javascript files at the closing tag of the document to prevent blocking of other page elements from loading.</p>' ), 4 => array( 'q'=>'Why is it important to wait until the entire DOM has been loaded in order to execute JavaScript code that references DOM elements?', 'a'=>'<p>The entire document DOM must be read before any javascript is executed, otherwise you may encounter errors for js that is being called on unrecognized elements.</p>' ), 5 => array( 'q'=>'Why are unique identifiers in the DOM necessary?', 'a'=>'<p>Unique identifiers are necessary in order to precisely select the correct element(s) for execution of js code. The most common unique identifier is the ID attribute - it can only be used for one element in the dom - mainly useful for css and js selection.</p>' ), 6 => array( 'q'=>'In jQuery, how do you select elements of a given tag type? How do you select elements that have a certain class? How do you select a specific element?', 'a'=>'<p>In jQuery, to select all paragraphs - <b>$(\'p\')</b><br/> to select all elements in a certain class - <b>$(\'.className\')</b><br />to select a specific element by id - <b>$(\'#elementID\')</b></p>' ), 7 => array( 'q'=>'In jQuery, how do you add an event listener to a page element (or elements)? What is an event listener?', 'a'=>'<p>An event listener is a trigger that causes a particular action when a specific event occurs. Events include when a user hovers over, clicks on, focuses on, resizes, types, etc.. a specific element/region of the page. The event listener allows that event to be associated with an action or response. In jQuery you could use an anonymous function like this<br /><b> $(\'#selectedElement\').eventKeyword(function(eventObject) {javascript things to do});</b><br />or you could assign a predefined function like this<br /> <b>$(\'#selectedElement\').eventKeyword(functionName);</b></p>' ), 8 => array( 'q'=>'Why must you reload HTML pages after altering its JavaScript?', 'a'=>'<p>The Javascript source will only be refreshed when the browser is reloaded, so if you dynamically change some script after the page has already loaded, you will need to refresh the page in order for your changes to take effect.</p>' ), 9 => array( 'q'=>'What are some of the jQuery functions one can use to manipulate the DOM?', 'a'=>'<p>jQuery provides many methods for interacting with the DOM. These include hide(), show(), toggle(), fadeIn(), fadeOut(), addClass(), removeClass(), toggleClass(), val(), html(), <a target="_blank" href="http://api.jquery.com/text/">text()</a>, attr(), prepend(), append(), remove() etc... </p>' ), 10 => array( 'q'=>'What is Ajax? Why is Ajax a “good thing”?', 'a'=>'<p>Ajax stands for <b>Asynchronous JavaScript and XML</b>. It lets a web page ask for and receive a response from a web server and then update itself without having to load a new web page. In summary, it uses the javascript XMLHttpRequest object, built into current web browsers,(jQuery uses the ajax() method) to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files. The proper use of AJAX allows a more seamless user experience and page updates that are faster and respond to specific user activity refreshing certain parts of a page without a full refresh.</p>' ), 11 => array( 'q'=>'Why must an HTML page that performs a server-side request be loaded through a URL?', 'a'=>'<p>A server-side script will need to be interpreted by the Apache server in order to be passed back to the browser upon execution.</p>' ), 12 => array( 'q'=>'How do you create a generic object in JavaScript?', 'a'=>'<p>var objectName = new Object();</p>' ), 13 => array( 'q'=>'What impact does the Ajax request’s type property have? What impact do the names of the properties in the data object have?', 'a'=>'<p> The data property of the ajax object stores the data being passed to the PHP script as part of the Ajax request. The variable names used in storing these properties are the same names used by the called script to access their values.<br /> The ajax object type property indicates the method which the request returns any variables from the server - either get or post (get is the default).</p>' ) ); include('templates/review.php');