闪电代写 -代写CS作业_CS代写_Finance代写_Economic代写_Statistics代写_代码代做_IT代写_加急帮助

Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

sENG365 LAB 3

JAvAscRiPr FoR rHE CLiENr AND

1NrERAcrioN wirH Ap1s usiNc REAcr

SENG365

17th February 2023

Purpose of this Lab

This lab begins our look into client-side development using JavaScript. This and the following labs will prepare you for Assignment 2 where you will create a web application for the API created in Assignment 1.

In this lab we will start from the basics of client-side development with plain old JavaScript and HTML, then we will move on to using a framework, in this case the popular React framework created by Facebook/Meta

1 JavaScript for the Front-end

Where HTML and CSS allow web developers to format the contents of a web page, JavaScript allows them to make the page responsive. For example, HTML is used for creating text boxes and creating butons, and CSS for styling these by changing their size, colour, or other atributes; whereas JavaScript allows for changing context on the page, creating pop-up messages and validating text in text boxes to make sure the required fields have been filled.

JavaScript makes web pages more dynamic by allowing users to interact with web pages, click on elements, and change the pages.

1.1 Exercise 1: JavaScript Form Validation

1. Create a new folder lab3 and within this another folder ex1.

2. Create a new file index.html with your ex1 folder that contains the code in Listing 1.

1 DOCTYPE html>

2 <html lang= "en">

4 <head>

5 <meta charset= "UTF-8">

6 <title>Lab 3: Exercise 1title>

7 head>

9 <body>

10 <form method= "GET" action= "https://www .google .com/search">

11 <input type= "text" name="q " id= "search_string" />

12 <input type= "submit" value= "Search" />

13 form>

14 body>

16 html>

Listing 1: Example HTML form. The method, action, and name of the text box are specific values the Google homepage uses to interact with it’s server. 3. Open the HTML file in your browser and test. The form will query Google with the search string that is entered into the box. 4. In the opening form tag, add an atribute called onSubmit that has a value of returnval idate Form().
1	<form method= "GET" action= "https://www .google .com/search" onsubmit= "return validateForm()">
5.	Listing 2: Updated form with onSubmit. At the botom of the <body> tag in your HTML add a new <script> tag and include the val idate Form function. This function checks the value of the text field on the form. If the field is not empty !="" then the function should return true, else provide a popup message and return false as shown in Listing 3.
1	<script type= "text/javascript">
2	function validateForm() {
3	var search_string = document .getElementById( "search_string" ) .value ;
4	if (search_string == "") {
5	alert("Search string is empty!" );
6	return false ;
7	} else {
8	return true ;
9	}
10	}
11	</script>

Listing 3: Validate form function.

6. Open your HTML file in the browser and test your form. The form should not submit to the server unless there is a query entered into the text box.

1.2 Debugging Front-end Applications with Google Chrome

In term 1 we discussed how to properly debug a server-side application using WebStorm’s built-in debugger. For client-side applications however, we can make use of tools built into browsers. We will specifically focus on Google Chrome’s DevTools1, however most other browsers have comparable tools. Google provides a great video introduc- tion to the Chrome debugger2. The video tutorial only focusses on debugging JavaScript code however the webpage covers of the other functionality for understanding network requests, page layout and styling, and storage.

2 JavaScript Frameworks (React)

React is a very popular framework, scoring 2nd in the 2022 Stack Overflow survey for web frameworks and tech- nologies3. Due to this popularity there is a large amount of online documentation and tutorials to help learn React, as well as many third-party libraries that work with React that we can use to make our development easier.

“React is a declarative, eficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called ‘components’.”4

2.1 Exercise 2: Geting Started with React

To use React, we must import a few scripts like any other JavaScript file. This can be done by downloading the file, using a package manager (such as npm), or by using a CDN5. For simplicity we will use a CDN for this lab, however this is not recommended for proper large scale development.

1. Create a new folder ex2 and create an HTML file index.html adding the code from Listing 4.

1 DOCTYPE html>

2 <html lang= "en">