Development JavaScript JSON JQuery DOM.txt

Card Set Information

Development JavaScript JSON JQuery DOM.txt
2014-03-27 19:27:13
Software Development JavaScript JSON JQuery DOM
Software Development JavaScript JSON JQuery DOM
Software Development JavaScript JSON JQuery DOM
Show Answers:

  1. What is JavaScript?
    JavaScript is a scripting language that doesn't need to compile its code before being run and which is executed by the browser when a page is downloaded or in response to an event triggered by the user. It is also the most popular programming language in the world and used on everything from web pages, servers, pcs, tablets, cell phones, refrigerators, cars, and more.
  2. What is the DOM?
    Everything in an HTML document exist as a node (ie., , <link>, , text, div) which is displayed by the browser to the user; the DOM is a heirarchial tree of nodes which display each of these objects much like a tree and allow a programmer generic access to these objects, thereby behaving much like a HTML API. The Document Object Model (DOM) allows programmers generic access (ie., adding, deleting, manipulating) to these HTML objects and their attributes and styles. It's language independent, so it can be manipulated in JavaScript, VBScript, Java, and more </div> </div> </li> <li> <div class='card'> <div class='question'> Write to the DOM to change the text, font color, and font style of a textbox named txtName </div> <div class='answer'> n = document.getElementById("txtName"); n.innerHTML = "Hello"; = "25px"; = "#DFDFDF"; </div> </div> </li> <li> <div class='card'> <div class='question'> What are the two ways of commenting code in JavaScript? </div> <div class='answer'> /* for multiple lines */ and // for single lines </div> </div> </li> <li> <div class='card'> <div class='question'> Variable names can use these three types of characters: </div> <div class='answer'> letter, $, or _ </div> </div> </li> <li> <div class='card'> <div class='question'> What are data types exist in JavaScript? </div> <div class='answer'> string, number, boolean, array, object, null, and undefined </div> </div> </li> <li> <div class='card'> <div class='question'> Does JavaScript have dynamic data types? Explain. </div> <div class='answer'> Because data types can be changed on the fly, for example, the following variable will change its data type five times, from undefined, null, string, number, and finally to boolean: var name; name = null; name = "Joe"; name = 30; name = false; </div> </div> </li> <li> <div class='card'> <div class='question'> Write two simple JavaScript arrays called cars and populate it. </div> <div class='answer'> var cars = new Array(); cars[0] = "Ford"; cars[1] = "Dodge"; or var cars = new Array("Saab","Volvo","BMW"); </div> </div> </li> <li> <div class='card'> <div class='question'> Write a simple person object in JavaScript then use it. </div> <div class='answer'> var person={firstname:"John",lastname:"Doe",id:5566}; alert(person.firstname + ' ' + person.lastname); </div> </div> </li> <li> <div class='card'> <div class='question'> Write a simple JavaScript function that interprets a JSON object and then uses it. </div> <div class='answer'> var jsonCont = '["Europe", "Asia", "Australia", "Antarctica","North America", "South America", "Africa"]'; var continents = eval( jsonCont );alert(continents[0] + " is one of the " + continents.length + " continents."); </div> </div> </li> <li> <div class='card'> <div class='question'> Should you use Eval() or parseJSON() and why? </div> <div class='answer'> The eval function blindly evaluates whatever expression it is passed. An untrustworthy source could therefore include potentially dangerous JavaScript along with or mixed into the literal notation that makes up the JSON data and so it is recommended that you parse the JSON text using the parseJSON() function found in the json.js file, like: var continents = arrayAsJSONText.parseJSON(); The parseJSON() function also uses eval, but only if the string contained in arrayAsJSONText conforms to the JSON text standard. It does this using a clever regular expression test. </div> </div> </li> <li> <div class='card'> <div class='question'> What if you want to parse a JSON object, not in the JavaScript on the browser, but in the server-side code in C#? </div> <div class='answer'> Then you could import one of numerous libraries that convert JSON into server-side functions such as the one used with Ajax. </div> </div> </li> <li> <div class='card'> <div class='question'> What's the most used JavaScript call? </div> <div class='answer'> document.getElementById() </div> </div> </li> <li> <div class='card'> <div class='question'> Write an if statement to check for null or undefined types. </div> <div class='answer'> if (typeof(obj) == null || typeof(obj) == undefined) { /* Do something */ } </div> </div> </li> <li> <div class='card'> <div class='question'> What's the difference between null and undefined? </div> <div class='answer'> A variable is undefined if it can't be found or hasn't been initialized, such as var x;. A variable is null if its value has been set to null or its contents cleared. </div> </div> </li> <li> <div class='card'> <div class='question'> What is JSON? </div> <div class='answer'> JavaScript Object Notation (JSON) is a language independent, free-text notation mechanism used to describe an object or list of objects, almost identical in functionality to XML but with a different syntax. </div> </div> </li> <li> <div class='card'> <div class='question'> Give several string functions commonly used in programming. </div> <div class='answer'> indexOf(), lastIndexOf, match(), replace(), search(), split(), substr(), substring(), toUpperCase(), trim, valueOf() </div> </div> </li> <li> <div class='card'> <div class='question'> What is the value of the following call: x = "5" + 3; </div> <div class='answer'> 53 </div> </div> </li> <li> <div class='card'> <div class='question'> Write a basic switch statement with a default value in JavaScript: </div> <div class='answer'> switch(x){case 1: break; case 2: break; default: } </div> </div> </li> <li> <div class='card'> <div class='question'> What can you do to set a boolean value to false? </div> <div class='answer'> false, 0, -0, null, undefined, NaN all set a boolean equal to false because anything else is considered true </div> </div> </li> <li> <div class='card'> <div class='question'> Write a basic for loop in JavaScript </div> <div class='answer'> for(var i = 0; i < city.length; i++) { document.write(city); } </div> </div> </li> <li> <div class='card'> <div class='question'> What can be used to stop execution in a for loop? </div> <div class='answer'> You can use a "break" or "continue" statement in a for loop. </div> </div> </li> <li> <div class='card'> <div class='question'> How do you create a local and global JavaScript variable? </div> <div class='answer'> Local variables are declared in a function and may or may not contain the var prefix; however, global variables are those created outside of all functions, thus in the main section of the script. </div> </div> </li> <li> <div class='card'> <div class='question'> Write code to send the button name and object to a JavaScript function: </div> <div class='answer'> onClick = "Display(this);". function Display(obj) { var o =; alert(o); } </div> </div> </li> <li> <div class='card'> <div class='question'> What is a callback function? </div> <div class='answer'> A function passed to another function as a parameter. </div> </div> </li> <li> <div class='card'> <div class='question'> Write a simple callback function consisting of alerts. </div> <div class='answer'> function mySandwich(param1, param2, callback) { alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);callback();} mySandwich('ham', 'cheese', function() { alert('Finished eating my sandwich.');}); </div> </div> </li> <li> <div class='card'> <div class='question'> Write a Person object using JSON notation: </div> <div class='answer'> { "first":"Matt","last":"Johnson","age":25,"address":{"city":"Lancaster","state":"NY"}} </div> </div> </li> <li> <div class='card'> <div class='question'> How is a JSON object evaluated in JavaScript and what does that mean? </div> <div class='answer'> One of the most common uses of JSON is to fetch JSON data from a web server, convert the JSON data to a JavaScript object, and then use it on the web pages. This can be done with the following syntax: var obj = eval ("(" + txt + ")"); . However, the eval() function in JavaScript can also be used to execute any JavaScript it receives, thus possess a security risk. </div> </div> </li> <li> <div class='card'> <div class='question'> What is JQuery? </div> <div class='answer'> jQuery is a JavaScript framework, which purpose is to make it much easier to use JavaScript on your website. You could also describe jQuery as an abstraction layer, since it takes a lot of the functionality that you would have to write many lines of JavaScript to accomplish and wraps it into functions that you can call with a single line of code. </div> </div> </li> <li> <div class='card'> <div class='question'> Navigate the DOM tree to change the third paragraph of a webpage and change it's background color to light grey. </div> <div class='answer'> var parasInDiv = parasDiv.getElementsByTagName("p"); for (var i = 0; i < parasInDiv.length; i++) { if (i == 2) { parasInDiv[i].style.backgroundColor = "lightgrey";}} </div> </div> </li> <li> <div class='card'> <div class='question'> Write a simple JQuery function to hide each paragraph on a webpage when clicked. </div> <div class='answer'> $(document).ready(function(){ $("p").click(function(){ $(this).hide() ;});}); </div> </div> </li> <li> <div class='card'> <div class='question'> What major companies use the JQuery library? </div> <div class='answer'> Microsoft, Netflix, Google, and IBM </div> </div> </li> <li> <div class='card'> <div class='question'> JQuery is useful for manipulating what technologies? </div> <div class='answer'> HTML, DOM, CSS, HTML events, AJAX, and provides numerous built-in utilities. </div> </div> </li> <li> <div class='card'> <div class='question'> What is the basic syntax of JQuery? </div> <div class='answer'> $(selector).action(); // $ give access to JQuery, selector is the element we are looking for, and action is the JQuery method to perform. </div> </div> </li> <li> <div class='card'> <div class='question'> Perform the following four (4) actions of hiding: (a) hide the current element, (b) hide all paragraphs, (c) hide a paragraph with the id "paragraph3", and (d) hide all elements given the class id of "TablePar". </div> <div class='answer'> (a) $(this).hide(); (b) $("p").hide(); (c) $("#paragraph3").hide(); (d) $(".TablePar").hide(); </div> </div> </li> <li> <div class='card'> <div class='question'> All JQuery functions are in this function. What is the function and why do we do this? </div> <div class='answer'> The reason is because we want to make sure the DOM is fully loaded before calling anything in the DOM, for example, trying to hide an object that hasn't been written to the DOM would generate an error. The function is: $(document).ready(function() { /* all your JQuery code would go here */ }); </div> </div> </li> <li> <div class='card'> <div class='question'> Write a JQuery function to turn all textbox objects grey/white when in them. </div> <div class='answer'> $("input").focus(function(){$(this).css("background-color","#cccccc");}); $("input").blur(function(){ $(this).css("background-color","#ffffff");}); </div> </div> </li> <li> <div class='card'> <div class='question'> What is wrong with the following code snippet: $("button").click(function(){ $("p").hide(1000);alert("The paragraph is now hidden");});? </div> <div class='answer'> The alert box will be called before the paragraph has been hidden. This can be fixed by using a JQuery Callback function. </div> </div> </li> <li> <div class='card'> <div class='question'> Write a JQuery callback function that hides all paragraphs in a document when any button on the page is clicked, followed by an alert box stating the paragraphs are now hidden. </div> <div class='answer'> $("button").click(function(){$("p").hide("slow",function(){alert("The paragraph is now hidden");});}); </div> </div> </li> <li> <div class='card'> <div class='question'> Write a JQuery call to get the value of a textbox after clicking a button; After, what would need to be changed in order to get the ID attribute of that same textbox. </div> <div class='answer'> $("#btn1").click(function(){alert("Value: " + $("#test").val());}); /* to get an attribute, simply replace the "val" keyword with the "attr" keyword containing the name of the attribute you'd like, such as: .attr("ID") </div> </div> </li> <li> <div class='card'> <div class='question'> Using JQuery, set a paragraph styling to font-size 10px, red, and italicized. </div> <div class='answer'> $("#p").css({"background-color":"red","font-size":"10px", "font-style":"italics"}); </div> </div> </li> <li> <div class='card'> <div class='question'> Ajax can work closely with JQuery to build post, get, and load Ajax file functions. Write a small JQuery function to load the contents of a file into a div element using AJAX. </div> <div class='answer'> $(document).ready(function(){ $("button").click(function(){$("#div1").load("demo_test.txt");});}); </div> </div> </li> <li> <div class='card'> <div class='question'> What methods are available for traversing a DOM tree using JQuery? </div> <div class='answer'> Numberous method calls exist, but most popular are .parent(), .children(), .find(), .siblings(), next(), .first(), .last(), and .eq() </div> </div> </li> <li> <div class='card'> <div class='question'> What's the difference between window.onload = function() {} and $(document).ready(function() {})? </div> <div class='answer'> Onload waits for the entire page to be loaded, including images and such. The Ready function occurs first, when the DOM has been fully created and is ready to be manipulated but not necessarily when the entire content of the page has been loaded. </div> </div> </li> </ol> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-8545524-2"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>