JavaScript é um scripting de pseudo-objetos orientados para a linguagem de script, isto é, que não há herança, embora possa ser clonando uma classe e adicionando mais métodos ou propriedades. Quase todos os navegadores existentes podem interpretar JavaScript, já que é de fato um padrão: ECMAScript (ECMA = Associação Europeia de Fabricantes de Computadores).
Mas apenas com a linguagem javascript, não podemos fazer nada em uma página da web. Também precisaremos do dom (modelo de objeto de documento). Dom é uma estrutura de objetos que representa absolutamente todos os elementos que compõem um site, e através dele teremos acesso a informações no site, adicionar novos itens ou modificá-los.
Todos esses métodos pertencem a Dom Objects: janela, documento e elemento.
função1: getelementbyid ()
Uso: var elemento = document.getElementById(id);
Este método pertence ao objeto de documento. Com ele, obteremos o objeto que se refere ao elemento com um ID específico. Por exemplo, queremos obter o objeto do elemento “status“:
<div> <span id=”status”>Hola mundo...</span></div><script type=”text/javascript”>// Obtenemos el elemento "status”var el = document.getElementById("status”);// Mostramos mediante una alerta el contenido del elementoalert(el.innerHTML);</script>
Função 2: GetElementsbyTagname ()
Uso: var array_elementos= elemento.getElementsByTagName(tag);
serve para obter uma matriz com todos os elementos com uma tag específica que estão contidos dentro de um elemento. Vamos ver um exemplo. Queremos alterar a cor do texto de todos os elementos com tag “A” contidos no item com ID “links”:
Function3: junção ()
Uso: Var String = array.join (string);
o Pertence ao objeto da matriz (todos os arrays in Javascript são um objeto de matriz), e isso nos ajudará a participar de todos os elementos de uma matriz para uma string de texto. É o equivalente a PHP para implodir (). Exemplo: Queremos ingressar todos os nomes de uma matriz por vírgulas:
// Creamos el array de nombresvar nombres = ;// Unimos todos los elementos separándolos por comasvar juntos = nombres.join(", ");// Y lo mostramosalert(juntos);
função4: Split ()
use: var array = strin G.split (string);
Gosta de juntar (), dividir () também é um método de objeto de matriz, embora seja exatamente para: Divida uma string de texto em uma matriz. Seguindo com o exemplo anterior:
var juntos = "Luis, Javier, Sancho, Roberto”;var nombres = juntos.split(", ");for (var i=0; i
truque: usado ambos os métodos que podemos criar uma função para substituir um texto por outro em um Dada string:
function str_replace(cadena, cambia_esto, por_esto) { return cadena.split(cambia_esto).join(por_esto);}alert(str_replace('Hola mundo!','mundo','world'));
função5: addEventListener () / angittevent ()
Uso: Internet Explorer: elemento.atrequevent (“on” + evento, função); Resto de navegadores: elemento.addeventlistener (evento, função, falso);
Ambos os métodos fazem exatamente o mesmo, apenas que, como Acontece em outras centenas de ocasiões, a Microsoft usa sua própria implementação DOM. Com este método, adicionaremos eventos a qualquer item na página da Web, como OnClick, OnMouseover, OnMouseout, etc.
Vamos ver um exemplo . Vamos criar uma função para a abstração do navegador, ou seja, para trabalhar tanto no IE quanto no Firefox ou em qualquer outro navegador; e, em seguida, adicionaremos o evento onclick a vários elementos div para mostrar seu conteúdo por Erta clicando neles.
<div id=”frases”> <div>Hola mundo!</div> <div>Foo bar</div> <div>Lorem Ipsum</div></div><script type=”text/javascript”>// Creamos la funcion para añadir eventosfunction nuevo_evento(elemento, evento, funcion) { if (elemento.addEventListener) { elemento.addEventListener(evento, function, false); } else { elemento.attachEvent("on”+evento, function); }}// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclickvar divs = document.getElementById("frases”).getElementsByTagName("DIV”);// Recorremos todos los divsfor (var i=0; i<divs.length; i++) { // Añadimos el evento onclick al div nuevo_evento(divs, "click”, function(){ // Hacemos que muestre el contenido del DIV alert(this.innerHTML); });}</script>
Quando clicarmos em um dos div, uma janela de alerta será exibida com o conteúdo.
função6: foco ()
use: element.focus ();
Com este método, obteremos o foco em um elemento de um formulário. Exemplo:
form> <input type=”text” id=”nombre” value=”Javier” /> <input type=”text” id=”apellidos” value=”Perez” /></form><a href=”#” onclick=”document.getElementById("nombre”).focus()”>Nombre</a><a href=”#” onclick=”document.getElementById("apellidos”).focus()”>Apellidos</a>
função7: createelement () / appendchild ()
Uso: var elemento = documento .Createelement (tag);
Com este método de objeto de documento, criamos um novo elemento com uma determinada tag. Exemplo: var div = document.createElement('DIV');
Uso: elemento1.apppendchild (elemento2);
com este método adicionaremos o “” elemento1 “. No exemplo a seguir, adicionaremos itens a uma lista de uma maneira dinâmica:
<input type=”text” id=”texto” /><input type=”button” value=”Crear” onclick=”crear()” /><ul id=”lista”></ul><script type=”text/javascript”>function crear() { // Obtenemos el valor entrado en la caja de texto var valor = document.getElementById("texto”).value; // Creamos un nuevo elemento LI var li = document.createElement("LI”); // Añadimos el valor introducido al nuevo elemento li.innerHTML = valor; // Añadimos el elemento LI a la lista UL var ul = document.getElementById("UL”); ul.appendChild(li); // Vaciamos la caja de texto document.getElementById("texto”).value = "”;}</script>
função8: removeChild ()
Uso: Elemento .Removechild (criança);
Este método é usado para remover elementos. O elemento filho do objeto é eliminado. Se quisermos excluir um objeto específico, teremos que fazê-lo da seguinte forma:
// Obtenemos el elementovar el = document.getElementById("elemento-a-eliminar”);// Obtenemos el padre de dicho elemento// con la propiedad "parentNode”var padre = el.parentNode;// Eliminamos el hijo (el) del elemento padrepadre.removeChild(el);
função 9: SetTimeout () / SetInterval ()
Uso: var timer = settimeout (função, milissegundos); var intervalo = setInterval (função, milissegundos);
Ambos os métodos (objeto de janela) nos servem para executar o código JavaScript a cada x milissegundos, bem de modo que um único tempo (settimeout) é executado ou para que seja executado ilimitado (setiterval). Ambos podem ser cancelados usando o ClearTimeout (Timer) e ClearInterval (intervalo).Vamos ver um exemplo, onde a hora e a data do sistema são exibidas a cada segundo em um div:
<div id=”fecha”></div><script type=”text/javascript”> setInterval(function(){ document.getElementById("fecha”).innerHTML = new Date(); },1000);</script>
função10: Alerta () / confirmar () / prompt ()
use: alerta (mensagem); var result = confirmar (mensagem);
result = prompt (mensagem, valor);
Com esses métodos (objeto de janela), mostraremos janelas modais para o usuário. Com Simplesmente, como vimos em outros pontos, mostraremos uma mensagem. Com confirm() Vamos fazer exatamente o mesmo, mas também forçará o usuário a selecionar entre duas opções, um positivo e um negativo, que será devolvido como um parâmetro (booleano). E com prompt() vamos pedir ao usuário para inserir um texto em uma janela modal. Vamos ver com um exemplo:
// Pedimos al usuario que introduzca su nombrevar nombre = prompt("Introduzca su nombre”);// Pedimos confirmaciónif (confirm("¿Seguro que su nombre es ”+nombre+”?”)) { // Respuesta afirmativa... alert("Hola ”+nombre);}
confirm() é muito útil para confirmar Clica em links confirmados, que fazem operações críticas como disposição de dados.
<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>
Há muitos mais métodos à nossa disposição, embora seja suportado em mente que o Internet Explorer não atende ao ecmascript / Dom padrão (entre outros padrões da Web), e um método pode não funcionar igual em ou seja, do que no Firefox ou no Safari.
Aprendizagem O SUNDA é fundamental para ser capaz de se tornar um bom profissional, mas felizmente para nós, há bibliotecas de JavaScript que tornarão nossas vidas muito mais fáceis, como jQuery, a sensação dos programadores Javascript.