Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Posts Tagged ‘JavaScript

Конспект Vue.js

with 5 comments

Не варто припиняти вчити щось нове, правда? І писати – надійніший метод запам’ятати ніж просто читати, тому спробую повернути блог до життя.

CDN

Найпростіший спосіб яким ви можете почати використовувати Vue – це завантажити його на свою сторінку з CDN: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js

Hello world!

Якщо у нас є такий HTML шаблон:

<div id="app">
  {{title}}
</div>

То мінімальний JavaScript який дозволяє його заповнити виглядає так:

var data = { // Модель - це просто будь-який об'єкт
    title: "Hello world!"
};
new Vue({
  el: "#app", // вибрати елемент за id
  data: data  // приєднати модель
});

Тепер, якщо в консолі браузера написати:

data.title = 'It works!'

То текст на сторінці зміниться автоматично. (І не треба ніякої мороки з дайджест-циклом через angular.element(e).scope().$apply() (Ангуляр-страждання, забийте)).

От так в’ю оновлюється коли змінюється модель. Як користувач може змінити модель?
Прочитати решту цього запису »

Written by bunyk

Квітень 26, 2017 at 22:37

Оприлюднено в Кодерство, Павутина

Tagged with

Зміни моделі, події і чистота функцій в Elm

with one comment

Ця публікація містить ретельно закоментовану альтернативу TodoMVC на Elm. Правда щоб зрозуміти все одно спершу варто прочитати приклади Elm на вікіпедії і основи архітектури Elm програм (вона подібна до Redux якщо ви знаєте що це слово означає (бо я не знаю)).

Written by bunyk

Листопад 2, 2016 at 01:34

Оприлюднено в Кодерство, Павутина

Tagged with ,

Javascript, replace *&^%$#@!

with one comment

Ви знаєте як замінити в тексті одну послідовність символів іншою? Наприклад всі прогалики – на символ підкреслювання. Метод replace()? Вгадали:

> 'this is a test'.replace(' ', '_')
'this_is a test'

Ой, а чого воно лише одну заміну зробило? Бо таке воно ліниве падло. Хочете глобальної заміни – передайте шаблон регулярного виразу який співставляється глобально:

> 'this is a test'.replace(/ /g, '_')
'this_is_a_test'

Працює! А тепер уявімо що нам треба замінити наприклад не прогалик а трубу:

> 'a|b|c|d'.replace(/|/g, '_')
'_a_|_b_|_c_|_d_'

Ну так, треба не забувати що деякі символи в регулярних виразах мають спеціальне значення і їх треба екранувати:

> 'a|b|c|d'.replace(/\|/g, '_')
'a_b_c_d'

А якщо раптом ви не хочете нічого знати про ці регулярні вирази (або ваш користувач не хоче), то є таки спосіб глобальної заміни підрядка. Знаєте який? StackOverflow підкаже:

> 'a|b|c|d'.split('|').join('_')
'a_b_c_d'

І я не знаю що на це сказати. Піду краще посплю.

Written by bunyk

Липень 24, 2016 at 23:27

Оприлюднено в Кодерство

Tagged with

Проста схема перетворення інтерактивної процедурної програми з goto в функціональну рекурсивну

with 3 comments

Власне вся передмова помістилась в заголовок. Хоча може для цього “паттерну” є коротша назва.

Існує клас інтерактивних програм які очікують вводу користувача, потім залежно від того вводу щось роблять, потім знову очікують вводу і так далі. Наприклад якась така програма “вгадай число”:
Прочитати решту цього запису »

Written by bunyk

Квітень 10, 2016 at 13:29

Оприлюднено в Кодерство

Tagged with , , ,

Знову повертаючись до університету

with 6 comments

В мене таке відчуття ніби я в універі. Місце де я сплю – вузьке і біля стіни. Біля ліжка – захаращений стіл. Мій сусід поїхав кудись на вихідні, а я сиджу, залипаю в комп’ютер і скоро зустрічатиму світанок. 🙂

Сиджу, ковбашу код який мав би допомагати мені виправляти помилки форматування статтей вікіпедії:
Прочитати решту цього запису »

Written by bunyk

Березень 13, 2016 at 04:55

Як написати свій букмарклет?

with 22 comments

Букмарклет (bookmark) – це слово створене поєднанням слів bookmark (закладка) і applet (application (застосунок) + зменшувальний суфікс -let). Таким чином правильним перекладом bookmarklet було б “закластуночок” (чи “застокладочка”), але ви цього краще не кажіть Юрку Зеленому. Але я відхиляюсь. Отож, букмарклет, це маленька програма що міститься в закладці.

Як її туди помістили? Ну, виявляється браузери крім протоколів http, ftp, ітп, розуміють такий протокол як javascript. І коли отримують посилання з цим протоколом, при кліку по ньому не змінюють сторінку, а виконують його href як код JavaScript. Щоб побачити приклад простого букмарклету, створіть документ bookmarklet.htm, і помістіть в нього такий код:

<html>
<head><meta charset="utf-8" /></head>
<body>
<a href="javascript:
    alert('Привіт!')
">Мій букмарклет</a>
</body>
</html>

Прочитати решту цього запису »

Written by bunyk

Березень 10, 2016 at 14:31

Логуючий фільтр для Angular expression

with one comment

Вирази в Angular (те що в фігурних дужках і ngBind) – не зовсім те що Javascript. Так каже документація.

Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.

А тому ми не можемо там використати console.log. Але можемо написати наприклад такі фільтри:

    angular
        .module('starter')
        .filter('log', function() {
            // do not change value, but log it in console
            return function(input) {
                console.log(input);
                return input;
            };
        })
        .filter('justlog', function() {
            // do not render value but log it in console
            return function(input) {
                console.log(input);
                return '';
            };
        });

Хоча напевне існує якийсь правильніший, вже вбудований спосіб зневадження в Angular. 🙂

Written by bunyk

Лютий 25, 2016 at 15:52

Оприлюднено в Кодерство, Павутина

Tagged with ,