JavaScript

Fouras · Сообщение **Fouras** » Вт май 16, 2023 4:31 pm

Да, я в вижуал студио и пишу программы. Я имел в виду "делать" - это использовать программы на js, а не писать их непосредственно. Я же не мазохист.

Fouras · Сообщение **Fouras** » Вт май 16, 2023 4:32 pm

Агриппина писал(а):Поэтому, из учебного чатика могу тебе сказать - CodeSandbox
ииии ещооо ... щасщасщас.. Планкер/плункер Plunker.
Ниже листать не стану, там мат-перемат)

Спасибо!
Сервисы запуска периодически появляются и умирают, не успеваю следить.

Агриппина · Сообщение **Агриппина** » Вт май 16, 2023 5:00 pm

Fouras писал(а):Источник цитаты Я не знаю про левел, но человек который специализируется на js пришел в восторг от некоторых моих систем. Например, я написал модуль с шаблонофикатором и реактивным программированием и на нем пишу всякие окна и виджеты.

Божечки... это уровень Бог.
Я даже и не смею надеяться постичь это.

Ни в коем случае не хочу льстить или преувеличивать. но глазами новичка - это магия.

Fouras · Сообщение **Fouras** » Вт май 16, 2023 5:15 pm

Чтобы не думали, что я загоняю, вот хелп моей системы, сделанной на ней самой. Называется classp.js
Там открываются и закрываются меню, то что выглядит как картинки - это текст, там нет ни одной картинки вообще. Синтаксис хайлатинг, анимация, гиперссылки и все что там есть, это classp

Чтобы посмотреть, надо создать пустую папку, все распаковать и запустить clasp_tutorial.html. Под Хромом точно работает, под остальное не проверял около 100 лет.

https://drive.google.com/file/d/1PXAZ9_DFxgCJ8CYPIjFGOqE_P9WOqXl8/view?usp=sharing

Агриппина · Сообщение **Агриппина** » Вт май 16, 2023 9:05 pm

Комп верещит, шо по ссылке - отакэ дронов :mrgreen:

Я сегодня задолбалась с этими дронами с ООП и модулями.
Сижу - под каждым глазом по астральному куриному яйцу.
Видать, в черепушку уже не лезет, откладывается где есть место :mrgreen:

Поразгружусь операционно - соображу.

Fouras · Сообщение **Fouras** » Вт май 16, 2023 9:34 pm

По ссылке архив с html файлом и несколько файлов js и css к нему. Я не знаю что он там верещит, на jquery столетней давности, или мои js программы. Касперский на архив смотрит ровно.

Попробую через vk. Там в комментарии прикрепил архив
https://vk.com/club23971927?z=photo-23971927_219244235%2Falbum-23971927_127664572%2Frev

Агриппина · Сообщение **Агриппина** » Ср май 17, 2023 3:01 pm

Скачала без проблем, вечерком после ужина буду изучать.)

Fouras · Сообщение **Fouras** » Ср май 17, 2023 5:29 pm

Если скачалось, то вот пример, который я выдрал из хелпа. Он показывает некоторые преимущества класпа: я просто копипащу один блок, в котором регистрируется довольно хитроумный тег, который повторяет текстом картинку, которая у меня валялась на диске и мне нравилась. Я ее даже использовал в литконкурсах для привлечения внимания. Теперь этот тег можно использовать в шаблонах так же, как и span или div, можно ему задавать padding и margin и вообще он ведет себя теперь прилично. Он сам добавляет стили, анимацию и не нуждается в допольнтельных плясках с бубном. Я написал это несколько лет назад и мне не пришлось страдать от того что я нифига не помню, использование очень просто, а мутное содержание было проблемой на этапе разработки этого тега.

Для использование сохранить в файл с именем, допустим demo1.html и рядом с ним положить clasp.js
Никакие дополнительные библиотеки не требуются, только clasp.js и ничего больше

*счетчик "который" = 5

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style></style>
<script src="clasp.js" type="text/javascript" charset="windows-1251"></script>

