{"id":293,"date":"2016-12-14T11:17:19","date_gmt":"2016-12-14T11:17:19","guid":{"rendered":"https:\/\/sidroniolima.com.br\/blog\/?p=293"},"modified":"2016-12-14T11:17:19","modified_gmt":"2016-12-14T11:17:19","slug":"javascript-is-awesome","status":"publish","type":"post","link":"https:\/\/sidroniolima.com.br\/blog\/2016\/12\/14\/javascript-is-awesome\/","title":{"rendered":"Javascript is awesome"},"content":{"rendered":"\n
Tweet<\/a><\/div>\n

\"Javascript<\/p>\n

I’m very excited about studying Javascript on the mission of expand my knowledges at front-end. The principal goal is use Javascript at my Java back-end projects.<\/p>\n

So, two things I really liked on javascript so far is:<\/p>\n

    \n
  1. template string;<\/li>\n
  2. spread operator.<\/li>\n<\/ol>\n

    The first concept lets a array be used as params of methods, on a very easy and functional way.<\/p>\n

    The second one helps on format messages that uses dynamics values, as variables. We can just reference the value inside a string pattern, marked with the ` character.<\/p>\n

    See the example…<\/p>\n

    <\/p>\n

    As we follow, in the example below we have a constructor that receives three params but on the View we have just one field. Ok, that is not right, but works for now.<\/p>\n

    <body><\/span> <\/code><\/p>\n

        <label><\/span>Informa\u00e7\u00f5es do arquivo<\/span><\/label><\/span>\r\n    <input<\/span> class<\/span>=<\/span>\"dados-arquivo\"<\/span> placeholder<\/span>=<\/span>\"formato: nome\/tamanho\/tipo\"<\/span>><\/span>\r\n\r\n    <button<\/span> onclick<\/span>=<\/span>\"<\/span>arquivoController<\/span>.<\/span>envia<\/span>()<\/span>\"<\/span>  ><\/span>Enviar<\/span><\/button><\/span>\r\n<\/body><\/span>\r\n\r\nclass<\/span> Arquivo<\/span> {<\/span>\r\n\r\n    constructor<\/span>(<\/span>nome<\/span>,<\/span> tamanho<\/span>,<\/span> tipo<\/span>)<\/span> {<\/span>\r\n        this<\/span>.<\/span>_nome <\/span>=<\/span> nome<\/span>;<\/span>\r\n        this<\/span>.<\/span>_tamanho <\/span>=<\/span> tamanho<\/span>;<\/span>\r\n        this<\/span>.<\/span>_tipo <\/span>=<\/span> tipo<\/span>;<\/span>\r\n    }<\/span>\r\n}<\/span><\/code><\/pre>\n
    So we can use the two concepts above to catch a fancy solution, like this:<\/p>\n
    envia<\/span>()<\/span> {<\/span>\r\n    let dados <\/span>=<\/span> this<\/span>.<\/span>_inputDados<\/span>.<\/span>value<\/span>.<\/span>toUpperCase<\/span>().<\/span>split<\/span>(<\/span>'\/'<\/span>);<\/span>\r\n    let arquivo <\/span>=<\/span> new<\/span> Arquivo<\/span>(...<\/span>dados<\/span>);<\/span> \/\/ the spread operador<\/span>\r\n    console<\/span>.<\/span>log<\/span>(<\/span>`Dados do arquivo: ${arquivo.nome}, ${arquivo.tamanho}, ${arquivo.tipo}`<\/span>); \/\/ template string<\/span><\/span>\r\n    this<\/span>.<\/span>_limpaFormulario<\/span>();<\/span>\r\n}<\/span><\/code><\/pre>\n
    We still can encapsulate the solution in a helper class, of builder pattern, that generates a static method that returns the model:<\/p>\n
    ArquivoHelper<\/span> {<\/span> <\/code><\/p>\n
        static<\/span> cria<\/span>(<\/span>informacao<\/span>)<\/span> {<\/span>\r\n        return<\/span> new<\/span> Arquivo<\/span>(...<\/span>informacao<\/span>.<\/span>toUpperCase<\/span>().<\/span>split<\/span>(<\/span>'\/'<\/span>));<\/span>\r\n    }<\/span>\r\n}<\/span><\/code><\/pre>\n
    So, let me move on to the next chapter. So long, fair well.<\/p>\n\n
    Tweet<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    I’m very excited about studying Javascript on the mission of expand my knowledges at front-end. The principal goal is use Javascript at my Java back-end projects. So, two things I really liked on javascript so far is: template string; spread operator. The first concept lets a array be used as params of methods, on a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[53,52],"tags":[54,56,55],"class_list":["post-293","post","type-post","status-publish","format-standard","hentry","category-front-end","category-javascript","tag-front-end","tag-spread-operator","tag-tempalte-string"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":7,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/293\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/media?parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/categories?post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/tags?post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}