html5 – Recorrer un array de objetos y comparar con un array en Javascript

tengo un array que almacena varias instancias de un objeto:

function Platillo(nombre,precio,tipo) {
          this.nombre = nombre;
          this.precio = precio;
          this.tipo = tipo;
        }

        var platillos = ();
        var p1 = new Platillo("Hongos Portobello",115,"Aperitivo");
        var p2 = new Platillo("Pasta Gamberi",130,"Aperitivo");
        var p3 = new Platillo("Trío de Bruschetas Serrano",115,"Aperitivo");
        var p4 = new Platillo("Milanesa de Pollo",85,"Carne");
        var p5 = new Platillo("Filete de Pescado",115,"Pescado");
        var p6 = new Platillo("Pollo al limón",210,"Carne");
        var p7 = new Platillo("Chicarron de rib eye",295,"Carne");
        var p8= new Platillo("Pastel de Chocolate",60,"Postre");
        var p9 = new Platillo("Flan Napolitano",665,"Postre");
        var p10 = new Platillo("Fondant Choco",115,"Postre");
        platillos.push(p1,p2,p3,p4,p5,p6,p7,p8,p9,p10);

Tengo funciones para agregar elementos, modificar y eliminar; en estas, eh recorrido el array y no me causa ningún conflicto; aquí un ejemplo de como lo recorro:

function searchPlatillo(platilloBuscado){
          var indice = -1;
          for (var i = 0; i < platillos.length; i++) {
            if (platillos(i).nombre == platilloBuscado) {
              indice = i;
            }
          }
          return indice;
        }

Ahora, tengo una función que genera un nuevo array y debo ir comparando con el nombre de los platillos de mi array de platillos : platillos(i).nombre

Este es mi método que uso:

function pedido(){
         alert("Para salir ingrese 0");
         var platillosPedido = ();
         do {
           var nombre = prompt("Ingrese el nombre del Platillo");
           platillosPedido.push(nombre);
         } while (parseInt(nombre) != 0);

         console.log(platillosPedido);

         var precioTotal = 0;
         for (var i = 0; i < platillos.length; i++) {
           for (var j = 0; j < platillosPedido.length; i++) {
             if (platillos(i).nombre == platillosPedido(j)) {
               precioTotal = precioTotal + platillos(i).precio;
             }
           }
         }
         alert("El precio total es:" + precioTotal);
       }

Al ejecutar el programa, el error se genera en la linea del if del método anterior.
En consola, este es el error que me genera.
Erro js

En este recorrimiento no me permite ir comparando, pero en otros métodos, como por ejemplo la búsqueda no genero ningún problema.

El objetivo del método es ir comparando mi array de platillosPedidos() con los nombres delos platillos del array platillos(); si coinciden, entonces el precio se agregara a una variable acumuladora para si obtener la sumatoria de los precios de los platillos pedidos.

html – How to limit bandwidth of HTML5 video?

I want to offer a video for viewing using the HTML5 tag. Is there a way to limit the bandwidth at which the video is played back?

The idea here is that I want to limit the impact on the server, because I know that when I’m watching videos, the browser often reads more than it needs to because I usually click away and never watch all of it.

html5 – Agregar una pagina dinámicamente con jquery mobile

estoy haciendo una app en jquery mobile, dinamicamente genero el contenido de una grilla

success: function(result) {

            var result=$.parseJSON(result);
            var html;
            
            $.each(result, function(i, field) {
                    html = '<div class="ui-block-a">';
                        html += '<div style="height: 200px; padding: 0px 0px 0px 10px">';
                            html += '<div style="position: relative;">';
                                html += '<a href="#';
                                html += field.url_app;
                                html += '" style="color: #FFFFFF; text-decoration: none;">';
                                html += '<img src="';
                                html += field.logo_banda;
                                html += '" height="200px" width="100%">';
                                html += '<h2 style="position: absolute; top: 120px; left: 5px; right: 5px; text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000; font-size: 1em;">';
                                html += field.nombre_banda;
                                html += '<p style="margin-top: 0px; font-size: 0.8em;">';
                                html += field.anio_fundacion;
                                html += '</p>';
                                html += '</h2>';
                                html += '</a>';
                            html += '</div>';
                        html += '</div>';
                    html += '</div>';
                    
                    $("#bandas_populares").append(html).enhanceWithin();
                
                    estado=1;
            });
        
            
            }