<script>
clasp_html.register_tag('printcard',function(descr)
   {
      var W=30;
      var R=W>>1;
      var angle=-0.052;

   function PK(x) {
      var BW=0;
      function reset_BW()      {BW=0;return '';}
      function sh(r,b,c,l)   {return 'inset 0px 0px '+b+'px '+(BW+=r)+'px '+c+(l===undefined?'':',');}
      function Sh(xyb,r,c,l)   {return 'inset '+xyb[0]+'px '+xyb[1]+'px '+xyb[2]+'px '+r+'px '+c+(l===undefined?'':',');}
      function oSh(xyb,c,l)   {return ''+xyb[0]+'px '+xyb[1]+'px '+xyb[2]+'px '+c+(l===undefined?'':',');}
      function div(c,S)   {return {g:'div',c:c,a:{'class':S}};}
      function tra(x,y)   {return 'translate('+x+'px,'+y+'px)'; }

      var kW = clasp.get(x,'c','R',W);
      var kR = kW>>1;

      function key_grad(br)      {   
         function key_grd(br,rgb,p,n)   {   return clasp_html.cssColor(clasp_html.rgbMul([rgb[0]*1,rgb[0]*br*0.87,rgb[0]*br*0.65],br))+' '+p+'%'+(n?',':')');   }

         var res='radial-gradient(ellipse at center, '+key_grd(br,[106,65,43],0,1)+key_grd(br,[165,127,107],45,1)+key_grd(br,[206,185,171],62,1)+key_grd(br,[86,62,45],66,1)+key_grd(br,[135,98,71],100);
         return res;
         // return 'radial-gradient(ellipse at center,        rgba(106,65,43,1) 0%,     rgba(165,127,107,1) 45%,     rgba(206,185,171,1) 62%,     rgba(86,62,45,1) 66%,rgba(86,62,45,1) 66%,rgba(135,98,71,1) 100%)';
      }
         

      return {g:'div'   ,c:[{g:'div',c:{g:'div'}},div(x,'C1')]   ,a:{'class':'CPKcss'}   ,s:{
         css:{
            '.CPKcss' : {
               defname   :''
            ,   display   :'inline-block'
            ,   width   :kW
            ,   height   :kW
            ,   position   :'absolute'
            ,   fontSize   :kW*0.7
            ,   fontFamily:'times'
            ,   border   :'0px solid #f00'
            ,   backgroundColor:'#60391B'
            ,   borderRadius:kR
            ,   marginLeft:kR*0.3
            ,   marginRight:kR*0.3
            ,   background:key_grad(0.8)
            ,   boxShadow:Sh([1,1,1],1,'rgba(255,255,255,0.6)',',')+sh(0.5,0.5,'#48220d',',')+sh(2,0.5,'#fffbf2',',')+sh(0.5,0,'#48220d',1)+oSh([10,10,7],'rgba(0,0,0,0.4)',1)+oSh([8,-8,7],'rgba(50,29,17,0.6)')
            ,   zIndex:3
            ,   css:{
                  ':hover'   : {
                        boxShadow:reset_BW()+Sh([1,1,1],1,'rgba(255,255,255,0.6)',',')+sh(0.5,0.5,'#48220d',',')+sh(2,0.5,'#fffbf2',',')+sh(0.5,0,'#48220d',1)+oSh([5,5,5],'rgba(0,0,0,0.4)',1)+oSh([4,-4,5],'rgba(50,29,17,0.6)')
                     ,   marginTop:2
                     ,   cursor:'pointer'
                     ,   css : {
                           '+div'   : {
                              boxShadow   :oSh([1,1,1],'rgba(50,29,17,0.6)')
                           ,   background:'linear-gradient(to bottom, rgba(237,225,215,1) 0%,rgba(221,193,164,1) 56%,rgba(91,66,56,1) 100%)'
                           }
                        }
                     }
               ,   '[name="d"]'   : {
                        background:key_grad(0.7)
                     ,   css   : {
                           '>div>div:after'   : {
                              content   :'\u26ab'
                           ,   width   :kR*0.2
                           ,   height   :kR*0.2
                           ,   backgroundColor:'#fff'
                           ,   borderRadius:kR*.2
                           ,   fontSize   :kW*0.3
                           ,   position   :'absolute'
                           ,   left      :kR*0.4
                           ,   top      :kR*0.2-0-9000
                           ,   textShadow:reset_BW()+oSh([0,9000,6],'rgba(255,255,255,0.1),')+oSh([0,9000,6],'#fff,')+oSh([-R*0.1,R*0.6+9000,6],'rgba(255,255,255,0.2),')+oSh([R*0.8,R*0.2+9000,4],'rgba(255,255,255,0.1)')
                           }
                        }
                  }
               ,   '+div'      : {    // палочка под кнопкой
                        width   :kW*0.15
                     ,   height   :kW
                     ,   marginLeft:kR+kW*0.075
                     ,   marginTop   :kR
                     ,   position   :'absolute'
                     ,   background:'linear-gradient(to bottom, rgba(237,225,215,1) 0%,rgba(91,66,56,1) 100%)'
                     ,   boxShadow   :oSh([2,1,3],'rgba(50,29,17,0.6)')
                     ,   zIndex   :2
                     }
               ,   '>div>div'   : {   css : {
                        ':before'   : {
                           content   :')'
                        ,   position   :'absolute'
                        ,   left      :kR*1.3
                        ,   top      :kR*0.1-0-9000
                        ,   textShadow:oSh([0,9000,4],'#3E1C08')
                        }
                     ,   ':after'   : {
                           content   :'\u26ab'
                        ,   width   :kR*0.2
                        ,   height   :kR*0.2
                        ,   backgroundColor:'#fff'
                        ,   borderRadius:kR*.2
                        ,   fontSize   :kW*0.3
                        ,   position   :'absolute'
                        ,   left      :kR*0.4
                        ,   top      :kR*0.2-0-9000
                        ,   textShadow:oSh([0,9000,6],'rgba(255,255,255,0.5),')+oSh([0,9000,6],'#fff,')+oSh([-R*0.1,R*0.6+9000,6],'rgba(255,255,255,0.5),')+oSh([R*0.8,R*0.2+9000,4],'rgba(255,255,255,0.3)')
                        }
                     }}
               ,   '>.C1'   : {
                     display   :'table-cell'
                  ,   textAlign   :'center'
                  ,   verticalAlign:'middle'
                  ,   position   :'absolute'
                  ,   left      :kR*0.55
                  ,   top      :kR*0.2
                  ,   overflow   :'visible'
                  ,   color   :'#F7F2EE'
                  ,   textShadow:oSh([-0.75,-0.75,0.5],'#000',1)+oSh([0.75,0.75,0.6],'rgba(255,248,237,0.5)')
               }}
            }
         }
      }};
   }
   function set_pnt(x) { return {g:'div',c:x,s:{position:'relative',overflow:'visible',width:10,height:10}}; }
   function PKLine(x) {
      var lst=[];
      var WS = W*1.4;
      var cos_a = WS*Math.cos(x.pos.a);
      var sin_a = WS*Math.sin(x.pos.a);

      for(var i =0; i<x.c.length; ++i)
      {
         var s={left:x.pos.x+i*cos_a,top:x.pos.y+i*sin_a};
         var bt = {g:PK,c:x.c[i],s:s};
         if(x.pos.name)
            bt.a={name:x.pos.name};
         lst.push(bt);
         lst.push({g:'div',s:s});
      }
      return set_pnt(lst);
   }
   function PrintMCard(descr)
   {
      var W = clasp.get(descr,'width',200);
      var H = clasp.get(descr,'height',180);

      return {g:'div'   ,a:{'class':'CPrintMCard'},s:{
            width   :W
         ,   height   :H
         ,      css:{
         '.CPrintMCard':{
            position:'relative'
         ,   overflow:'hidden'
         ,   display:'inline-block'
         ,   borderRadius:10
         }
      ,   '.CPrintMCard .BG':{
            width   :W+40
         ,   height   :H+40
         ,   background:'linear-gradient(to bottom, rgba(64,31,14,1) 0%,rgba(63,20,13,1) 13%,rgba(255,235,206,1) 14%,rgba(255,235,206,1) 14%,rgba(255,246,229,1) 15%,rgba(64,31,14,1) 17%,rgba(158,91,58,1) 23%,rgba(247,239,232,1) 24%,rgba(255,250,247,1) 28%,rgba(255,250,247,1) 28%,rgba(201,196,193,1) 29%,rgba(229,222,218,1) 31%,rgba(244,238,235,1) 38%,rgba(193,177,168,1) 39%,rgba(175,128,112,1) 55%,rgba(158,113,93,1) 58%,rgba(201,186,179,1) 60%,rgba(122,90,72,1) 62%,rgba(137,96,81,1) 71%,rgba(81,59,52,1) 73%,rgba(168,87,62,1) 78%,rgba(28,20,18,1) 79%,rgba(170,119,100,1) 82%,rgba(172,137,109,1) 100%)'
         //,   background:'linear-gradient(to bottom, rgba(64,31,14,1) 0%,rgba(63,20,13,1) 13%,rgba(255,235,206,1) 14%,rgba(255,235,206,1) 14%,rgba(255,246,229,1) 15%,rgba(64,31,14,1) 17%,rgba(158,91,58,1) 23%,rgba(247,239,232,1) 24%,rgba(255,250,247,1) 28%,rgba(255,250,247,1) 28%,rgba(201,196,193,1) 29%,rgba(229,222,218,1) 31%,rgba(244,238,235,1) 38%,rgba(193,177,168,1) 39%,rgba(175,128,112,1) 55%,rgba(158,113,93,1) 58%,rgba(201,186,179,1) 60%,rgba(122,90,72,1) 62%,rgba(81,59,52,1) 75%,rgba(28,20,18,1) 76%,rgba(172,137,109,1) 88%,rgba(172,137,109,1) 100%)'
         ,   transform:'rotate(-3deg) translate( -3px, -10px )'
         ,   boxShadow:'inset 15px 5px 45px rgba(0,0,0,0.3),inset -65px -45px 65px rgba(0,0,0,0.3)'
         }
      ,   '.CPrintMCard .BG i:after':{
            width:10
         ,   height:20
         ,   content:''
         ,   left:100
         ,   top:0
         ,   position:'absolute'
         ,   transition:'left 1s 0s'
         ,   backgroundColor:'rgba(255,255,255,0.2)'
         }
      ,   '.CPrintMCard .BG i:hover:after':{
            left:0
         ,   transition:'left 1.0s 0s,background-color 0.5s 0.5s'
         ,   display:'block'
         ,   backgroundColor:'rgba(255,255,255,0)'
         ,   shadowBox:'0px 20px 0px rgba(255,255,255,1)'
         }
      }}
         ,c:[      set_pnt({g:'div',c:set_pnt([{g:'i',c:'duevik\'d cledp'.replace(/d/g,'s').replace(/e/g,'a'),s:{color:'rgb(221, 198, 148)',whiteSpace:'pre',position:'absolute',display:'block',paddingLeft:4,paddingRight:4,fontSize:H*0.08,marginLeft:W*0.6,transform:'scaleY(0.5)',marginTop:13,boxShadow:'inset -1px -12px 7px rgba(235,220,194,0.3),inset 1px 2px 0px rgba(235,220,194,0.3)'}},{g:'div'}])
            ,a:{'class':'BG'}})
            ,   {g:PKLine,c:['Q',{g:'div',c:'W',s:{marginLeft:-3}},'E','R','T','Y'],pos:{x:0,y:65,a:angle}}
            ,   {g:PKLine,c:' ASDRFGH',pos:{x:-20,y:95,a:angle}}
            ,   {g:PKLine,c:' ZXCVBN',pos:{x:-40,y:125,a:angle}}
            ,   {g:PKLine,c:[
                        {g:'div',c:'2<sup>"</sup>',s:{fontSize:W*0.08}}
                     ,   {g:'div',c:'3<sup>#</sup>',s:{fontSize:W*0.08}}
                     ,   {g:'div',c:'4<sup>$</sup>',s:{fontSize:W*0.08}}
                     ,   {g:'div',c:'5<sup>%</sup>',s:{fontSize:W*0.08}}
                     ,   {g:'div',c:'6<sup>-</sup>',s:{fontSize:W*0.08}}
                     ]
               ,pos:{x:20,y:-5,a:angle,name:'d'}
               }
            ]
      };
   }
      return {g:PrintMCard};
   }
);
function main()
{
   Main.innerHTML =  clasp_html.create({g:'printcard'});
}

