It is nessesary that you answer this question correctly and accurately. ALSO SHO
ID: 3592645 • Letter: I
Question
It is nessesary that you answer this question correctly and accurately. ALSO SHOW THE RESULTING OUTPUT ON SCREEEN( SHOWING IT WORKS). Only impliment the canvaswithtimer.js
Question
Instructions:
Demo)
Open the the demo_code folder and run the static server found there. It has an accompanying html folder from which it will serve the client side application files. When the browser requests http://localhost:3000/example1.html you should see a browser application that looks like the following.
You can drag the words around (but you need to grab the word with your mouse near the start of the word).
If you type a name of a song like "Sister Golden Hair" in the text field and then press the ENTER key, or press the "Submit Request" button, an AJAX POST request is sent to the server (look at the server's console output) and it simply echos back a JSON object containing the text "NOT FOUND : Sister Golden Hair" and the client code then uses "NOT FOUND : Sister Golden Hair" as the word moving around the screen.
If you move the blue square with the arrow keys the client POST's its position to the server, though nothing in done with that information in this.
Study, for example, the client side javascript function handleSubmitButton() it looks like this:
The jQuery library is represented by an object referred to through the global variable $. ($ is a valid character that can appear in variable names in javascript.) jQuery's calls can be recognized by the use of the $ function object in syntax like $().method().
Notice the contents of the user text field is both retrieved and set using jQuery calls. Also the $.post() AJAX request is a method invoked on the jQuery $ object.
jQuery is accessible because the example1.html web page, representing the application, includes it:
jQuery can be included by either referencing a stand-alone file (as is done here) or by referring to the URL of the jQuery library on the internet). See W3 schools reference https://www.w3schools.com/jquery/default.asp for more information if you are interested.
In his 2016 book "Beyond jQuery" Ray Nicholus argues that all of the jQuery calls that are used for single page apps can now be done natively with javascript's Web API. (The ES6 implementation of javascript supported by modern browsers). The following two articles (chapters) from "Beyond jQuery" are included here.
AJAX Requests -from Beyond jQuery by Ray Nicholus 2016.pdf
Browser Event -from Beyond jQuery by Ray Nicholus 2016.pdf
More infomation on these topics can also be found at the W3 Schools site and in particular:
https://www.w3schools.com/js/js_ajax_intro.asp
and
https://www.w3schools.com/jsref/default.asp
For this you need to read these articles and then remove all the jQuery dependency from the code and replace it with native javascript.
ACTUAL QUESTION
Problem 1)
For this problem we want you to replace all the jQuery dependency in the $(document).ready() function in file canvasWithTimer.js. That is, remove all the jQuery code from the following:
Comment out each jQuery call and replace it with native javascript Web API equivalent.
For example (from the W3 schools reference) the jQuery that gives you access to the document:
$(document)
using javascript alone is just:
document
Whereas the jQuery that provides a reference to the html element with id=canvas1:
$("#canvas1")
using javascript alone is:
document.getElementById('canvas1')
Read the articles and other suggested links and replace all the jQuery code for the $(document).ready(...) function with non-jQuery native javascript.
When you have completed this retest the application. It should not behave any differently.
canvasWithTimer.js
/*
Javasript to handle mouse dragging and release
to drag a string around the html canvas
Keyboard arrow keys are used to move a moving box around
Here we are doing all the work with javascript and jQuery. (none of the words
are HTML, or DOM, elements. The only DOM element is just the canvas on which
where are drawing and a text field and button where the user can type data
This example shows examples of using JQuery
See the W3 Schools website to learn basic JQuery
JQuery syntax:
$(selector).action();
e.g.
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Mouse event handlers are being added and removed using jQuery and
a jQuery event object is being passed to the handlers
Keyboard keyDown handler is being used to move a "moving box" around
Keyboard keyUP handler is used to trigger communication with the
server via POST message sending JSON data
*/
//Use javascript array of objects to represent words and their locations
var words = [];
words.push({word: "I", x:50, y:50});
words.push({word: "like", x:70, y:50});
words.push({word: "the", x:120, y:50});
words.push({word: "way", x:170, y:50});
words.push({word: "your", x:230, y:50});
words.push({word: "sparkling", x:300, y:50});
words.push({word: "earrings", x:430, y:50});
words.push({word: "lay", x:540, y:50});
var movingString = {word: "Moving",
x: 100,
y:100,
xDirection: 1, //+1 for leftwards, -1 for rightwards
yDirection: 1, //+1 for downwards, -1 for upwards
stringWidth: 50, //will be updated when drawn
stringHeight: 24}; //assumed height based on drawing point size
//indended for keyboard control
var movingBox = {x: 50,
y: 50,
width: 100,
height: 100};
var wayPoints = []; //locations where the moving box has been
var timer;
var wordBeingMoved;
var deltaX, deltaY; //location where mouse is pressed
var canvas = document.getElementById('canvas1'); //our drawing canvas
function getWordAtLocation(aCanvasX, aCanvasY){
//locate the word near aCanvasX,aCanvasY
//Just use crude region for now.
//should be improved to using lenght of word etc.
//note you will have to click near the start of the word
//as it is implemented now
for(var i=0; i<words.length; i++){
if(Math.abs(words[i].x - aCanvasX) < 20 &&
Math.abs(words[i].y - aCanvasY) < 20) return words[i];
}
return null;
}
var drawCanvas = function(){
var context = canvas.getContext('2d');
context.fillStyle = 'white';
context.fillRect(0,0,canvas.width,canvas.height); //erase canvas
context.font = '20pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
for(var i=0; i<words.length; i++){ //note i declared as var
var data = words[i];
context.fillText(data.word, data.x, data.y);
context.strokeText(data.word, data.x, data.y);
}
movingString.stringWidth = context.measureText( movingString.word).width;
//console.log(movingString.stringWidth);
context.fillText(movingString.word, movingString.x, movingString.y);
//draw moving box
context.fillRect(movingBox.x,
movingBox.y,
movingBox.width,
movingBox.height);
//draw moving box way points
for(i in wayPoints){
context.strokeRect(wayPoints[i].x,
wayPoints[i].y,
movingBox.width,
movingBox.height);
}
//draw circle
context.beginPath();
context.arc(canvas.width/2, //x co-ord
canvas.height/2, //y co-ord
canvas.height/2 - 5, //radius
0, //start angle
2*Math.PI //end angle
);
context.stroke();
}
function handleMouseDown(e){
//get mouse location relative to canvas top left
var rect = canvas.getBoundingClientRect();
//var canvasX = e.clientX - rect.left;
//var canvasY = e.clientY - rect.top;
var canvasX = e.pageX - rect.left; //use jQuery event object pageX and pageY
var canvasY = e.pageY - rect.top;
console.log("mouse down:" + canvasX + ", " + canvasY);
wordBeingMoved = getWordAtLocation(canvasX, canvasY);
//console.log(wordBeingMoved.word);
if(wordBeingMoved != null ){
deltaX = wordBeingMoved.x - canvasX;
deltaY = wordBeingMoved.y - canvasY;
//document.addEventListener("mousemove", handleMouseMove, true);
//document.addEventListener("mouseup", handleMouseUp, true);
$("#canvas1").mousemove(handleMouseMove);
$("#canvas1").mouseup(handleMouseUp);
}
// Stop propagation of the event and stop any default
// browser action
e.stopPropagation();
e.preventDefault();
drawCanvas();
}
function handleMouseMove(e){
console.log("mouse move");
//get mouse location relative to canvas top left
var rect = canvas.getBoundingClientRect();
var canvasX = e.pageX - rect.left;
var canvasY = e.pageY - rect.top;
wordBeingMoved.x = canvasX + deltaX;
wordBeingMoved.y = canvasY + deltaY;
e.stopPropagation();
drawCanvas();
}
function handleMouseUp(e){
console.log("mouse up");
e.stopPropagation();
//$("#canvas1").off(); //remove all event handlers from canvas
//$("#canvas1").mousedown(handleMouseDown); //add mouse down handler
//remove mouse move and mouse up handlers but leave mouse down handler
$("#canvas1").off("mousemove", handleMouseMove); //remove mouse move handler
$("#canvas1").off("mouseup", handleMouseUp); //remove mouse up handler
drawCanvas(); //redraw the canvas
}
//JQuery Ready function -called when HTML has been parsed and DOM
//created
//can also be just $(function(){...});
//much JQuery code will go in here because the DOM will have been loaded by the time
//this runs
function handleTimer(){
movingString.x = (movingString.x + 5*movingString.xDirection);
movingString.y = (movingString.y + 5*movingString.yDirection);
//keep inbounds of canvas
if(movingString.x + movingString.stringWidth > canvas.width) movingString.xDirection = -1;
if(movingString.x < 0) movingString.xDirection = 1;
if(movingString.y > canvas.height) movingString.yDirection = -1;
if(movingString.y - movingString.stringHeight < 0) movingString.yDirection = 1;
drawCanvas()
}
//KEY CODES
//should clean up these hard coded key codes
var ENTER = 13;
var RIGHT_ARROW = 39;
var LEFT_ARROW = 37;
var UP_ARROW = 38;
var DOWN_ARROW = 40;
function handleKeyDown(e){
console.log("keydown code = " + e.which );
var dXY = 5; //amount to move in both X and Y direction
if(e.which == UP_ARROW && movingBox.y >= dXY)
movingBox.y -= dXY; //up arrow
if(e.which == RIGHT_ARROW && movingBox.x + movingBox.width + dXY <= canvas.width)
movingBox.x += dXY; //right arrow
if(e.which == LEFT_ARROW && movingBox.x >= dXY)
movingBox.x -= dXY; //left arrow
if(e.which == DOWN_ARROW && movingBox.y + movingBox.height + dXY <= canvas.height)
movingBox.y += dXY; //down arrow
var keyCode = e.which;
if(keyCode == UP_ARROW | keyCode == DOWN_ARROW){
//prevent browser from using these with text input drop downs
e.stopPropagation();
e.preventDefault();
}
}
function handleKeyUp(e){
console.log("key UP: " + e.which);
if(e.which == RIGHT_ARROW | e.which == LEFT_ARROW | e.which == UP_ARROW | e.which == DOWN_ARROW){
var dataObj = {x: movingBox.x, y: movingBox.y};
//create a JSON string representation of the data object
var jsonString = JSON.stringify(dataObj);
$.post("positionData", jsonString, function(data, status){
console.log("data: " + data);
console.log("typeof: " + typeof data);
//var wayPoint = JSON.parse(data); //<--use this if expecting 'text/plain'
var wayPoint = data; //<--use this if expecting 'application/json'
wayPoints.push(wayPoint);
for(i in wayPoints) console.log(wayPoints[i]);
});
}
if(e.which == ENTER){
handleSubmitButton(); //treat ENTER key like you would a submit
$('#userTextField').val(''); //clear the user text field
}
e.stopPropagation();
e.preventDefault();
}
function handleSubmitButton () {
var userText = $('#userTextField').val(); //get text from user text input field
if(userText && userText != ''){
var userRequestObj = {text: userText};
var userRequestJSON = JSON.stringify(userRequestObj);
$('#userTextField').val(''); //clear the user text field
//alert ("You typed: " + userText);
$.post("userText", userRequestJSON, function(data, status){
console.log("data: " + data);
console.log("typeof: " + typeof data);
//var responseObj = JSON.parse(data); //<-- use this if expecting 'text/plain'
var responseObj = data; //<-- use this if expecting 'application/json'
movingString.word = responseObj.text;
if(responseObj.wordArray) words = responseObj.wordArray;
});
}
}
$(document).ready(function(){
//This is called after the broswer has loaded the web page
//add mouse down listener to our canvas object
$("#canvas1").mousedown(handleMouseDown);
//add key handler for the document as a whole, not separate elements.
$(document).keydown(handleKeyDown);
$(document).keyup(handleKeyUp);
timer = setInterval(handleTimer, 100);
//timer.clearInterval(); //to stop
drawCanvas();
});
Explanation / Answer
$(selector).action();
e.g.
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Mouse event handlers are being added and removed using jQuery and
a jQuery event object is being passed to the handlers
Keyboard keyDown handler is being used to move a "moving box" around
Keyboard keyUP handler is used to trigger communication with the
server via POST message sending JSON data
*/
//Use javascript array of objects to represent words and their locations
var words = [];
words.push({word: "I", x:50, y:50});
words.push({word: "like", x:70, y:50});
words.push({word: "the", x:120, y:50});
words.push({word: "way", x:170, y:50});
words.push({word: "your", x:230, y:50});
words.push({word: "sparkling", x:300, y:50});
words.push({word: "earrings", x:430, y:50});
words.push({word: "lay", x:540, y:50});
var movingString = {word: "Moving",
x: 100,
y:100,
xDirection: 1, //+1 for leftwards, -1 for rightwards
yDirection: 1, //+1 for downwards, -1 for upwards
stringWidth: 50, //will be updated when drawn
stringHeight: 24}; //assumed height based on drawing point size
//indended for keyboard control
var movingBox = {x: 50,
y: 50,
width: 100,
height: 100};
var wayPoints = []; //locations where the moving box has been
var timer;
var wordBeingMoved;
var deltaX, deltaY; //location where mouse is pressed
var canvas = document.getElementById('canvas1'); //our drawing canvas
function getWordAtLocation(aCanvasX, aCanvasY){
//locate the word near aCanvasX,aCanvasY
//Just use crude region for now.
//should be improved to using lenght of word etc.
//note you will have to click near the start of the word
//as it is implemented now
for(var i=0; i<words.length; i++){
if(Math.abs(words[i].x - aCanvasX) < 20 &&
Math.abs(words[i].y - aCanvasY) < 20) return words[i];
}
return null;
}
var drawCanvas = function(){
var context = canvas.getContext('2d');
context.fillStyle = 'white';
context.fillRect(0,0,canvas.width,canvas.height); //erase canvas
context.font = '20pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
for(var i=0; i<words.length; i++){ //note i declared as var
var data = words[i];
context.fillText(data.word, data.x, data.y);
context.strokeText(data.word, data.x, data.y);
}
movingString.stringWidth = context.measureText( movingString.word).width;
//console.log(movingString.stringWidth);
context.fillText(movingString.word, movingString.x, movingString.y);
//draw moving box
context.fillRect(movingBox.x,
movingBox.y,
movingBox.width,
movingBox.height);
//draw moving box way points
for(i in wayPoints){
context.strokeRect(wayPoints[i].x,
wayPoints[i].y,
movingBox.width,
movingBox.height);
}
//draw circle
context.beginPath();
context.arc(canvas.width/2, //x co-ord
canvas.height/2, //y co-ord
canvas.height/2 - 5, //radius
0, //start angle
2*Math.PI //end angle
);
context.stroke();
}
function handleMouseDown(e){
//get mouse location relative to canvas top left
var rect = canvas.getBoundingClientRect();
//var canvasX = e.clientX - rect.left;
//var canvasY = e.clientY - rect.top;
var canvasX = e.pageX - rect.left; //use jQuery event object pageX and pageY
var canvasY = e.pageY - rect.top;
console.log("mouse down:" + canvasX + ", " + canvasY);
wordBeingMoved = getWordAtLocation(canvasX, canvasY);
//console.log(wordBeingMoved.word);
if(wordBeingMoved != null ){
deltaX = wordBeingMoved.x - canvasX;
deltaY = wordBeingMoved.y - canvasY;
//document.addEventListener("mousemove", handleMouseMove, true);
//document.addEventListener("mouseup", handleMouseUp, true);
$("#canvas1").mousemove(handleMouseMove);
$("#canvas1").mouseup(handleMouseUp);
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.