Por inúmeras solicitações, execute uma série lições de javascript.. Se você é resolutamente configurado, mestre JS, significa que você tem que ter conhecimento básico de HTML e CSS, pois esta é uma base, sem a qual é difícil entender o que falaremos.

Do nosso lado, tentarei explicar a linguagem compreensível, mostre em exemplos reais da vida, porque tudo está chegando em comparação.

O que é JavaScript, ou como entender, para que propósito é necessário durante o desenvolvimento da Web!

Vivemos em um mundo onde todos são tangíveis, estamos implementando essas idéias que vêm à nossa cabeça. Nós construímos casas, carros, movendo-se com várias técnicas. Isto é, o que podemos fazer no mundo real pode ser representado em comparação com o HTML, onde ele atua como material de construção, a fundação, na qual tudo mantém, e quando ajuda CSS. Fazemos este mundo, tornamos colorido, como eles queriam vê-lo sozinho.

Provavelmente você se pergunta se html e css é o que nos rodeia, então o que é javascript? Onde ele se manifesta em nosso mundo.

Simplesmente, acho que explicará sobre o exemplo do filme Gary Lots, acho que muitos de vocês olhavam e entendem o que estamos falando. De acordo com o roteiro do filme, sabemos que Gary possuía sobre as habilidades, ele era um mago, e uma varinha mágica ajudou nisso. Foi a varinha mágica que lhe deu a oportunidade de criar magia, tal nível como ele possuía conhecimento para torná-lo único.

JavaScript é uma varinha mágicaIsso tem todos os desenvolvedores da web, mas que mágica você pode criar, depende apenas do conhecimento do desenvolvedor com o qual ele possui. Aqueles que dominaram essa linguasão magos e maravilhas curly.

Linguagem javascript. Não cumprido sem seus componentes HTML e CSS. Muitos programadores mencionam três idiomas formando "camadas" de uma página da Web: HTML, CSS e JavaScript.

Html. A primeira língua da marcação de hipertexto - fornece camadas estruturais, organizando expressivamente o conteúdo da página, como texto, imagem outros elementos.

Segundo, CSS. (Folhas de estilo cascading) decoração bonita, aparência do conteúdo HTML.

E o terceiro Javascript. - Adicione camadas comportamentais, revivendo a página da Web, tornando-a interativa, ou seja, criando elementos para interagir com os visitantes.

Como resultado, para dominar a linguagem JavaScript, você deve ter uma boa ideia de HTML e CSS.

A programação pode parecer incrível magia, inacessível para simples mortal. No entanto, a maioria de seus conceitos não é difícil de entender. JavaScript é bastante amigável em relação aos programadores novatos, mas, no entanto, é mais difícil do que HTML ou CSS, por isso, dentro da estrutura da série de lições, dominaremos os conceitos fundamentais de programação, e você pode aplicá-los ao escrever scripts em Javascript.

Você vai se familiarizar com novos símbolos () ,, , () ,!, aprenda a designação de novas palavras (var, , mais se), analisaremos as regras de pontuação e a sintaxe da própria língua, e tudo isso para criar sua magia.

Material preparado Denis gravado, escreva seus comentários e certifique-se de compartilhar este material com seus amigos.

• Transferir

O material, a tradução dos quais publicamos hoje, é dedicada ao básico do JavaScript e destina-se a programadores iniciantes. Pode ser visto como um pequeno livro de referência sobre designs básicos de JS. Aqui nós, em particular, vamos falar sobre o sistema de tipo de dados, sobre variáveis, matrizes, recursos, sobre protótipos de objetos e algumas outras características do idioma.

Tipos de dados primitivos

JavaScript tem os seguintes tipos de dados primitivos: número, booleano, string, indefinido, nulo. Imediatamente, deve-se notar que, ao trabalhar com tipos de dados primitivos, por exemplo, com literais de string, nem nos tornamos uma conversão explícita, podemos acessar seus métodos e propriedades. O fato é que ao tentar executar essas operações, os literais são automaticamente equipados com um invólucro de objeto apropriado.

▍ Folha

JavaScript tem apenas um tipo de números - esses são os números de precisão dupla com um ponto flutuante. Isso leva ao fato de que os resultados de calcular algumas expressões aritmeticamente incorretas. Você já pode saber que em JS o valor da expressão 0,1 + 0,2 não é igual a 0,3. Ao mesmo tempo, ao trabalhar com inteiros, esses problemas não são observados, ou seja, 1 + 2 \u003d\u003d\u003d 3.

O JavaScript tem um objeto numérico, que é um invólucro de objeto para valores numéricos. Objetos numéricos podem ser criados usando o comando VAR A \u003d Number (10), ou você pode confiar no comportamento automático do sistema descrito acima. Isso, em particular, permite chamar métodos armazenados em número.Prototype em aplicado a literais numéricos:

(123) .Tring (); // "123" (1,23) .TOFixed (1); //"1.2 "
Existem funções globais projetadas para converter outros tipos de valores em um tipo numérico. É Parseint (), parsefloat () e o design number (), que neste caso atua como uma função convencional que realiza a conversão de tipos:

Parseint ("1") // 1 parseint ("texto") // nan parsefloat ("1.234") //1.234 número ("1") // 1 número ("1.234") //1.234
Se durante a operação com números, desativa algo que não é um número (durante alguns cálculos, ou ao tentar converter nada para o número), o JavaScript não irá dar um erro, mas apresentará o resultado de uma operação similar como NAN ( não-um número, não número). Para verificar se o valor NAN é usado, você pode usar a função ISNAN ().

Operaçoes aritimeticas JS funciona bastante familiar, mas é necessário prestar atenção ao fato de que o operador + pode realizar a adição de números e concatenação de seqüências de caracteres.