lo guardo en un string y luego con la funcion append lo cargo en la grilla….
quiero que cada elemento de la grilla tenga una correspondencia con una pagina que se genere automaticamente, por lo que en otra funcion genero otro string que tiene toda la estructura de la pagina…

success: function(result) {

            var result=$.parseJSON(result);
            var html;
            var htmlBanda;
            $.each(result, function(i, field) {
            
                    htmlBanda = '<div data-role="page" id="';
                    htmlBanda += field.url_app;
                    htmlBanda += '" data-theme="a">';
                        htmlBanda += '<div data-role="header" data-position="fixed" data-theme="a" data-id="encabezado-fijo">';
                            htmlBanda += '<a href="#populares" data-theme="a" data-icon="carat-l" data-transition="slide" data-iconpos="notext">regresar</a>';
                            htmlBanda += '<h1>';
                                htmlBanda += '<img src="img/20160927214031.png" style="width: 65%">';
                            htmlBanda += '</h1>';
                        htmlBanda += '</div>';
                        htmlBanda += '<div data-role="content">';
                            htmlBanda += '<div class="fondo">';
                                htmlBanda += '<div>';
                                    htmlBanda += '<h2 style="text-align: center; font-size: 1.3em; padding-top: 10px;" id="titulo">';
                                    htmlBanda += field.nombre_banda;
                                    htmlBanda += '</h2>';
                                htmlBanda += '</div>';  
                                htmlBanda += '<h2 style="font-size: 1.1em;">';
                                    htmlBanda += 'Sinopsis';
                                htmlBanda += '</h2>';
                                htmlBanda += '<p style="font-size: 0.8em;">';
                                    htmlBanda += field.sinopsis;
                                htmlBanda += '</p>';
                                htmlBanda += '<h2 style="font-size: 1.1em; text-align: center;">';
                                    htmlBanda += 'Ver video';
                                htmlBanda += '</h2>';
                            htmlBanda += '</div>';
                            htmlBanda += '<div style="margin: 20px 5% 10px 5%; width: 90%;">';
                                htmlBanda += '<iframe width="100%" height="220" src="';
                                htmlBanda += field.link_youtube;
                                htmlBanda += '" frameborder="0" allowfullscreen></iframe>';
                            htmlBanda += '</div>';
                        htmlBanda += '</div>';
                    htmlBanda += '</div>';
                htmlBanda += '</div>';
            
                $("#pagina_banda").append(htmlBanda).enhanceWithin(); // aca crear la pagina dinamicamente
                    
            });
        },// fin success

a su vez hay un div que quiero que cargue todo este contenido…

el tema es que no se carga el contenido en este div, por lo que la pagina no se termina generando.
como podria hacer para que la pagina se genere automaticamente?

HTML5 DRMs and Encrypted Media Extensions

Can Netflex MSE manifest data(MPD) be displayed during playback after the User Agent is allowed to access the media and the media is decrypted. Would it be possible to get snapshot of some of that data?

javascript – HTML5 Tile Cycle Puzzle

It’s been a while since I did anything with JavaScript. I made a tile puzzle game to help me brush up. You can find it here: https://compucademy.net/tile-puzzle/

I would like some feedback on my use of JS, HTML and CSS. Anything would be helpful – structure, best practices, overall approach etc.

Any input much appreciated.

