Javascript

What’s in this page?

There will be a lot of examples in javascript.

Index

 

Compare 2 arrays

With this code you can compare two arrays. If they contains the same elements the function areEqual returns true, otherwise it returns false.

<script>
let arr1 = [1, 5, 6];
let arr2 = [1, 5, 6];

function areEqual(a, b){
	let x = 0
	for (n in a){
		if (a[n] == b[n]){x = 1;}
		else {x = 0};
	}
	if (x){console.log("The 2 arrays are equal")}
	return x
}

console.log(areEqual(arr1, arr2));
</script>

If you run this code, it will return true, because arr1 and arr2 contains the same elements.

Let’s see this code into a simple real application.

In this code you can build a test in javascript, using a sort of multiple choices questions, but in a very easy way, so that you do not have to worry about the code, but just on the test.

<script>
let corrette = [1]
let risposte = []

function areEqual(a, b){
	let x = 0
	for (n in a){
		if (a[n] == b[n]){x = 1;}
		else {x = 0};
	}
	if (x){console.log("The 2 arrays are equal")}
	return x
}

</script>

Apporto di attrezzatura per cucina da parte del proprietario
<button onclick="risposte[0]=1">Capitale proprio</button>
<button onclick="risposte[0]=0">Capitale di debito</button>
<button onclick="risposte[0]=0">Debito commerciale</button>

<br><hr>
<button onclick="if(areEqual(corrette,risposte)){controlla.innerHTML='Esatto'}else{controlla.innerHTML='No'}">Controlla le risposte</button>
<div id="controlla"></div>

A more complex exercize with some css

In this example, you can see which are the answers you choose:

<script>
let corrette = [1, 1]
let risposte = []

function areEqual(a, b){
	let x = 0
	for (n in a){
		if (a[n] == b[n]){x = 1;}
		else {x = 0};
	}
	if (x){console.log("The 2 arrays are equal")}
	return x
}
let remember = []
function go(x, group){
	for (but in remember){
		if (x.name == remember[but].name){
		remember[but].style.background = "gray";
		remember[but].style.color = "black";
		remember[but].style.fontSize = "1em";
		}
	}
	x.style.background = "yellow";
	x.style.color = "red";
	x.style.fontSize = "2em";
	remember.push(x)

}

</script>

<h3>Apporto di attrezzatura per cucina da parte del proprietario</h3>
<button name="a" onclick="go(this, this.name);risposte[0]=1">Capitale proprio</button><br>
<button name="a" onclick="go(this, this.name);risposte[0]=0">Capitale di debito</button><br>
<button  name="a" onclick="go(this, this.name);risposte[0]=0">Debito commerciale</button><br>

<h3>Il conto Denaro in cassa è</h3>
<button name="b" onclick="go(this, this.name);risposte[1]=1">Finanziario</button><br>
<button name="b" onclick="go(this, this.name);risposte[1]=0">Economico</button>
<br><hr>
<button onclick="if(areEqual(corrette,risposte)){controlla.innerHTML='Esatto'}else{controlla.innerHTML='No'}">Controlla le risposte</button>
<div id="controlla"></div>

Apporto di attrezzatura per cucina da parte del proprietario




Il conto Denaro in cassa è




A simple presentation in javascript

<!doctype html>
<html>
<head>
<style>
body{
	background-color: #dfdfdf;
}
.box {
	display: block;
	text-align: center;
	width: window.innerWidth;
	padding: 30px 50px;
	background-color: black;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 20px;
	text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
	font-family: Arial, sans-serif;
	font-size: 40px;
	color: white;
}
</style>
</head>
<body>

<div id="impress">
<script>

	function slide(x){
		let body = document.querySelector("body")
		let createDiv = document.createElement("div");
		createDiv.classList.add("box");
		let p = document.createElement("p");
		let text = document.createTextNode(x);
		p.append(text);
		createDiv.append(p);
		body.append(createDiv);
	}

slides = `IL BUSINESS plan
Il business plan è un documento che mostra la fattibilità di un'idea di business
Può riguardare il lancio di un nuovo prodotto o di una nuova azienda
Si compone di tre parti: La sintesi, l'esposizione del progetto e la valutazione
Nella sintesi, in modo sommario, si indica l'idea imprenditoriale, i soggetti che hanno dato vita all'iniziativa, la qualità, il target, la localizzazione dell'impresa e le motivazioni che hanno portato alla definizione del progetto.
`

slides = slides.split("\n");

for (s in slides){
	slide(slides[s]);
}



</script>



</div>


</body>

Output:

Use range in javascript, like in Python

If you are used to pythons range, you could be disappointed not having a same way to go through for loops with it when you write javascript code. So if it happens to write javascript and you miss range, here is the function that will replace it so that you can use it like you do in python:

// this is a javascript emulation of range in python
function range(start, stop, step) {
    if (typeof stop == 'undefined') {
        // one param defined
        stop = start;
        start = 0;}
    if (typeof step == 'undefined') {
        step = 1;}
    if ((step > 0 && start >= stop) || (step < 0 && start <= stop)) {
        return [];}
    var result = [];
    for (var i = start; step > 0 ? i < stop : i > stop; i += step) {
        result.push(i);}
    return result;
};

A break page among elements in the page (for printing the page)

If you want to go to the next page after an element, use this

First page
<div style="break-after:page"></div>
Second page

Print a page with a button in the page itself

To print a web page clicking a button do this:

<button onclick="window.print();return false;" />Print (to see the result) </button>

Css transitions

Here is an example of fading text when the mouse is hovering it

<style>

.logo {
	opacity: 1;
	transition: opacity 460ms ease-in-out;
}

.logo:hover {
	opacity: 0.5;
}

</style>

<h1 class="logo">Ciao</h1>

 


Subscribe to the newsletter for updates
Tkinter templates
Avatar My youtube channel

Twitter: @pythonprogrammi - python_pygame

Videos

Speech recognition game

Pygame's Platform Game

Other Pygame's posts