1 + 1 //2 "1" + "1" //"11" 1 + "1" //"11"

▍ derrame.

Linhas em javascript são seqüências de caracteres Unicode. Os literais de string criam, entrando no texto a ser colocado neles, em cotações duplas (") ou únicas (" "). Como já mencionado, ao trabalhar com literais de string, podemos confiar no invólucro de objeto correspondente, no protótipo dos quais existem muitos métodos úteis, entre eles - Substring (), IndexOf (), Concat ().

"Texto" .Substring (1,3) // Ex "texto" .Indexof ("x") // 2 "texto" .Concat ("end") // final de texto
Linhas, como outros valores primitivos, imutabelins. Por exemplo, o método Concat () não modifica a string existente e cria um novo.

▍ Valores lógicos.

O tipo de dados lógico em JS é representado por dois valores - verdadeiro e falso. A linguagem pode converter automaticamente vários valores para o tipo de dados lógico. Então, falso, além do valor lógico falso, são nulos, indefinidos, "(string vazia), 0 e nan. Tudo o mais, incluindo objetos, é valores verdadeiros. Em andamento operações lógicas Tudo o que é considerado verdadeiro é convertido como verdadeiro, e tudo o que é considerado falso é convertido em falso. Dê uma olhada no exemplo a seguir. De acordo com os princípios acima, a cadeia vazia será convertida em falso e como resultado da execução deste código no console, a linha disso é falsa cairá no console.

Deixe o texto \u003d ""; If (texto) (console.log ("isso é verdade");) mais (console.log ("isso é falso");)

Objetos

Objetos são estruturas dinâmicas que consistem em um par de valor chave. Os valores podem ter tipos de dados primitivos, podem ser objetos ou funções.

Objetos são mais fáceis de criar usando a sintaxe literal de objeto:

Deixe Obj \u003d (Mensagem: "Uma mensagem", Dosomething: Função () ())
As propriedades do objeto podem ser, a qualquer momento, ler, adicionar, editar e excluir. É assim que se faz:

• PROPRIEDADES DE LEITURA: Object.name, objeto.
• Registre dados para propriedades (se a propriedade para que não existir, não existir, uma nova propriedade com a chave especificada é adicionada): Object.name \u003d valor, objeto \u003d valor.
• Excluir Propriedades: Excluir Object.name, Excluir objeto.

aqui estão alguns exemplos:

Deixe Obj \u003d (); // criando um objeto vazio obj.message \u003d "uma mensagem"; // Adicionando uma nova propriedade Obj.Message \u003d "uma nova mensagem"; // edição de exclusão objeto.message Properties; // Excluir propriedade.
Objetos no idioma são implementados na forma de tabelas de hash. Você pode criar uma tabela de hash simples usando o comando objeto.create (null):

Deixe francês \u003d objeto.Create (nulo); Francês ["sim"] \u003d "oui"; Francês ["não"] \u003d "não"; Francês ["sim"]; // "oui"
Se o objeto precisar ser imutável, você poderá usar o comando Object.Freeze ().

Para enumerar todas as propriedades do objeto, você pode usar o comando object.keys ():

Função LogProperty (nome) (console.log (nome); // nome da propriedade console.log (obj); // valor da propriedade) objeto.keys (obj).

▍Cap Os valores de tipos e objetos primitivos

Para trabalho prático Com valores primitivos, já foi dito, para percebê-los como objetos que têm propriedades e métodos, embora não sejam objetos. Valores primitivos imutáveis, a estrutura interna dos objetos pode variar.

Variáveis.

Em JavaScript, as variáveis \u200b\u200bpodem ser anunciadas usando as palavras-chave VAR, LET e CON.

Ao usar a palavra-chave VAR, você pode declarar uma variável e, se necessário, inicializá-la com um determinado valor. Se a variável não for inicializada, seu valor é indefinido. Variáveis \u200b\u200bdeclaradas usando a palavra-chave var têm um escopo funcional.

A palavra-chave deixa é muito semelhante ao VAR, a diferença é que as variáveis \u200b\u200bdeclaradas com a palavra-chave deixam um escopo de bloco.

O escopo de visibilidade também tem variáveis \u200b\u200bdeclaradas usando a palavra-chave consts, que, dado que os valores de tais variáveis \u200b\u200bnão podem ser alterados, chamarão corretamente as "constantes". A palavra-chave consts "congela" O valor da variável declarada com seu uso pode ser comparado com o método Object.Freeze (), "Congelando" objetos.

Se a variável for declarada fora de qualquer função, seu escopo é global.

Matrizes.

As matrizes de JavaScript são implementadas usando objetos. Como resultado, falando de matrizes, realmente discutimos objetos semelhantes aos arrays. Você pode trabalhar com os elementos da matriz usando seus índices. Índices numéricos são convertidos em strings e são usados \u200b\u200bcomo nomes para acessar os valores de matrizes. Por exemplo, o desenho do tipo de AR é semelhante ao desenho do ARR ["1"], e o outro dará acesso ao mesmo valor: arr \u003d\u003d\u003d ARR ["1"]. De acordo com o precedente, uma matriz simples declarou a saída ARR \u003d ["um" comando, B "," C "], parece ser a seguinte:

("0": "a", "1": "B", "2": "c")
Removendo os elementos da matriz usando o comando Excluir deixa "furos" nele. Para evitar esse problema, você pode usar o comando splice (), mas funciona lentamente, desde então, depois de remover o item, ele move os elementos restantes da matriz, de fato, mudando-os para o início da matriz, esquerda .

Deixe o ARR \u003d ["A", "B", "C"]; Excluir o arr; Console.log (arr); // ["a", vazio, "c" console.log (arr.Length); // 3.
Os métodos de matrizes facilitam a implementação de tais estruturas de dados como pilhas e filas:

// pilha deixe a pilha \u003d; stack.push (1); // stack.push (2); // deixe a última \u003d stack.pop (); // console.log (último); // 2 // fila Deixe a fila \u003d; fila.push (1); // Queue.push (2); // deixe primeiro \u003d fila.shift (); // console.log (primeiro); // 1

Funções

Funções em javascript são objetos. As funções podem ser atribuídas a variáveis, armazenadas em objetos ou matrizes, transmitem para outras funções na forma de argumentos e retornam de outras funções.

Existem três maneiras de declarar funções:

• Declaração de função ou declaração de função).
• Usando expressões funcionais (expressão de função), que também são chamadas de literais funcionais (fundamentais).
• Usando a sintaxe das funções de disparo (função de seta).

▍ Função do anúncio clássico.

Com esta abordagem para a declaração de funções, as seguintes regras se aplicam:

• A primeira palavra-chave na função da linha de declaração é a função.
• As funções devem atribuir um nome.
• A função pode ser usada no código que é antes de ser feita pelo mecanismo de levantar a declaração de função na parte superior do escopo de visibilidade em que é declarado.

Aqui está o que a lista de função de anúncio clássico parece:

Função Dosomething () ()

▍ Expressões funcionais

Ao usar expressões funcionais, você precisa considerar o seguinte:

• A palavra-chave da função não é mais a primeira palavra na função de linha de recurso.
• A presença de um nome para uma função é opcional. É possível usar expressões funcionais anônimas e nomeadas.
• Comandos de chamada Tais funções devem seguir os comandos de seus anúncios.
• Esse recurso pode ser iniciado imediatamente após o anúncio, usando a sintaxe iife (imediatamente invocada a expressão de função - imediatamente chamada de expressão funcional).

A expressão funcional é assim:

Deixe Dosomething \u003d Função () ()

▍ Funções de alongamento

As funções de seta, de fato, podem ser consideradas "açúcar de sintaxe" para criar expressões funcionais anônimas. Deve-se notar que tais funções não têm entidades próprias e argumentos. O anúncio da função de seta parece com isso:

Deixe Dosomething \u003d () \u003d\u003e ();

Promoções para chamar funções

Funções podem ser chamadas de várias maneiras.

Chamada de função normal.

Dosomething (argumentos)

Função de chamada como um método de objeto

TheObject.Dosomething (argumentos) TheObject ["Dosomething"] (argumentos)

Função de chamada na forma de um designer

New Dosomething (argumentos)

Chamando uma função usando o método Aplicar ()

Dosomething.Aplicy (TheObject,) Dosomething.Call (TheObject, Arguments)

Chamando uma função usando o método BIND ()

Deixe DosomethingWithObject \u003d Dosomething.bind (TheObject); DosomethingWithObject ();
As funções podem ser chamadas com um número grande ou menor de argumentos do que o número de parâmetros especificados quando os declarou. Durante a operação da função "Excesso", os argumentos serão simplesmente ignorados (embora a função tenha acesso a eles), os parâmetros ausentes receberão indefinidos.

Funções têm dois parâmetros pseudo: este e argumentos.

▍ palavra de casamento este

A palavra-chave deste é um contexto de função. O valor para o qual indica depende de como a função foi causada. Isso é o que os valores assumem a palavra-chave disso, dependendo do método de chamar a função (eles, com exemplos de código, cujos desenhos são aqui usados \u200b\u200bsão descritos acima):

• Chamada de função normal - janela / indefinida.
• Função de chamadas como um método de objeto - TheObject.
• Chamando uma função na forma de um designer - um novo objeto.
• Chamando uma função usando o método Aplicar () - TheObject.
• Chamando uma função usando o método BIND () - TheObject.

▍ Argumentos de palavra de casamento

Argumentos A palavra-chave é um pseudoparameter que dá acesso a todos os argumentos usados \u200b\u200bao chamar uma função. Parece uma matriz, mas não é uma matriz. Em particular, ele não tem métodos de matriz.

Função Reducetesum (total, valor) Soma de função () (Deixe Args \u003d Array.Prototype.slice.call (argumentos); return args.Reduce (reducetosum, 0);) soma (1,2, 3);
Uma alternativa para a palavra-chave Argumentos é a nova sintaxe dos parâmetros restantes. No exemplo a seguir, Args é uma matriz contendo tudo o que é transmitido ao chamar.

Soma de função (... Args) (Devolver Args.Reduce (Reducetosum, 0);)

▍ Retorno do operador.

A função em que a expressão de retorno está faltando, retornará indefinida. Usando a palavra-chave de retorno, preste atenção em como o mecanismo da inserção automática dos trabalhos de ponto-e-vírgula. Por exemplo, a seguinte função não retornará um objeto vazio, mas indefinido:

Função getObject () (return ()) getObject ()
Para evitar esse problema, o suporte de abertura deve ser colocado na mesma linha na qual a declaração de retorno está localizada:

Função GetObject () (Return ())

Digitação dinâmica

JavaScript é uma linguagem com digitação dinâmica. Isso significa que os valores específicos têm tipos, e as variáveis \u200b\u200bnão são. Durante a execução do programa na mesma variável, você pode registrar valores tipos diferentes. Aqui está um exemplo de uma função que funciona com diferentes tipos:

Log de função (valor) (console.log (valor);) log (1); log ("texto"); log ((mensagem: "texto"));
Para esclarecer o tipo de dados armazenados em uma variável, você pode usar o operador tipoof ():

Seja n \u003d 1; Tipo de (n); // número permite s \u003d "texto"; Tipo de (s); // string permite fn \u003d função () (); Tipo de (fn); // função.

Modelo de fluxo único de execução

O ambiente de execução do JavaScript é simples. Isso, em particular, é expresso na impossibilidade de realizar simultaneamente duas funções (se não levar em conta as possibilidades de execução assíncrona do código que não afetamos aqui). No ambiente de execução, há uma chamada fila de evento (fila de eventos), que armazena a lista de tarefas a serem processadas. Como resultado, o problema dos problemas de bloqueio de recursos mútuos é incomum para um esquema de uma única floração de execução de JS, portanto, não há mecanismo de bloqueio. No entanto, o código que cai na fila dos eventos deve ser executado rapidamente. Se você sobrecarregar com o trabalho pesado, no aplicativo do navegador, o fluxo principal, a página do aplicativo não responderá à exposição ao usuário e o navegador irá oferecer para fechar esta página.

Manipulação de exceção

JavaScript tem um mecanismo para manuseio de exceção. Funciona de acordo com bastante ordinários para tais mecanismos, o princípio: um código que pode causar um erro é composto usando o design Tente / Catch. O código em si está na unidade Experimente, os erros são processados \u200b\u200bno bloco de captura.

É interessante notar que às vezes JavaScript, se você tiver situações freelance, não emitirá mensagens de erro. Isso se deve ao fato de que o JS não jogou erros antes de adotar o padrão ECMAScript 3.

Por exemplo, no próximo fragmento do código, uma tentativa de alterar o objeto "congelado" falha, mas a exceção não será emitida.

Deixe Obj \u003d Object.Freeze (()); Obj.message \u003d "texto";
Alguns dos erros de JS "silenciosos" são manifestados no modo rigoroso, você pode transformá-lo em usar o design "Usar estrito"; .

Sistema de protótipos

A base de tais mecanismos JS como designers de funções, o comando object.create (), a palavra chave de classe é o sistema de protótipos.
Considere o seguinte exemplo:

Deixe Service \u003d (Dosomething: Função () ()) Deixe especializadoService \u003d Object.Create (serviço); Console.log (especializadoservice .__ proto__ \u003d\u003d\u003d serviço); // Verdadeiro.
Aqui, para criar um objeto especializadoService, cujo protótipo é necessário fazer o objeto Object.Create (). Como resultado, acontece que o método dosomething () pode ser chamado entrando em contato com o objeto especializadoService. Além disso, isso significa que a propriedade __proto__ do objeto especializadoService indica o objeto de serviço.

Crie agora um objeto semelhante usando a palavra-chave de classe:

Serviço de aula (Dosomething ()) Classe SpecializedService Extende o serviço () permite especializadoService \u003d novo especializadoservice (); Console.log (especializadoservice .__ proto__ \u003d\u003d\u003d especializadoservice.prototipo);
Os métodos declarados na classe de serviço serão adicionados ao objeto Service.Prototype. As instâncias de classe de serviço terão o mesmo protótipo (Service.Prototype). Todas as instâncias delegarão chamadas de chamadas para o objeto Service.Prototype. Como resultado, acontece que os métodos são declarados apenas uma vez, em Service.Prototype, após o qual eles são "herdados" por todas as instâncias da classe.

▍ Protótipos de ecllosure.

Objetos podem ser "herdeiros" de outros objetos. Cada objeto tem um protótipo, cujos métodos estão disponíveis para ele. Se você tentar se referir à propriedade que não está no próprio objeto, o JavaScript começará a procurar a cadeia protótipo. Este processo continuará até que a propriedade seja encontrada, ou até que a pesquisa atinja o final da cadeia.

Em programação funcional em JavaScript

DENTRO Funções JavaScript são objetos de primeira classe, a linguagem suporta o mecanismo de fechamentos. Isso abre a maneira de implementar os métodos de programação funcional em JS. Em particular, estamos falando sobre a possibilidade de aplicar funções de ordem superior.

O fechamento é uma função interna que tem acesso a variáveis \u200b\u200bdeclaradas dentro da função pai, mesmo após a função parental ser cumprida.

A função de ordem mais alta é uma função que é capaz de tomar outras funções como argumentos, funções de retorno ou ambos.

Programação funcional em JS é destacada em uma variedade de publicações. Se é interessante para você - aqui estão alguns materiais sobre este tópico dedicado a

Tutorial de sintaxe JavaScript.

Antes de você começar a ler tutorial JavaScript.Você deve ter conhecimento de software.

Será uma grande vantagem em aprender a sintaxe JavaScript se você já estiver familiarizado com qualquer linguagem de programação, como PHP, C ou Pascal, e também entender qual variável, tipo de dados, função ou uma matriz.

No entanto, se você não estiver familiarizado com os idiomas de programação, não vale a pena se preocupar, dado livro de texto Javascript. Apenas e é projetado para aqueles que primeiro procedem ao estudo da programação.

JavaScript (Javascript) - Esta é uma linguagem de programação de clientes, que pode ser controlada por elementos de página HTML (tags HTML) e um navegador da Web, forçá-los a mover, responder a vários eventos (cliques do mouse, pressionamento de teclado), criar muitos programas interessantes ( Scripts): Testes, animação, galerias de fotos (por exemplo, em vkontakte), jogos e muito mais.

Como é o estudo do JavaScript?

Estudar linguagem javascript.geralmente é dividido em quatro etapas:
1. Sintaxe de JavaScript. (este tutorial),
2. Estude Dom. e Bomba.,
3. Dom e controle de BOM usando JavaScript,
4. Estudando várias bibliotecas JavaScript. jquery. - o mais popular em este momento biblioteca (JQuery Textbook deve aparecer neste site no final de 2015).

Dom é o modelo de objeto do documento. Graças à tecnologia DOM, as tags de páginas HTML começam a representar os objetos de objetos e cada objeto nesta árvore, há um endereço único. A linguagem Javascript Referindo-se a este endereço pode acessar a uma tag HTML específica e gerenciá-la (alterar cor, tamanho, posição e mn. Dr.).

O BOM é um modelo de documento do navegador. A estrutura é a mesma que o DOM, apenas em vez dos objetos de página HTML, são os objetos do navegador: janela do navegador, tamanhos da tela do navegador, histórico de visitas, string de status, etc.

Depois de aprender o DOM e o BOM, eles começam a criar scripts mais ou menos complexos no JavaScript interagindo com a página e navegador.

Então, ter dominado um pouco, estudar alguma biblioteca JavaScript, como JQuery, graças a ela, você pode criar os mesmos programas que no JavaScript, apenas muito mais rápido e mais eficiente.

Alguns webmasters começam imediatamente a estudar o jQuery, ignorando os três estágios anteriores, mas eu não recomendo isso, porque em qualquer caso você precisa entender a sintaxe do JavaScript e conheça os objetos DOM / BOM de suas propriedades, métodos e destinos.

Quais programas podem ser escritos usando o JavaScript

Usando você pode criar muitos programas interessantes (scripts):
- Você pode criar scripts que alterem os elementos da página do site ou sua localização, pressionando um ou outro botão,
- Você pode criar uma animação,
- manipular formas, como verificar os dados inseridos pelo usuário,
- criar vários testes, como o tipo de ege (exames escolares) e obter imediatamente o resultado,
- Graças ao BOM, você pode descobrir as características do navegador e o computador do computador que você visitou seu site, que permite criar vários medidores visitantes,
- Com JavaScript, você pode criar até jogos, desenhos animados e muitos outros programas interessantes e úteis.

Qual é o propósito deste tutorial em JavaScript?

Finalidade disso livros Javascript. é te ensinar básico de sintaxe JavaScript., introduzir programação e conceitos como variáveis, tipos de dados, operações, operadores de ramificação, funções, ciclos, matrizes, objetos, etc. Tudo isso é encontrado em outras linguagens de programação, portanto, ter dominado JavaScript, você será muito mais fácil de aprender outras línguas, como PHP, C ++ ou Python.

Estrutura do livro de texto Javascript.

DENTRO livro didático no javascript.Os seguintes tópicos e lições serão considerados.

JavaScript - entra no jogo quando precisamos fazer algumas etapas no lado do cliente, que abordou nossa página da Web.

O JavaScript pode alterar a página da Web sem acessar o servidor, verifique os valores do usuário de dados inserido e execute qualquer outra operação.

Este artigo contém informações básicas que permitirão que você comece a usar o JavaScript.

Inserindo o script diretamente para o código da página

Você pode inserir o código JS diretamente dentro da página.

Remoção de código em um arquivo separado

Pode ser submetido Código Javascript. para o arquivo externo e usar o link para ele na página

A etiqueta de fechamento neste caso é necessária.

Melhor insira scripts na frente da tag de fechamento

Variáveis.

Nomes de variáveis

Nomes de variáveis \u200b\u200bpodem ser iniciados com uma letra grande ou pequena, sublinhado ou um sinal de $.

O nome pode ser números, mas é impossível iniciar o nome da variável com os números.

JavaScript é sensível ao registro: MyText e MyText são duas variáveis \u200b\u200bdiferentes.

É melhor usar para nomear Camelcase, começando cada palavra em nome da variável com uma letra maiúscula.

Declarando

Para variáveis \u200b\u200bde declaração em JavaScript usados var..

Var mytext; // myText indefinido \u003d "oi!"; Alerta (mytext);

Imediatamente após declarar a variável, seu valor é indefinido.

Você pode atribuir uma variável de valor quando declarada:

Var mytext \u003d "oi!";

Você também pode declarar várias variáveis \u200b\u200bem um var:

Var suma \u003d 4 + 5, mytext \u003d "oi!";

Ao atribuir o valor var, você pode omitir, mas é melhor não fazer.

Tipos de variáveis

Em JavaScript, você pode usar linhas:

Var mytext \u003d "olá!";

números inteiros:

Var mynumber \u003d 10;

Números fracionários:

var pi \u003d 3.14;

Valores lógicos:

Var isboolean \u003d falso;

Detalhes da sintaxe de javascript

Comentários

Os comentários em uma linha são alocados "//". Tudo o que vem depois desses personagens é considerado um comentário.

Para comentar várias linhas, você precisa usar "/ *" para designar o início do comentário e "* /" para designar o final do comentário

/ * Aqui é um código de comentário e é também comentar * /

Separação de operadores

Para separação de operadores, você precisa usar ";"

É desejável, mas não necessariamente, use lacunas para melhorar a legibilidade do texto.

Trabalhe com cordas

var str \u003d 4 + 5 + "7"

dará um valor de string " 97 »Em str.

Var str2 \u003d "7" + 4 + 5

dará um valor de string " 745 "Em Str2.

O fato é que o valor ao adicionar é calculado sequencialmente - da esquerda para a direita. Quando há 2 números - o resultado se torna o número. Quando uma string e um número dobra, o número é percebido como uma string e uma combinação de duas linhas.

Tradução de row.

Para transferir a string para o número usado parseint () e parsefloat ()

Essas funções recebem dois argumentos. A primeira é uma string que será traduzida para o número e o segundo - a base do sistema numérico que será usado para traduzir. Para interromper a linha como número decimal, você precisa usar 10 como o segundo argumento

Var mynumber \u003d parseint ("345", 10);

Funções JavaScript

Funções em javascript são declaradas da seguinte forma:

Função myfunction () (algum código JS)

Para retornar o valor que você precisa usar retornar.:

Função MyMultiplication (Paramone, Paramone * ParamTwo)

Você pode declarar uma função "anônima" diminuindo o nome do nome para a função.

A função pode ser transmitida como um parâmetro para outra função especificando seu nome.

Objetos

Tudo em JavaScript é um herdeiro objeto.

Criando uma nova instalação

Var pessoa \u003d novo objeto (); // criando a pessoa do objeto person.firstame \u003d "andrew"; // Adicione o primeiro atributo person.lastname \u003d "Peterson";

Segunda opção mais curta para criar um objeto

Var pessoa \u003d (// criando uma pessoa objeto firstname: "andrew", sobrenome: "peterson", getfullname: função () (return this.firstname + "" + this.lastname;)

Trabalhe com propriedades de objeto

var mim \u003d novo objeto ();

me ["nome"] \u003d "serg";
me.ge \u003d 33;

Matrizes em javascript

Criando uma matriz

Var arr \u003d nova matriz (11, "Olá!", True); // criando uma matriz

Nova maneira de gravar

Var arr \u003d; // criando uma matriz

Trabalhando com matrizes em Javascript

Número de elementos na matriz

Var comprimento \u003d arr.Length; // 3.

Adicionando elementos a uma matriz - empurre

arr.push ("um novo valor");

Extração do último elemento da matriz - Pop

var lastvalue \u003d arr.pop ();

Combinando braços

var arr2 \u003d; var longarray \u003d arr.concat (arr2); // Combinando duas armas arressados \u200b\u200barr e arr2 em um longArray

Junte-se - mesclar todos os elementos da matriz

var Longstring \u003d ar.join (":") // "11: Olá!: Verdadeiro"

Comparação e funções lógicas em JavaScript

Mais ou menos

var istrue \u003d 6\u003e \u003d 5; // mais ou igual

Igualdade

var isfalse \u003d 1 \u003d\u003d 2; // igual istue \u003d 1! \u003d 2; // nonava var alsotrue \u003d "6" \u003d\u003d 6;

Identidade

var notidentical \u003d "3" \u003d\u003d\u003d 3 // false, uma vez que os tipos de dados não correspondem não identificante \u003d "3"! \u003d\u003d 3 // true, já que os tipos de dados não coincidem

Se o operador

Se (5.< 6) { alert("true!"); } else { alert("false!") }

Operador de mudança

Var Lunch \u003d Prompt ("O que você quer para o almoço?", Digite sua escolha de almoço aqui "); Switch (Almoço) (Caso "Sandwich": console.log ("certeza! Um sanduíche, chegando"); quebrar; caso "sopa": console.log ("Tomato!") Break; caso "salada": console.log ("soa bem! Que tal uma salada caesar?"); Quebrar; caso "torta": console.log ("pie" não uma refeição! "); Quebra; : console.log ("Huh! Eu não tenho certeza do que" + almoço + "é. Como é um som de sanduíche?");)

Lógico e - &&

if (1 \u003d\u003d 1 && 2 \u003d\u003d 2) (alerta ("verdadeiro!");)

Lógico ou - ||

If (1 \u003d\u003d 1 || 2 \u003d\u003d 3) (alerta ("verdadeiro!");)

Não -!

if (! (1 \u003d\u003d 1)) (alerta ("falso!");)

Ciclos

Para

para (var eu \u003d 0; eu< 10; i = i + 1) { alert(i); } var names = [ "Sergey", "Andrey", "Petr" ]; for (var i = 0, len = names.length; i < len; i = i + 1) { alert(names[i]); }

Enquanto

Enquanto (verdadeiro) (// ciclo de alerta infinito ("isso nunca irá parar!");) Var nomes \u003d ["Sergey", "Andrey", "Petr"]; Enquanto (nomes.Length\u003e 0) (alerta (nomes [i]);)

Fazer enquanto

Fazer (alerta ("isso nunca vai parar!");) Enquanto (verdadeiro) (// ciclo infinito

Cordas

Texto \u003d "Blah Blah Blah Blah Blah Blah Eric \\ Blah Blah Blah Eric Blah Blah Eric Blah Blah \\ Blah Blah Blah Blah Blah Eric";

Substrings.

Às vezes você não quer exibir o inteiro. String, apenas uma parte disso. Por exemplo, na sua caixa de entrada do Gmail, você pode configurá-lo para exibir os primeiros 50 caracteres de cada mensagem para que você possa visualizá-los. Esta prévia é uma substring. Da string original (a mensagem inteira).

"Alguma palavra" .substring (x, y) onde x é onde você começa a cortar e y é onde você termina de cortar a string original.

A parte numérica é um pouco estranha. Para selecionar para o "ele" em "Olá", você escreveria isso: "Olá". Substring (0, 2);

Pense na esquerda de cada personagem, assim: 0-H-1-E-2-L-3-L-4-O-5.

Se você picar em 0 e novamente em 2 você é deixado com apenas ele.

Mais exemplos.:

1. Primeiras 3 letras de "Batman"
"Batman" .Substring (0.3)

2. da 4ª a 6ª letra de "laptop"
"Laptop" .substring (3.6)

• como inserir o script no documento HTML (informações gerais);
• comentários sobre Javascript;
• como declarar variáveis \u200b\u200be dar-lhes os nomes certos;
• análise do script e sintaxe de métodos;
• método alerta ();
• negoce: "Plug" para não funcionar temporariamente

Do autor

Existem muitas sutilezas diferentes na criação de páginas da web. Mas há três baleias. Este é HTML, CSS e JavaScript.

Eu recomendo organizar a auto-educação da seguinte maneira: Assim que a sintaxe HTML e aprenda a fazer páginas primitivas com texto, imagens e tabelas, basta conectar-se ao estudo do CSS. Assim que você entender como trabalhar com o CSS, comece a dominar Javascript, paralelo ao "vocabulário" em todos os três idiomas. Eu acho que ao meio ano você pode construir um site muito bonito e funcional.

Eu não sabia como abordar o Javascript. Havia livros didáticos ou muito resumo - teoria, teoria, e não é claro como anexá-lo a praticar, ou, pelo contrário, muito específico: aqui é um conjunto de receitas prontas, tomar e usar, e como tudo vira - não sua coisa morrendo.

Eu tenho de alguma forma um livro Vadim Dunaev. Muitos, eu sei, repreende este tutorial. Além disso, eu baixei um pdf digitalizado Frozo, onde em vez de "()" poderia ser, por exemplo, "Q", e letras latinas em códigos são substituídos (lugares!) Russos semelhantes, e é por isso que esses códigos não funcionam. Em geral, eu tive que ser pego. E, honestamente, se eu não li nada sobre Javascript antes, não entenderia esses erros e juntou-se ao número de maldições. Mas então eu estava sentado sem trabalho, era hora de penetrar, e gostei do livro didático. Mas é muito detalhado e projetado para pessoas que entraram em contato já com programação.

Nota 2012.

Agora, depois de alguns anos, e eu trato este livro sem o velho deleite. Ele está desatualizado, "afiado" sob o IE é bastante superficial; Há também erros reais e código de negligência, e algumas coisas úteis não são encontradas. Mas em comparação com aqueles "líderes de gaiola", que em abundância emitiu motores de busca, era algo.

Então, quero tentar matar duas lebres. Escreva algo claro para qualquer chaleira e ao mesmo tempo construtivo-cognitivo. Para que esta chaleira com base nas minhas dicas possa escrever Deixe um roteiro simples, mas totalmente original.

Insira para o documento HTML

Você provavelmente viu tags em códigos HTML:

Este Abrakadabra é entre tags e há um roteiro.

Tag ele

Este atributo é opcional. Vale a pena usar para esclarecer a versão do idioma (javascript1.1, javascript1.2, etc.), ou se você usar outro idioma (por exemplo,

Tipo atributo, que indica o tipo de texto: texto / Javascript.. Ele apareceu na versão HTML 4.0. Eu recomendo isso para usá-lo.

Antes de se mudar para o atributo src., Descubra quais partições de código HTML você pode inserir scripts.

Em qualquer. Mas com a mente.

Muitas vezes, o script indica a retirada de um texto específico, que é chamado aqui e agora. Este script é inserido diretamente em "Na cena".

Há scripts com anúncios de variáveis \u200b\u200bque podem ser usados \u200b\u200bem outros scripts na página, com funções que podem ser chamadas de qualquer site do código HTML. Esses scripts são os mais razoáveis \u200b\u200bpara colocar entre tags e .

Mas você pode fazer isso para usar o script imediatamente em várias páginas da Web. Para fazer isso, seu código deve ser gravado em um arquivo separado com a extensão .js. (por exemplo, myscript_1.js.). Tag Não é mais necessário escrever nele.

E então, para chamar o script da página da Web, precisaremos de um atributo src.. Ele funciona tão bem quanto um atributo de tag similar :

Então, isso é colocado em diferentes páginas, o mesmo chapéu ou menu gravado no arquivo de script. Especialmente ajuda na hospedagem, onde o SSI não passa.

Você também pode inserir pequenos scripts em alguns atributos de tags HTML, mas um pouco mais tarde.

Às vezes, o script deve ser colocado no final. corpo. ou mesmo após o fechamento : Por exemplo, se precisarmos, antes de executar o script, ele explora todos os links ou todas as imagens no documento. Mas sobre isso - também, mais tarde, quando descobrimos os mecanismos javascript. Você pode descascar.

Comentários

Eles dizem, ainda há esses navegadores que não entendem scripts. Usuários meyaki que estão tão inclinados a desativar os scripts. Nessa situação, o script não será executado, mas seu código, o mesmo "Abrakadabra", simplesmente cai na tela.

Então, para não cair, concluímos em comentários HTML.

Mmm ... e o que é esta duas barras antes de fechar um comentário?

O comentário de fechamento já está no "corpo" do roteiro. E JavaScript não entende esses htmls cranianos "colchetes do céu, para ele, este é um corpo estranho que gera um erro. Então você precisa ocultar essa tag de fechamento do script, colocando-o como um comentário de javascript. Javascript parece um pouco gracioso: //. Após esse script de sinal, não vê o suporte de fechamento HTML, e HTML esconde com segurança o texto do script, e nenhum registro "esquerdo" não está visível na tela.

Como tocamos os comentários, devo dizer que em JavaScript, eles têm duas formas - o mesmo que em C e C ++ (e pelo caminho do CSS também).

// Este formulário de comentário // válido apenas em uma linha, // ou seja, em cada nova linha // você precisa definir um sinal de comentário. E este é o código de roteiro ... / * E este formulário de comentários age tantas linhas, desde que não bombeia o ícone de fechamento, refletindo a inicial. * / E agora novamente o código do script ...

Não confunda comentários HTML e comentários Javascript! Estas são diferentes idiomas, embora coexistem "em uma garrafa". Ou, mais precisamente, em um banco. Como aranhas ...

Vamos voltar ao problema dos navegadores dilapidados. Suponha, com JavaScript, você fez algo de duas fotos algo como um banner animado. Então você pode agradar aos usuários dos navegadores "pobres" (e você, espero que não seja completamente desprovido de altruísmo), a aparência de pelo menos uma dessas fotos com a ajuda da tag

Quais editores escrevem scripts

Talvez haja alguns editores especiais para JavaScript. Eu não encontrei ninguém e não pareço muito. Geralmente os scripts são gravados nos mesmos editores que são usados \u200b\u200bpara criar páginas da Web. Por exemplo, eu amo o lar. Escrever o script nesses editores não é diferente de escrevê-lo em um simples notebook, exceto para iluminação do código. E às vezes ajuda muito. Eu baixei uma vez um script (em algum alemão), e não funciona. Eu olhei para o código e vi que a palavra-chave interruptor Por algum motivo, não alocado. Eu olho - e não há interruptor, mas switsch., Donner, Wetter! Eu removi a faia - e fui.

By the way, em todos os nossos exemplos, o código parece exatamente o caminho na janela do lar.

De um quarto em uma pedreira

O exemplo a seguir é o plágio de Dunaev. Mas ele é tão simples e profundo que eu não posso resistir. Eu adicionei aqui apenas alguns detalhes do desenho de gravação para explicar ao mesmo tempo e a sua.

Imediatamente eu aviso você: quase este exemplo é absolutamente inútil. Mas concentra muitos conceitos-chave da linguagem JavaScript e sua sintaxe.

Realmente script

Se você copiar este código em uma página Net NetEPad e salvá-la como file.html, quando você abrir o arquivo, verá o seguinte:

Vamos nos perguntar como isso sai.

var x \u003d 5;

Aqui nós declaramos a variável X, que é igual a 5.

Pare! Você sabe qual é a variável?

Se não, clique nisso e leia a explicação.

Como funciona um computador? Todos os dados são salvos no disco e o local onde eles mentem devem ser marcados para serem claros onde procurar. Qualquer programa (e o script não é nada além de um pequeno programa) funciona com alguns dados. Portanto, é conveniente imediatamente "marcar um lugar" para eles. Este lugar é este memória marcada E a variável se torna. Por que "variável"? Porque esta área pode ser preenchida com valores diferentes. Por exemplo, quando trabalhamos com uma calculadora, os números e ações com eles que inserimos são registrados pelo programa nas variáveis \u200b\u200bcorrespondentes. E quando você pressiona o botão de execução, o algoritmo usa os valores que digitamos.

No código do programa, as variáveis \u200b\u200bsão denotadas pelos nomes que eles mesmos estão inventando para eles. Para criar nomes, há certas regras que podem diferir em diferentes linguagens de programação. Essas restrições que serão descritas abaixo incluem especificamente para o JavaScript.

var. - Palavras-chave para declarar variável (na variável de inglês).

x. - O nome da variável.

Restrições: Apenas letras latinas (qualquer registro), números e símbolo de símbolo podem ser usados \u200b\u200bno nome da variável. Neste caso, a variável não deve começar com números. E sem lacunas.

Nomes variáveis \u200b\u200bcorretos:

Nomes de variáveis \u200b\u200bincorretas:

A linguagem Javascript é sensível ao registro.

myvar., Myvar. e myvar. - variáveis \u200b\u200bdiferentes.

(A propósito, sobre o registro. O nome da própria linguagem é escrito com JavaScript Grande J e S: JavaScript. Há um equívoco que é assim que é necessário escrever essa palavra em tags HTML. Mas HTML não é sensível a O registro, para que você possa escrever, como quiser. Estou acostumado a pouco, como minha casa favorita, alguém - grande.)

Neste script, a variável imediatamente quando declarar é atribuída um valor. Não é obrigatório. O valor pode ser atribuído posteriormente. No final da linha é um ponto com uma vírgula. Isso neste caso também não é necessário. Mas em scripts grandes e complexos, às vezes é importante, então demonstre uma entrada detalhada completa. Dunaev tem essa string apenas x \u003d 5., anúncio explícito var. Também não é necessário aqui. Mas (IMHO) ainda é preferencialmente.

Na próxima linha, como você já pode adivinhar, a variável declarada y.. Ela recebeu o significado do já anunciado x., 3 mais que x..

E então o método é chamado alerta ().

Este método exibe uma caixa de diálogo com uma mensagem especificada entre parênteses. Esta é a sintaxe de todos os métodos JavaScript: o nome do método e suportes com seu conteúdo.

O conteúdo desse método é o valor da variável Y e na caixa de diálogo, veremos os oito. Entendeu por quê?

Trocadas úteis

Desde que nos encontramos com o método alerta (), então aqui está sua aplicação simples e útil: às vezes algumas páginas do site ainda não foram feitas, e os links já estão preparados. É desagradável chegar ao "página 404". Também não é muito agradável esperar até ser carregado e, em seguida, descobrir que a seção em desenvolvimento. Eu sempre freio tais links da seguinte forma:

"Javascript: alerta (" página em desenvolvimento ")"); "\u003e Item de menu

A propósito, aqui está outra maneira de implementar o código JavaScript em código HTML. Aqui está inserido no atributo href. Referência de tag e introduzido através da palavra-chave " javascript:"(Com um cólon e espaço subseqüente: sempre preste atenção à trivialidade sintática). Preste atenção às tradicionais citações duplas do valor de atributo HTML e "aninhado" citações simples no texto do próprio script.

Muito em breve, vamos aprender sobre os atributos especiais de "evento" das tags HTML, por exemplo, onClick.que são projetados especificamente para introduzir o código JavaScript e não requerem uma palavra-chave.

Então, aprendemos:

como declarar um script no documento HTML, que os formulários têm um JavaScript Comentários, como declarar variáveis \u200b\u200be dar-lhes os nomes corretos, bem como a sintaxe de métodos e especificamente o método de alerta ().

E também aprendi: