Dom ajax quiz

dom-ajax.md

DOM & AJAX rite of passage

outline:

Explain in detail using plain English what's happening in the code below:

var myButton = document.querySelector('#myButton');

  function alertSomething() {
      alert("Something");
  }

  myButton.addEventListener("click", alertSomething);

I'll start you off: "We are declaring a variable called myButton. We are then calling the querySelector method on the document object..."

Given the below HTML:

<div id="pageTitle"> 
	Welcome to my blog! 
</div>
<p class="post"> Ok, I'll write one more article </p>
<p id="firstPost" class="post"> This is the beginning of my blog... </p>

Which expressions below return you the paragraph with the text "This is the beginning of my blog..."

• document.querySelector('.post')
• document.querySelectorAll('.post')[0]
• document.querySelector('#firstPost')
• document.querySelectorAll('.post')[1]
• document.getElementById('.post')
• document.querySelector('.post#firstPost')

Now imagine you wanted to change the background colour of each post to blue, and you had to first explain your approach in English to another developer. Fill in the blanks in the following sentence:

"I will use the method ...................... on "document" and I will pass it the value .......... Because that method returns me an array, I will call the array method ......... on it and pass it the below function:

function setBgBlue(paragraph) {
    paragraph.style.backgroundColor = "blue";
}

You are making a chat application. Describe at least 3 features that would be on the client and 3 features that would be on the server:

Client:

• Show an input box and when someone types in it and presses "Submit" it should make a POST request to the server with the new message

• .............

• ..............

Server:

• Listen for new message requests and them to the existing lists of messages

• ..............................

• ...............................

We've written some code below that wishes Irina 'Happy birthday!' when it's her birthday. We first initialise her birthday variable as today but then we make a server request to get her REAL birthday. Do you see any problems with the code below or will it always work?

var today = '27/04/2019';
var irinasBirthday = '27/04/2019';

fetch('http://irina-api.com/my-birthday')
	.then(function (response) {
		return response.text();
	})
	.then(function (irinasActualBirthday) {
		irinasBirthday = irinasActualBirthday;
	});

if(today === irinasBirthday) {
	alert('Happy birthday!');
}

For each of the situations below, say whether you would use GET or POST for the request:

• retrieve a list of blog posts
• login to a site
• send an email
• perform a search on Google