# 세렌디아스 광장: 디아 5/100
Eventos(teclado),agregar/eliminar elementos de DOM y loops
프로필
이것은 매우 간단한 순환이다.이것은 매우 재미있는 이야기로, 나는 업무 명세서에서 놀 수 있다.
이것은 화살표 기능으로 아호라의 일부분이다.
Podrás ver la lista de los 100 días en este .
Eventos(테클라도)
내 아들은 오카론 칸도 우사리오 아레타 아르구나 테클라다.Con
onchange에서 단일 cambios가 입력(o interactuamos Con otro elemento)과 이전 cambios Con el valor를 구현한 것을 감지했습니다.입력 시 주소
onchange을 클릭하세요.<input type="text" onchange="handleChange()" />
function handleChange(){
console.log("Sacá la mano de ahí!");
}
<input id="nombre" type="text" onchange="nameInput()" />
<span id="nameError"></span>
function nameInput(){
const input = document.getElementById('nombre');
const value = input.value;
const error = document.getElementById('nameError');
if (value.length == 0){
error.innerHTML = "Campo vacio!";
console.log('Campo vacio!');
} else{
error.innerHTML = "";
}
}
onkeypress.이것은 아주 좋은 예다.Si seguimos utilizando el input como Ejempo:<input id="nombre" type="text" onkeypress="nameInput()" />
function nameInput(){
const input = document.getElementyById('nombre');
console.log(input.value);
}
input.value개 포함하여 실제 상황을 입력하는 것과 관련된 문제입니다."J
Ja
Jav
Javi
Javie
<input id="nombre" type="text" onkeyup="nameInput(event)" />
function nameInput(e){
console.log(e.target.value);
}
onkeypress번 도로에서 usamos onkeyup번 도로의 검측 노선, 최종 데이터 입력.También mandamos como argumento event a la función nameInput para no tener que buscar el elemento HTML(mejoramos la performance del código).아호라, 만도 아르고 마스 엘라보라도, 모스트라 모스트라모스 원소
label 와로르 실제 투입:<input id="msgInput" type="text" />
<button onclick="msgShow()">Mostrar mensaje</button><br />
<label id="msgLabel"></label>
function msgShow(){
const input = document.getElementById('msgInput');
const label = document.getElementById('msgLabel');
label.innerHTML = input.value;
}
onclick년 월드컵으로 그 기능은 msgShow년 월드컵이다.쿼리 유틸리티가 없으면 탭에 설명을 입력해야 하고 쿼리 유틸리티가 없으면 이벤트
onpress을 입력해야 합니다.아그레가 일레미나 델툼 원소 호텔
Tal cual como lees,podemos agregar y eliminar elementos HTML,con solo JS.'업무 목록' 프로그램에서 '업무 목록' 형식을 사용할 수 있습니다.
업무 목록에서 HTML 요소'padre'의'padre'요소를 사용하여 HTML 요소'hijos'를 복사하고 사용해야 합니다.
Primero,veamos algo“sencillo”:
<body>
<ul id="list">
</ul>
</body>
function addItem(value){
const list = document.getElementById('list');
const item = document.createElement('li'); // Creamos un elemento li
const text = document.createTextNode(value); // Creamos un nodo de texto
item.appendChild(text); // Metemos el nodo de texto dentro de li
list.appendChild(item); // Metemos li dentro de ul (list)
}
innerHTML년의 오늘, 나는 많은 문제에 부딪혔습니다!(XSS).La idea principal de este script,en resumen,es:
Ahora crearemos el ToDo list,agregando un input,un botón y la función para eliminar elementos.새 이벤트:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List</title>
</head>
<body>
<input id="inputTask" type="text" onkeydown="addTaskKey(event)" />
<button onclick="addTask()">Agregar</button>
<ul id="list">
</ul>
<!-- Un poco de estilo por acá -->
<style>
li, label{
margin: 10px ;
}
li{
list-style:none;
}
label{
background-color: red;
color: white;
padding: 1px 5px;
border-radius: 25%;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Un poquitín de código por acá -->
<script>
let idTask = 0;
// Función para input con evento
function addTaskKey(e) {
if (e.key == "Enter" || e.key == "+"){
addTask();
}
}
// Función para agregar tarea en lista
function addTask(){
const taskValue = document.getElementById('inputTask').value;
if (taskValue != ""){
createElement('label', 'X', 'list')
createElement('li', taskValue, 'list'); // Entro a otra función
idTask += 1;
document.getElementById('inputTask').value = '';
}
}
// Función para eliminar tarea en lista por id
function deleteTask(idE){
const task = document.getElementById('task_' + idE);
const father = document.getElementById('list');
father.removeChild(task);
}
// Función para crear elementos HTML
function createElement(type, content, parentId){
const parent = document.getElementById(parentId)
const elem = document.createElement(type);
const text = document.createTextNode(content);
elem.appendChild(text);
parent.appendChild(elem);
// Agrego atributos a label o li
if (type == 'label'){
elem.setAttribute('id', 'taskDel_' + idTask);
elem.setAttribute('onClick', `deleteTask(${idTask})`);
} else {
elem.setAttribute('id', 'task_' + idTask);
const elemLabel = document.getElementById('taskDel_' + idTask);
elem.appendChild(elemLabel);
}
}
</script>
</body>
</html>
removeChild년에 코모시몬가란에 교회가 하나 있다(카소, 우르강변에 위치한다).setAttribute년, 새로운atributos가 HTML의 요소가 되기 전(전자상거래에는 존재하지 않음).순환하다
상어 지느러미혈액도, 혈액도, 혈액도, 구강의 필요도 없다.이것은 나의 결정이다: P.
Hay varios tipos de loops:
for、while、map.for y while se 고려 함수 없음, map si.서로 다른 주요 요소는 배타적인para iterar 진열이다.// for (inicio; fin; incremento)
let randomNumbers = [];
for (let i = 0; i < 10; i++){
const random = Math.random();
randomNumbers.push(random); // Array de 10 numeros randoms
}
console.log(randomNumbers);
for 남동부는 매우 중요한 곳이다.// Imprime por consola el valor de i mientras sea menor o igual que 9.9
let i = 0;
while (i <= 9.9){
i = Math.random() * 10;
console.log(i);
}
while 탄보코시.이것은 불가능한 조건이다. while(i <= 9.9999)년에 나비카도르의 콜가에서는 조건이 있을 수 없었다.const personas = ['Bombon', 'Burbuja', 'Bellota'];
personas.map((persona) => {
console.log(persona);
});
map Solo sirve para iterar 어레이중요한 것은 화살표 기능과 기능을 실현해야 한다는 것이다.이것은 ES6의 알고리즘 구현이다.이것은 이름이 없는 기능이다.Ejempo 사이트에서 파사모스 법안의 기능에 대한 논증
persona은 을 참조하십시오.Otro Ejempro sería:
const numbers = [3, 1, 9];
const doble = numbers.map((num) => {
return num * 2;
});
console.log(doble);
map개의 변수이다.También usamosel return은 실제 진열과 과다로 진열이다.디아 5/100
Reference
이 문제에 관하여(# 세렌디아스 광장: 디아 5/100), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/javicerodriguez/ciendiasconcourseit-dia-5-100-2a5a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
