¿Qué debe saber todo programador de JavaScript? [cerrado]

¿Hay un conjunto de cosas que todo programador de JavaScript debe saber para poder decir "Sé JavaScript"?

No jQuery. No YUI No (etc. etc.)

Los marcos pueden ser útiles, pero a menudo ocultan los detalles a veces feos de cómo JavaScript y el DOM realmente funcionan para usted. Si su objetivo es poder decir "Sé JavaScript", entonces invertir mucho tiempo en un marco se opone a eso.

Aquí hay algunas características del lenguaje JavaScript que debe conocer para entender lo que está haciendo y no quedar atrapado, pero que no son obvias para muchas personas:

• Eso object.propy object['prop']son lo mismo (así que puedes dejar de usar eval, gracias); que las propiedades del objeto son siempre cadenas (incluso para matrices); para qué for... ines (y para qué no es ).

• Oler la propiedad; qué undefinedes (y por qué huele ); por qué el inoperador aparentemente poco conocido es beneficioso y diferente de typeof/ undefinedverifica; hasOwnProperty; El propósito de delete.

• Que el Numbertipo de datos es realmente un flotador; las dificultades de usar flotadores independientes del idioma; evitando la parseInttrampa octal.

• Alcance anidado de la función; la necesidad de usar varen el ámbito de aplicación que desea evitar globalidades accidentales; cómo se pueden usar los ámbitos para los cierres; El problema del ciclo de cierre .

• Cómo windowcolisionan las variables y propiedades globales ; cómo las variables globales y los elementos del documento no deberían colisionar sino en IE; La necesidad de usar varen el ámbito global también para evitar esto.

• Cómo functionactúa la declaración para ' izar ' una definición antes del código que la precede; la diferencia entre declaraciones de funciones y expresiones de funciones; por qué no se deben usar expresiones de funciones con nombre .

• Cómo funciona realmente el constructor, la prototypepropiedad y el newoperador realmente funcionan; métodos para explotar esto para crear el sistema normal de clase / subclase / instancia que realmente quería; cuando desee utilizar objetos basados ​​en el cierre en lugar de crear prototipos. (La mayoría del material de tutoría de JS es absolutamente terrible en esto; me tomó años aclararlo).

• Cómo thisse determina en el momento de la llamada, no vinculado; cómo, en consecuencia, la transferencia de métodos no funciona como espera de otros idiomas; cómo los cierres o Function#bindse pueden usar para evitar eso.

• Otras características de ECMAScript Fifth Edition como indexOf, forEachy los métodos deArray programación funcional en ; cómo reparar navegadores antiguos para garantizar que pueda usarlos; usándolos con expresiones de funciones anónimas en línea para obtener un código compacto y legible.

• El flujo de control entre el navegador y el código de usuario; ejecución síncrona y asíncrona; eventos que se activan dentro del flujo de control (p. ej., foco) versus eventos y tiempos de espera que ocurren cuando el control regresa; cómo llamar a un edificio supuestamente sincrónico alertpuede terminar causando un reencuentro potencialmente desastroso.

• Cómo afecta la secuencia de comandos de ventanas cruzadas instanceof; cómo las secuencias de comandos de ventana cruzada afectan el flujo de control a través de diferentes documentos; ¿Cómo postMessagese solucionará esto?

Vea esta respuesta con respecto a los últimos dos elementos.

Sobre todo, debe ver JavaScript de manera crítica, reconociendo que es por razones históricas un idioma imperfecto (incluso más que la mayoría de los idiomas) y evitando sus peores problemas. El trabajo de Crockford en este frente definitivamente vale la pena leerlo (aunque no estoy 100% de acuerdo con él en lo que son las "partes buenas").

Que se puede deshabilitar.

Comprender las cosas escritas en Javascript de Crockford : The Good Parts es una suposición bastante buena de que una persona es un programador JS decente.

Puede saber cómo usar una buena biblioteca como JQuery y aún no conocer las partes ocultas de Javascript.

Otra nota son las herramientas de depuración en varios navegadores. Un programador de JS debe saber cómo depurar su código en diferentes navegadores.

Oh! ¡Y saber que JSLint herirá totalmente tus sentimientos!

Si quieres ser un verdadero ninja de JavaScript, debes saber las respuestas a cada pregunta en el Perfection kills JavaScript Quiz .

Un ejemplo para abrir el apetito:

(function f(f){ 
  return typeof f(); 
})(function(){ return 1; });

¿Qué devuelve esta expresión?

• "número"
• "Indefinido"
• "función"
• Error

No sabes JavaScript si no sabes:

1. Cierres
2. Herencia basada en prototipos
3. El patrón del módulo
4. El W3C-DOM
5. Cómo funcionan los eventos