</script>
<body onload="main();">
<div id="Main"></id>
</body>
</html>

Агриппина · Сообщение **Агриппина** » Сб июн 10, 2023 6:49 pm

Зачли работу по вебпаку.
Это был просто треш.
Я как чукча со списком - собак покормила и больше ничего руками не трогала.
Но там чисто по ЧЛ всё.
Качаешь через npm нужные бабели (а я всё думала - что за бабы? - когда программу читала).
Надо знать какие и для чего - стилей, картинок, скриптовых файлов, разметки.
Грамотно настраиваешь импорты и входные - выходные точки.
Запускаешь комманду иыыы... вебпак входит через входную точку, и понеслось. в итоге проект перекодировывается в машинный сленг, который читается быстреее, а значит - быстрее прогружается.
И всё. можно подключать всякие API и вываешивать фронтенд сайта в ынтернет.

Над чем я сейчас сижу - клею новую практическую работу.

Агриппина · Сообщение **Агриппина** » Сб июн 10, 2023 6:52 pm

Люцик писал(а):Источник цитаты инкапсуляции.

приватные методы в объектах, скрытые от апаснай наружи.
в js обычно прописываются через знак _
На самом деле ничего страшного в объектах нет.
Конструкторы,, наследование, модули, аргументы и методы, связи колбэками - короче, я сначаль не понимать, потом мозг разжимается после очередного спринта и обнаруживаю - что-то в нем остается.
Нежно обнимаю свои извилины за то. что могут .