document.addEventListener( 'DOMContentLoaded', () => {
    const n = 16;
    const initialTileArray = ();
    for ( let i = 0; i < n; i++ ) {
    initialTileArray.push( String( i + 1 ) );
    }
    const board = document.querySelector( '.game-board' );
    const audio = document.getElementById( 'audio' );
    const resetButton = document.getElementById( 'reset-btn' );
    const scrambleButton = document.getElementById( 'scramble-btn' );
    let selectedTiles = ();
    let clickNumber = 0;
    let scrambledTileValues = ();
    resetButton.addEventListener( 'click', resetGame );
    scrambleButton.addEventListener( 'click', scrambleTiles );

    function resetGame() {
    board.innerHTML = '';
    scrambledTileValues = initialTileArray.slice( 0 );
    createBoard();
    }

    function scrambleTiles() {
    board.innerHTML = '';
    scrambledTileValues.sort( () => 0.5 - Math.random() );
    createBoard();
    }

    function createBoard() {
    for ( let i = 0; i < scrambledTileValues.length; i++ ) {
        const tile = document.createElement( 'div' );
        tile.setAttribute( 'data-pos', i + 1 );
        tile.classList.add( 'game-tile', 'game-blue', 'text-center' );
        tile.addEventListener( 'click', processTile );
        board.appendChild( tile );
        tile.innerHTML = scrambledTileValues(i);
    }
    }

    function checkWin() {
    const tiles = board.childNodes;
    const config = ();
    for ( var i = 0; i < tiles.length; i++ ) {
        config.push( tiles(i).innerHTML );
    }
    return JSON.stringify( config ) === JSON.stringify( initialTileArray );
    }

    function playSuccessSound() {
    audio.play();
    }

    function processTile() {
    const tilePos = this.getAttribute( 'data-pas' );
    if ( clickNumber === 0 || clickNumber === 1 ) {
        this.classList.remove( 'game-blue' );
        this.classList.add( 'game-red' );
        selectedTiles.push( this );
        clickNumber += 1;
    } else if ( clickNumber === 2 ) {
        selectedTiles.push( this );
        for ( var i = 0; i < selectedTiles.length; i++ ) {
        selectedTiles(i).classList.remove( 'game-red' );
        selectedTiles(i).classList.add( 'game-blue' );
        }
        window.console.log( this.getAttribute( 'data-pos' ) );
        const val0 = selectedTiles(0).innerHTML;
        const val1 = selectedTiles(1).innerHTML;
        const val2 = selectedTiles(2).innerHTML;
        selectedTiles(0).innerHTML = val2;
        selectedTiles(1).innerHTML = val0;
        selectedTiles(2).innerHTML = val1;
        selectedTiles = ();
        clickNumber = 0;
        if ( checkWin() ) {
        playSuccessSound();
        }
    }
    }
    resetGame();
} );


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css"/>
        <title>Tile Puzzle 3 | 3-Cycles</title>
    </head>
    <body>
        <div class="container">
            <div class="row mb-3 justify-content-center">
                <h1>Tile Puzzle 3 | 3-Cycles</h1>
            </div>
            <div class="row mb-3 justify-content-center">
                <p>Click 3 tiles to cycles their positions and solve the puzzle</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-">
                    <div class="game-board d-flex flex-wrap"></div>
                </div>
            </div>
            <div class="row justify-content-center">
                <button id="reset-btn" type="button" class="mt-3 game-btn">Reset</button>
                &nbsp;
                <button id="scramble-btn" type="button" class="mt-3 game-btn">Scramble</button>
            </div>
        </div>
        <audio id="audio" src="assets/Success-sound-effect.mp3"></audio>
        <script src="scripts/puzzle3.js"></script>
    </body>
</html>
body {
    font-family: monospace, monospace;
}

.game-board {
    width: 408px;
    flex-wrap: wrap;
}

.game-tile {
    font-family: monospace, monospace; 
    font-size: 50px;
    color: white;
    width:100px;
    border: 1px solid white;
}

.game-btn {
    font-family: monospace, monospace;
    color: white;
    font-size: 36px;
    border: none;
    padding: 0 5px;
    background: green;
}

.game-btn:focus {
    outline: none;
}

.game-blue {
    background: blue;
}
.game-red {
    background: red;
}

