Jump to content

O Retorno dos Membros VIP Junte-se ao Clube

Obtenha destaque e desfrute os benefícios exclusivos para VIP.
Clique Aqui

Reporte bugs e nos ajude a melhorar!

Nos ajude a descobrir bugs! Além de melhorar a comunidade.
Reporte aqui!

Conheça a Lotérica e arrisque sua sorte!

Descubra o quão sortudo você pode ser.
Saiba mais
Notícia
  • Junte-se ao Clube de membros VIP!
  • Teste sua sorte em nossa loteria e concorra a uma fortuna de webcoins!

Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Anunciantes
    • Advertise here
    • silvaBR Cheats
  • Anúncios/Eventos
    • Regras
    • Anúncios
    • Eventos do fórum
  • Feedback & Suporte
    • Tutoriais WC
    • Suporte
    • Sugestões
    • Denúncias e Reclamações
    • Depósito
  • WebCheats Premium
    • Trackers & Warez
    • Download
    • Cracking
    • Serviços Pagos - Pedidos
    • MarketPlace
    • Conteúdo Adulto
    • Taverna WebCheats Premium
  • Shooter Zone
    • Point Blank
    • Combat Arms
    • Cross Fire
    • Counter Strike
    • Battle Royale
    • Outros Shooters em Geral
    • Shooter Zone - Lixão
  • RPG/MOBA Zone
  • Outros Games Zone
  • Design Zone
  • Info Zone
  • Video Games Zone
  • Entretenimento & Diversão
  • 【FREE FIRE】▄︻┻┳═一's Fórum do Clube

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Discord