Агриппина · Сообщение **Агриппина** » Сб июн 10, 2023 6:55 pm

Fouras писал(а):Источник цитаты Никакие дополнительные библиотеки не требуются, только clasp.js и ничего больше

этакий котелок.
Кстати, написано по старым стандартом, но ещё работающим
поэтому пришлось понапрячься. рассматривая.
var больше не испальзуется при объявлении переменной, например.
два варианта теперь - let и const
Но старое ещё работает, никуда не денется пока.

Fouras · Сообщение **Fouras** » Сб июн 10, 2023 7:57 pm

const в js - это когда здоровую и верную идею поправили так "чтобы удобнее было", и она потеряла всякий смысл. Ничем от let не отличается. let возвращает видимость переменным, какая вообще должна была быть изначально и вызывает недоумение зачем надо было творить всякую дичь изначально.

Когда говорят что типов в js или питоне нет, и это якобы удобнее, это просто непонимание сути программирования. Типы там есть, но следить за их соблюдением остается на программисте. То есть, ему надо тупо больше отслеживать чтобы писать. Причем проблемы возникают в самый последний момент и легко могут просочиться через тестирование. По-хорошему, надо было бы ввести const, который действительно const, и менять нельзя. И пусть будет let, раз уж приспичило не давать типам имен, но сделать так, чтобы в момент присвоения задавался тип, и он отслеживался бы еще на этапе разбора, а не в процессе выполнения. Как auto в C++ от 14 стандарта и выше. Не понимаю как такие очевидные вещи не принимаются этими большими комитетами якобы профессионалов. Напихивают в языки дребедени, а важные и существенные моменты игнорируют. В C++ тоже говна напихали, сейчас переписываю свой код, который из ясного и прозрачного (относительно), вынужден переписываться в какое-то месиво.