..que javascript no es java :)

Muchas, muchas personas que comienzan con el desarrollo de sitios web me han dicho que JavaScript es simplemente Java.

1. Familiarícese con al menos una biblioteca de Javascript (Jquery, Prototype, etc.).

2. Aprenda a utilizar las herramientas de depuración de los principales navegadores (MSIE 7-8, Firefox, Chrome, Safari)

3. Lea sobre la industria: el sitio web de Douglas Crockford es un tesoro escondido, mientras que Ajaxian.com es un buen blog para mantenerse al día con ideas nuevas, interesantes o extrañas para Javascript. Hay otros recursos, pero esos son los que más me ayudaron.

Los objetos Javascript funcionan como ciudadanos de primera clase , devoluciones de llamada , para no olvidarse de los eventos y luego JQuery .

¡Ese Javascript no es algo que se pueda aprender en una hora!

¡Las variables son globales a menos que se declaren locales!

Malo (DoSomething () solo se llama 10 veces):

function CountToTen()
{
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

Bueno (DoSomething () se llama 50 veces según lo previsto):

function CountToTen()
{
  var i;
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  var i;
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

Cómo usar las partes buenas y cómo evitar las partes horribles .

Por saber que Javascript originalmente se llamaba LiveScript y el prefijo 'Java' se adjuntó con fines de marketing no porque Java y Javascript estén relacionados (que no lo están).

Ah, y por poseer cualquier versión de 'Javascript: la guía definitiva' de David Flanagan (esta información se encuentra en la página 2).

... y por apreciar a aquellos que se han ido antes al tratar de ofuscar el documento de Internet Explorer 4.todos [] y los documentos.capas [Netscape Navigator 4] antes de que Jquery le quitara el dolor.

EDITAR:

Como @Kinopiko señala que JavaScript se llamaba proyecto Mocha originalmente ( algunas fuentes también consideran que se llamaba proyecto LiveWire), pero en general se acepta que el lenguaje (escrito por Brendan Eich) se lanzaría como LiveScript antes de que se adoptara el prefijo Java lanzamiento a principios de 1996.

Uno debe tener en cuenta lo siguiente para decir "Sé JavaScript":

1. JavaScript es bueno pero DOM es un punto débil
2. Los problemas cruzados del navegador pueden volverte loco
3. A menos que el código se pruebe en al menos 4 navegadores buenos diferentes, no se puede decir que esté libre de errores
4. Cierre .............. Debe saber
5. Su prototipo basado ............ Agradable es divertido aprender esto
6. palabra clave del depurador ..... Ayuda en crisis

Ese JavaScript es mucho más diferente que otros idiomas de lo que piensas. Mire este gran Google Tech Talk para tener una impresión: http://www.youtube.com/watch?v=hQVTIJBZook

¿Qué debe saber todo codificador de JavaScript?

¿Qué tal si puedo desactivar sus esfuerzos con 2 clics? Así que proporcione una reserva si es posible.

Recomiendo leer Javascript: las partes buenas

Sabes javascript si puedes usar Array, Number, String, Date y Object de manera efectiva. Más puntos para Matemáticas y RegExp. Debería poder escribir funciones y utilizar variables (en el ámbito correcto, es decir, como 'métodos' de un objeto).

Veo algunos comentarios acerca de conocer cierres, sintaxis de funciones extravagantes, blabla. Todo eso es bastante irrelevante para esta pregunta. Es como decir que eres un corredor si puedes correr la carrera de 100 metros en menos de 11 segundos.

Digo que puede tomar un par de semanas dominar JavaScript. Después de eso, lleva años y docenas de libros y miles de líneas de programación convertirse en un experto, un ninja, etc.

Pero esa no era la pregunta.

Ah, y el DOM no es parte de javascript, y tampoco lo es jQuery. Así que creo que ambos son igualmente irrelevantes para la pregunta también.

JSLint http://www.JSLint.com/

Después de leer todo lo anterior, también está perfectamente bien aprender Javascript usando un marco como jQuery. La verdad es que es la primera forma en que mucha gente recogió a JS en primer lugar. No hay vergüenza en eso.

matriz . lengthEl método no es un recuento de los elementos de la matriz, sino el índice más alto. incluso cuando el elemento se configuró enundefined

var a = [];
a.length;   // === 0
a[10];      // === undefined
a[10] = undefined;
a.length;   // === 11
a.pop();    // === undefined
a.length;   // === 10

este comportamiento es apenas distinguible de un error de diseño del lenguaje.

jQuery sería mi mejor recomendación. No solo por el código en sí mismo, es el idioma, el estilo, el pensamiento detrás de él lo más digno de emulación.

Ese javascript es el lenguaje más implementado en el mundo. (Probablemente)

Aprender un idioma realmente bien y comprender sus diversas peculiaridades proviene de (años de) experiencia. Si desea ser un mejor programador, diría que comprende los patrones de diseño, cómo y cuándo usarlos y / o incluso cuando los está usando sin darse cuenta; arquitectura técnica y experiencia del usuario.

Conocer el lenguaje (JavaScript) significa que puede elegir cualquier marco y usarlo a voluntad. Inevitablemente necesitará sumergirse en el código fuente, y si todo lo que sabe es la sintaxis un marco o 2 o 3, entonces no irá lejos. Al decir eso, entrar en el código fuente de algunos marcos diferentes es probablemente una de las mejores formas de ver cómo se puede usar JavaScript. Jugueteando paso a paso por el código en Firebug o Web Inspector, luego revisando la documentación de JavaScript, especialmente los documentos de Mozilla y Webkit, para obtener una mejor comprensión de lo que está viendo.

Comprender la diferencia entre la Programación Orientada a Objetos y la Funcional, que JavaScript es una combinación atractiva de los dos y cuándo y cómo usar ambos para crear una base de código asesina y aplicaciones increíbles lo convertirá en un mejor Programador de JavaScript.

Simplemente leer algunos libros, especialmente las "partes buenas" de Crockford, que simplemente presentan sus opiniones sobre lo que es bueno en JavaScript, mientras que omitir la mayoría de las partes IMPRESIONANTES de JavaScript te va a poner en el camino equivocado.

Revisar el código escrito por alguien como Thomas Fuchs, por otro lado, te dará mucha más información sobre el poder de escribir JavaScript increíble y eficiente.

Intentar memorizar algunas trampas o WTF tampoco va a ayudar mucho, lo aprenderá si comienza a codificar y recorrer el código de una biblioteca / marcos, especialmente uno útilmente comentado, para ver por qué han utilizado ciertos propiedades / valores y no otros por qué y cuándo es bueno usar operandos y operadores específicos, todo esto está en el código del uso del marco de trabajo de las personas. ¿Qué mejor que aprender con el ejemplo? : ^)

En Javascript, el rendimiento importa.

No hay un compilador inteligente para optimizar su código, por lo que debe tener más cuidado al escribir código javascript que lenguajes como C #, Java ...

literales de objeto porque son muy agradables de escribir.

Las siguientes cosas también son importantes:

1) Elevación variable. 2) Cadenas de alcance y objetos de activación.