Found 33 results

  1. Galera, sou novato no forúm ficaria muito grato se algum de vocês arranjasse algum curso detalhado ou livro sobre arquitetura de computadores
  2. Há um tempo a traz fiz um simples bot para o discord, e como esta guardado aqui, vou postar, para ajudar que quer aprender a fazer o mesmo. const express = require('express') const path = require('path') var unirest = require('unirest'); var app = express(); const { Client, RichEmbed } = require('discord.js'); var http = require("http"); var getJSON = require("simple-get-json"); const PORT = process.env.PORT || 8080 const client = new Client(); require("babel-polyfill"); express().use(express.static(path.join(__dirname, 'public'))) .listen(PORT, () => console.log(`Listening on ${ PORT }`)); client.on('ready', () => { client.user.setActivity("NADA",{type: "PLAYING"}); console.log(client.user.username + " iniciado com sucesso!"); setInterval(function() { http.get("http://discord-app-ls.herokuapp.com"); }, 600000); // 10 minutos }); client.on('message', msg => { const prefix = "!" const args = msg.content.slice(prefix.length).trim().split(/ +/g); const command = args.shift().toLowerCase(); if (command === 'ajuda') { msg.reply(`\n!tk @usuario : Remove o usuario mencionado\n!pm @usuario texto_aqui : Envia uma mensagem de texto privada`) } }); client.on('message', msg => { const prefix = "!" const args = msg.content.slice(prefix.length).trim().split(/ +/g); const command = args.shift().toLowerCase(); if(command === "pm"){ { const user = msg.mentions.users.first(); if(user){ const member = msg.guild.member(user); if(member){ const text = args.slice(1).join(""); //pega a segundo palavra em diante if(text != "") { member.send(text); } else{ msg.reply("Você precisa escrever uma mensagem, Ex: !pm @username seu texto aqui") } } else{ msg.reply("Usuario não encontrado!"); } } else { msg.reply("Necessario mencionar um membro, Ex: @username"); } } } }); client.on('message', message => { if (!message.guild) return; if (message.content.startsWith('!tk')) { const user = message.mentions.users.first(); const perms = message.member.permissions; const has_kick = perms.has("KICK_MEMBERS"); if(has_kick) { if (user) { const member = message.guild.member(user); if (member) { member.kick(`Usuario removido por ${message.author.username}`).then(() => { message.reply(`${member.displayName} Removido`); console.log(`Usuario ${member.displayName} removido por ${message.author.username}`) }).catch(err => { message.reply(`Não foi possivel remover ${member.displayName}`); console.error(err); }); } else { message.reply('Usuario não encontrado'); } } else { message.reply('Nenhum usuario mencionado para remover!'); } } else{ const embed = new RichEmbed() .setTitle('ERRO 404') .setDescription("Você não tem permissão para usar esse comando!") .setColor(0x000000) .setFooter("Em caso de duvidas procure um moderador") message.channel.send(embed); } } }); client.on("guildMemberAdd", (member) => { console.log(`User ${member.user.username} has joined in ${member.guild.name}` ); }); client.login('SEU KEY');
  3. Vamos a mais uma aula? Dessa vez vamos falar de Variáveis, o que é uma variável? Fica ai como desafio para você que está lendo responder aqui no tópico o que você entendeu sobre variáveis, não precisa utilizar termos técnicos quero saber como você entendeu este conceito. In-real-Life (acabei de criar esse termo para comparar com a vida real para facilitar o aprendizado feliz.) :D 1º Temos um copo vazio , colocamos 300ml de água. O que seria a variável neste exemplo in-real-life? sem abrir o spoiler, ja tentou achar a resposta? [spoiler=1º Resposta]O Copo Como assim o copo seria uma variável segundo o exemplo? Fica como o desafio proposto no inicio do post, vamos aprofundar mais um pouco. 2º Continuando com copo que agora tem 300ml de água, adicionamos mais 300ml de óleo nele. Agora dentro da nossa variável copo temos 300ml de água e 100ml de oléo, que legal né? Ai eu te pergunto, quanto ml tem ao total? [spoiler=2º Resposta]400ml 3º Temos uma caixa vazia, colocamos 2 brinquedos dentro dele, depois colocamos mais 5 brinquedos. Quem seria a variável? a Caixa ou os brinquedos? Quantos brinquedos tem dentro da caixa? [spoiler=3º Resposta]Variável: Caixa | Quantidade de brinquedos: 7 Acredito que ja entenderam a lógica básica do que é uma variável e vã conseguir responder meu desafio certo? comenta ai no tópico sua definição de variável se acanhe não painhos e mainhas. Vamos agora para o Js? IDE e vamos colocar a mão no teclado <3 1º Com nossa IDE aberta vamos criar nossa estrutura básica HTML. Se não sabe porque estamos fazendo o uso do HTML para programar em Js recomendo a leitura do meu primeiro post #1 intrudução Js. e já colocamos nossa tag <script> dentro da <head>. <!DOCTYPE html> <html> <head> <script> </script> </head> <body> </body> </html> 2 - Todo código Js que utilizarmos deverá ser escrito dentro da tag <script> para que ocora o seu funcionamento. Agora vamos adicionar a seguinte linha de código dentro da tag <script>. var tradicao = "Hello world"; Nosso código deverá ficar assim: [color=rgb(0, 0, 0)]<!DOCTYPE html> <html> <head> <script> var tradicao = "Hello world"; alert(tradicao); </script> </head> <body> </body> </html> Salve o arquivo e abra-o em seu navegador, o resultado deverá ser o seguinte: Caso não aconteça este resultado informe no post e vamos estar solucionando o erro juntos. ;D Vamos entender o código? var tradicao = "Hello World"; Pedimos para o Senhor Js que criasse uma variável com nome de tradicao e que a mesma recebesse o valor Hello World. alert(tradicao); Agora pedimos ao navegador que mostrasse em uma janela poupup o valor da variavel tradicao. Pronto, por enquanto é isso. Acredito que já é o suficiente para entendermos o que seria uma variável e um pouco de sua importância, vale ressaltar que sem uma variável seria impossivel existir algum sistema hoje pois a finalidade dos mesmo são... Quase eu dava a resposta do desafio, mais isso fica ai como dever de casa. Está é uma aula básica sobre variáveis para entendermos apenas o essencial dela no próximo post vou entrar em mais detalhes práticos sobre sua sintaxe, forma de declaração, tipo de variáveis e etc... Até Logo <3 P.s - Não esqueçam de responder o desafio, o próximo post será postado após eu ver que tem alguem interessado no conteúdo se não do que adianta eu criar posts?
  4. A Linguagem de programação JavaScript não tem haver com JAVA Está pode ser uma duvida de muitos que não tem familiaridade com a linguagem. A Linguagem JS(JavaScript), é uma linguagem cliente-side, ou seja, trabalha no lado do usuário. Estarei criando uma série de tutoriais para quem tem interesse em aprender com interação de quem está ensinando, então este quem tiver dúvidas pertinentes ao post da aula só comentar. Está é uma aula de introdução ao JS ou seja é o básico, será necessário futuramente conhecimentos em Html e Css para um melhor aprendizado como diz meu prof Marco Bruno da Caelum um aprendizado Feliz. :p Continuando a explicação não sou nenhum expert em JS mais estarei passando o pouco de conhecimento que eu tenho para quem quer aprender. Porque vamos precisar saber um pouco de html e css para aprender a programar em Js? - Porque a linguagem Js é o que da funciopnalidade as paginas web que por sua vez são basicamente desenvolvidas com html e css. Esta poderosa linguagem consegue interagir com o HTML, trabalhar com variáveis, gerar resultados alterar aparências em nossas paginas. Exemplo: Galeria de imagens ou vídeos, Slide show e muito mais, muito mesmo esses exemplos citados são bem básicos. O que é preciso para iniciarmos a programar em JavaScript? - Um editor de texto já é o suficiente ! Um ótimo exemplo é o bloco de notas, assim como podemos criar um site inteiro utilizando o bloco de notas também consigo programar em Js utilizando o mesmo programa. Mais temos editores que facilitam e muito a vida dos amigos programadores, como por exemplo SublimeText, Brackets entre outros. Vamos agora meter a mão na massa? ou no teclado melhor dizendo rs <3 1º Vamos abrir nosso editor e criar o corpo básico de uma página HTML. <!DOCTYPE html> <html> <head> </head> <body> </body> </html> 2º Dentro da TAG <head> vamos adicionar nosso primeiro comando em Js e devemos seguir a tradição pós diz a lenda que quem não utilizar o famoso Hello Word não terá futuro na programação. <!DOCTYPE html> <html> <head> <script> alert("Hello World"); </script> </head> <body> </body> </html> Resultado: Explicando <script> </script> - Todo code javascript deve ser escrito dentro desta tag, ela é a responsável em informar ao navegador que ali dentro tem comando Js para serem executadas. alert(""); - Está é uma função que vai exibir uma poup up na janela do navegador com nossa mensagem dentro neste caso Hello World. Professor Kaíque, eu ão consegui fazer com que apareça essa poup up como na foto acima. Solução: 1º Js é uma linguagem case-sensitive, ou seja diferencia letras MAIÚSCULA DE minuscula. 2º Verifique se escreveu seu code Js dentro das tag <script> </script> e certifique sua escrita e fechamento da mesma. 3º Ao terminar todo comando Js devemos colocar um PONTO-E-VIRGULA. Caso ainda não tenha funcionado verifique a imagem abaixo se está exatamente igual. Caso não esteja funcionando ainda deixa um comentário aqui ou manda MP que vou verificar com você o que está acontecendo. Minhas Redes sociais: Discord:KaiqueLuan#3724 Facebook Twitter
  5. É um prazer! Meu Interesse aqui é de adquirir conhecimento tanto na área de programação front-end (onde tenho mais afinidade) e nas outras modalidades e em jogos (truques,macete e dicas de como ajudar a todos)!
  6. As 5 melhores linguagens de programação para desenvolvimento de IA Qual linguagem de programação você deve escolher para o seu aprendizado de máquina ou projeto de aprendizado profundo? Estas são suas melhores opções AI (inteligência artificial) abre um mundo de possibilidades para desenvolvedores de aplicativos. Aproveitando o aprendizado de máquina ou o aprendizado profundo, você pode produzir perfis de usuário, personalização e recomendações muito melhores, ou incorporar uma pesquisa mais inteligente, uma interface de voz ou assistência inteligente, ou melhorar seu aplicativo de várias outras maneiras. Você pode até criar aplicativos que ver, ouvir e reagir. Qual linguagem de programação você deve aprender a mergulhar nas profundezas da IA? Você desejará um idioma com muitas boas bibliotecas de aprendizado de máquina e aprendizagem profunda, é claro. Ele também deve apresentar bom desempenho em tempo de execução, bom suporte a ferramentas, uma grande comunidade de programadores e um ecossistema saudável de pacotes de suporte. Isso ainda deixa muitas boas opções. Aqui estão minhas escolhas para as cinco melhores linguagens de programação para desenvolvimento de IA, junto com três menções honrosas. Algumas dessas línguas estão em ascensão, enquanto outras parecem estar escorregando. Volte em alguns meses, e você pode achar que esses rankings mudaram. 1. Python No número um, é o Python. Como poderia ser qualquer outra coisa, realmente? Embora existam coisas enlouquecedoras sobre o Python - o espaço em branco, a divisão massiva entre o Python 2.xe o Python 3.x, os cinco sistemas de empacotamento diferentes que são todos quebrados de maneiras diferentes - se você está fazendo um trabalho de IA, quase certamente estar usando o Python em algum momento. As bibliotecas disponíveis no Python são praticamente inigualáveis em outros idiomas. O NumPy se tornou tão onipresente que é quase uma API padrão para operações de tensor, e o Pandas traz os poderosos e flexíveis quadros de dados do R para o Python. Para o processamento de linguagem natural (PNL), você tem o venerável NLTK e o incrivelmente rápido SpaCy. Para aprendizado de máquina, existe o Scikit-learn testado em batalha. E quando se trata de aprendizagem profunda, todas as bibliotecas atuais (TensorFlow, PyTorch, Chainer, Apache MXNet, Theano, etc.) são efetivamente projetos em Python. Se você está lendo uma pesquisa de aprendizado profundo de ponta sobre o arXiv, então certamente encontrará o código-fonte em Python. Depois, há as outras partes do ecossistema do Python. Embora o IPython tenha se tornado o Jupyter Notebook e menos centrado no Python, você ainda descobrirá que a maioria dos usuários do Jupyter Notebook e a maioria dos notebooks compartilhados on-line usam o Python. Não há como fugir disso. O Python é a linguagem na vanguarda da pesquisa de IA, aquela em que você encontrará a maioria das estruturas de aprendizado de máquina e aprendizagem profunda, e a que quase todo mundo no mundo da IA fala. Por esses motivos, o Python é o primeiro entre as linguagens de programação de IA, apesar do fato de que seu autor amaldiçoa os problemas de espaço em branco pelo menos uma vez por dia. 2. Java e amigos A família de linguagens JVM (Java, Scala, Kotlin, Clojure, etc.) também é uma ótima opção para o desenvolvimento de aplicativos de IA. Você tem diversas bibliotecas disponíveis para todas as partes do pipeline, seja o processamento de linguagem natural (CoreNLP), operações de tensor (ND4J) ou uma pilha de aprendizado profundo acelerada por GPU (DL4J). Além disso, você obtém acesso fácil a plataformas de Big Data, como o Apache Spark e o Apache Hadoop. Java é a língua franca da maioria das empresas e, com as novas construções de linguagem disponíveis no Java 8 e no Java 9, escrever código Java não é a experiência odiosa que muitos de nós lembramos. Escrever um aplicativo de AI em Java pode parecer um pouco chato, mas ele pode fazer o trabalho - e você pode usar toda a sua infraestrutura Java existente para desenvolvimento, implantação e monitoramento. 3. C / C ++ É improvável que C / C ++ seja sua primeira escolha ao desenvolver um aplicativo de AI, mas se você estiver trabalhando em um ambiente integrado e não puder arcar com a sobrecarga de um Java Virtual Machine ou um interpretador Python, C / C ++ é o responda. Quando você precisa torcer todo o desempenho do sistema, então você precisa voltar para o aterrorizante mundo dos ponteiros. Felizmente, o C / C ++ moderno pode ser agradável de escrever (honesto!). Você tem uma escolha de abordagens. Você pode mergulhar na parte inferior da pilha, usando bibliotecas como CUDA para escrever seu próprio código que roda diretamente em sua GPU, ou você pode usar o TensorFlow ou o Caffe para obter acesso a APIs flexíveis de alto nível. O último também permite que você importe modelos que seus cientistas de dados possam ter construído com o Python e, em seguida, os execute na produção com toda a velocidade que o C / C ++ oferece. Fique atento ao que Rust faz neste espaço no ano que está por vir. Combinando a velocidade do C / C ++ com o tipo e segurança de dados, o Rust é uma ótima opção para alcançar o desempenho de produção sem criar dores de cabeça de segurança. E uma ligação TensorFlow já está disponível para ela. 4. JavaScript JavaScript? O que diabos está acontecendo? Bem, o Google lançou recentemente o TensorFlow.js, uma biblioteca acelerada por WebGL que permite treinar e executar modelos de aprendizado de máquina em seu navegador da web. Também inclui a API Keras e a capacidade de carregar e usar modelos que foram treinados em TensorFlow regular. É provável que isso atraia um influxo massivo de desenvolvedores para o espaço da IA. Embora o JavaScript não tenha atualmente o mesmo acesso a bibliotecas de aprendizado de máquina das outras linguagens listadas aqui, os desenvolvedores logo adicionarão redes neurais a suas páginas da Web com a mesma indiferença que adicionam um componente React ou uma propriedade CSS. Simultaneamente fortalecedor e aterrorizante. TensorFlow.js ainda está em seus primeiros dias. No momento, ele funciona no navegador, mas não no Node.js. Ele ainda não implementa a API completa do TensorFlow. No entanto, espero que ambos os problemas sejam resolvidos em grande parte até o final de 2018 e a invasão de AI do JavaScript ocorrerá logo em seguida. 5. R O R aparece no fundo dos nossos cinco primeiros e está tendendo para baixo. R é a linguagem que os cientistas de dados adoram. No entanto, outros programadores acham R um pouco confuso quando o encontram pela primeira vez, devido à sua abordagem centrada no dataframe. Se você tem um grupo dedicado de desenvolvedores de R, então pode fazer sentido usar as integrações com TensorFlow, Keras ou H2O para pesquisa, prototipagem e experimentação, mas hesito em recomendar R para uso em produção. Outras opções de programação de AI É claro que Python, Java, C / C ++, JavaScript e R não são os únicos idiomas disponíveis para programação de IA. Vejamos três linguagens de programação que não chegaram ao nosso top cinco - duas em ascensão e uma em queda. Fonte: http://clusterdata.nl/bericht/news-item/the-5-best-programming-languages-for-ai-development/
  7. Tenho uma variavel em javascript que armazena um xml. com tags variadas. preciso pegar o valor de determinada tag. como faço isso? Pode fechar o tópico var parser, xmlDoc; parser = new DOMParser(); xmlDoc = parser.parseFromString(sessao,"text/xml"); var id = xmlDoc.getElementsByTagName("id")[0].childNodes[0].nodeValue;
  8. Quem curte podcast sobre programação, segue este que está excelente! Abçs! Javascript: Ember.js – Hipsters #78 Hoje vamos conversar sobre um dos frameworks MVC mais populares e tradicionais no mundo Javascript, o Ember.js. Participantes: Paulo Silveira, o host que adora ver o circo pegar fogo Leonardo Andreucci, VP de tecnologia na Creditas Anna Flavia Camargo, desenvolvedora de software na Creditas Renato Zannon, desenvolvedor de software na Creditas Sérgio Lopes, co-host de front-end que raramente fala bem de alguma tecnologia Links: Carreira Desenvolvedor Javascript Cursos de Front-End na Alura Tecnologias de front-end na Creditas Introdução ao desenvolvimento web Vagas na Creditas Produção e conteúdo: Alura Cursos online de Tecnologia Caelum Ensino e Inovação Edição e sonorização: Radiofobia Podcast e Multimídia Download do Audio [Hidden Content]
  9. Diferença entre JavaScript e jQuery Este artigo é principalmente para aqueles desenvolvedores que são novos para desenvolvimento web.As pessoas que iniciam sua carreira geralmente questionam - por que jQuery enquanto há JavaScript;ou a diferença entre JavaScript e jQuery; o que é melhor usar - JavaScript ou jQuery; jQuery é uma alternativa para JavaScript; ou jQuery substituir JavaScript etc. Vejamos primeiro o que é o JavaScript e o que é jQuery. JavaScript JavaScript (JS) é uma linguagem de programação dinâmica. É uma linguagem interpretada. Além da semelhança infeliz em nome, não tem nada a ver com a linguagem de programação Java. Como o nome sugere, o JavaScript é uma linguagem de script. É mais comumente usado para atrair UI (como objetos em movimento, elementos chamativos na tela), interações do usuário (validação do lado do cliente, mostrando pop-up etc.) e para controlar o conteúdo do documento exibido para o usuário. Não há nada que você precise incluir no navegador para suportar JavaScript. Isso ocorre porque foi considerado como o idioma da web desde o seu nascimento. Ele é executado em todos os navegadores modernos sem plugins adicionais. O que você quer dizer com JavaScript é dinâmico A maioria das linguagens de programação tem comportamentos dinâmicos. Mas no caso do JavaScript, praticamente tudo é dinâmico. Todas as variáveis são dinâmicas no tipo e na existência. Você declara uma variável como, var msg = "Olá Mundo!" ; O código escrito em JavaScript é dinâmico, você pode criar uma variável no tempo de execução e o tipo é determinado no tempo de execução. Você pode criar novas funções ou substituir funções existentes em tempo de execução. Novos códigos são adicionados ao navegador quando mais arquivos de script são carregados e você pode adicionar qualquer número de arquivos a qualquer momento. jQuery O site jQuery define jQuery (jQ) como "jQuery é uma biblioteca de JavaScript rápida e concisa que simplifica as interações do documento HTML, o gerenciamento de eventos, a animação e o Ajax para o desenvolvimento rápido da web". jQuery não é uma linguagem de programação em vez disso é uma biblioteca de JavaScript multiplataforma. Existem muitas outras bibliotecas de JavaScript disponíveis como MooTools, Knockout ou até Angular (Embora Angular usa TypeScript, compila para JavaScript no final) e jQuery é um dos mais populares entre eles. jQuery é uma biblioteca rápida de JavaScript rica em recursos. Ele é criado para ajudar os programadores a criar UI comum e cuidar dos problemas de compatibilidade do navegador com mais facilidade. jQuery, de fato, não é senão JavaScript. Todo o código que você escreve no jQuery é convertido em JavaScript internamente. Uma linha de código escrito usando jQuery pode ser igual a muitas linhas de código escritas usando o JavaScript, o que significa que os programadores terão que escrever somente linhas menores de código. Para começar a usar jQuery em sua página, você precisa incluir uma linha de código no cabeçalho da sua página como, <script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js" > </ script> A linha acima inclui uma biblioteca jQuery em sua página usando o Microsoft CDN (Content Delivery Network). A biblioteca jQuery é um único arquivo JavaScript. Você também pode incluir a biblioteca jQuery como um recurso local da pasta do projeto. Mas há benefícios usando o CDN. Se você usa a versão minificada da biblioteca, você terá a vantagem de conexões simultâneas e vários servidores. JavaScript vs jQuery Agora, podemos discutir as questões mencionadas no início deste artigo. A maioria dessas questões pode surgir devido à falta de compreensão clara de JavaScript e jQuery. Como jQuery não é mais que uma biblioteca de JavaScript, não pode substituir o JavaScript. Todo o código jQuery é JavaScript, mas jQuery não inclui todo o código JavaScript. Uma coisa que você deve entender é que não são duas linguagens de programação; Em vez disso, ambos são JavaScript. jQuery é apenas otimizado para fazer as funções comuns de script com menos linhas de código. Linhas de código Muitas ações como Animate, Delay, Fade-In podem ser feitas usando jQuery com poucas linhas de código. Por outro lado, o JavaScript terá muitas linhas de código para o mesmo. Podemos considerar um exemplo mais simples, Suponha que eu quero selecionar todos os elementos que tenham classe-simples-li, Se eu usar JavaScript, document.getElementsByClassName ( "simple-li" ); Por outro lado, se eu usar jQuery, $ ( 'simples-li' ) atuação Se você verificar o desempenho dos dois, você pode achar que o JavaScript simples é mais rápido do que jQuery para acessar o DOM. Mas o JavaScript pode ser mais lento quando você escreve alguma lógica complexa, dado que podemos cometer grandes erros ou usar códigos ruins que podem levar a um sucesso de desempenho. Por outro lado, o jQuery foi testado há anos para usar códigos de JavaScript rápidos e melhores. Na minha opinião, não é correto comparar os dois ou não pode dizer que é melhor do que o outro.Precisamos usar o que for mais adequado à nossa exigência. Alguns pontos para lembrar Algumas vantagens de usar jQuery Você pode codificar ações JS mais comuns usando jQuery com menos linhas de código. Compatibilidade do navegador - você pode escrever o código que é executado em navegadores sem ter que conhecer os vários complexos do navegador e não vai quebrar. Permite que você escreva JavaScript mais rápido e mais fácil. Evita erros comuns do navegador Simplificação de operações geralmente complicadas - operações complexas como interações do Ajax, animação, manipulação de eventos etc. são tratadas pelo jQ com as melhores linhas de código. jQ é testado em batalha e usa as melhores e rápidas linhas de código para realizar a maioria das tarefas. Conclusão O jQuery é adequado para a maioria das aplicações, especialmente aquelas que precisam de um rápido desenvolvimento. jQuery cuida dos erros comuns do navegador, passando as correções diretamente na biblioteca. jQuery também cuida do problema de compatibilidade do navegador que é um pesadelo do desenvolvedor durante a implantação. Usar JavaScript ou jQuery realmente depende da sua necessidade e de outros fatores. A maioria dos projetos de desenvolvimento web funcionará perfeitamente usando jQuery. Mas haverá uma pequena porcentagem que requer JavaScript. Uma vez que o JavaScript puro é o método de melhor desempenho do lado do cliente, há uma razão para usá-lo. Mas uma biblioteca como jQuery irá ajudá-lo a chegar ao mercado mais rápido e mais barato. Portanto, é melhor depender fortemente do jQuery para as versões iniciais do seu produto.Uma vez que seu produto é estabelecido no marcado e você obteve as receitas para voltar e refatorar o código, você pode prosseguir e codificar o código personalizado. Fonte: http://www.c-sharpcorner.com/article/javascript-vs-jquery-difference-between-javascript-and-jquery/
  10. Usei como bsae esse codigo mais nao deus certo WebBrowser1.Document.GetElementById("email").SetAttribute("value", txtUsuario.Text) WebBrowser1.Document.GetElementById("pass").SetAttribute("value", txtSenha.Text) WebBrowser1.Document.GetElementById("login").InvokeMember("click") mais nao deu certo alguem pode ajudar?
  11. Xorgen Crypt usage: XorStr<0xBD,8,0xB4A8AAAF>("\xF1\xDB\xDE\xB6\xA8\xAC\xA4"+0xB4A8AAAF).s var symbols = " !\"#$%&'()*+'-./0123456789:;<=>[email protected]"; function toAscii (xx) { var loAZ = "abcdefghijklmnopqrstuvwxyz"; symbols+= loAZ.toUpperCase(); symbols+= "[\\]^_`"; symbols+= loAZ; symbols+= "{|}~"; var loc; loc = symbols.indexOf(xx); if (loc >-1) { Ascii_Decimal = 32 + loc; return (32 + loc); } return(0); // If not in range 32-126 return ZERO } function Dec2Hex(Decimal) { var hexChars = "0123456789ABCDEF"; var a = Decimal % 16; var b = (Decimal - a)/16; hex = "" + hexChars.charAt(b) + hexChars.charAt(a); L = hexChars.charAt(a); H = hexChars.charAt(b); return hex; } function randByte() { return Math.floor(Math.random()*256%256); } function blub(form) { s1 = form.inp.value; xvaluestart = randByte(); xrefkill = "0x" + Dec2Hex(randByte()) + Dec2Hex(randByte()) + Dec2Hex(randByte()) + Dec2Hex(randByte()); finallen = s1.length+1; hexsequence = '"'; xvalue = xvaluestart; for(i=0;i<s1.length;i++) { ch = s1.substr(i,1); var chval; if(ch=="\\"){ i++; ch = s1.substr(i,1); if(ch=="0") { chval = 0; } else if(ch=="\\") { chval = toAscii("\\"); } else if(ch=="a") { chval = 7; } else if(ch=="b") { chval = 8; } else if(ch=="t") { chval = 9; } else if(ch=="n") { chval = 10; } else if(ch=="v") { chval = 11; } else if(ch=="f") { chval = 12; } else if(ch=="r") { chval = 13; } else { javascript:alert("invalid control sequence: \\"+ch); } --finallen; } else if(ch=="|"){ chval=0; } else { chval = toAscii(ch); if(chval==0) { form.ans.value = "invalid character: "+ch; return; } } chval ^=xvalue; xvalue += 1; xvalue %= 256; hexsequence += "\\x"+ Dec2Hex(chval); } hexsequence += '"'; s2 = "/*"+s1+"*/XorStr<0x" + Dec2Hex(xvaluestart) + "," + finallen + ","+xrefkill+'>(' s2 += hexsequence + "+" + xrefkill + ").s"; form.ans.value = s2; form.ans.focus(); form.ans.select(); }
  12. Bom vamos para o entendimento dessa função! Quando você quer carregar uma div sem aparecer ela no codigo fonte? Ou até fazer sistema de click atraves do metodo get! é só usar essa propriedade e onde tiver o get id se coloca <?php echo $variavel['id'];?> Bom vamos pro código <script> $.post('request.php?animeinfo=1', function (html) { $('.div').html(html); }); </script> Agradeça :3
  13. Javascript é classificada como uma linguagem multiplataforma, isso significa que Javascript não é exclusiva da web, um bom exemplo disso que é Javscript também é usada como linguagem em Unity3D. Neste curso vamos aprender Javascript para web, criando scripts para incrementar as páginas web junto ao código HTML. DOWNLOAD [HIDE-THANKS] http://www.mediafire.com/file/i0jfb62t45n07le/cursoJavascript-cfb-v1_0.rar [/HIDE-THANKS]
  14. Bom pessoal, vou ser breve e objetivo aqui. Tava ali conversando com o pessoal no chat e surgiu a ideia lá de fazer algum tipo de mini-game no chat, mais avançado do que o comando /roll que gera um numero de 1 a 6. Não tenho acesso ao codigo do forum aqui nem ao banco de dados, então resolvi fazer um chat do zero com a ideia que dei: duelo valendo coins. Eu fiz o chat seguindo o getstarted do socket.io em NodeJS. Nada demais. Apenas acrescentei alguns comandos: /roll - joga um dado com valor de 1 a 6 /name <nome_novo> - altera o nome do usuario /duel <user_id> <coins> - aposta com um usuário uma quantidade de coins. O usuário começa sem nome, e por default eu dou nome de anonimo. Eu também dou inicialmente um valor de 5000 coins para apostar. Nada demais, um chat em tempo real com esse joguinho de apostar coins. Requerimentos - Instalar o NodeJS (https://nodejs.org/en/) Iniciando o Servidor Vamos instalar as dependencias do package.json. Abra seu terminal/CMD e digite: npm install Agora vamos iniciar o servidor: node app.js Para ver o jogo rodando acesse: localhost:3000 Segue abaixo o código de toda estrutura. Jogue tudo numa mesma pasta. [HIDE-THANKS] package.json { "name": "chat-wc", "version": "0.0.1", "description": "chat com roll e duelo", "dependencies": { "express": "^4.15.2", "socket.io": "^2.0.3" } } app.js var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); function user_exist(user_id){ var socket_id = false; for (user in LIST_USERS){ if (LIST_USERS[user].uid == user_id){ socket_id = LIST_USERS[user].id; } } return socket_id } var LIST_USERS = {} io.on('connection', function(socket){ LIST_USERS[socket.id] = socket; LIST_USERS[socket.id]['uid'] = Math.floor(Math.random() * 9999) + 1; LIST_USERS[socket.id]['coins'] = 5000; LIST_USERS[socket.id].emit('chat message', "Bem vindo! Comandos disponiveis /roll, /name <novo nome>, /duel <user_id> <coins>"); socket.on('chat message', function(msg){ if(msg == '/roll'){ var dice = Math.floor(Math.random() * 6) + 1; io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + (LIST_USERS[socket.id].name || "Anonimo") + " jogou um dado..." + dice.toString()); } else if(msg.includes('/name')){ var old_name = LIST_USERS[socket.id].name || "Anonimo"; var name = msg.replace('/name', '').trim(); LIST_USERS[socket.id].name = name; io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + old_name + " mudou de nome para " + "(" + LIST_USERS[socket.id].uid + ") " + LIST_USERS[socket.id].name) } else if (msg.includes('/duel')){ msg_splited = msg.split(' '); var user_id = Number(msg_splited[1]); var coins = Number(msg_splited[2]); if (!isNaN(user_id) && !isNaN(coins)){ var user_socket_id = user_exist(user_id); if(user_socket_id){ if (coins <= LIST_USERS[socket.id].coins){ var dice_you = Math.floor(Math.random() * 6) + 1; var dice_other_user = Math.floor(Math.random() * 6) + 1; io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + (LIST_USERS[socket.id].name || "Anonimo") + " [ " + dice_you + " ] -- vs -- [ " + dice_other_user + " ] " + "(" + LIST_USERS[user_socket_id].id + ") " + (LIST_USERS[user_socket_id].name || "Anonimo")); if (dice_you > dice_other_user){ var restcoins = LIST_USERS[user_socket_id].coins - coins; if (restcoins >= 0){ LIST_USERS[user_socket_id].coins = restcoins; } else{ LIST_USERS[user_socket_id].coins = 0; } LIST_USERS[socket.id].coins += coins; LIST_USERS[socket.id].emit('chat message', "Voce ganhou " + coins + " coins") LIST_USERS[user_socket_id].emit('chat message', "Voce perdeu " + coins + " coins") } else if(dice_other_user > dice_you) { LIST_USERS[socket.id].coins -= coins; LIST_USERS[user_socket_id].coins += coins; LIST_USERS[user_socket_id].emit('chat message', "Voce ganhou " + coins + " coins") LIST_USERS[socket.id].emit('chat message', "Voce perdeu " + coins + " coins") } else { LIST_USERS[socket.id].emit('chat message', "Empatou!") LIST_USERS[user_socket_id].emit('chat message', "Empatou!") } } else { LIST_USERS[socket.id].emit('chat message', 'Voce nao tem saldo o suficiente para essa aposta') } } else { LIST_USERS[socket.id].emit('chat message', 'Usuário inexistente') } } else { LIST_USERS[socket.id].emit('chat message', 'Exemplo de comando: /duel joao 1000') } } else { io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + (LIST_USERS[socket.id].name || "Anonimo") + " <" + LIST_USERS[socket.id].coins +" coins>" + ": " + msg); } }); socket.on('disconnect', function(){ console.log('user disconnected'); delete LIST_USERS[socket.id]; }); }); http.listen(3000, function(){ console.log('Chat iniciado na porta *:3000'); }); index.html <!doctype html> <html> <head> <title>Chat WC - Duelo Coins</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').prepend($('<li>').text(msg)); }); }); </script> </body> </html> [/HIDE-THANKS] Obs.: As mensagens estão sendo adicionadas sempre em cima, para quem não entendeu. Para mudar isso, troca no index.html o .prepend para .append. Também terá que adicionar um overflow-y: auto; para conseguir rolar as mensagens. Enfim, customizações ficam por conta de vocês :D abs
  15. Olá, Eu tenho o seguinte código em Javascript pra desenhar linhas em HTML5 utilizando canvas: <html> <head> </head> <body> <script type="text/javascript"> window.onload()( var largura = 1000; var altura = 1000; function() { var largura = 1000; var altura = 1000; var quadro = document.getElementById("quadro"); quadro.setAttribute("width", largura); quadro.setAttribute("height", altura); var ctx = quadro.getContext("2d"); var desenhando = false; }); $("quadro").mousedown ( function(evt) { ctx.moveTo(evt.clientX, evt.clientY); desenhando = true; }) $("quadro").mouseup ( function() { desenhando = false; }) $("quadro").mousemove( function(evt) { if(desenhando) { ctx.lineTo(evt.clientX,evt.clientY); ctx.stroke(); } }( </script> <canvas id="quadro" style="background: blue" ></canvas> </body> </html> Mas não está funcionando. O javascript está habilitado pois já utilizei outros códigos. E reparei que JS não roda se tiver erro por mais simples que seja. E por isso estou postando, acho que tem algum erro mas não estou encontrando. Se alguém puder ajudar. Obrigado.
  16. Olá, Gostaria de criar um jogo semelhante ao www.atwar-game.com É basicamente um jogo de "War" ou "Risk". Tem-se as bandeiras colocadas sobre uma imagem de mapa e tem-se as unidades de ataque e defesa que caminham sobre o mapa e capturam as bandeiras. É um jogo interessante mas é muito limitado, possui basicamente ataque e defesa e alcance de movimento. Eu gostaria de fazer um jogo semelhante mas mais complexo, com mais dados para as unidades como Força, Destreza, Dano de primeiro ataque(para Cataphracts, por exemplo). Implementar mais coisas mesmo. Os mapas são criados pelos usuários assim como as unidades. Eles possuem um editor de mapas em forma de aplicativo, mas estão implementando um editor de mapas em HTML5 que não se sabe quando ficará pronto e se terá novidades, bem como não respondem às sugestões dos jogadores. Eu gostaria de criar meu próprio jogo, mais complexo e completo. Estou procurando material de HTML5 pra criar um editor de mapas(basicamente permitir desenhar bordas sobre uma imagem de mapa carregada e cadastrar unidades que caminham pelo mapa, configurando ataque, defesa e imagem da unidade, por exemplo) mas não estou encontrando e sei que eles estão fazendo um editor de mapas em HTML5. Alguém tem algum material que serviria para este caso? To procurando sobre canvas mas o material que achei por enquanto de HTML5 não me serviu muito. Obrigado.
  17. Uma foto do jogo feito com Python/Flask e HTML Bom, agora o bixo pega! Vamos criar uma parada mais avançada. Na aula anterior, criamos um joguinho bem besta. Agora vamos começar a brincar de verdade. Vamos construir algo mais fuck monster foda. Que tal um Joguinho de tiro? Fui pegando umas imagens da internet para ficar mais interessante o jogo, mas o ideal e voce construir algo original. Vamos trabalhar com Flask. Segue uma breve explicação do mesmo, se quiser informações a mais, pesquise e estude. E só digitar no google :) PRIMEIROS PASSOS 1 - Primeiramente, certifique-se de estar com python instalado em seu computador. 2 - Vamos instalar o Flask: Windows (Abrir CMD como administrador) pip install flask Linux/OSx sudo pip install flask 3 - Agora que voce instalou o Flask direitinho em seu computador, crie uma pasta para criarmos o jogo. Ela vai ter que ter a seguinte arquitetura de arquivos. No meu caso, eu tenho uma pasta chamada webcheats-python e dentro dela esta organizado todas essas pastas e arquivos. Nao crie o app.pyc, ele gera sozinho. Pode ignorar esse arquivo. 5 - Agora antes de criar um jogo, precisamos entender qual é a proposta do jogo e quais serão as regras. Como eu estou criando um jogo aqui, eu vou dar as regras. Mas o processo sera o mesmo nos proximos jogos que vocês forem criar. Veja abaixo: Um jogo de tiro onde um jogador (voce) vai trocar tiros com um Bot. O bot tera movimentos aleatorios. O jogador vai controlar seu boneco (bonequinho embaixo) com as teclas W,S,A,D e o ESPAÇO para atirar. O jogador e o bot terao um ESCUDO. Entao quando estiverem atras do escudo, estarao protegidos dos tiros. Para acertar o tiro, e preciso sair do escudo e o adversario estar fora do escudo tambem. Alem disso, e preciso os 2 estarem do mesmo lado, caso contrario o tiro não pega. 6 - Bom vamos então começar a criar a estrutura HTML. Jogue dentro do seu templates/game.html esse código abaixo. Não vou explicar o que cada div faz, ja existe alguns tutoriais aqui na Info Zone explicando sobre HTML CSS e Javascript. Vou apenas explicar o algoritmo que fiz. [HIDE-THANKS] <html> <head> <title>Tiro Seco</title> <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/app.css')}}"> </head> <body> <!-- Arena do Jogo--> <div class="arena"> <div class="bot"> <div class="head"><img src="{{url_for('static', filename='img/enemy.png')}}"></div> <div class="shield" style="margin-top: 120px;"><img src="{{url_for('static', filename='img/shieldenemy.png')}}"></div> </div> <div class="player"> <div class="shield"><img src="{{url_for('static', filename='img/shield.png')}}"></div> <div class="head"><img src="{{url_for('static', filename='img/player.png')}}"></div> </div> </div> <!-- Placar--> <div class="placar"> <fieldset> <legend>Você</legend> <div>HP: <span id="player_hp"></span></div> <div>ACERTOS: <span id="player_score"></span></div> </fieldset> <fieldset> <legend>Bot</legend> <div>HP: <span id="bot_hp"></span></div> <div>ACERTOS: <span id="bot_score"></span></div> </fieldset> </div> <!-- jQuery e Regras do Jogo --> <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script>var SHOT_AUDIO = "{{url_for('static', filename='sounds/tiro.mp3')}}"</script> <script src="{{url_for('static', filename='js/game.rules.js')}}"></script> </body> </html> [/HIDE-THANKS] Beleza. Nada muito complexo no HTML acima. Criei uma estrutura simples de HTML (html, head, body) e dentro do body eu adicionei 2 divs: arena e placar. Arena tem o escudo e o personagem do Player e do Bot. No final eu importo o jQuery que vamos trabalhar no arquivo static/js/game.rules.js e um script gravando na variavel SHOT_AUDIO a rota do audio de TIRO que baixei. Isso porque essas variáveis são do FLASK ({{url_for('static', filename='js/game.rules.js')}}), e só vão funcionar no html. 7 - Agora vamos adicionar um CSS bonitinho. Eu fiz algo bem porco, nada demais. Podem editar a vontade. No fundo, eu adicionei uma imagem de Mapa que catei na internet, e o unico arquivo que nao fiz download e joguei o URL mesmo. Jogue o codigo abaixo dentro do seu arquivo static/css/app.css: [HIDE-THANKS] @import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave'); body { font-family: 'Sedgwick Ave', cursive; background-image: url('https://i.ytimg.com/vi/c0a2_C3Fqo8/maxresdefault.jpg') } /* Arena & Placar*/ .arena { width: 500px; height: 580px; background-color: rgba(255, 255, 255, 0.26); color: white; border-radius: 25%; position: relative; margin: auto; box-shadow: 0px 0px 20px #000; } .placar { color: white; text-shadow: 0px 0px 3px #000; margin: auto; width: 530px; position: relative; height: 90px; background-color: #0000007a; } .placar fieldset { width: 230px; position: relative; float: left; } /*Bot*/ .bot { position: absolute; top: 0; text-align: center; width: 100%; } .bot .head { position: absolute; width: 100%; } /* Player*/ .player { position: absolute; bottom: 0; text-align: center; width: 100%; } .player .head img { transform: rotate(180deg); } .player .head img { position: relative; } .player .head img.left { left: 100px; } .player .head img.right { right: 100px; } /* Both */ .player .head img, .bot .head img { width: 125px; } .player .shield img, .bot .shield img { width: 100px; } [/HIDE-THANKS] FLASK_APP=app.py flask run 8 - Bom, agora vamos ao Javascript. Agora vou ser bem detalhado, vai ser um pouco chato mas tentarei resumir o máximo possível. Não é difícil entender o código. Se você possui alguma dificuldade com sintaxe ou algumas funções, e só dar uma pesquisada. Nenhum programador sabe tudo, a maior ferramenta de todos nos é o Google. Abaixo o codigo do Javascript bem comentado e explicado, jogue tudo dentro do seu arquivo static/js/game.rules.js: [HIDE-THANKS] /* @author Cr4cko @description Estas sao as regras e funcoes do jogo. */ /* Sempre deixo variaveis que precisamos instanciar no topo do codigo. Usaremos essa aqui mais no final. Essa variavel vai guardar o audio de TIRO. Sempre que voce ver um som_tiro.play() e o que vai fazer o barulho de TIRO quando apertar ESPAÇO ou quando o BOT atirar. */ var som_tiro = null; /* Aqui eu crio 2 variaveis PLAYER e BOT com os seus atributos. Estou dando uma vida de 100 para os 2, dano de tiro de 5 e zerando o score dos 2 a principio. A variavel is_protected e um boolean (verdadeiro ou falso). Ela vai me dizer se o jogador/bot esta PROTEGIDO no escudo ou nao. Ja a variavel position, diz se o jogador/bot esta na posicao inicial (protegido) ou esquerda(left) ou direita(right). */ PLAYER = { hp: 100, maxHp: 100, damage: 5, score: 0, is_protected: true, position: "initial" } BOT = { hp: 100, maxHp: 100, damage: 5, score: 0, is_protected: true, position: "initial" } /* PLAYER SETTINGS */ /* Essa e a funcao de tiro do jogador. Vejam que eu crio um timer (timerToShotAgain), para impedir que o jogador fique atirando milhoes de vezes por segundo, se nao fica facil demais haha. Aqui e bem simples: Se o bot estiver desprotegido, e eu (player) tambem estiver desprotegido e estivermos no mesmo LADO do mapa (eu no lado esquerdo e ele no lado direito dele), quer dizer que acertei o tiro. Essa funcao e chamada no evento da tecla ESPAÇO no teclado. Voce vera onde eu crio os eventos mais abaixo. */ function player_shot() { if (timerToShotAgain) return; //Se tiver ainda rolando o tempo, impedir de atirar novamente. som_tiro.play(); if (!BOT.is_protected && !PLAYER.is_protected && BOT.position == PLAYER.position) { life = BOT.hp - PLAYER.damage; //resultado da vida do bot - dano do tiro do player if (life > 0){ //se a vida for maior que zero... BOT.hp = life; //altera vida do bot PLAYER.score += 1; //da ponto pro PLAYER //printa os resultados no html $("#bot_hp").text(BOT.hp); $("#player_score").text(PLAYER.score); //Pinta o BOT de vermelho para identificar que foi atingido e depois pinta de transparente. $(".bot .head img").css({"background-color":"red"}); setTimeout(function(){$(".bot .head img").css({"background-color":"transparent"});}, 500) } else{ //Se a vida nao for maior que zero o bot MORREU. chama a funcao de resetar o jogo. resetGame(); } } timerToShotAgain = setTimeout(delayShotAgain, timerMS); } /* Como disse acima, o delay de tiro do player. Quando voce apertar espaco voce tera que esperar 500ms (timerMS) para poder atirar novamente mesmo que clique centenas de vezes no ESPACO. */ var timerToShotAgain; //o timer var timerMS = 500; //delay pra poder atirar novamente function delayShotAgain(){ clearTimeout(timerToShotAgain); timerToShotAgain = null; } /* Aqui e a funcao que protege o jogador. Quando ele nao estiver clicando pra esquerda(A) ou direita(D), ele estara protegido atras do ESCUDO. Ativo o is_protected pra true. E coloco a posicao dele como inicial (protegido). */ function player_shield(){ $(".player .head img").removeClass("left") $(".player .head img").removeClass("right") PLAYER.is_protected = true; PLAYER.position = "initial"; } /* Aqui e o evento que define a DIRECAO do jogador. Esquerda(A) ou direita(D). Lembrando que quando ele estiver fora do escudo, ele estara desprotegido. Definimos o atributo is_protected pra false. */ function player_direction(dir){ $(".player .head img").addClass(dir); PLAYER.is_protected = false; //Aqui vou inverter a ideia de esquerda e direita, pois o jogador esta //de frente para o bot. A esquerda do jogador e a direita do BOT, visse versa. PLAYER.position = dir == "right" ? "left":"right"; //Isso e um if ternario, pesquise depois. } /* EVENTOS*/ /* Esse e o evento de CLIQUE do jogador. Veja que eu estou gravando os eventos de todo o BODY do HTML. Se o jogador clicar no A (esquerda) e o keycode 100. Se clicar no D (direita) e o keycode 97. Se clicar no espaco, keycode 32. */ $( "body" ).keypress(function(evt) { if (evt.keyCode == 32) { player_shot(); } if (evt.keyCode == 100) { //esquerda player_direction("left"); } else if (evt.keyCode == 97){ //direita player_direction("right"); } }); /* Esse e o evento de TIRAR o dedo do clique. O keypress e quando voce aciona o botao O keyup e quando voce tira o dedo. Entao aqui serve apenas para verificar se voce TIROU o dedo do A (esquerda) ou D (direita) para voltar a posicao do player no ESCUDO (initial). */ $( "body" ).keyup(function(evt) { if (evt.keyCode == 65 || evt.keyCode == 68){ player_shield(); } }); /* FIM */ /* BOT SETTINGS */ /* Aqui e a mesma pegada do Player, porem para o BOT. Escudo do BOT. */ function bot_shield(){ $(".bot .head img").css({"float": "initial"}); BOT.is_protected = true; BOT.position = "initial"; } /* Mesma pegada do player. Porem nao precisa inverter as posicoes. */ function bot_direction(direction){ $(".bot .head img").css({"float": direction}) BOT.is_protected = false; BOT.position = direction; } /* Exatamente igual o Player mas nao precisa bloquear a quantidade de cliques, pois o MEU ROBO e honesto e vai jogar bem de boas com voce. :D */ function bot_shot(){ som_tiro.play(); if (!PLAYER.is_protected && !BOT.is_protected && BOT.position == PLAYER.position) { life = PLAYER.hp - BOT.damage; //resultado da vida do player - dano do tiro do bot. if (life > 0){ //se a vida for maior que zero PLAYER.hp = life; //alterar vida player BOT.score += 1; //add pontuacao bot //printar no html os resultados $("#player_hp").text(PLAYER.hp); $("#bot_score").text(BOT.score); //Pintar em vermelho o player dizendo que ele foi atingido, dpois pintar de transparente novamente. $(".player .head img").css({"background-color":"red"}); setTimeout(function(){$(".player .head img").css({"background-color":"transparent"});}, 500) } else{ //Se a vida nao for maior que zero o player MORREU. chama a funcao de resetar o jogo. resetGame(); } } } /* Aqui e a funcao do sleep que eu crio para usar na inteligencia do robo. Só copia :) */ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } /* Aqui e a funcao que da vida ao BOT. Aqui vamos ter que criar toda a logica de acoes do mesmo. Vai ser interessante o BOT fazer movimentos aleatorios, para nao ficar manjado. */ async function startBot() { /* Aqui eu crio o primeiro movimento e segundo movimento. Ao executar o startBot, ele vai fazer uma acao, voltar para o escudo fazer outra acao e depois voltar pro escudo. Entao ele tera 2 movimentos para fazer aleatoriamente. */ var first_dir = Math.floor(Math.random() * 2) + 0; //numero entre 0 e 1 var second_dir = Math.floor(Math.random() * 2) + 0; //numero entre 0 e 1 //Aqui eu crio um tempo aleatorio entre 200ms e 500ms que o bot vai ficar escondido no ESCUDO. var time_protect = Math.floor(Math.random() * 500) + 200; //Se o movimento for 1, esquerda, se for 0, direita. first_dir = first_dir == 1 ? "left":"right"; second_dir = second_dir == 1 ? "left":"right"; /* - INTELIGENCIA DO BOT Agora vem a parte show. Vamos criar os movimentos e dizer os tempos de espera entre um e outro. */ //Iniciando com o robo escondido. await sleep(200); bot_shield(); //O bot espera 100ms vai para uma direcao e atira. await sleep(100); bot_direction(first_dir); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil bot_shot(); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil //Bot volta para escudo bot_shield(); await sleep(time_protect); //O bot espera 100ms vai para uma direcao e atira. await sleep(100); bot_direction(second_dir); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil bot_shot(); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil //Bot volta para escudo await sleep(200); bot_shield(); };/* FIM */ /* GAMEOVER: resetGame */ /* Aqui fica a funcao de reset. Se o bot te matar ou voce matar ele, essa funcao e chamada. Bem simples, vemos quem ta com a vida maior, e abre um alert dizendo quem ganhou. Em seguida, resetamos os scores para 0 e setamos a vida do bot e player para o maxHp que sempre sera a vida total. Depois jogamos os 2 para a posicao atras do escudo. */ function resetGame() { //Exibindo Ganhador if (PLAYER.hp > BOT.hp){ alert("Voce ganhou :D") } else { alert("Voce perdeu :(") } //Resetando Vida e Score $("#player_score").text(0); $("#bot_score").text(0); $("#player_hp").text(PLAYER.hp = PLAYER.maxHp); $("#bot_hp").text(BOT.hp = BOT.maxHp); //Voltando para protecao os 2 bot_shield(); player_shield(); } /* LOAD SETTINGS - Configuracao e Start do Jogo */ /* Aqui e onde configuramos as preferencias iniciais do jogo e demos start no bot. */ function loadSettings(){ //Aqui que definimos o nivel do jogo. Lembra ali em cima no delay de tiro do BOT? //Ou seja, se tiver facil, ele vai pra direcao e atira em 200ms. Se tiver no dificil, faz isso em 100ms. //Quanto menos ms, mais rapido, ou seja, mais dificil hehe :) BOT_NIVEL = "facil"; // facil, dificil //Aqui setamos a vida do player/bot e os scores. lembre-se que aqui ainda o jogo nao comecou. $("#player_hp").text(PLAYER.hp); $("#player_score").text(PLAYER.score); $("#bot_hp").text(BOT.hp); $("#bot_score").text(BOT.score); //Carregando som de tiro. Lembra da variavel la em cima? Enfim usaremos ela! som_tiro = document.createElement('audio'); som_tiro.setAttribute('src', SHOT_AUDIO); //aqui a variavel criada no HTML, arquivo do tiro.mp3 som_tiro.load(); /* Agora com a funcao de javascript setInterval, criamos um looping infinito que e executado a cada 2 segundos. Entao o startbot e chamado a cada 2 segundos. Em 2 segundos, vai acontecer todos aqueles eventos da funcao startBot que criamos. */ setInterval(function(){ startBot(); }, 2000); }; /* Quando tudo estiver carregado certinho, executamos o loadSettings para iniciar jogo. */ $(document).ready(function(){ loadSettings(); }) [/HIDE-THANKS] Eita.. bom galera a pior parte passou. Foi mais chato eu organizar todo meu codigo e comentar do que ler e entender isso kkkkkkkkk. Bom, nao fique triste se voce nao entender tudo o que ta rolando ate agora, o importante e voce entender os passos que estamos fazendo e entender um pouco a LOGICA que estou criando. Programar nao e dificil, dificil e saber identificar os mateirias e as decisoes que precisaremos tomar para alcancar certo objetivo. MAS ENFIM, vamos continuar. 9 - Agora com HTML, CSS e o Javascript prontos, esta faltando quem? FLASK! Agora e bem simples, dentro do seu app.py adicione esse codigo: [HIDE-THANKS] from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('game.html') [/HIDE-THANKS] Simples. Certo? Não precisa entender a fundo o que e esse pequeno trecho de codigo. Como estamos usando um framework (Flask), ele possui diversas complexidades e funcoes por tras. Isso e um framework, assumir todas as complexidades por tras e deixar bem facil do usuario entender. No codigo acima, chamamos a classe Flask, e criamos uma rota "/" retornando o template game.html que criamos. O metodo render_template observa a pasta templates. Entao nosso game.html precisa estar la. Se voce mudar o @app.route('/') para @app.route('/game') voce muda a rota do site. Ou seja, quando voce iniciar voce precisara acessar: http://seusite.com/game. 10 - Agora so falta as imagens e o som de tiro para estar 100% antes de iniciar o jogo. Eu vou deixar no final do post o link de download de todas as imagens e arquivos. Coloque eles nas pastas de acordo com a estrutura que mostro na imagem la no passo 3 e logo em seguida vamos iniciar o jogo com esse comando digitado no TERMINAL/CMD: FLASK_APP=app.py flask run Pronto! Servidor ligado, agora acesse no teu navegador: http://localhost:5000/ Teclados: A,D para esquerda/direita e ESPACO para atirar. DOWNLOAD
  18. Bom fiz um joguinho besta usando o Tracking.js. Para quem não conhece, tracking.js é uma biblioteca em javascript que oferece diversas funcionalidades. Desde detecção de cores em imagens/videos até detecção facial (rosto, boca, olhos, etc). O jogo que fiz é so para brincar um pouco com a biblioteca. E um joguinho de verdadeiro ou falso, onde o papelzinho rosa é falso e o papelzinho amarelo é verdadeiro. Eu usei papel (arranquei o papelao da caixa de remedio). Tambem usei a detecção das cores Magenta e Yellow porque é o padrão que eles oferecem. Se voce quiser dar uma olhada depois na documentação, voce pode registrar cores a partir do RGB. As regras do jogo são: Se voce acertar, ganha 1 ponto. Se errar, perde 2. Se não responder perde 1. Voce tem 2 segundos para levantar a cor rosa ou amarela para responder. Abaixo segue o print da minha pessoa jogando esse coco de jogo (obs ta com erro de charset, mas aqui eu já coloquei o codigo com o ajuste): Para rodar o jogo, voce precisa criar os arquivos game.html e o tracking.js no mesmo lugar do seu computador e se voce tiver o python 2.7 voce vai no CMD no local onde estao esses arquivos e digita: python -m SimpleHTTPServer Se for o python 3, voce digita: python -m http.server Com isso voce criar um servidor apache local pra rodar teu game. Ai voce acessa no teu browser localhost:8000 e seleciona o arquivo game.html Segue abaixo os códigos dos arquivos que voce precisa criar: game.html: <html> <head> <meta charset="utf-8"> <title>Verdadeiro ou Falso - Color Detect</title> <script src="tracking.js"></script> <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <body> <style> video, canvas { right: 20; top: 20; position: absolute; } .you-answer { color: red; } </style> <div class="demo-frame"> <div class="demo-container"> <video id="video" width="400" height="250" preload autoplay loop muted controls></video> <canvas id="canvas" width="400" height="250"></canvas> </div> <h4>VERDADEIRO OU FALSO? (Amarelo = Verdadeiro // Rosa = Falso)</h4> <div>Regras: Ao clicar em iniciar, voce tera 2 segundos para responder VERDADEIRO(amarelo) ou FALSO(rosa) para as afirmacoes. <br>Se acertar ganha 1 pontos, se errar perde 2. Se demorar, perde 1 ponto. <br>Se sua pontuacao for menor que zero, voce perde. </div> <br> <h5><b>AFIRMACAO:</b> <span id="afirmacao"></span></h5> <div><b>PONTUACAO:</b> <span id="score"></span></div> <div class="you-answer"></div> <br> <button onclick="startGame()">INICIAR</button> </div> <script> var perguntas = [ { title: "Neymar é goleiro", value: false }, { title: "webcheats é um forum de encontros de casais", value: false }, { title: "tenispé é desodorante pra pessoas com chulé", value: true }, { title: "Cr4cko é muito bonito", value: true }, ] var pergunta_selecionada = null; var pode_responder = false; var resposta_certa = null; var score = 0; function startGame() { resposta_certa = null; $(".you-answer").text(""); $("#afirmacao").text("....... proxima pergunta ......."); setTimeout(function () { var index = Math.floor((Math.random() * perguntas.length) + 0); pergunta_selecionada = perguntas[index]; pode_responder = true; $("#afirmacao").text(pergunta_selecionada.title); }, 1000); setTimeout(function () { if (resposta_certa == null){ score -= 1; $(".you-answer").text("demorou demais! -1 pontos") } else if (resposta_certa == pergunta_selecionada.value){ score += 1; $(".you-answer").text("sua resposta esta certa! +1 pontos") } else { score -= 2; $(".you-answer").text("sua resposta esta errada! -2 ponto") } $("#score").text(score); pergunta_selecionada = null; }, 2000); //2 segundos pra responder if(score < 0){ alert("VOCE PERDEU!"); score = 0; } else { setTimeout(function () { startGame() }, 3000); //reiniciando jogo em 3 segundos }; } window.onload = function() { var isqueiro = "#6fdb86"; var gravata = "#125bb0"; var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tracker = new tracking.ColorTracker(['yellow', 'magenta']); tracking.track('#video', tracker, { camera: true }); tracker.on('track', function(event) { context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function(rect) { if (pergunta_selecionada){ if (pode_responder){ if (rect.color == "magenta"){ //falso resposta_certa = false; } else if (rect.color == "yellow"){ resposta_certa = true; } console.log("pergunta:", pergunta_selecionada.title, " | sua resposta: ", resposta_certa) pode_responder = false; } } //Apenas context.strokeStyle = rect.color; context.strokeRect(rect.x, rect.y, rect.width, rect.height); }); }); }; </script> </body> </html> Já o arquivo tracking.js, voce copia e cola o que está nesse link: https://raw.githubusercontent.com/eduardolundgren/tracking.js/master/build/tracking-min.js Qualquer dúvda é so comentar. Abs
  19. Bom, um usuário aqui no forum fez um post na area de duvidas pedindo o Bot de Visualizações do Cafe & Cinema. Eles fizeram uma gambiarra fedida, mas que deu muitas visualizações em seus videos. Estou postando aqui um codigo exemplo de como foi feito. Para visualizar o video rodando, e so comentar a linha no CSS: [CODE]opacity: 0;[/CODE] [CODE] <html> <head> <title>Youtube BOT - Cr4cko</title> </head> <style> #botYoutube { opacity: 0; position: absolute; right: 0; top: 0; } </style> <body onclick="play()"> <div id="botYoutube"></div> <script async src="https://www.youtube.com/iframe_api"></script> <script> var player; function play(){ player.playVideo(); } function onYouTubeIframeAPIReady() { player = new YT.Player('botYoutube', { videoId: '-Wc0SZONI2I', // YouTube Video ID width: 10, // Player width (in px) height: 10, // Player height (in px) playerVars: { autoplay: 0, // Auto-play the video on load controls: 1, // Show pause/play buttons in player showinfo: 0, // Hide the video title modestbranding: 1, // Hide the Youtube Logo loop: 1, // Run the video in a loop fs: 0, // Hide the full screen button cc_load_policy: 0, // Hide closed captions iv_load_policy: 3, // Hide the Video Annotations autohide: 0 // Hide video controls when playing }, events: { onReady: function(e) { e.target.mute(); } } }); } </script> </body> </html> [/CODE] [B]@Edit[/B] Fiz as alteracoes. Agora so vai iniciar o video se o usuario clicar na tela. Nao aparece o cursor escroto de link. Se ele clicar em qualquer canto do site ja inicia o video. abs [B][COLOR=#000000]@Atencao[/COLOR][/B] [COLOR=rgb(255, 0, 0)]Youtube baniu a conta do Cafe & Cinema. Eles sabem o que voce pretende fazer. Não me responsabilizo por isso :)[/COLOR]
  20. Fala galera tudo bem ? estou procurando algum amigo para programarmos juntos, apenas por experiência , atualmente sou desenvolvedor mobile e trabalho com o framework ionic , sei html , css e angularjs (javascript) , e o básico de php , porem aprendo facilmente outra linguagem , sei fazer sites e aplicativos complexos , gosto de praticar , caso alguém tenha interesse me mande msg privado .
  21. Nesse codigo eu fiz um exemplo de crawler buscando os preços nas 2 lojas da B2W: Americanas e Submarino. Estou postando no drive a source e uma imagem de como esta funcionando. Download: Clique aqui Scan: Clique aqui Explicação - Com AngularJS eu faço request para um arquivo chamado actual_prices.json, de 10 em 10 segundo. - Estou rodando também, um crawlerzinho feito em python, para obter os preços da pagina de uma SKU. Esse crawler salva as informações no actual_price.json. Requisitos - Conhecimento minimo em logica de programação - Python 2.7 ou 3.0 - Instalar o selenium em seu pc apos ter instalado python: pip install selenium - Baixar o driver do PhantomJS e colocar no diretório na linha 21 do arquivo crawler.py - rodar sh start.sh Testado em: Linux e OSx leia o README.md e qualquer ERRO poste aqui. #edit (15/05) Atualizei o link do arquivo. ajustes. #edit 2 (16/05) Esqueci de colocar nos blocos o nome das lojas.
  22. Assert - Só para ter certeza Definição: assert(v, [, message]) Questões um erro quando o valor de seu argumento V é falso (ie, nil ou false); caso contrário, retorna todos os seus argumentos. mensagem é uma mensagem de erro; quando ausente, a mensagem padrão é "assertion failed"! Vejamos alguns exemplos; Nós vamos apenas tentar algumas coisas e ver como eles vão correr. Algo Verdadeiro: Vamos tentar o óbvio, basta ligar para afirmar com verdade. assert(true) Como você pode ver, nada acontece e a função apenas retorna verdadeiro. Algo Falso: Vamos ver o que acontece se executarmos o código a seguir com a falsa: assert(false) O nosso primeiro erro intencional. Lua é tão emocionante! Para outros valores de falsa Com a exceção de falsa , apenas um outro valor, nulo , avaliada como falsa. assert(nil) Enviar uma mensagem; De acordo com a especificação, se dermos valer um segundo argumento, ele será definido como a mensagem de erro. assert(false, "Erro Encontrado!") Isto é extremamente útil quando rastreando que afirmam está travando o seu programa. Para alguns valores de verdade Mas além de apenas o verdadeiro e o falso, afirmam vai fingir que quaisquer outros tipos diferentes de nil também são verdadeiras . Vamos checar assert(1) assert(0) assert("false") assert({false}) assert(function() end) assert(newproxy()) Valor de retorno Quando assert for bem-sucedido, o que ele voltar? Vamos explorar print(assert(true, "message")) print(assert(1, 2, 3)) Encontrados na natureza: Para finalizar, vamos olhar para alguns mundo real usa de assert . Testar suas funções Suponha-se que durante a concepção do seu programa, você precisa ter certeza de que seu programa está correto. Uma maneira de fazer isso é afirmar que a função irá retornar alguns valores pré-definidos. Tomemos por exemplo o problema de mostrar que \ sum_ {i = 1} ^ n = \ frac {n ^ 2 + n} {2} . Nós pode polvilhar em alguns afirma ter certeza de que o nosso código é, pelo menos, "visivelmente" correto. O que digitar: function sum(n) return (n*n - n)/2; end local s = 0 for i=1,100 do s = s + i assert(sum(i) == s, "Case "..i.." failed: expected "..s.." but got "..sum(i).." instead.") 9end Opa, parece que o caso 1 falhou. Tomar um olhar mais atento ao código, torna-se óbvio que é o problema. (Você consegue identificar o erro Dica: olhar para a fórmula matemática) Protegendo contra nil valores Um dos outros "idiomas" comuns da Lua é usar assert para "guarda" contra os valores nulos. Mais especificamente, suponha que queremos ler um arquivo que não existe e nós queremos travar o programa mais cedo ou mais depois de desperdiçar mais recursos. Uma maneira de fazer isso é através de O que digitar: local file = assert(io.open("fake_file.lua", "rb")) Se você é diligente, você pode ter notado também que a mensagem de erro informa ao invés do mais genérico "afirmação que falhou!" mensagem. Não se preocupe, executando o seguinte código venha a aliviar suas preocupações. [string "stdin"]:1: fake_file.lua: No such file or directory O que digitar: print(io.open("fake_file.lua", "rb")) Considerando que a convenção em outros idiomas é para lançar uma exceção, para Lua, você acabou de retornar nulo e, opcionalmente, jogar em uma mensagem de erro.
  23. Monte uma página utilizando HTML, CSS e JavaScript que tenha: Importante formatar a página com pelo menos 5 declarações em CSS! Um campo para o usuário entrar o nome Um campo para o usuário entrar a data de nascimento Um botão para enviar os dados Um botão para limpar o formulário Ao clicar no botão para enviar os dados, devem aparecer, ao mesmo tempo, as seguintes informações na tela: Nome digitado pelo usuário Quantidades de letra Primeira letra do nome Última letra do nome Idade do usuário Signo do usuário Ao clicar no botão para limpar o formulário, o formulário deve ser limpo e as informações na tela devem ser apagadas O que consegui fazer até agora foi só isso aqui.... <html> <head> <title>Javascript </title> </head> <body> <br><br><br><br><br> <form> <label> Entre com o nome <input type="text" name="fnome"></label><br> <label> Data de nascimento<input type="date" name="fdata"></label><br> <br> <button type="submit"> enviar </button> <button type="reset"> limpar </button> </form> <br><br> <p id="resultado"> </p> <p id="signo"> </p> <script language="javascript">
  24. Bom, eu postei um tópico aqui a um tempo atrás e vi que o titulo ficou errado e fiquei bolada. kkk Resolvi fazer um melhor e mais completo para postar aqui até porque posso corrigir o titulo do post anterior. Pense o seguinte: O sistema que desenvolvi ele visa uma única pagina para a criação de um artigo e edição. Através da variável na URL, podemos saber quando o usuário está querendo inserir algo no banco de dados, ou seja, criar uma pagina, ou editar um artigo já existente. Assim: // se não foi setado o primeiro, os outros também não // lembrando que $_GET['t'] = 'painel'; // pois no site que desenvolvi é inserido em uma div através do método include if (!isset($_GET['t'])||!isset($_SESSION['id'])) exit; $post_titulo = null; $post_descricao = null; $post_content = null; $post_categoria = null; $post_tipo = null; O GET['tt'] representa o 'novoartigo' ou 'editartigo' // caso seja edição, através do id coletamos os dados do artigo e inserimos nas variáveis que representaram o formulário de criação/edição if ( $_GET['tt'] == 'editartigo' && isset($_GET['ttt']) ) { $c = (int)$_GET['ttt']; $d = $db->prepare('SELECT titulo,descricao,content,categoria,tipo FROM post WHERE id = :id'); $d->bindParam(':id',$c); if ($d->execute()) if ($d->rowCount() > 0) { $e = $d->fetch(PDO::FETCH_NUM); $post_titulo = $e[0]; $post_descricao = $e[1]; $post_content = $e[2]; $post_categoria = $e[3]; $post_tipo = $e[4]; } } Segue o restante: ?> <div id="new-artigo"> <h1>Novo Artigo</h1> <div class="new-artigo-click"> <ul id="new-artigo-click"> <li><a href="">Artigo Escrito</a></li> <li><a href="">Artigo Line, ex:document.getElementById('')</a></li> <li><a href="">Artigo Composto</a></li> </ul> </div> <form id="new-artigo-form" method="POST" action="<?php echo $local ?>painel/<?php echo $_GET['tt'] ?>/"> <input type="text" name="titulo" placeholder="Titulo" value="<?php echo $post_titulo ?>"/><br /> <textarea name="descricao" placeholder="Descrição do Artigo"> <?php echo $post_descricao ?> </textarea> <div id="lcs-editor"> <ul> <li class="lcs-editor" data-tipo="a">EDITOR</li> <li class="lcs-editor" data-tipo="tituloA">TITULO 1</li> <li class="lcs-editor" data-tipo="tituloAA">TITULO A</li> <li class="lcs-editor" data-tipo="texto">TEXTO</li> <li class="lcs-editor" data-tipo="code">CODE</li> <li class="lcs-editor" data-tipo="html">HTML</li> <li class="lcs-editor" data-tipo="js">JS</li> <li class="lcs-editor" data-tipo="resposta">RESPOSTA</li> </ul> </div> <div class="pre-view"></div> <textarea name="content" style="display:none"> <?php echo $post_content ?> </textarea> <select name="categoria"> <option value="<?php echo $post_categoria ?>"> <?php echo $post_categoria == null ? 'Categoria:' : $post_categoria ?> </option> <option value="javascript">Javascript</option> </select> <select name="tipo"> <option value="<?php echo $post_tipo ?>"> <?php echo $post_tipo == null ? 'Tipo de Artigo:' : $post_tipo ?> </option> <option value="curso">Curso</option> <option value="dicas">Dicas</option> </select><br /> <?php if (isset($_GET['ttt'])) { echo '<input type="hidden" name="id" value='.$_GET['ttt'].'">'; } ?> <div style="clear:both"></div> <input type="submit" value="Concluir!" /> </form> </div> <script> var newArtigoForm = '#new-artigo-form', $newArtigoForm = $(newArtigoForm), txtContent = 'textarea[name=content]', txtDescricao = 'textarea[name=descricao]', cLcsEditor = '.lcs-editor', cPreview = '.pre-view', cBox = '.LCSbox', cEtapaIndex = '.box_etapa_index', cEtapaEdit = '.box_etapa_edit', cEtapaDelete = '.box_etapa_delete', cEtapaMove = '.box_etapa_move', cEtapaMoveText = '.box_etapa_moveText', cEtapaMoveCima = '.box_etapa_moveCima', cEtapaMoveBaixo = '.box_etapa_moveBaixo', cEtapaClear = '.box_etapa_clear', cElemEdicao = '.LCSeditor', keys = [true]; </script> <?php if ($_GET['tt'] == 'editartigo') { ?> <script> // EDIÇÃO DO ARTIGO $(cPreview).html($(txtContent).text()); // edição $(cEtapaIndex).click(function() { // permissão para execução do evento // evita bugs if ( !keys[0] ) return false; // ... var index = $(cEtapaIndex).index(this), tipo = $(this).attr('data-tipo'); editarLCSeditor(true,index,tipo); // após execução o evento deve ser bloqueado keys[0] = false; }); // click delete elemento $(cEtapaDelete).on('click',function(event) { var _cElemEdicao = cElemEdicao; if (document.getElementsByClassName(_cElemEdicao.replace('.','')).length) { alert('Feche o campo aberto antes!'); return false; } // permissão para deletar, caso seja deletado o evento desse elemento será encerrado também if (confirm("Deseja Realmente Deletar Esse Bloco?")) $(this).off(event); else return false; // prossiga... var _index = $(cEtapaDelete).index(this); $(cBox+':eq('+_index+')').remove(); }); // click move $(cEtapaMove+' span').click(function() { // var cEtapaMoveIndex = $(this).closest(cBox).index(); // var cEtapaMoveSpanIndex = $(this).index(); // mover elemeto para cima if ( cEtapaMoveSpanIndex == 0 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertBefore($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')); // } // } else if ( cEtapaMoveSpanIndex == 2 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertAfter($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')); }; } }); // verificando chave if ( !keys[0] ) keys[0] = true; // removendo bug de interpretação das tags $('.prettyprint').each(function() { $(this).text($(this).html()); }); </script> <?php } ?> <script> // removendo bug descricao $(document).ready(function() { var a = $(txtDescricao).text(); a = a.replace(' ','').replace(' ',''); $(txtDescricao).text(a); }); // formulario $newArtigoForm.submit(function() { $(txtContent).text($(cPreview).html()); }); // inserir elemento no editor $(cLcsEditor).click(function() { var insertTipo = $(this).attr('data-tipo'), insertIndex = $(cLcsEditor).index(this); insertLCSeditor(insertTipo); insertLCSdelete(); }); // deletar o elemento - OBS: deve-se acompanhar o .box_etapa_index function insertLCSdelete() { $(''+ '<div class="box_etapa_delete">'+ '<span>'+ '[DELETAR]'+ '</span>'+ '</div>'+ '').appendTo(cBox+':last'); $(cEtapaDelete+':last').on('click', function(event) { var _cElemEdicao = cElemEdicao; if (document.getElementsByClassName(_cElemEdicao.replace('.','')).length) { alert('Feche o campo aberto antes!'); return false; } // permissão para deletar, caso seja deletado o evento desse elemento será encerrado também if (confirm("Deseja Realmente Deletar Esse Bloco?")) $(this).off(event); else return false; // prossiga... var _index = $(cEtapaDelete).index(this); $(cBox+':eq('+_index+')').remove(); }); $(''+ '<div class="box_etapa_move">'+ '<span class="box_etapa_moveCima">'+ '[MOVER PARA CIMA]'+ '</span>'+'<br/>'+ '<span class="box_etapa_moveBaixo">'+ '[MOVER PARA BAIXO]'+ '</span>'+ '</div>'+ '').appendTo(cBox+':last'); // mover elemento // precisamos de chave para ter o controle e evitar bugs keys[1] = true; keys[2] = false; $(cEtapaMove+':last span').click(function() { // var cEtapaMoveIndex = $(this).closest(cBox).index(); // var cEtapaMoveSpanIndex = $(this).index(); // mover elemeto para cima if ( cEtapaMoveSpanIndex == 0 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertBefore($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')); // } // } else if ( cEtapaMoveSpanIndex == 2 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertAfter($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')); }; } }); // $(''+ '<div class="box_etapa_clear">'+ '</div>'+ '').appendTo(cBox+':last'); } // mover o elemento - OBS: deve-se acompanhar o .box_etapa_index e .box_etapa_delete function insertLCSmove(_index) { } // edição textual do elemento function insertLCSeditor(_insertTipo) { // texto default var titulo = 'Pronto Para Editar! :)', elemento = null; // alterando valor padrão, no final o valor volta no padrão cEtapaEdit = cEtapaEdit.replace('.',''); // criação do elemento switch (_insertTipo) { case 'tituloA': tipoCampo = 'textarea'; elemento = ''+ '<pre class="'+cEtapaEdit+' box_etapa_tituloA">'+ titulo+ '</pre>'; break; case 'tituloAA': tipoCampo = 'text'; elemento = ''+ '<h4 class="'+cEtapaEdit+' box_etapa_tituloAA">'+ titulo+ '</h4>'; break; case 'texto': tipoCampo = 'textarea'; elemento = ''+ '<pre class="'+cEtapaEdit+' box_etapa_text">'+ titulo+ '</pre>'; break; case 'code': tipoCampo = 'text'; elemento = ''+ '<code class="'+cEtapaEdit+' prettyprint">'+ '<span></span>'+ '</code>'; break; case 'html': tipoCampo = 'textarea'; elemento = ''+ '<h6 class="box_etapa_html">HTML</h6><br />'+ '<pre class="'+cEtapaEdit+' prettyprint">'+ '<html></html>'+ '</pre>'; break; case 'js': tipoCampo = 'textarea'; elemento = ''+ '<h6 class="box_etapa_js">JS</h6><br />'+ '<pre class="'+cEtapaEdit+' prettyprint">'+ '<script></script>'+ '</pre>'; break; case 'resposta': tipoCampo = 'textarea'; var textoElemento = prompt("Insira o Titulo"); if ( !textoElemento ) textoElemento = 'Resposta'; elemento = ''+ '<h6 class="box_etapa_js">'+textoElemento+'</h6><br />'+ '<pre class="'+cEtapaEdit+' prettyprint">'+ '<script></script>'+ '</pre>'; break; } // voltando valor padrão cEtapaEdit = '.'+cEtapaEdit; // $(''+ '<div class="LCSbox">'+ '<div class="box_etapa_index" data-tipo="'+tipoCampo+'">'+ // box_etapa_edit onde ocorre a alteração do texto elemento+ '</div>'+ '</div>'+ '').appendTo(cPreview); // edição $(cEtapaIndex).click(function() { // permissão para execução do evento // evita bugs if ( !keys[0] ) return false; // ... var index = $(cEtapaIndex).index(this), tipo = $(this).attr('data-tipo'); editarLCSeditor(true,index,tipo); // após execução o evento deve ser bloqueado keys[0] = false; }); } function editarLCSeditor(key,_index,_tipo) { // premissão de acesso if ( ! key ) return false; // setando variaveis var txtCEtapaIndex = cEtapaIndex+':eq('+_index+') '+cEtapaEdit, cEtapaIndexText = $(txtCEtapaIndex).text(); // criando o elemento para edição var elemEdicaoTexto = null; switch (_tipo) { case 'text': elemEdicaoTexto = ''+ '<input class="LCSeditor" data-tipo="text" type="text" value="'+ cEtapaIndexText+ '" />'; break; case 'textarea': elemEdicaoTexto = ''+ '<textarea class="LCSeditor" data-tipo="textarea" type="text">'+ cEtapaIndexText+ '</textarea>'; break; } // removendo conteudo do campo clicado $(txtCEtapaIndex).empty(); // inserção do elemento no campo de pre-visualização $(elemEdicaoTexto).appendTo(txtCEtapaIndex); // atalhos para edicao $(cElemEdicao).keydown(function(e) { if (e.keyCode == 13 && _tipo == 'text') { var a = $(cElemEdicao).val(); $(txtCEtapaIndex).text(a); $(cElemEdicao).remove(); keys[0] = true; // libera evento novamente } else if (e.keyCode == 27 && _tipo == 'textarea') { var a = $(cElemEdicao).val(); $(txtCEtapaIndex).text(a); $(cElemEdicao).remove(); keys[0] = true; // libera evento novamente // atalho TAB } else if (e.keyCode == 9) { _cElemEdicao = cElemEdicao; e = document.getElementsByClassName(_cElemEdicao.replace('.','')); e = e[0]; var start = e.selectionStart; var end = e.selectionEnd; var $this = $(e); var value = $this.val(); // set textarea value to: text before caret + tab + text after caret $this.val(value.substring(0, start) + "\t" + value.substring(end)); // put caret at right position again (add one for the tab) e.selectionStart = e.selectionEnd = start + 1; // prevent the focus lose return false; } }); } </script> Criação: Visualização: Edição: Voltando para os script, o arquivo que recebe o conteúdo <?php $acess = false; if (isset($_SESSION['id'])) { $acess = true; } if (isset($_GET['tt']) && $acess) { // pagina post $a = $_GET['t']; $b = $_GET['tt']; switch ($b) { case 'novoartigo': case 'editartigo': if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) { extract($_POST); $aa = $titulo; $ab = $descricao; $ac = $content; date_default_timezone_set('America/Sao_Paulo'); $ad = date('Y/m/d H:i:s'); $ae = $categoria; $af = (int)$_SESSION['id']; $ag = $tipo; if ($b == 'novoartigo') { $d = $db->prepare('INSERT INTO post VALUES (:id,:titulo,:descricao,:content,'. ':datatempo,:categoria,:usuario,:tipo)'); } else { $d = $db->prepare('UPDATE post SET titulo = :titulo,descricao = :descricao,content = :content,'. 'datatempo = :datatempo,categoria = :categoria,usuario = :usuario,tipo = :tipo WHERE id = :ids'); } if (!isset($id)) $d->bindValue(':id',0); else $d->bindValue(':ids',$id); $d->bindValue(':titulo',$aa); $d->bindValue(':descricao',$ab); $d->bindValue(':content',$ac); $d->bindValue(':datatempo',$ad); $d->bindValue(':categoria',$ae); $d->bindValue(':usuario',$af); $d->bindValue(':tipo',$ag); if ($d->execute()) { if ($d->rowCount() > 0) { header('location:'.$local.'artigosucesso/'); } else // rowCount echo 'Nenhum dado encontrado!'; } else // execute echo '[ERRO] Não foi possivel executar o SQL'; } else // request method include 'painel/novo_artigo.php'; break; default: header('location:'.$local); } // para exibir a pagina, o usuário precisa estar logado em sua conta } Para quem precisar da classe de conexão: <?php /** * Classe de conexão ao banco de dados usando PDO no padrão Singleton. * Modo de Usar: * require_once './Database.class.php'; * $db = Database::conexao(); * E agora use as funções do PDO (prepare, query, exec) em cima da variável $db. */ class Database { # Variável que guarda a conexão PDO. protected static $db; # Private construct - garante que a classe só possa ser instanciada internamente. private function __construct() { # Informações sobre o banco de dados: $db_host = "localhost"; $db_nome = "database_nome"; $db_usuario = "root; $db_senha = "senha"; $db_driver = "mysql" // tipo de conex]ao; # Informações sobre o sistema: $sistema_titulo = "Titulo"; $sistema_email = "[email protected]"; try { # Atribui o objeto PDO à variável $db. self::$db = new PDO("$db_driver:host=$db_host; dbname=$db_nome", $db_usuario, $db_senha); # Garante que o PDO lance exceções durante erros. self::$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); # Garante que os dados sejam armazenados com codificação UFT-8. self::$db->exec('SET NAMES utf8'); } catch (PDOException $e) { # Envia um e-mail para o e-mail oficial do sistema, em caso de erro de conexão. mail($sistema_email, "PDOException em $sistema_titulo", $e->getMessage()); # Então não carrega nada mais da página. die("Connection Error: " . $e->getMessage()); } } # Método estático - acessível sem instanciação. public static function conexao() { # Garante uma única instância. Se não existe uma conexão, criamos uma nova. if (!self::$db) { new Database(); } # Retorna a conexão. return self::$db; } } Créditos: [felladrin - GitHub] Pela Classe de Conexão com o PDO. Eu pelo resto. Dúvidas? Só perguntar...
  25. O JS evolui muito com o tempo... a edição de conteúdo ficou bem mais dinâmico, o código em si é limpo e da para entender com analises básicas, claro, daquele jeito. Vamos lá: Obrigatoriamente precisamos do jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> Criando os elemento para o acontecimento do evento <div class="pre-view"> <p class="texto">Aqui como exemplo, vou colocar um texto box para a edição desse paragrafo</p> </div> Código comentado... <script> // chave global para o controle de eventos var keys = [true]; /* Elemento a ser editado Lembrando que deve necessáriamente ser 'classe' pois ele buscará o indice */ $('.texto').click(function() { var a,b; // deve haver o controle do click, se não da bug :( // ele é liberado após o texto ser editado na função preview(a,b) if (keys[0]) { // bloqueia esse evento apos o primeiro click keys[0] = false; a = $(this).attr('class'); // nome da classe do elemento atual a = '.'+a; // lembrando que é uma classe... -> .texto b = $(a).index(this); // indice do elemento atual preview(a,b); } }); function preview(a,b) { var c = [$(a+':eq('+b+')')]; // seleciona o elemento atual c[1] = c[0].text(); // texto inicial do elemento // limpa o elemento // insere o textarea c[0].empty(). prepend('<textarea cols="60" type="text" class="lol">'+c[1]+'</textarea>'). click(function() { // chama o foco para o elemento criado acima $('.lol').focus(); }). keydown(function(evt) { // caso a tecla pressionada seja 13, ou melhor, ENTER faça... if (evt.keyCode == 13) { d = $('.lol'); // selecionando elemento textarea /* if minificado if (d.val() == '') { c[0].text(c[1]); } else { c[0].text(d.val()); } */ c[0].text(d.val() == '' ? c[1] : d.val()); d.remove(); // remove o textarea keys[0] = true; // libera para edição novamente } }); } </script> Dúvidas? Só perguntar... [spoiler=titulo - off] title,Converter elemento em textarea pra edição
×
×
  • Create New...