Но да, classp был написан до появления let и const.

Агриппина · Сообщение **Агриппина** » Вс июн 11, 2023 11:28 am

Fouras писал(а):Источник цитаты const в js - это когда здоровую и верную идею поправили так "чтобы удобнее было", и она потеряла всякий смысл. Ничем от let не отличается. let возвращает видимость переменным, какая вообще должна была быть изначально и вызывает недоумение зачем надо было творить всякую дичь изначально.

я уже стебалась на эту тему в воздух.
Я разницы не вижу между ними изначально, на этапе написания первичного кода.
А проект может расширяться, разрастаться. Ну и как я заранее узнаю, что мне ставить - постоянную const или более гибкую let? задала вопрос наставникам, они помычали, ответили, что ставить надо const, а потом можно будет поправить по мере необходимости (по факту - ни разу не было такого случая).

Более того, последние изменения в документации js предполагают работу с модулями. мы сначала написали код нормально, потом растащили их на шесть разных файлов. в каждом файле отдельный модуль.

Сидим, мозги опухшие, где-то программисты по 180 тысяч зарабатывают и до сих пор пишут varvarvarvarvarvar.....
А мы три недели убили на новые стандарты.
и куратор такая - ну, если быть честным, так код никто сейчас почти не пишет. И возможно, что на практике эта часть теории не приживётся. Такое бывает.

Я такая сижу, читаю... со своим дельтийским взглядом, который не любит вот этот вот весь воздух, который может быть , а может и не быть и мысль - да пошли вы все....
Бишечка заныыыла, мотивации - ноль сразу. Неделю валялась в прокранстинации.
Ладно(с)

Socioniks.org

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Кто сейчас на конференции