Technology Empowerment Team

Form 3 ~ 6 Potential Course

2023-2024

Floor 4 - Computer Room

Mr. Peter

Outline

Connect to the server

Development and practice

1.1.

Ex22 - While Loop from 1 to n

1.2.

Ex23 - While Loop from n to 0

1.3.

Ex24 - Reverse String

1.4.

Ex25 - Sum

Server

https://EngNameSurname.srleng.com

https://ArielMak.srleng.com

https://ChloeLam.srleng.com

https://EllaLi.srleng.com

https://EmmaAo.srleng.com

https://EuniceHo.srleng.com

https://KerrynLam.srleng.com

https://PeterChan.srleng.com

https://QiannahCheang.srleng.com

https://SophieLam.srleng.com

https://SophieSou.srleng.com

10.

https://VenusChim.srleng.com

11.

https://WinkyWang.srleng.com

12.

https://YoyoChan.srleng.com

13.

https://ZetaIong.srleng.com

14.

How to connect to the server

Ex22

Ex22 - While Loop from 1 to n

Part 1 - Generate the HTML structure

Part 1 - Tasks:

Create a folder called "Ex22"

Create a file called "index.html" under the "Ex22" folder

HTML structure

Tab

Create a <input> element with following attributes:

Create a <button> element with following content:

Ex22 - While Loop from 1 to n

Tab

type="text"

maxlength="1"

Generate

Tab

Create a <br> element to have a next line

Tab

Create a <ul> element and create following element within the <ul> element

Tab

Create a <li> element with "A" content

Tab

Create a <li> element with "B" content

Tab

Create a <li> element with "C" content

Tab

Part 1 - Tasks:

Create a folder called "Ex22"

Create a file called "index.html" under the "Ex22" folder

HTML structure

Tab

Create a <input> element with following attributes:

Create a <button> element with following content:

Ex22 - While Loop from 1 to n

Tab

type="text"

maxlength="1"

Generate

Tab

Create a <br> element to have a next line

Tab

Create a <ul> element and create following element within the <ul> element

Tab

Create a <li> element with "A" content

Tab

Create a <li> element with "B" content

Tab

Create a <li> element with "C" content

Tab

Part 2 - Tasks:

Import jQuery at the end of the <body> element

Ex22 - While Loop from 1 to n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Create a <script> element to write JavaScript

Tab

Listen to the <button> element if there is a click event occur

$( 'button' ).click(() => {
	
});

Get the user input if button is clicked and save the user input into a variable called "val"

let val = $('input').val();

Display the input value

alert(val);

Click this link to view the demo

Part 3 - Tasks:

Ex22 - While Loop from 1 to n

Use while loop to iterate from 1 to n

let i = 1;

Click this link to view the demo

Create a variable starting from 1

while( i < 3 ) {
	alert(i);
	i = i + 1;
}

Create a while loop that will be loop if i is less than 3, and increase the i variable in every loop

Change the while loop condition to loop from 1 to user input number

Part 4 - Tasks:

Ex22 - While Loop from 1 to n

Create a variable called "s" before the while loop

let s = '';

Click this link to view the demo

This variable is used to accumulate the <li> list

Update the "s" variable in every loop that is to create a list from <li>0</li> to <li>n - 1</li>

s = s + '<li>' + i + '</li>';

Save and preview the code, and update the code to loop from 1 to n rather than 0 to n-1

Ex22 - While Loop from 1 to n

Part 5

Part 5 - Tasks:

Ex22 - While Loop from 1 to n

Update the HTML content of the <ul> element after loops

$( 'ul' ).html(s);

Clear the input after generate list

$( 'input' ).val('');

Remove the maxlength of <input> and update it like this:

<input type="number">

Ex23 - While Loop from n to 1

Ex23

Part 1 - Tasks:

Create a folder called "Ex23"

Create a file called "index.html" under the "Ex23" folder

Copy everything from the Ex22

Ex23 - While Loop from n to 1

Update the loop to generate a list from n to 1

Ex24 - Reverse String

Ex24

Part 1 - Tasks:

Create a folder called "Ex24"

Create a file called "index.html" under the "Ex24" folder

HTML structure

Tab

Create a <input> element with following attributes:

Create a <button> element with following content:

Tab

type="text"

maxlength="3"

Reverse

Tab

Create a <br> element to have a next line

Tab

Create a <span> element

Tab

Ex24 - Reverse String

Click this link to view the demo

Listen to the <button> element if there is a click event occur

10.

