performing training tasks for javascript training
tasks based on the training program in MISIS. Will be performed based on the pj5s website
command - conlsole.log("")
ready
command - "let"
let's compare 2 values - 10 and 2.5 by comparing - more or 2.5 than 10
ready
let's try using another command to shorten lines of code.
ready
first, let's try to compare 2 values - 100 and 100
ready
let's try to compare "is x really not equal to y"
ready
let's also try to add a comparison by data type and value: is 100 really equal to car?
ready
let's try to display a query on the screen where you need to enter the text - "enter your name".
command - "prompt"
ready
let's complicate the query. let's try to calculate the age of the user by the year of birth. if he is 18 or older, we will welcome him, if less, we will send him home.
Try-in:
var1
IMG_3355.MOV
var2
bandicam.2025-03-18.14-40-06-185.1.mp4
you can see the difference between the codes in option 1 and 2 - I wanted to prohibit the user from simply putting "enter" in response to the request. unfortunately, it didn't work out.
Let's set a difficult condition: the user must enter a name if his age is greater than or equal to 18 and he has a job - welcome, in other options ("else") - we ask what he is doing here
code:
let name = prompt("Enter your name");
let birthYear = prompt("Enter your birth year");
let job = prompt("Do you have a job? Write Yes or No")
let age = 2025 - birthYear;
if (age >= 18 && job == "Yes") {
alert("Wellcome!");
}
else {
let message = prompt("What do you do here?");
}
Try-in
v1
bandicam.2025-03-18.17-24-14-023.mp4
v2
bandicam.2025-03-18.17-25-34-583.mp4
let's try to place a circle on a background of a given size (300*300) and our chosen color in RGB format (we'll set the color by combining numbers in the RGB range - 250, 100, 50). We will take the diameter of the circle as 20. we will set the coordinates according to the coordinate grid in the picture below
Code:
function setup() {
createCanvas(300, 300);
}
function draw() {
background(250, 100, 50);
circle(50, 50, 20);
}
Ready
let's try to move the layer command higher than the circle drawing command. we will set as coordinates for the circle of cursor movement, using the commands "mouseX, mouseY"
function setup() {
createCanvas(300, 300);
background(250, 100, 50);
}
function draw() {
circle(mouseX, mouseY, 20);
}
Result
bandicam.2025-03-18.18-56-43-964.mp4
It turned out that the background was drawn 1 time (see the command above), and the circle is drawn many times, so the circle leaves a trace when moving.
however, we can remove the trace effect from the circle if we move or add the command describing the background to the same group as the command for drawing a circle. It turns out that every time the mouse moves, the program not only draws a circle in a new position, but also draws a new background on top of the old one, so that the circle leaves no traces when moving
function setup() {
createCanvas(300, 300);
}
function draw() {
background(250, 100, 50);
circle(mouseX, mouseY, 20);
}
bandicam.2025-03-18.19-02-03-892.mp4
Interestingly, if we move the team with the background below the team with the circle, but leave it in the same group, we will see only the background and not the circle, because the background is drawn on top of the circle and covers it.
function setup() {
createCanvas(300, 300);
}
function draw() {
circle(mouseX, mouseY, 20);
background(250, 100, 50);
}
let's make the circle move to the right. to do this, we will make the horizontal coordinate (x) variable x = x +1;
let x = 0;
function setup() {
createCanvas(300, 300);
}
function draw() {
background(250, 100, 50);
circle(x, 20, 20);
x = x +1;
}
Result
bandicam.2025-03-18.19-22-36-220.mp4
now let's try to make the circle go back when it reaches the edge of the canvas.
I tried to enter the "if/else" condition, but for some reason it didn't work here.
let x = 0;
function setup() {
createCanvas(300, 300);
}
function draw() {
background(250, 100, 50);
circle(x, 20, 20);
if (x >= 0) {
x = x +1;
}
else (x <= 300);
x = x -1;
}
Let's try to draw a cross.
we need to break the cross into simple shapes that make up it - lines - and set them the xy coordinates of the beginning and end of each
function setup (){
createCanvas(300,300);
}
function draw() {
background(200);
line(0, 0, 300, 300);
line(0, 300, 300, 0);
}
This task can be done differently by drawing 4 straight lines.
function setup (){
createCanvas(300,300);
}
function draw() {
background(200);
line(0, 0, 150, 150);
line(0, 300, 150, 150);
line(300, 0, 150, 150);
line(300, 300, 150, 150);
}
the result will be the same
let's make a counter from 1 to 10
for (let i = 0; i <= 10; i = i +1){
console.log(i);
}
Try-in
bandicam.2025-03-18.23-11-56-250.mp4
now let's combine the counter with an earlier task: let the user himself lead up to what number the countdown will be.
let number = prompt("Enter the reference number");
for (let i = number; i >= 0; i = i -1) {
console.log(i);
}
Try-in
bandicam.2025-03-18.23-41-09-417.mp4
Let's try to create a cross out of squares.
function setup () {
createCanvas(400, 400);
for (let i = 0; i <= 400; i = i + 40) {
square (i,i,20);
}
for (let i = 0; i < 400; i = i + 40) {
square (400 - i, i, 20);
}
}
Try-in
let's try to fill the entire canvas with color squares.
function setup () {
createCanvas(400, 400);
for (let i = 0; i < 400; i = i + 40) {
for (let j = 0; j < 400; j = j + 40) {
square (i,j,20);
fill (200, 200, 50);
}
}
}
but here comes the problem - the top-left square is not filled in for some reason.
fill the canvas with colored squares of different sizes
function setup () {
createCanvas(400, 400);
for (let i = 0; i < 400; i = i + 40) {
for (let j = 0; j < 400; j = j + 40) {
square (i,j,(i + j)/30);
fill (200, 200, (i + j)/3 );
}
}
}
let's try to distribute the squares in a wave
function setup () {
createCanvas(400, 400);
for (let i = 0; i < 400; i = i + 40) {
for (let j = 0; j < 400; j = j + 40) {
square (i,sin(j)*100,(i + j)/30);
fill (200, 200, (i + j)/3 );
}
}
}
Something strange happened.