```

javascript – How to join 2 Bezier curves smoothly & continuously with HTML5 Canvas

I’m trying to join two separate bezier curves into one continuous curve. Currently, what I have looks like this:

Two separate bezier curves

The problem is that they aren’t joined, so the points at which they meet look pointy/sharp instead of curvy and smooth. I’ve looked into documentation for joining bezier curves in P5.js, but am unsure of how to translate this into HTML5 Canvas. How do I join these two bezier curves so that they look like one smooth and continuous curve?

This is my code:

const canvas = document.getElementById('canvas');
const c = canvas.getContext("2d");
width = 800;
height = 500;
canvas.width = width;
canvas.height = height;
let face;
let centerX = width / 2;
let centerY = height / 3;

setup();

function setup() {
    c.clearRect(0, 0, canvas.width, canvas.height);
    face = new Face();
    draw();
};

function draw() {
    setBackground(`rgba(250, 250, 250, 1)`);
    c.beginPath();
    c.moveTo(centerX - face.hsx, centerY + face.hsy);
    c.bezierCurveTo(centerX - face.hcp1x / 10, centerY - face.hsy2,
        centerX + face.hcp1x / 10, centerY - face.hsy2,
        centerX + face.hsx, centerY + face.hsy);
    c.moveTo(centerX - face.hsx, centerY + face.hsy);
    c.bezierCurveTo(centerX - face.hcp1x, centerY + face.hcp1y,
        centerX + face.hcp1x, centerY + face.hcp1y,
        centerX + face.hsx, centerY + face.hsy);
    c.stroke();
    c.fillStyle = (`rgba(25, 250, 211, 0)`);
    c.fill();
}

function setBackground(color) {
    c.fillStyle = color;
    c.fillRect(0, 0, width, height);
}

function Face() {
    this.hsx = 150; 
    this.hsy = 0;
    this.hsy2 = 120;
    this.hcp1x = 120;
    this.hcp1y = 250; 
}

html5 – Validação de senha código PUG->HTML

Olá!

Estou com codigo em HTML pre-processador PUG no link que segue: https://codepen.io/hartzis/pen/bgJqK

Tentei converter para HTML através de conversor

Preciso, ajuda para que funcione em HTML5. Pois não acontece o mesmo resultado que código original

html5 – Can I wrap header, main, and footer HTML tags in divs for SEO?

I’m working on my brand new website and I’m trying to make it as optimized as possible mainly for SEO.
In order to reach that goal, I’m trying to do best practices for it’s hierarchy.

My website is hierarchy is as the following:

<html>
    <head>
        <!-- ... -->
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <nav>
                    <!-- ... -->
                </nav>
            </div>
            <div id="content">
                <div id="content-wrapper">
                    <div id="main">
                        <header role="banner"></header>
                        <main role="main">
                            <article>
                                <section>
                                    <h1>Article Title</h1>
                                    <p>Article Description</p>
                                </section>
                                <section>
                                    <h2>Sub-Heading</h2>
                                    <p>
                                        Text comes here..
                                    </p>
                                </section>
                            </article>
                            <section id="global-contact-form">
                                <form>
                                    <!-- ... -->
                                </form>
                            </section>
                        </main>
                        <footer></footer>
                    </div>
                </div>
            </div>
        </div>
        <div id="contact-button">
            <!-- This is a fixed block -->
        </div>
    </body>
</html>

My question is:
Is it correct to wrap the <header>, <main> and <footer> into divs, as shown on the code above?

html5 – Adding javascript to html 5 head tag without using deprecated tags

I’m going strictly HTML 5 here with my code and it doesn’t work without adding deprecated tags “type” and “language” within script.

Isn’t “type” deprecated? Why did I read that HTML 5 input elements introduced several new values for the type attribute?

<!DOCTYPE html>

<html>
   <head>
    <script type = "text/javascript">
         
         function showResult() {
            x = document.forms("myform")("newinput").value;
            document.forms("myform")("result").value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
        
   </body>
</html>

html5 – Error al cambiar foto de perfil php

Tengo un pequeño código para cambiar la imagen de perfil de un usuario. El error que tengo es que no funciona correctamente, no me da ningún error pero la imagen no se sube ni se modifica el atributo en la base de datos.

Este es el código:

<?php
$extensiones = array(0=>'image/jpg',1=>'image/jpeg',2=>'image/png');
$max_tamanyo = 1024 * 1024 * 8;

$ruta_fichero_origen = $_FILES('imagen')('tmp_name');
$ruta_nuevo_destino = '../img/Img_profile/' . $_FILES('imagen')('name');
if ( in_array($_FILES('imagen')('type'), $extensiones) ) {
     if ( $_FILES('imagen')('size')< $max_tamanyo ) {
         if($row('Img_user')!=NULL){
            unlink("../img/Img_profile/".$row('Img_user'));
         }
          else{ 
              $var=move_uploaded_file ( $ruta_fichero_origen, $ruta_nuevo_destino );
              $sql_img = "
    UPDATE usuario
    SET Img_user='" . $conexion->real_escape_string($_FILES('imagen')('name')) ."'";
$result = $conexion->query($sql_img);

          }
     }
}?>

<form class="form" action="actualizar_formulario.php" method="post" id="registrationForm">
<div class="form-group">
        <div class="col-xs-6">
        <label for="img_profile" style="color:white"><h4>Cambiar imágen de perfil</h4></label><br>
            <input  style="color:white" type="file" name="imagen" class="text-center center-block file-upload">
         </div>
    </div>
<div class="form-group">
        <div class="col-xs-12">
            <br>
                <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Guardar</button>
                <button style="color:white" class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Restablecer</button>
        </div>
    </div>
</form>