y luego cosas como estas :)

3) wtfjs.com

4) todo es un objeto http://www.lifeinafolder.com/images/Js.jpg

1. Sabiendo que hay una vida con y sin with()y dónde trazar la línea.
2. Puede crear errores personalizados con la throwinstrucción para detener deliberadamente el tiempo de ejecución de JavaScript.

JavaScript no es compatible con la separación de la palabra clave de retorno y la declaración de retorno con un carácter de nueva línea como el siguiente código (o pruébelo en mi página jsFiddle )

function foo()
{
    return
    {
        bar: 'something'
    };
}

$(function()
{
    document.write(foo());
});

No entiendo por qué JavaScript no es compatible con este estilo porque es mucho más fácil leer el código fuente de JavaScript muy complejo cuando se compara con el estilo predeterminado de JavaScript.

PD. He escrito JavaScript casi 6 años. Pero acabo de encontrar este error conmigo mismo cuando intento ejecutar la siguiente función. Siempre vuelve indefinido. Cuando uso depurador y entro en esta función, todo funciona bien. Creo que debería ser el peor error de programación en mi vida.

function JqGridInlineEditor_GenerateTool(cellvalue, options, rowObject, disableEdit, disableDelete)
{
    return 
        (!disableEdit ? '<a class="button edit" href="javascript: void(0);" onclick="JqGridInlineEditor_EditRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Edit.gif'), 'Click here to Edit or \nDouble-click row to edit.') : '') +
        (!disableDelete ? '<a class="button delete" href="javascript: void(0);" onclick="JqGridInlineEditor_DeleteRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Delete.png'), 'Click here to Delete or \nSelect row and then press Delete') : '') +
        (!disableEdit ? '<a class="button save" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_SaveRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Save.png'), 'Click here to Save or \nPress Enter') : '') +
        (!disableEdit ? '<a class="button cancel" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_RestoreRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Cancel.png'), 'Click here to Cancel or \nPress Esc') : '');
}

Dado que JS es un lenguaje funcional, un programador decente de JS debe ser capaz de escribir Y-combinator y explicar cómo funciona desde la parte superior de la cabeza.

... sobre Google Web Toolkit , lo que significa que su proyecto de JavaScript probablemente podría desarrollarse de una manera mucho más conveniente.