$( 'button' ).click(() => {
	
});

Get the user input if button is clicked and save the user input into a variable called "val"

11.

let val = $('input').val();

Alert and display the input value letters from 1 to 3

12.

alert( val.charAt(0) );
alert( val.charAt(1) );
alert( val.charAt(2) );

Import jQuery at the end of the <body> element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Create a <script> element to write JavaScript

Tab

Save and preview the result

13.

Remove the three lines of alert() code, update the code to use while loop and change the following code to loop from the input value length to 0.

14.

let i = 0;
while( i < val.length ) {
	alert( i );
    i = i + 1;
}

This code is to loop from 0 to input value length

Alert and display the letters of input value from the end to the starting

15.

alert( val.charAt(i) );

Part 1 - Tasks:

Create a folder called "Ex24"

Create a file called "index.html" under the "Ex24" folder

HTML structure

Tab

Create a <input> element with following attributes:

Create a <button> element with following content:

Tab

type="text"

maxlength="3"

Reverse

Tab

Create a <br> element to have a next line

Tab

Create a <span> element

Tab

Ex24 - Reverse String

Click this link to view the demo

Listen to the <button> element if there is a click event occur

10.

$( 'button' ).click(() => {
	
});

Get the user input if button is clicked and save the user input into a variable called "val"

11.

let val = $('input').val();

Alert and display the input value letters from 1 to 3

12.

alert( val.charAt(2) );
alert( val.charAt(1) );
alert( val.charAt(0) );

Import jQuery at the end of the <body> element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Create a <script> element to write JavaScript

Tab

Save and preview the result

13.

Remove the three lines of alert() code, update the code to use while loop and change the following code to loop from the input value length to 0.

14.

let i = 0;
while( i < val.length ) {
	alert( i );
    i = i + 1;
}

This code is to loop from 0 to input value length

Alert and display the letters of input value from the end to the starting

15.

alert( val.charAt(i) );

Part 1 - Tasks:

Create a folder called "Ex24"

Create a file called "index.html" under the "Ex24" folder

HTML structure

Tab

Create a <input> element with following attributes:

Create a <button> element with following content:

Tab

type="text"

maxlength="3"

Reverse

Tab

Create a <br> element to have a next line

Tab

Create a <span> element

Tab

Ex24 - Reverse String

Click this link to view the demo

Listen to the <button> element if there is a click event occur

10.

$( 'button' ).click(() => {
	
});

Get the user input if button is clicked and save the user input into a variable called "val"

11.

let val = $('input').val();

Alert and display the input value letters from 1 to 3

12.

alert( val.charAt(2) );
alert( val.charAt(1) );
alert( val.charAt(0) );

Import jQuery at the end of the <body> element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Create a <script> element to write JavaScript

Tab

Save and preview the result

13.

Remove the three lines of alert() code, update the code to use while loop and change the following code to loop from the input value length to 0.

14.

let i = 0;
while( i < val.length ) {
	alert( i );
    i = i + 1;
}

This code is to loop from 0 to input value length

Alert and display the letters of input value from the end to the starting

15.

alert( val.charAt(i) );

Part 2 - Tasks:

Ex24 - Reverse String

Click this link to view the demo

Create a variable called "s" before the while loop

let s = '';

This variable is used to accumulate letters

Update the "s" variable in every loop that is to combine from the end to the starting letter

s = s + val.charAt( i );

Use alert function to display the result

alert(s);

Ex24 - Reverse String

Part 3

Part 3 - Tasks:

Update the content of the <span> element after loops

$( 'span' ).html(s);

Clear the input

$( 'input' ).val('');

Remove the maxlength of <input> and update it like this:

<input type="text">

Ex24 - Reverse String

Ex25 - Sum

Ex25

Ex26 - Counting

Ex26

Ex26 - Counting

Ex26

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Ex22</title>
</head>
<body>

<input type="text" class="word">
<input type="text" class="letter">
<button>Count</button>
<br>
<span></span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">

$('button').click(() => {
	let word = $('.word').val();
	let letter = $('.letter').val();

	let i = 0;
	let count = 0;
	while ( i < word.length ) {
		if (word.charAt(i) == letter) {
			count++;
		}
		i++;
	}
	$('span').text(count);
})

</script>

</body>
</html>

Technology Empowerment Team - Web development

By Mr Peter

Technology Empowerment Team - Web development

Form 3 ~ 6 Potential Course

2023-2024

Mr. Peter

Technology Empowerment Team - Web development

More from Mr Peter